Leaflet客户端学习笔记

时间：2022-01-27 21:48:51

Leaflet介绍

Leaflet 是一个为建设交互性好适用于移动设备地图，而开发的现代的、开源的 JavaScript 库。代码仅有 33 KB，但它具有开发在线地图的大部分功能。支持插件扩展， Leaflet强大的开源库插件涉及到地图应用的各个方面包括地图服务，数据提供，数据格式，地理编码，路线和路线搜索，地图控件和交互等类型的插件共有140多个。

Leaflet客户端学习笔记

官网地址：http://leafletjs.com/

在线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四个模块

Leaflet客户端学习笔记

开发入门

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>

Leaflet客户端学习笔记

注：地图投影参数设置，见如下代码：

 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>

测量的效果图如下：

Leaflet客户端学习笔记

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>

查询的效果图如下：

Leaflet客户端学习笔记

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>

专题图的效果如下：

Leaflet客户端学习笔记

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、

相关文章