Leaflet客户端学习笔记
Leaflet介绍
Leaflet 是一个为建设交互性好适用于移动设备地图，而开发的现代的、开源的 JavaScript 库。代码仅有 33 KB，但它具有开发在线地图的大部分功能。支持插件扩展， Leaflet强大的开源库插件涉及到地图应用的各个方面包括地图服务，数据提供，数据格式，地理编码，路线和路线搜索，地图控件和交互等类型的插件共有140多个。
在线API：http://leafletjs.com/reference-1.2.0.html
在线范例：http://leafletjs.com/examples.html
注：leaflet客户端开发demo参考http://malagis.com/learning-leaflet-js-note.html
SuperMap iClient for Leaflet介绍
SuperMap iClient for Leaflet 是一套基于Leaflet的云GIS网络客户端开发平台， 支持访问SuperMap iServer / iExpress / iPortal / iManager / Online的地图、服务和资源，为用户提供了完整专业的GIS能力， 同时提供了优秀的可视化功能。
官网地址：http://iclient.supermap.io/
在线API：http://iclient.supermapol.com/web/apis/leaflet.html
在线范例：http://iclient.supermapol.com/examples/leaflet/examples.html#iServer
相关模块如下图，分为Mapping，Services, Overlay，Control四个模块
开发入门
1、 引用所需的脚本库和样式文件
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
crossorigin="" />
<script type="text/javascript" src="https://cdn.bootcss.com/leaflet/1.0.3/leaflet.js"></script>
<script type="text/javascript" src="http://iclient.supermap.io/dist/iclient9-leaflet.js"></script>
2、加载iServer发布的地图服务，叠加图层代码如下：
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>加载瓦片</title>
</head> <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;"> <div id="map" style="margin:0 auto;width: 100%;height: 100%"></div> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
crossorigin="" />
<script type="text/javascript" src="https://cdn.bootcss.com/leaflet/1.0.3/leaflet.js"></script>
<script type="text/javascript" src="http://iclient.supermap.io/dist/iclient9-leaflet.js"></script>
<script type="text/javascript">
var host = window.isLocal ? document.location.protocol + "//" + document.location.host : "http://support.supermap.com.cn:8090";
var map, resultLayer, infoWin, url = "http://localhost:8090/iserver/services/map-ugcv5-China1/rest/maps/China1";
//定义出图的比例尺，此处和切图时设定的比例尺保持一致
var scaleDenominators = [591658711, 295829355, 147914678, 73957339, 36978669, 18489335, 9244667, 4622334, 2311167, 1155583, 577792, 288896, 144448];
//地图原点
var origin = [0, 0];
//leaflet CRS投影设置
var crs = L.Proj.CRS("EPSG:3857", {
origin: origin,
scaleDenominators: scaleDenominators
}); map = L.map('map', {
preferCanvas: true,
crs: crs,
center: { lon: 0, lat: 0 },
maxZoom: 13,
zoom: 0
});
L.supermap.tiledMapLayer(url, {
transparent: true,
cacheEnabled: true
}).addTo(map); </script>
</body> </html>
注：地图投影参数设置，见如下代码：
var crs = L.Proj.CRS("EPSG:4326", {
origin: [114.59, 42.31],
scaleDenominators: [100000, 50000, 25000, 20000, 10000, 5000, 2000, 1000, 500, 200, 100, 50, 20, 1]
});
map = L.map('map', {
crs: crs,
center: [39.79, 116.85],
});
L.supermap.tiledMapLayer(url).addTo(map);
3、测量服务，在地图界面上绘制线、面，计算距离和面积，代码如下：
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>地图上测量demo</title>
</head> <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="toolbar">
<input type="button" class="btn" value="测量距离" onclick="measureLength()" />
<input type="button" class="btn" value="测量面积" onclick="measureArea()" />
</div>
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
crossorigin="" />
<script type="text/javascript" src="https://cdn.bootcss.com/leaflet/1.0.3/leaflet.js"></script>
<script type="text/javascript" src="http://iclient.supermap.io/dist/iclient9-leaflet.js"></script>
<script type="text/javascript">
var host = window.isLocal ? document.location.protocol + "//" + document.location.host : "http://support.supermap.com.cn:8090";
var map, resultLayer, infoWin, url = "http://support.supermap.com.cn:8090/iserver/services/map-china400/rest/maps/China";
map = L.map('map', {
preferCanvas: true,
crs: L.CRS.EPSG3857,
center: { lon: 0, lat: 0 },
maxZoom: 13,
zoom: 3
});
L.supermap.tiledMapLayer(url).addTo(map);
resultLayer = L.featureGroup().addTo(map); //绘制线，测量距离
function measureLength() {
var points = [],
points_length = 0,
polyline;
// 单击
var clickFlag,
clickTimes = 1,
isDrag = false;
map.on('mousedown', function (e) {
map.off('mousemove');
if (clickFlag) clearTimeout(clickFlag);
clickFlag = setTimeout(function () {
if (clickTimes == 1 && !isDrag) {
points.push([e.latlng.lat, e.latlng.lng]);
points_length = points.length;
// 移动
map.on('mousemove', function (e) {
// 清除
if (polyline) map.removeLayer(polyline);
// polyline
points[points_length] = [e.latlng.lat, e.latlng.lng];
polyline = new L.Polyline(points, { color: "red" });
resultLayer.addLayer(polyline);
});
}
}, 300);
});
var popup = new L.popup();
// 双击
map.on('dblclick', function (e) {
if (points.length) {
clickTimes = 2;
// polyline
polyline = new L.Polyline(points, { color: "red" });
//map.addLayer(polyline);
resultLayer.addLayer(polyline)
// 移除事件
map.off('mousemove');
}
var distanceMeasureParam = new SuperMap.MeasureParameters(polyline);
L.supermap.measureService(url).measureDistance(distanceMeasureParam, function (serviceResult) {
//console.log("距离： " + serviceResult.result.distance + " 米");
popup
.setLatLng(e.latlng)
.setContent("距离： " + serviceResult.result.distance + " 米")
.openOn(map);
});
});
// 拖动
map.on('movestart', function () {
isDrag = true;
});
map.on('moveend', function () {
isDrag = false;
});
} //绘制面，测量面积
function measureArea() {
var points = [],
points_length = 0,
polyline,
polygon;
// 单击
var clickFlag,
clickTimes = 1,
isDrag = false;
map.on('mousedown', function (e) {
map.off('mousemove');
if (clickFlag) clearTimeout(clickFlag);
clickFlag = setTimeout(function () {
if (clickTimes == 1 && !isDrag) {
points.push([e.latlng.lat, e.latlng.lng]);
points_length = points.length;
// 移动
map.on('mousemove', function (e) {
// 清除
if (polyline) map.removeLayer(polyline);
if (polygon) map.removeLayer(polygon);
// polyline
points[points_length] = [e.latlng.lat, e.latlng.lng];
polyline = new L.Polyline(points);
resultLayer.addLayer(polyline);
// polygon
polygon = new L.Polygon(points);
resultLayer.addLayer(polygon);
});
}
}, 300);
});
var popup = new L.popup();
// 双击
map.on('dblclick', function (e) {
if (points.length) {
clickTimes = 2;
// polyline
polyline = new L.Polyline(points, { color: "red" });
//map.addLayer(polyline);
resultLayer.addLayer(polyline)
polygon = new L.Polygon(points);
resultLayer.addLayer(polygon);
// 移除事件
map.off('mousemove');
}
var areaMeasureParam = new SuperMap.MeasureParameters(polygon);
L.supermap
.measureService(url)
.measureArea(areaMeasureParam, function (serviceResult) {
popup
.setLatLng(polygon.getCenter())
.setContent("面积： " + serviceResult.result.area + " 平方米")
.openOn(map);
});
});
// 拖动
map.on('movestart', function () {
isDrag = true;
});
map.on('moveend', function () {
isDrag = false;
});
}
</script>
</body> </html>
测量的效果图如下：
4、使用iServer发布的数据服务，进行sql查询，代码如下：
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>数据集SQL查询</title>
</head> <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
crossorigin="" />
<script type="text/javascript" src="https://cdn.bootcss.com/leaflet/1.0.3/leaflet.js"></script>
<script type="text/javascript" src="http://iclient.supermap.io/dist/iclient9-leaflet.js"></script>
<script type="text/javascript">
var host = window.isLocal ? document.location.protocol + "//" + document.location.host : "http://support.supermap.com.cn:8090";
var map, resultLayer,
baseUrl = "http://localhost:8090/iserver/services/map-World/rest/maps/World_Google",
url = "http://localhost:8090/iserver/services/data-World/rest/data";
map = L.map('map', {
preferCanvas: true,
crs: L.CRS.EPSG4326,
center: { lon: 0, lat: 0 },
maxZoom: 18,
zoom: 1
});
L.supermap.tiledMapLayer(baseUrl).addTo(map);
query(); function query() {
var sqlParam = new SuperMap.GetFeaturesBySQLParameters({
toIndex: -1,
maxFeatures:10000,
queryParameter: {
name: "world@World",
attributeFilter: "SMID>0",
},
datasetNames: ["World:world"]
});
L.supermap
.featureService(url)
.getFeaturesBySQL(sqlParam, function (serviceResult) {
resultLayer = L.geoJSON(serviceResult.result.features).addTo(map).bindPopup('SMID > 0'); console.log(serviceResult.result.featureCount);
});
}
//点击地图事，弹窗显示坐标值
var popup = L.popup(); function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(map);
} map.on('click', onMapClick);
</script>
</body> </html>
查询的效果图如下：
5、使用iServer地图服务，生成专题图，进行绘制，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>范围分段专题图</title>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
crossorigin="" />
<script type="text/javascript" src="https://cdn.bootcss.com/leaflet/1.0.3/leaflet.js"></script>
<script type="text/javascript" src="http://iclient.supermap.io/dist/iclient9-leaflet.js"></script> <script type="text/javascript">
var host = window.isLocal ? window.server : "http://support.supermap.com.cn:8090";
var map, themeService, themeRange, themeParameters, themeLayer,
url = host + "/iserver/services/map-china400/rest/maps/China";
map = L.map('map', {
center: [30, 84],
maxZoom: 18,
zoom: 3
});
L.supermap.tiledMapLayer(url, {noWrap: true, transparent: true}).addTo(map);
createTheme(); function createTheme() {
themeService = L.supermap.themeService(url);
var themeRangeItem1 = new SuperMap.ThemeRangeItem({
start: 0,
end: 500000000000,
style: new SuperMap.ServerStyle({
fillForeColor: new SuperMap.ServerColor(211, 255, 250),
lineColor: new SuperMap.ServerColor(179, 209, 193),
lineWidth: 0.1
})
});
var themeRangeItem2 = new SuperMap.ThemeRangeItem({
start: 500000000000,
end: 1000000000000,
style: new SuperMap.ServerStyle({
fillForeColor: new SuperMap.ServerColor(178, 218, 199),
lineColor: new SuperMap.ServerColor(179, 209, 193),
lineWidth: 0.1
})
});
var themeRangeItem3 = new SuperMap.ThemeRangeItem({
start: 1000000000000,
end: 3000000000000,
style: new SuperMap.ServerStyle({
fillForeColor: new SuperMap.ServerColor(58, 178, 166),
lineColor: new SuperMap.ServerColor(179, 209, 193),
lineWidth: 0.1
})
});
themeRange = new SuperMap.ThemeRange({
rangeExpression: "SMAREA",
rangeMode: SuperMap.RangeMode.EQUALINTERVAL,
items: [themeRangeItem1, themeRangeItem2, themeRangeItem3]
});
themeParameters = new SuperMap.ThemeParameters({
datasetNames: ["China_Province_pg"],
dataSourceNames: ["China"],
joinItems: null,
themes: [themeRange]
});
themeService.getThemeInfo(themeParameters, function (serviceResult) {
var result = serviceResult.result;
if (result && result.newResourceID) {
themeLayer = L.supermap.tiledMapLayer(url, {
noWrap: true,
cacheEnabled: false,
transparent: true,
layersID: result.newResourceID
}).addTo(map);
}
});
}
</script>
</body>
</html>
专题图的效果如下：
6、点聚合功能，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>点聚合</title>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
crossorigin="" />
<script type="text/javascript" src="https://cdn.bootcss.com/leaflet/1.0.3/leaflet.js"></script>
<script type="text/javascript" src="http://iclient.supermap.io/dist/iclient9-leaflet.js"></script>
<script type="text/javascript">
var host = window.isLocal ? window.server : "http://support.supermap.com.cn:8090";
var map, resultLayer, getFeatureBySQLParams,
dataUrl = host + "/iserver/services/data-DynamicData/rest/data",
url = host + "/iserver/services/map-china400/rest/maps/China";
map = L.map('map', {
preferCanvas: true,
center: [32, 104],
maxZoom: 18,
zoom: 4
});
L.supermap.tiledMapLayer(url).addTo(map);
resultLayer = L.markerClusterGroup({
spiderfyOnMaxZoom: false,
showCoverageOnHover: false,
zoomToBoundsOnClick: false
});
getFeatureBySQLParams = new SuperMap.GetFeaturesBySQLParameters({
queryParameter: new SuperMap.FilterParameter({
name: "Train@DynamicData",
attributeFilter: "SmID>100 and SmID < 800"
}),
toIndex: -1,
datasetNames: ["DynamicData:Train"]
});
loadMarkerCluster(); function loadMarkerCluster() {
L.supermap
.featureService(dataUrl)
.getFeaturesBySQL(getFeatureBySQLParams, function (serviceResult) {
createLayers(serviceResult.result.features);
});
} function createLayers(result) {
if (!result || !result.features || result.features.length < 1) {
return;
}
result.features.map(function (feature) {
var latLng = L.CRS.EPSG3857.unproject(L.point(feature.geometry.coordinates));
resultLayer.addLayer(L.marker(latLng));
});
resultLayer.addTo(map);
}
</script>
</body>
</html>
聚合效果如下图所示：
7、结合eCharts实例，代码如下：
效果如下图所示：
8、最佳路径分析，代码如下：
效果如下图所示：
9、对绘制到地图上的几何对象进行缓冲区分析，代码如下：
效果如下图所示：
10、
Leaflet客户端学习笔记的更多相关文章
- SCSF智能客户端学习笔记(一)
什么是智能客户端 要了解智能客户端,首先要认识瘦客户端技术和胖客户端技术各自的优缺点. 对于前者,典型的应用就是使用浏览器,通过输入URL远程访问服务端,并向服务端发送命令,获取服务端的资源,然后在客 ...
- Dynamic CRM 2013学习笔记（十）客户端几种查询数据方式比较
我们经常要在客户端进行数据查询,下面分别比较常用的几种查询方式:XMLHttpRequest, SDK.JQuery, SDK.Rest. XMLHttpRequest是最基本的调用方式,JQuery ...
- [Firefly引擎][学习笔记四][已完结]服务器端与客户端的通讯
原地址:http://www.9miao.com/question-15-54981.html 传送门:学习笔记一学习笔记二学习笔记三 前言:学习笔记三是模块封装,这个在持续开发中会不断更新, 因为写 ...
- Android（java）学习笔记206：利用开源SmartImageView优化网易新闻RSS客户端
1.我们自己编写的SmartImageView会有很多漏洞,但是我们幸运的可以在网上利用开源项目的,开源项目中有很多成熟的代码,比如SmartImageView都编写的很成熟的 国内我们经常用到htt ...
- Android（java）学习笔记205：网易新闻RSS客户端应用编写逻辑过程
1.我们的项目需求是编写一个新闻RSS浏览器,RSS(Really Simple Syndication)是一种描述和同步网站内容的格式,是使用最广泛的XML应用.RSS目前广泛用于网上新闻频道,bl ...
- 多线程编程学习笔记——编写一个异步的HTTP服务器和客户端
接上文 多线程编程学习笔记——使用异步IO 二. 编写一个异步的HTTP服务器和客户端 本节展示了如何编写一个简单的异步HTTP服务器. 1.程序代码如下. using System; using ...
- Netty学习笔记(六) 简单的聊天室功能之WebSocket客户端开发实例
在之前的Netty相关学习笔记中,学习了如何去实现聊天室的服务段,这里我们来实现聊天室的客户端,聊天室的客户端使用的是Html5和WebSocket实现,下面我们继续学习. 创建客户端 接着第五个笔记 ...
- Netty学习笔记(二) 实现服务端和客户端
在Netty学习笔记(一) 实现DISCARD服务中,我们使用Netty和Python实现了简单的丢弃DISCARD服务,这篇,我们使用Netty实现服务端和客户端交互的需求. 前置工作 开发环境 J ...
- Apache Ignite 学习笔记(一): Ignite介绍、部署安装和REST/SQL客户端使用
Apache Ignite 介绍 Ignite是什么呢?先引用一段官网关于Ignite的描述: Ignite is memory-centric distributed database, cachi ...
随机推荐
- freemarker自定义标签（一）
freemarker自定义标签 1.自定义标签说明 宏变量存储模板片段可以被用作自定义指令macro 2.示例说明 <html> <head> <meta http-eq ...
- Caused by: org.xml.sax.SAXParseException; lineNumber: 1; columnNumber: 1; Content is not allowed in
1.错误描述 严重: Exception sending context initialized event to listener instance of class org.springframe ...
- jquery-1.11.1.js
每次想要使用这个js时,总是要到官网上下载,太麻烦,现在把它收录了 jquery-1.11.1.js /*! * jQuery JavaScript Library v1.11.1 * http ...
- Linux显示用户注册名
Linux显示用户注册名 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ finger -s Login Name Tty Idle Login Time Of ...
- 自定义JS乘法运算误差解决！
在实际开发中遇到这样一个乘法公式:数量*单价=总价 像这样的浮点数列子:200*8.2,JS算出的结果是: 像这种浮点数的乘法计算就会有误差,我们需要得到准确的值应该是:1640,与我们后台C#计算结 ...
- 消息队列mq的原理及实现方法
消息队列技术是分布式应用间交换信息的一种技术.消息队列可驻留在内存或磁盘上,队列存储消息直到它们被应用程序读走.通过消息队列,应用程序可独立地执行--它们不需要知道彼此的位置.或在继续执行前不需要等待 ...
- ListView添加item的事件监听
1. 点击事件(OnItemClickListener) onItemClick(AdapterView<?> parent, View view, int position, long ...
- UVA10294 Arif in Dhaka (群论,Polya定理)
UVA10294 Arif in Dhaka (群论,Polya定理) 题意 : 给你一个长为\(n\)的项链和手镯,每个珠子有\(m\)种颜色. 两个手镯定义为相同,即它们通过翻转和旋转得到一样的手 ...
- 【Luogu1501】Tree（Link-Cut Tree）
[Luogu1501]Tree(Link-Cut Tree) 题面 洛谷 题解 \(LCT\)版子题 看到了顺手敲一下而已 注意一下,别乘爆了 #include<iostream> #in ...
- 清橙A1202&Bzoj2201：彩色圆环
因为Bzoj是权限题,所以可以去清橙做一下 Sol 突然考了一道这样的题,考场上强行\(yy\)出来了 win下评测Long double爆零TAT 首先肯定是破环为链变成序列问题辣 那么就要求第一个 ...