2 years ago · 0decb4bfad
--- a/public/supermap/examples/mapboxgl/01_mapQueryByBounds.html
+++ b/public/supermap/examples/mapboxgl/01_mapQueryByBounds.html
@@ -0,0 +1,107 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title data-i18n="resources.title_mapQueryByBounds"></title>
			
 
				+    <script type="text/javascript" src="../js/include-web.js"></script>
			
 
				+</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>
			
 
				+<script type="text/javascript" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+<script type="text/javascript">
			
 
				+    var map;
			
 
				+    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+    var url = host + "/iserver/services/map-world/rest/maps/World";
			
 
				+    var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+       "with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+       " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
			
 
				+
			
 
				+
			
 
				+    var map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [host + '/iserver/services/maps/rest/maps/World/zxyTileImage.png?prjCoordSys='+encodeURIComponent('{"epsgCode":3857}')+'&z={z}&x={x}&y={y}'],
			
 
				+                    "tileSize": 256,
			
 
				+                },
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+                "minzoom": 0,
			
 
				+                "maxzoom": 22
			
 
				+            }],
			
 
				+        },
			
 
				+        center: [0, 0],
			
 
				+        maxZoom: 18,
			
 
				+        zoom: 2
			
 
				+    });
			
 
				+    map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+
			
 
				+    map.on('load', function () {
			
 
				+        query();
			
 
				+    });
			
 
				+
			
 
				+    function query() {
			
 
				+        map.addLayer({
			
 
				+            'id': 'polygonLayer',
			
 
				+            'type': 'fill',
			
 
				+            'source': {
			
 
				+                'type': 'geojson',
			
 
				+                'data': {
			
 
				+                    'type': 'Feature',
			
 
				+                    'geometry': {
			
 
				+                        'type': 'Polygon',
			
 
				+                        'coordinates': [[[0, 0], [60, 0], [60, 39], [0, 39], [0, 0]]],
			
 
				+                    }
			
 
				+                }
			
 
				+            },
			
 
				+            'paint': {
			
 
				+                'fill-outline-color': 'blue',
			
 
				+                'fill-color': 'rgba(0, 0, 255, 0.1)'
			
 
				+
			
 
				+            }
			
 
				+        });
			
 
				+
			
 
				+        var param = new SuperMap.QueryByBoundsParameters({
			
 
				+            queryParams: {name: "Capitals@World.1"},
			
 
				+            bounds: new mapboxgl.LngLatBounds([0, 0], [60, 39])
			
 
				+        });
			
 
				+
			
 
				+        queryService = new mapboxgl.supermap.QueryService(url).queryByBounds(param, function (serviceResult) {
			
 
				+            var recordsets = serviceResult && serviceResult.result && serviceResult.result.recordsets;
			
 
				+
			
 
				+            var features = recordsets && recordsets[0] && recordsets[0].features;
			
 
				+            map.addLayer({
			
 
				+                "id": "points",
			
 
				+                "type": "circle",
			
 
				+                "paint": {
			
 
				+                    "circle-radius": 6,
			
 
				+                    "circle-color": "#007cbf",
			
 
				+                    "circle-opacity": 0.1,
			
 
				+                    "circle-stroke-width": 2,
			
 
				+                    "circle-stroke-color": "#007cbf",
			
 
				+                    "circle-stroke-opacity": 0.5
			
 
				+                },
			
 
				+                "source": {
			
 
				+                    "type": "geojson",
			
 
				+                    "data": features
			
 
				+                }
			
 
				+
			
 
				+            });
			
 
				+
			
 
				+        });
			
 
				+    }
			
 
				+
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/01_mapQueryByDistance.html
+++ b/public/supermap/examples/mapboxgl/01_mapQueryByDistance.html
@@ -0,0 +1,93 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title data-i18n="resources.title_mapQueryByDistance"></title>
			
 
				+    <script type="text/javascript" src="../js/include-web.js"></script>
			
 
				+</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>
			
 
				+<script type="text/javascript" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+<script type="text/javascript">
			
 
				+    var decodeMarkers = [];
			
 
				+    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+    var url = host + "/iserver/services/map-world/rest/maps/World";
			
 
				+    var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+       "with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+       " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
			
 
				+    var map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [host + '/iserver/services/maps/rest/maps/World/zxyTileImage.png?prjCoordSys='+encodeURIComponent('{"epsgCode":3857}')+'&z={z}&x={x}&y={y}'],
			
 
				+                    "tileSize": 256,
			
 
				+                },
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+                "minzoom": 0,
			
 
				+                "maxzoom": 22
			
 
				+            }],
			
 
				+        },
			
 
				+        center: [100, 0],
			
 
				+        maxZoom: 18,
			
 
				+        zoom: 2
			
 
				+    });
			
 
				+    map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+
			
 
				+    function query() {
			
 
				+        //添加查询中心点
			
 
				+        var img = new Image();
			
 
				+        img.src = '../img/markerbig_select.png';
			
 
				+        var marker = new mapboxgl.Marker(img).setLngLat([104, 30]);
			
 
				+        decodeMarkers.push(marker);
			
 
				+
			
 
				+        var point = new mapboxgl.LngLat(104, 30);
			
 
				+        var param = new SuperMap.QueryByDistanceParameters({
			
 
				+            queryParams: {name: "Capitals@World.1"},
			
 
				+            distance: 10,
			
 
				+            geometry: point
			
 
				+        });
			
 
				+
			
 
				+        var queryService = new mapboxgl.supermap.QueryService(url);
			
 
				+        queryService.queryByDistance(param, callback);
			
 
				+    }
			
 
				+
			
 
				+    map.on('load', function () {
			
 
				+        query();
			
 
				+    });
			
 
				+
			
 
				+    function callback(serviceResult) {
			
 
				+        var recordsets = serviceResult && serviceResult.result && serviceResult.result.recordsets;
			
 
				+        var features = recordsets && recordsets[0] && recordsets[0].features;
			
 
				+        decodeMarkers[0].addTo(map);
			
 
				+        map.addLayer({
			
 
				+            "id": "points",
			
 
				+            "type": "circle",
			
 
				+            "paint": {
			
 
				+                "circle-radius": 6,
			
 
				+                "circle-color": "#007cbf",
			
 
				+                "circle-opacity": 0.1,
			
 
				+                "circle-stroke-width": 2,
			
 
				+                "circle-stroke-color": "#007cbf",
			
 
				+                "circle-stroke-opacity": 0.5
			
 
				+            },
			
 
				+            "source": {
			
 
				+                "type": "geojson",
			
 
				+                "data": features
			
 
				+            }
			
 
				+        });
			
 
				+    }
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/01_mapQueryByGeometry.html
+++ b/public/supermap/examples/mapboxgl/01_mapQueryByGeometry.html
@@ -0,0 +1,101 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title data-i18n="resources.title_mapQueryByGeometry"></title>
			
 
				+    <script type="text/javascript" src="../js/include-web.js"></script>
			
 
				+</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>
			
 
				+<script type="text/javascript" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+<script type="text/javascript">
			
 
				+    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+    var url = host + "/iserver/services/map-world/rest/maps/World";
			
 
				+    var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+       "with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+       " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
			
 
				+
			
 
				+    var map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [host + '/iserver/services/maps/rest/maps/World/zxyTileImage.png?prjCoordSys='+encodeURIComponent('{"epsgCode":3857}')+'&z={z}&x={x}&y={y}'],
			
 
				+                    "tileSize": 256,
			
 
				+                },
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+                "minzoom": 0,
			
 
				+                "maxzoom": 22
			
 
				+            }],
			
 
				+        },
			
 
				+        center: [0, 0],
			
 
				+        maxZoom: 18,
			
 
				+        zoom: 2
			
 
				+    });
			
 
				+    map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+
			
 
				+    map.on('load', function () {
			
 
				+        query();
			
 
				+    });
			
 
				+
			
 
				+    function query() {
			
 
				+        var geo = {
			
 
				+            'type': 'Feature',
			
 
				+            'geometry': {
			
 
				+                'type': 'Polygon',
			
 
				+                'coordinates': [[[0, 0], [-30, 0], [-10, 30], [0, 0]]],
			
 
				+            }
			
 
				+        };
			
 
				+        map.addLayer({
			
 
				+            'id': 'polygonLayer',
			
 
				+            'type': 'fill',
			
 
				+            'source': {
			
 
				+                'type': 'geojson',
			
 
				+                'data': geo
			
 
				+            },
			
 
				+            'paint': {
			
 
				+                'fill-outline-color': 'red',
			
 
				+                'fill-color': 'rgba(0, 0, 255, 0.1)'
			
 
				+            }
			
 
				+        });
			
 
				+
			
 
				+        var param = new SuperMap.QueryByGeometryParameters({
			
 
				+            queryParams: {name: "Capitals@World.1"},
			
 
				+            geometry: geo
			
 
				+        });
			
 
				+
			
 
				+        queryService = new mapboxgl.supermap.QueryService(url).queryByGeometry(param, function (serviceResult) {
			
 
				+            var recordsets = serviceResult && serviceResult.result && serviceResult.result.recordsets;
			
 
				+            var features = recordsets && recordsets[0] && recordsets[0].features;
			
 
				+            map.addLayer({
			
 
				+                "id": "points",
			
 
				+                "type": "circle",
			
 
				+                "paint": {
			
 
				+                    "circle-radius": 6,
			
 
				+                    "circle-color": "#007cbf",
			
 
				+                    "circle-opacity": 0.1,
			
 
				+                    "circle-stroke-width": 2,
			
 
				+                    "circle-stroke-color": "#007cbf",
			
 
				+                    "circle-stroke-opacity": 0.5
			
 
				+                },
			
 
				+                "source": {
			
 
				+                    "type": "geojson",
			
 
				+                    "data": features
			
 
				+                }
			
 
				+            });
			
 
				+        });
			
 
				+    }
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/01_mapQueryBySQL.html
+++ b/public/supermap/examples/mapboxgl/01_mapQueryBySQL.html
@@ -0,0 +1,83 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title data-i18n="resources.title_mapQueryBySQL"></title>
			
 
				+    <script type="text/javascript" src="../js/include-web.js"></script>
			
 
				+</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>
			
 
				+<script type="text/javascript" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+<script type="text/javascript">
			
 
				+    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+    var url = host + "/iserver/services/map-world/rest/maps/World";
			
 
				+    var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+       "with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+       " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
			
 
				+    var map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [host + '/iserver/services/maps/rest/maps/World/zxyTileImage.png?prjCoordSys='+encodeURIComponent('{"epsgCode":3857}')+'&z={z}&x={x}&y={y}'],
			
 
				+                    "tileSize": 256,
			
 
				+                },
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+                "minzoom": 0,
			
 
				+                "maxzoom": 22
			
 
				+            }],
			
 
				+        },
			
 
				+        center: [0, 0],
			
 
				+        maxZoom: 18,
			
 
				+        zoom: 2
			
 
				+    });
			
 
				+    map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+
			
 
				+    map.on('load', function () {
			
 
				+        query();
			
 
				+    });
			
 
				+
			
 
				+    function query() {
			
 
				+        var param = new SuperMap.QueryBySQLParameters({
			
 
				+            queryParams: {
			
 
				+                name: "Capitals@World.1",
			
 
				+                attributeFilter: "SMID < 10"
			
 
				+            }
			
 
				+        });
			
 
				+
			
 
				+        queryService = new mapboxgl.supermap.QueryService(url).queryBySQL(param, function (serviceResult) {
			
 
				+            var recordsets = serviceResult && serviceResult.result && serviceResult.result.recordsets;
			
 
				+            var features = recordsets && recordsets[0] && recordsets[0].features;
			
 
				+            map.addLayer({
			
 
				+                "id": "points",
			
 
				+                "type": "circle",
			
 
				+                "paint": {
			
 
				+                    "circle-radius": 6,
			
 
				+                    "circle-color": "#007cbf",
			
 
				+                    "circle-opacity":0.1,
			
 
				+                    "circle-stroke-width":2,
			
 
				+                    "circle-stroke-color":"#007cbf",
			
 
				+                    "circle-stroke-opacity":0.5
			
 
				+                },
			
 
				+                "source": {
			
 
				+                    "type": "geojson",
			
 
				+                    "data": features
			
 
				+                }
			
 
				+            });
			
 
				+        });
			
 
				+    }
			
 
				+
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/01_mapService.html
+++ b/public/supermap/examples/mapboxgl/01_mapService.html
@@ -0,0 +1,75 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title data-i18n="resources.title_mapService"></title>
			
 
				+    <script type="text/javascript" src="../js/include-web.js"></script>
			
 
				+</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>
			
 
				+<script type="text/javascript" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+<script type="text/javascript">
			
 
				+    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+    var url = host + "/iserver/services/map-world/rest/maps/World";
			
 
				+    var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+       "with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+       " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
			
 
				+    var map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [host + '/iserver/services/maps/rest/maps/World/zxyTileImage.png?prjCoordSys='+encodeURIComponent('{"epsgCode":3857}')+'&z={z}&x={x}&y={y}'],
			
 
				+                    "tileSize": 256,
			
 
				+                },
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+                "minzoom": 0,
			
 
				+                "maxzoom": 22
			
 
				+            }]
			
 
				+        },
			
 
				+        center: [-74.50, 40],
			
 
				+        maxZoom: 18,
			
 
				+        zoom: 2
			
 
				+    });
			
 
				+    map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+
			
 
				+    map.on('load', function () {
			
 
				+        mapService();
			
 
				+    });
			
 
				+
			
 
				+    function mapService() {
			
 
				+        var getMapStatusService = new SuperMap.MapService(url, {
			
 
				+            serverType: SuperMap.ServerType.ISERVER,
			
 
				+            eventListeners: {
			
 
				+                processCompleted: callback
			
 
				+            },
			
 
				+        });
			
 
				+        getMapStatusService.processAsync();
			
 
				+    }
			
 
				+
			
 
				+    function callback(serviceResult) {
			
 
				+        var result = serviceResult.result;
			
 
				+        var innerHTML = "(" + resources.text_mapInfoPrint + ")" + "<br><br>";
			
 
				+        innerHTML += resources.text_mapName + "：" + JSON.stringify(result.name) + "<br>";
			
 
				+        innerHTML += resources.text_center + ":" + JSON.stringify(result.center) + "<br>";
			
 
				+        innerHTML += "Bounds:" + JSON.stringify(result.bounds) + "<br>";
			
 
				+        new mapboxgl.Popup({closeOnClick: false})
			
 
				+            .setLngLat([-96, 37.8])
			
 
				+            .setHTML(innerHTML + "</br>")
			
 
				+            .addTo(map);
			
 
				+    }
			
 
				+
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/01_measure_area.html
+++ b/public/supermap/examples/mapboxgl/01_measure_area.html
@@ -0,0 +1,76 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title data-i18n="resources.title_measureArea"></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>
			
 
				+<script type="text/javascript" include="bootstrap,jquery,widgets.alert" src="../js/include-web.js"></script>
			
 
				+<script type="text/javascript" include="draw" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+<script type="text/javascript">
			
 
				+    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+    var url = host + "/iserver/services/map-world/rest/maps/World";
			
 
				+    var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+       "with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+       " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
			
 
				+    var map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [host + '/iserver/services/maps/rest/maps/World/zxyTileImage.png?prjCoordSys='+encodeURIComponent('{"epsgCode":3857}')+'&z={z}&x={x}&y={y}'],
			
 
				+                    "tileSize": 256,
			
 
				+                },
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+                "minzoom": 0,
			
 
				+                "maxzoom": 22
			
 
				+            }],
			
 
				+        },
			
 
				+        center: [0, 0],
			
 
				+        maxZoom: 18,
			
 
				+        zoom: 3
			
 
				+    });
			
 
				+    map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+
			
 
				+    var draw = new MapboxDraw({
			
 
				+        displayControlsDefault: false,
			
 
				+        controls: {
			
 
				+            polygon: true,
			
 
				+            trash: true
			
 
				+        }
			
 
				+    });
			
 
				+    map.addControl(draw, "top-left");
			
 
				+
			
 
				+    function measureArea(e) {
			
 
				+        if (!e.features) {
			
 
				+            widgets.alert.showAlert(resources.msg_noDataRedraw, false);
			
 
				+        }
			
 
				+        var param = new SuperMap.MeasureParameters(e.features[0]);
			
 
				+        new mapboxgl.supermap.MeasureService(url).measureArea(param, function (serviceResult) {
			
 
				+            var area = serviceResult.result.area;
			
 
				+            var rounded_area = Math.round(area * 100) / 100;
			
 
				+            widgets.alert.showAlert(rounded_area + resources.msg_sqm, true);
			
 
				+        });
			
 
				+    }
			
 
				+
			
 
				+    function removeMsg() {
			
 
				+        $('#msg_container').remove();
			
 
				+    }
			
 
				+
			
 
				+    map.on('draw.create', measureArea);
			
 
				+    map.on('draw.delete', removeMsg);
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/01_measure_distance.html
+++ b/public/supermap/examples/mapboxgl/01_measure_distance.html
@@ -0,0 +1,79 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title data-i18n="resources.title_measureDistance"></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>
			
 
				+<script type="text/javascript" include="bootstrap,jquery,widgets.alert" src="../js/include-web.js"></script>
			
 
				+<script type="text/javascript" include="draw" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+<script type="text/javascript">
			
 
				+    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+    var url = host + "/iserver/services/map-world/rest/maps/World";
			
 
				+    var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+       "with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+       " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
			
 
				+
			
 
				+    var map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [host + '/iserver/services/maps/rest/maps/World/zxyTileImage.png?prjCoordSys='+encodeURIComponent('{"epsgCode":3857}')+'&z={z}&x={x}&y={y}'],
			
 
				+                    "tileSize": 256,
			
 
				+                },
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+                "minzoom": 0,
			
 
				+                "maxzoom": 22
			
 
				+            }],
			
 
				+        },
			
 
				+        center: [0, 0],
			
 
				+        maxZoom: 18,
			
 
				+        zoom: 3
			
 
				+    });
			
 
				+    map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+
			
 
				+    var draw = new MapboxDraw({
			
 
				+        displayControlsDefault: false,
			
 
				+        controls: {
			
 
				+            line_string: true,
			
 
				+            trash: true
			
 
				+        }
			
 
				+    });
			
 
				+
			
 
				+    map.addControl(draw, "top-left");
			
 
				+
			
 
				+    function measureDistance(e) {
			
 
				+        if (!e.features) {
			
 
				+            widgets.alert.showAlert(resources.msg_noDataRedraw, false);
			
 
				+        }
			
 
				+        var param = new SuperMap.MeasureParameters(e.features[0]);
			
 
				+        new mapboxgl.supermap.MeasureService(url).measureDistance(param, function (serviceResult) {
			
 
				+            var distance = serviceResult.result.distance;
			
 
				+            widgets.alert.showAlert(distance + resources.msg_m, true);
			
 
				+        });
			
 
				+    }
			
 
				+
			
 
				+    function removeMsg() {
			
 
				+        $('#msg_container').remove();
			
 
				+    }
			
 
				+
			
 
				+    map.on('draw.create', measureDistance);
			
 
				+    map.on('draw.delete', removeMsg);
			
 
				+
			
 
				+
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/01_tiledMapLayer.html
+++ b/public/supermap/examples/mapboxgl/01_tiledMapLayer.html
@@ -0,0 +1,62 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+    <meta charset='utf-8'/>
			
 
				+    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
			
 
				+    <title data-i18n="resources.title_tiledMapLayer"></title>
			
 
				+    <script type="text/javascript" src="../js/include-web.js"></script>
			
 
				+    <style>
			
 
				+        body {
			
 
				+            margin: 0;
			
 
				+            padding: 0;
			
 
				+        }
			
 
				+
			
 
				+        #map {
			
 
				+            position: absolute;
			
 
				+            top: 0;
			
 
				+            bottom: 0;
			
 
				+            width: 100%;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+<div id='map'></div>
			
 
				+<script type="text/javascript" exclude='iclient-mapboxgl' src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+<script type="text/javascript">
			
 
				+    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+    var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+        " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+        " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
			
 
				+
			
 
				+    var map = new mapboxgl.Map({
			
 
				+        container: 'map', // container id
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [host + '/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}'],
			
 
				+                    "tileSize": 256
			
 
				+                }
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+                "minzoom": 0,
			
 
				+                "maxzoom": 22
			
 
				+            }]
			
 
				+        },
			
 
				+        center: [120.143, 30.236], // starting position
			
 
				+        zoom: 3 // starting zoom
			
 
				+    });
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+
			
 
				+</script>
			
 
				+
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/01_tiledMapLayer_4214.html
+++ b/public/supermap/examples/mapboxgl/01_tiledMapLayer_4214.html
@@ -0,0 +1,111 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+    <head>
			
 
				+        <meta charset="utf-8" />
			
 
				+        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
			
 
				+        <title data-i18n="resources.title_tiledMapLayer_Beijing54"></title>
			
 
				+        <script type="text/javascript" src="../js/include-web.js"></script>
			
 
				+        <script
			
 
				+            type="text/javascript"
			
 
				+            include="mapbox-gl-enhance"
			
 
				+            src="../../dist/mapboxgl/include-mapboxgl.js"
			
 
				+        ></script>
			
 
				+        <style>
			
 
				+            body {
			
 
				+                margin: 0;
			
 
				+                padding: 0;
			
 
				+            }
			
 
				+
			
 
				+            #map {
			
 
				+                position: absolute;
			
 
				+                top: 0;
			
 
				+                bottom: 0;
			
 
				+                width: 100%;
			
 
				+            }
			
 
				+        </style>
			
 
				+    </head>
			
 
				+
			
 
				+    <body>
			
 
				+        <div id="map"></div>
			
 
				+        <script type="text/javascript">
			
 
				+            var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
			
 
				+            var url = host + '/iserver/services/map-china400/rest/maps/China_4214';
			
 
				+            var map = new mapboxgl.Map({
			
 
				+                container: 'map', // container id
			
 
				+                style: {
			
 
				+                    version: 8,
			
 
				+                    sources: {
			
 
				+                        'raster-tiles': {
			
 
				+                            type: 'raster',
			
 
				+                            tileSize: 256,
			
 
				+                            //xyz形式，原生支持
			
 
				+                            //"tiles": ['https://t0.tianditu.gov.cn/DataServer?T=vec_c&x={x}&y={y}&l={z}'],
			
 
				+
			
 
				+                            //iserver image资源模板；扩展支持
			
 
				+                            //"tiles": ['http://localhost:8090/iserver/services/map-World/rest/maps/World/image.png?viewBounds={viewBounds}&width={width}&height={height}'],
			
 
				+
			
 
				+                            //iserver tileimage资源模板；扩展支持
			
 
				+                            //"tiles": ['https://iserver.supermap.io/iserver/services/map-jingjin/rest/maps/%E4%BA%AC%E6%B4%A5%E5%9C%B0%E5%8C%BA%E5%9C%B0%E5%9B%BE/tileimage.png?scale={scale}&x={x}&y={y}&width={width}&height={height}&origin={"x":-180,"y":90}'],
			
 
				+
			
 
				+                            //推荐；   iserver tileimage资源；扩展支持
			
 
				+                            //参数列表：
			
 
				+                            //地图服务地址（到地图名)必填 ；
			
 
				+                            //rasterSource为"iserver"；必填；
			
 
				+                            //transparent:可选，默认为true；
			
 
				+                            //cacheEnabled: 是否使用缓存，默认为true；
			
 
				+                            //redirect: 如果为 true，则将请求重定向到瓦片的真实地址；如果为 false，则响应体中是瓦片的字节流,默认为false；
			
 
				+                            //layersID:要显示的图层id字符串；
			
 
				+                            //tileversion: 切片版本名称，cacheEnabled 为 true 时有效；
			
 
				+                            //rasterfunction: 栅格分析参数,类型为SuperMap.NDVIParameter或SuperMap.HillshadeParameter；
			
 
				+                            //format:瓦片格式，默认为'png'；
			
 
				+                            tiles: [url],
			
 
				+                            rasterSource: 'iserver'
			
 
				+                        }
			
 
				+                    },
			
 
				+
			
 
				+                    layers: [
			
 
				+                        {
			
 
				+                            id: 'simple-tiles',
			
 
				+                            type: 'raster',
			
 
				+                            source: 'raster-tiles',
			
 
				+                            minzoom: 0,
			
 
				+                            maxzoom: 22
			
 
				+                        }
			
 
				+                    ]
			
 
				+                },
			
 
				+                crs: 'EPSG:4214',
			
 
				+                center: [101.74721254733845, 32.5665352689922],
			
 
				+                zoom: 3
			
 
				+            });
			
 
				+            map.on('load', function() {
			
 
				+                //从 iServer 查询
			
 
				+                var param = new SuperMap.QueryBySQLParameters({
			
 
				+                    queryParams: {
			
 
				+                        name: 'China_Province_pl@China',
			
 
				+                        attributeFilter: 'SMID =14'
			
 
				+                    }
			
 
				+                });
			
 
				+                new mapboxgl.supermap.QueryService(url).queryBySQL(param, function(serviceResult) {
			
 
				+                    map.addSource('queryDatas', {
			
 
				+                        type: 'geojson',
			
 
				+                        data: serviceResult.result.recordsets[0].features
			
 
				+                    });
			
 
				+                    map.addLayer({
			
 
				+                        id: 'queryDatas',
			
 
				+                        type: 'fill',
			
 
				+                        source: 'queryDatas',
			
 
				+                        paint: {
			
 
				+                            'fill-color': '#008080',
			
 
				+                            'fill-opacity': 0.4
			
 
				+                        },
			
 
				+                        filter: ['==', '$type', 'Polygon']
			
 
				+                    });
			
 
				+                });
			
 
				+                map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+            });
			
 
				+        </script>
			
 
				+    </body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/01_tiledMapLayer_4326.html
+++ b/public/supermap/examples/mapboxgl/01_tiledMapLayer_4326.html
@@ -0,0 +1,109 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+    <head>
			
 
				+        <meta charset="utf-8" />
			
 
				+        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
			
 
				+        <title data-i18n="resources.title_tiledMapLayer_4326WGS84"></title>
			
 
				+        <script type="text/javascript" src="../js/include-web.js"></script>
			
 
				+        <script
			
 
				+            type="text/javascript"
			
 
				+            include="mapbox-gl-enhance"
			
 
				+            src="../../dist/mapboxgl/include-mapboxgl.js"
			
 
				+        ></script>
			
 
				+        <style>
			
 
				+            body {
			
 
				+                margin: 0;
			
 
				+                padding: 0;
			
 
				+            }
			
 
				+
			
 
				+            #map {
			
 
				+                position: absolute;
			
 
				+                top: 0;
			
 
				+                bottom: 0;
			
 
				+                width: 100%;
			
 
				+            }
			
 
				+        </style>
			
 
				+    </head>
			
 
				+
			
 
				+    <body>
			
 
				+        <div id="map"></div>
			
 
				+        <script type="text/javascript">
			
 
				+            var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
			
 
				+            var map = new mapboxgl.Map({
			
 
				+                container: 'map', // container id
			
 
				+                style: {
			
 
				+                    version: 8,
			
 
				+                    sources: {
			
 
				+                        'raster-tiles': {
			
 
				+                            type: 'raster',
			
 
				+                            tileSize: 256,
			
 
				+                            //xyz形式，原生支持
			
 
				+                            //"tiles": ['https://t0.tianditu.gov.cn/DataServer?T=vec_c&x={x}&y={y}&l={z}'],
			
 
				+
			
 
				+                            //iserver image资源模板；扩展支持
			
 
				+                            //"tiles": ['http://localhost:8090/iserver/services/map-World/rest/maps/World/image.png?viewBounds={viewBounds}&width={width}&height={height}'],
			
 
				+
			
 
				+                            //iserver tileimage资源模板；扩展支持
			
 
				+                            //"tiles": ['https://iserver.supermap.io/iserver/services/map-jingjin/rest/maps/%E4%BA%AC%E6%B4%A5%E5%9C%B0%E5%8C%BA%E5%9C%B0%E5%9B%BE/tileimage.png?scale={scale}&x={x}&y={y}&width={width}&height={height}&origin={"x":-180,"y":90}'],
			
 
				+
			
 
				+                            //推荐；   iserver tileimage资源；扩展支持
			
 
				+                            //参数列表：
			
 
				+                            //地图服务地址（到地图名)必填 ；
			
 
				+                            //rasterSource为"iserver"；必填；
			
 
				+                            //transparent:可选，默认为true；
			
 
				+                            //cacheEnabled: 是否使用缓存，默认为true；
			
 
				+                            //redirect: 如果为 true，则将请求重定向到瓦片的真实地址；如果为 false，则响应体中是瓦片的字节流,默认为false；
			
 
				+                            //layersID:要显示的图层id字符串；
			
 
				+                            //tileversion: 切片版本名称，cacheEnabled 为 true 时有效；
			
 
				+                            //rasterfunction: 栅格分析参数,类型为SuperMap.NDVIParameter或SuperMap.HillshadeParameter；
			
 
				+                            //format:瓦片格式，默认为'png'；
			
 
				+                            tiles: [host + '/iserver/services/map-world/rest/maps/World'],
			
 
				+                            rasterSource: 'iserver'
			
 
				+                        }
			
 
				+                    },
			
 
				+
			
 
				+                    layers: [
			
 
				+                        {
			
 
				+                            id: 'simple-tiles',
			
 
				+                            type: 'raster',
			
 
				+                            source: 'raster-tiles',
			
 
				+                            minzoom: 0,
			
 
				+                            maxzoom: 22
			
 
				+                        }
			
 
				+                    ]
			
 
				+                },
			
 
				+                crs: 'EPSG:4326', // 或者 mapboxgl.CRS.EPSG4326  或者 new mapboxgl.CRS('EPSG:4326',[-180,-90,180,90]);
			
 
				+                center: [0, 0],
			
 
				+                zoom: 2
			
 
				+            });
			
 
				+            map.on('load', function() {
			
 
				+                //从 iServer 查询
			
 
				+                var idsParam = new SuperMap.GetFeaturesByIDsParameters({
			
 
				+                    IDs: [247],
			
 
				+                    datasetNames: ['World:Countries']
			
 
				+                });
			
 
				+                var service = new mapboxgl.supermap.FeatureService(host + '/iserver/services/data-world/rest/data');
			
 
				+                service.getFeaturesByIDs(idsParam, function(serviceResult) {
			
 
				+                    map.addSource('queryDatas', {
			
 
				+                        type: 'geojson',
			
 
				+                        data: serviceResult.result.features
			
 
				+                    });
			
 
				+                    map.addLayer({
			
 
				+                        id: 'queryDatas',
			
 
				+                        type: 'fill',
			
 
				+                        source: 'queryDatas',
			
 
				+                        paint: {
			
 
				+                            'fill-color': '#008080',
			
 
				+                            'fill-opacity': 0.4
			
 
				+                        },
			
 
				+                        filter: ['==', '$type', 'Polygon']
			
 
				+                    });
			
 
				+                });
			
 
				+                map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+            });
			
 
				+        </script>
			
 
				+    </body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/01_tiledMapLayer_4490.html
+++ b/public/supermap/examples/mapboxgl/01_tiledMapLayer_4490.html
@@ -0,0 +1,111 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+    <head>
			
 
				+        <meta charset="utf-8" />
			
 
				+        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
			
 
				+        <title data-i18n="resources.title_tiledMapLayer_China2000"></title>
			
 
				+        <script type="text/javascript" src="../js/include-web.js"></script>
			
 
				+        <script
			
 
				+            type="text/javascript"
			
 
				+            include="mapbox-gl-enhance"
			
 
				+            src="../../dist/mapboxgl/include-mapboxgl.js"
			
 
				+        ></script>
			
 
				+        <style>
			
 
				+            body {
			
 
				+                margin: 0;
			
 
				+                padding: 0;
			
 
				+            }
			
 
				+
			
 
				+            #map {
			
 
				+                position: absolute;
			
 
				+                top: 0;
			
 
				+                bottom: 0;
			
 
				+                width: 100%;
			
 
				+            }
			
 
				+        </style>
			
 
				+    </head>
			
 
				+
			
 
				+    <body>
			
 
				+        <div id="map"></div>
			
 
				+        <script type="text/javascript">
			
 
				+            var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
			
 
				+            var url = host + '/iserver/services/map-china400/rest/maps/China_4490';
			
 
				+            var map = new mapboxgl.Map({
			
 
				+                container: 'map', // container id
			
 
				+                style: {
			
 
				+                    version: 8,
			
 
				+                    sources: {
			
 
				+                        'raster-tiles': {
			
 
				+                            type: 'raster',
			
 
				+                            tileSize: 256,
			
 
				+                            //xyz形式，原生支持
			
 
				+                            //"tiles": ['https://t0.tianditu.gov.cn/DataServer?T=vec_c&x={x}&y={y}&l={z}'],
			
 
				+
			
 
				+                            //iserver image资源模板；扩展支持
			
 
				+                            //"tiles": ['http://localhost:8090/iserver/services/map-World/rest/maps/World/image.png?viewBounds={viewBounds}&width={width}&height={height}'],
			
 
				+
			
 
				+                            //iserver tileimage资源模板；扩展支持
			
 
				+                            //"tiles": ['https://iserver.supermap.io/iserver/services/map-jingjin/rest/maps/%E4%BA%AC%E6%B4%A5%E5%9C%B0%E5%8C%BA%E5%9C%B0%E5%9B%BE/tileimage.png?scale={scale}&x={x}&y={y}&width={width}&height={height}&origin={"x":-180,"y":90}'],
			
 
				+
			
 
				+                            //推荐；   iserver tileimage资源；扩展支持
			
 
				+                            //参数列表：
			
 
				+                            //地图服务地址（到地图名)必填 ；
			
 
				+                            //rasterSource为"iserver"；必填；
			
 
				+                            //transparent:可选，默认为true；
			
 
				+                            //cacheEnabled: 是否使用缓存，默认为true；
			
 
				+                            //redirect: 如果为 true，则将请求重定向到瓦片的真实地址；如果为 false，则响应体中是瓦片的字节流,默认为false；
			
 
				+                            //layersID:要显示的图层id字符串；
			
 
				+                            //tileversion: 切片版本名称，cacheEnabled 为 true 时有效；
			
 
				+                            //rasterfunction: 栅格分析参数,类型为SuperMap.NDVIParameter或SuperMap.HillshadeParameter；
			
 
				+                            //format:瓦片格式，默认为'png'；
			
 
				+                            tiles: [url],
			
 
				+                            rasterSource: 'iserver'
			
 
				+                        }
			
 
				+                    },
			
 
				+
			
 
				+                    layers: [
			
 
				+                        {
			
 
				+                            id: 'simple-tiles',
			
 
				+                            type: 'raster',
			
 
				+                            source: 'raster-tiles',
			
 
				+                            minzoom: 0,
			
 
				+                            maxzoom: 22
			
 
				+                        }
			
 
				+                    ]
			
 
				+                },
			
 
				+                crs: 'EPSG:4490',
			
 
				+                center: [101.74721254733845, 32.5665352689922],
			
 
				+                zoom: 3
			
 
				+            });
			
 
				+            map.on('load', function() {
			
 
				+                //从 iServer 查询
			
 
				+                var param = new SuperMap.QueryBySQLParameters({
			
 
				+                    queryParams: {
			
 
				+                        name: 'China_Province_pl@China',
			
 
				+                        attributeFilter: 'SMID =14'
			
 
				+                    }
			
 
				+                });
			
 
				+                new mapboxgl.supermap.QueryService(url).queryBySQL(param, function(serviceResult) {
			
 
				+                    map.addSource('queryDatas', {
			
 
				+                        type: 'geojson',
			
 
				+                        data: serviceResult.result.recordsets[0].features
			
 
				+                    });
			
 
				+                    map.addLayer({
			
 
				+                        id: 'queryDatas',
			
 
				+                        type: 'fill',
			
 
				+                        source: 'queryDatas',
			
 
				+                        paint: {
			
 
				+                            'fill-color': '#008080',
			
 
				+                            'fill-opacity': 0.4
			
 
				+                        },
			
 
				+                        filter: ['==', '$type', 'Polygon']
			
 
				+                    });
			
 
				+                });
			
 
				+                map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+            });
			
 
				+        </script>
			
 
				+    </body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/01_tiledMapLayer_4610.html
+++ b/public/supermap/examples/mapboxgl/01_tiledMapLayer_4610.html
@@ -0,0 +1,111 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+    <head>
			
 
				+        <meta charset="utf-8" />
			
 
				+        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
			
 
				+        <title data-i18n="resources.title_tiledMapLayer_Xian80"></title>
			
 
				+        <script type="text/javascript" src="../js/include-web.js"></script>
			
 
				+        <script
			
 
				+            type="text/javascript"
			
 
				+            include="mapbox-gl-enhance"
			
 
				+            src="../../dist/mapboxgl/include-mapboxgl.js"
			
 
				+        ></script>
			
 
				+        <style>
			
 
				+            body {
			
 
				+                margin: 0;
			
 
				+                padding: 0;
			
 
				+            }
			
 
				+
			
 
				+            #map {
			
 
				+                position: absolute;
			
 
				+                top: 0;
			
 
				+                bottom: 0;
			
 
				+                width: 100%;
			
 
				+            }
			
 
				+        </style>
			
 
				+    </head>
			
 
				+
			
 
				+    <body>
			
 
				+        <div id="map"></div>
			
 
				+        <script type="text/javascript">
			
 
				+            var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+            var url = host + '/iserver/services/map-china400/rest/maps/China_4610';
			
 
				+            var map = new mapboxgl.Map({
			
 
				+                container: 'map', // container id
			
 
				+                style: {
			
 
				+                    version: 8,
			
 
				+                    sources: {
			
 
				+                        'raster-tiles': {
			
 
				+                            type: 'raster',
			
 
				+                            tileSize: 256,
			
 
				+                            //xyz形式，原生支持
			
 
				+                            //"tiles": ['https://t0.tianditu.gov.cn/DataServer?T=vec_c&x={x}&y={y}&l={z}'],
			
 
				+
			
 
				+                            //iserver image资源模板；扩展支持
			
 
				+                            //"tiles": ['https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China_4610/image.png?viewBounds={viewBounds}&width={width}&height={height}'],
			
 
				+
			
 
				+                            //iserver tileimage资源模板；扩展支持
			
 
				+                            //"tiles": ['https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China_4610/tileimage.png?scale={scale}&x={x}&y={y}&width={width}&height={height}&origin={"x":-180,"y":90}'],
			
 
				+
			
 
				+                            //推荐；   iserver tileimage资源；扩展支持
			
 
				+                            //参数列表：
			
 
				+                            //地图服务地址（到地图名)必填 ；
			
 
				+                            //rasterSource为"iserver"；必填；
			
 
				+                            //transparent:可选，默认为true；
			
 
				+                            //cacheEnabled: 是否使用缓存，默认为true；
			
 
				+                            //redirect: 如果为 true，则将请求重定向到瓦片的真实地址；如果为 false，则响应体中是瓦片的字节流,默认为false；
			
 
				+                            //layersID:要显示的图层id字符串；
			
 
				+                            //tileversion: 切片版本名称，cacheEnabled 为 true 时有效；
			
 
				+                            //rasterfunction: 栅格分析参数,类型为SuperMap.NDVIParameter或SuperMap.HillshadeParameter；
			
 
				+                            //format:瓦片格式，默认为'png'；
			
 
				+                            tiles: [url],
			
 
				+                            rasterSource: 'iserver'
			
 
				+                        }
			
 
				+                    },
			
 
				+
			
 
				+                    layers: [
			
 
				+                        {
			
 
				+                            id: 'simple-tiles',
			
 
				+                            type: 'raster',
			
 
				+                            source: 'raster-tiles',
			
 
				+                            minzoom: 0,
			
 
				+                            maxzoom: 22
			
 
				+                        }
			
 
				+                    ]
			
 
				+                },
			
 
				+                crs: 'EPSG:4610',
			
 
				+                center: [101.74721254733845, 32.5665352689922],
			
 
				+                zoom: 3
			
 
				+            });
			
 
				+            map.on('load', function() {
			
 
				+                //从 iServer 查询
			
 
				+                var param = new SuperMap.QueryBySQLParameters({
			
 
				+                    queryParams: {
			
 
				+                        name: 'China_Province_pl@China',
			
 
				+                        attributeFilter: 'SMID =14'
			
 
				+                    }
			
 
				+                });
			
 
				+                new mapboxgl.supermap.QueryService(url).queryBySQL(param, function(serviceResult) {
			
 
				+                    map.addSource('queryDatas', {
			
 
				+                        type: 'geojson',
			
 
				+                        data: serviceResult.result.recordsets[0].features
			
 
				+                    });
			
 
				+                    map.addLayer({
			
 
				+                        id: 'queryDatas',
			
 
				+                        type: 'fill',
			
 
				+                        source: 'queryDatas',
			
 
				+                        paint: {
			
 
				+                            'fill-color': '#008080',
			
 
				+                            'fill-opacity': 0.4
			
 
				+                        },
			
 
				+                        filter: ['==', '$type', 'Polygon']
			
 
				+                    });
			
 
				+                });
			
 
				+                map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+            });
			
 
				+        </script>
			
 
				+    </body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/01_tiledMapLayer_rasterfunction.html
+++ b/public/supermap/examples/mapboxgl/01_tiledMapLayer_rasterfunction.html
@@ -0,0 +1,62 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+  <head>
			
 
				+    <meta charset="utf-8" />
			
 
				+    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
			
 
				+    <title data-i18n="resources.title_tiledMapLayer_rasterfunction"></title>
			
 
				+    <script type="text/javascript" src="../js/include-web.js"></script>
			
 
				+    <script type="text/javascript" include="mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+    <style>
			
 
				+      body {
			
 
				+        margin: 0;
			
 
				+        padding: 0;
			
 
				+      }
			
 
				+
			
 
				+      #map {
			
 
				+        position: absolute;
			
 
				+        top: 0;
			
 
				+        bottom: 0;
			
 
				+        width: 100%;
			
 
				+      }
			
 
				+    </style>
			
 
				+  </head>
			
 
				+
			
 
				+  <body>
			
 
				+    <div id="map"></div>
			
 
				+    <script type="text/javascript">
			
 
				+      var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+      var map = new mapboxgl.Map({
			
 
				+        container: 'map', // container id
			
 
				+        style: {
			
 
				+          version: 8,
			
 
				+          sources: {
			
 
				+            'raster-tiles': {
			
 
				+              type: 'raster',
			
 
				+              tileSize: 256,
			
 
				+              tiles: [host + '/iserver/services/map-ndvi/rest/maps/ndvi'],
			
 
				+              rasterfunction: new SuperMap.NDVIParameter({ redIndex: 0, nirIndex: 2 }),
			
 
				+              cacheEnabled: false,
			
 
				+              rasterSource: 'iserver'
			
 
				+            }
			
 
				+          },
			
 
				+
			
 
				+          layers: [
			
 
				+            {
			
 
				+              id: 'simple-tiles',
			
 
				+              type: 'raster',
			
 
				+              source: 'raster-tiles',
			
 
				+              minzoom: 0,
			
 
				+              maxzoom: 22
			
 
				+            }
			
 
				+          ]
			
 
				+        },
			
 
				+        center: [140.14211670237586, 36.04047391197882],
			
 
				+        zoom: 11,
			
 
				+        maxZoom: 11
			
 
				+      });
			
 
				+    </script>
			
 
				+  </body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/02_datasetService.html
+++ b/public/supermap/examples/mapboxgl/02_datasetService.html
@@ -0,0 +1,138 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title data-i18n="resources.title_DatasetInfo"></title>
			
 
				+    <script type="text/javascript" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+    <style>
			
 
				+
			
 
				+        body {
			
 
				+            margin: 0;
			
 
				+            overflow: hidden;
			
 
				+            background: #fff;
			
 
				+            width: 100%;
			
 
				+            height: 100%
			
 
				+        }
			
 
				+
			
 
				+        #map {
			
 
				+            position: absolute;
			
 
				+            width: 100%;
			
 
				+            height: 100%;
			
 
				+        }
			
 
				+
			
 
				+        #toolbar {
			
 
				+            position: absolute;
			
 
				+            top: 50px;
			
 
				+            right: 10px;
			
 
				+            width: 300px;
			
 
				+            text-align: center;
			
 
				+            z-index: 100;
			
 
				+            border-radius: 4px;
			
 
				+        }
			
 
				+
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <div id="toolbar" class="panel panel-primary">
			
 
				+        <div class='panel-heading'>
			
 
				+            <h5 class='panel-title text-center' data-i18n="resources.title_DatasetInfo"></h5></div>
			
 
				+        <div class='panel-body content'>
			
 
				+            <div class='panel'>
			
 
				+                <div class='input-group'>
			
 
				+                    <span class='input-group-addon' data-i18n ="resources.text_Datasources"></span>
			
 
				+                    <select id='datasourcesSelect' class='form-control'></select>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+            <div class='panel'>
			
 
				+                <div class='input-group'>
			
 
				+                    <span class='input-group-addon' data-i18n ="resources.text_dataset"></span>
			
 
				+                    <select id='datasetsSelect' class='form-control'></select>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+            <input type="button" class="btn btn-default" data-i18n ="[value]resources.btn_query" 
			
 
				+            onclick="datasetsPrint()"/>
			
 
				+        </div>
			
 
				+    </div>
			
 
				+    <div id="map"></div>
			
 
				+<script type="text/javascript" include="bootstrap-css" src="../js/include-web.js"></script>
			
 
				+<script>
			
 
				+    let map,
			
 
				+        datasetsSelect,
			
 
				+        datasourcesSelect,
			
 
				+        datasourceName,
			
 
				+        baseUrl = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/map-world/rest/maps/World Map/zxyTileImage.png?z={z}&x={x}&y={y}",
			
 
				+        dataUrl = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/data-world/rest/data";
			
 
				+    let attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+        " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+       " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
			
 
				+    map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [baseUrl],
			
 
				+                    "tileSize": 256
			
 
				+                }
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+            }]
			
 
				+        },
			
 
				+        center: [0, 0],
			
 
				+        zoom: 2
			
 
				+    });
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+    map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
			
 
				+
			
 
				+    map.on("load", function () {
			
 
				+        dataSetService();
			
 
				+    });
			
 
				+
			
 
				+    function dataSetService() {
			
 
				+        new mapboxgl.supermap.DatasourceService(dataUrl).getDatasources(function (serviceResult) {
			
 
				+        datasourcesSelect = document.getElementById("datasourcesSelect");
			
 
				+        const datasourceNames = serviceResult.result.datasourceNames;
			
 
				+        for (let i = 0,len = datasourceNames.length; i < len; i++) {
			
 
				+            datasourcesSelect.options[i] = new Option(datasourceNames[i], datasourceNames[i]);
			
 
				+        }
			
 
				+        datasourceName = datasourcesSelect.value;
			
 
				+        datasetsService(datasourceName)
			
 
				+        })
			
 
				+    }
			
 
				+    //数据集信息
			
 
				+    function datasetsService(datasourceName){
			
 
				+        new mapboxgl.supermap.DatasetService(dataUrl).getDatasets(datasourceName,function (serviceResult) {
			
 
				+            const datasetNames = serviceResult.result.datasetNames;
			
 
				+            datasetsSelect = document.getElementById("datasetsSelect");
			
 
				+            for (let i = 0,len = datasetNames.length; i < len; i++) {
			
 
				+                datasetsSelect.options[i] = new Option(datasetNames[i], datasetNames[i]);
			
 
				+                }
			
 
				+            }); 
			
 
				+    }
			
 
				+
			
 
				+    function datasetsPrint(){
			
 
				+        const datasetName = datasetsSelect.value;
			
 
				+        new mapboxgl.supermap.DatasetService(dataUrl).getDataset(datasourceName,datasetName,function (serviceResult) {
			
 
				+            let innerHTML = "(" + resources.text_datasetInfoPrint + ")" + "<br><br>";
			
 
				+            innerHTML += "dataSourceName：" + JSON.stringify(serviceResult.result.datasetInfo.dataSourceName, null, 2) + "<br>";
			
 
				+            innerHTML += "description:" + JSON.stringify(serviceResult.result.datasetInfo.description, null, 2) + "<br>";
			
 
				+            innerHTML += "isFileCache:" + JSON.stringify(serviceResult.result.datasetInfo.isFileCache, null, 2) + "<br>";
			
 
				+            innerHTML += "name:" + JSON.stringify(serviceResult.result.datasetInfo.name, null, 2) + "<br>";
			
 
				+            innerHTML += "prjCoordSys:" + "(...)" + "<br>";
			
 
				+            new mapboxgl.Popup({closeOnClick: false})
			
 
				+                    .setLngLat([0,0])
			
 
				+                    .setHTML(innerHTML + "</br>")
			
 
				+                    .addTo(map);
			
 
				+        });
			
 
				+    }
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/02_datasourceService.html
+++ b/public/supermap/examples/mapboxgl/02_datasourceService.html
@@ -0,0 +1,121 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title data-i18n="resources.title_DatasourceInfo"></title>
			
 
				+    <script type="text/javascript" include="bootstrap-css" src="../js/include-web.js"></script>
			
 
				+    <script type="text/javascript" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+    <style>
			
 
				+
			
 
				+        body {
			
 
				+            margin: 0;
			
 
				+            overflow: hidden;
			
 
				+            background: #fff;
			
 
				+            width: 100%;
			
 
				+            height: 100%
			
 
				+        }
			
 
				+
			
 
				+        #map {
			
 
				+            position: absolute;
			
 
				+            width: 100%;
			
 
				+            height: 100%;
			
 
				+        }
			
 
				+
			
 
				+        #toolbar {
			
 
				+            position: absolute;
			
 
				+            top: 50px;
			
 
				+            right: 10px;
			
 
				+            width: 300px;
			
 
				+            text-align: center;
			
 
				+            z-index: 100;
			
 
				+            border-radius: 4px;
			
 
				+        }
			
 
				+
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <div id="toolbar" class="panel panel-primary">
			
 
				+        <div class='panel-heading'>
			
 
				+            <h5 class='panel-title text-center' data-i18n="resources.title_DatasourceInfo"></h5></div>
			
 
				+        <div class='panel-body content'>
			
 
				+            <div class='panel'>
			
 
				+                <div class='input-group'>
			
 
				+                    <span class='input-group-addon' data-i18n ="resources.text_Datasources"></span>
			
 
				+                    <select id='datasourcesSelect' class='form-control'></select>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+            <input type="button" class="btn btn-default" data-i18n ="[value]resources.btn_query" 
			
 
				+            onclick="datasourcesPrint()"/>
			
 
				+        </div>
			
 
				+    </div>
			
 
				+    <div id="map"></div>
			
 
				+<script type="text/javascript" include="bootstrap-css" src="../js/include-web.js"></script>
			
 
				+<script>
			
 
				+    let map,
			
 
				+        baseUrl = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/map-world/rest/maps/World Map/zxyTileImage.png?z={z}&x={x}&y={y}",
			
 
				+        dataUrl = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/data-world/rest/data";
			
 
				+    let attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+        " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+       " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
			
 
				+    map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [baseUrl],
			
 
				+                    "tileSize": 256
			
 
				+                }
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+            }]
			
 
				+        },
			
 
				+        center: [0, 0],
			
 
				+        zoom: 2
			
 
				+    });
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+    map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
			
 
				+
			
 
				+    map.on("load", function () {
			
 
				+        dataSourcesService();
			
 
				+    });
			
 
				+
			
 
				+    function dataSourcesService() {
			
 
				+        new mapboxgl.supermap.DatasourceService(dataUrl).getDatasources(function (serviceResult) {
			
 
				+        const datasourcesSelect = document.getElementById("datasourcesSelect");
			
 
				+        const datasourceNames = serviceResult.result.datasourceNames;
			
 
				+        for (let i = 0, len = serviceResult.result.datasourceNames.length; i < len; i++) {
			
 
				+            datasourcesSelect.options[i] = new Option(datasourceNames[i], datasourceNames[i]);
			
 
				+            }   
			
 
				+        });
			
 
				+    };
			
 
				+
			
 
				+    //打印数据源信息
			
 
				+    function datasourcesPrint(){
			
 
				+    const datasourceName = datasourcesSelect.value;
			
 
				+    new mapboxgl.supermap.DatasourceService(dataUrl).getDatasource(datasourceName, function (serviceResult) {
			
 
				+        let innerHTML = "(" + resources.text_datasourceInfoPrint + ")" + "<br><br>";
			
 
				+            innerHTML += "coordUnit：" + JSON.stringify(serviceResult.result.datasourceInfo.coordUnit, null, 2) + "<br>";
			
 
				+            innerHTML += "description:" + JSON.stringify(serviceResult.result.datasourceInfo.description, null, 2) + "<br>";
			
 
				+            innerHTML += "distanceUnit:" + JSON.stringify(serviceResult.result.datasourceInfo.distanceUnit, null, 2) + "<br>";
			
 
				+            innerHTML += "engineType:" + JSON.stringify(serviceResult.result.datasourceInfo.engineType, null, 2) + "<br>";
			
 
				+            innerHTML += "name:" + JSON.stringify(serviceResult.result.datasourceInfo.name, null, 2) + "<br>";
			
 
				+            innerHTML += "prjCoordSys:" + "(...)" + "<br>";
			
 
				+        new mapboxgl.Popup({closeOnClick: false})
			
 
				+            .setLngLat([0,0])
			
 
				+            .setHTML(innerHTML + "</br>")
			
 
				+            .addTo(map);
			
 
				+    });
			
 
				+
			
 
				+    }
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/02_editFeatures.html
+++ b/public/supermap/examples/mapboxgl/02_editFeatures.html
@@ -0,0 +1,277 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title data-i18n="resources.title_editFeature"></title>
			
 
				+    <style>
			
 
				+        .editPane {
			
 
				+            position: absolute;
			
 
				+            right: 10px;
			
 
				+            top: 10px;
			
 
				+            text-align: center;
			
 
				+            background: #FFF;
			
 
				+            z-index: 1000;
			
 
				+        }
			
 
				+    </style>
			
 
				+</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>
			
 
				+<div>
			
 
				+    <div class="panel panel-primary editPane" id="editPane">
			
 
				+        <div class='panel-heading'>
			
 
				+            <h5 class='panel-title text-center' data-i18n="resources.text_editSingle"></h5></div>
			
 
				+        <div class='panel-body content'>
			
 
				+            <input type='button' class='btn btn-default' data-i18n="[value]resources.btn_addMarker" onclick='addMarker()'/>&nbsp;
			
 
				+            <input type='button' class='btn btn-default' data-i18n="[value]resources.btn_undoAdd" onclick='revocationMarker()'/>
			
 
				+            <input type='button' class='btn btn-default' data-i18n="[value]resources.text_input_value_submit" onclick='commit()'/>&nbsp;
			
 
				+            <input type='button' class='btn btn-default' data-i18n="[value]resources.text_input_value_clear" onclick='clearLayer()'/>
			
 
				+        </div>
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script type="text/javascript" include="bootstrap,widgets.alert" src="../js/include-web.js"></script>
			
 
				+<script type="text/javascript" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+<script>
			
 
				+    var map, id = [], pointFeature, alertDiv, featureService,
			
 
				+        baseUrl = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/map-world/rest/maps/World",
			
 
				+        mapUrl = baseUrl + "/zxyTileImage.png?z={z}&x={x}&y={y}",
			
 
				+        dataUrl = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/data-world/rest/data";
			
 
				+    var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+        " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+       " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
			
 
				+
			
 
				+    map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [mapUrl],
			
 
				+                    "tileSize": 256
			
 
				+                }
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+            }]
			
 
				+        },
			
 
				+        center: [0, 0],
			
 
				+        zoom: 2
			
 
				+    });
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+    map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
			
 
				+    featureService = new mapboxgl.supermap.FeatureService(dataUrl);
			
 
				+
			
 
				+    var sourceFeatures = {},
			
 
				+        addPointFeaturesData = {
			
 
				+            "type": "FeatureCollection",
			
 
				+            "features": []
			
 
				+        };
			
 
				+
			
 
				+    map.loadImage('../img/marker-icon.png', function (error, image) {
			
 
				+        if (error) throw error;
			
 
				+        map.addImage('positionPoint', image);
			
 
				+    });
			
 
				+
			
 
				+    initFeature();
			
 
				+
			
 
				+    function initFeature() {
			
 
				+
			
 
				+        var polygon = {
			
 
				+            "type": "Polygon",
			
 
				+            "coordinates": [[[118, 20], [120, 20], [120, 50], [-120, 50], [118, 20]]]
			
 
				+        };
			
 
				+        var getFeatureParams = new SuperMap.GetFeaturesByGeometryParameters({
			
 
				+            toIndex: -1,
			
 
				+            datasetNames: ["World:Capitals"],
			
 
				+            geometry: polygon,
			
 
				+            spatialQueryMode: "INTERSECT"
			
 
				+        });
			
 
				+        featureService.getFeaturesByGeometry(getFeatureParams, function (serviceResult) {
			
 
				+            sourceFeatures = serviceResult.result.features;
			
 
				+
			
 
				+            if (!map.getSource("queryDatas")) {
			
 
				+                map.addSource("queryDatas", {
			
 
				+                    "type": "geojson",
			
 
				+                    "data": sourceFeatures
			
 
				+                });
			
 
				+            } else {
			
 
				+                map.getSource("queryDatas").setData(sourceFeatures);
			
 
				+            }
			
 
				+            map.addLayer({
			
 
				+                "id": "queryDatasLayer",
			
 
				+                "type": "symbol",
			
 
				+                "source": "queryDatas",
			
 
				+                "layout": {
			
 
				+                    "icon-image": "positionPoint",
			
 
				+                    "icon-size": 0.8,
			
 
				+                    "icon-offset": [0, -15] //设置偏移量
			
 
				+                },
			
 
				+            });
			
 
				+
			
 
				+            var popup = new mapboxgl.Popup({
			
 
				+                anchor: 'bottom',
			
 
				+                closeButton: false,
			
 
				+                offset: {
			
 
				+                    'bottom': [0, -20],
			
 
				+                }
			
 
				+            });
			
 
				+            map.on('mousemove', "queryDatasLayer", function (e) {
			
 
				+                popup.setLngLat(e.lngLat).setHTML(e.features[0].properties.CAPITAL).addTo(map);
			
 
				+                map.getCanvas().style.cursor = 'pointer';
			
 
				+
			
 
				+            });
			
 
				+            map.on('mouseout', "queryDatasLayer", function () {
			
 
				+                map.getCanvas().style.cursor = '';
			
 
				+                popup.remove();
			
 
				+            })
			
 
				+
			
 
				+        });
			
 
				+    }
			
 
				+
			
 
				+    //添加地物
			
 
				+    function addMarker() {
			
 
				+        closeClearListener();
			
 
				+        widgets.alert.clearAlert();
			
 
				+        addPointFeaturesData.features = [];
			
 
				+        var xmax = 120, xmin = 100, ymax = 50, ymin = 20;
			
 
				+        var addPoint = [Math.floor(Math.random() * (xmax - xmin + 1) + xmin), Math.floor(Math.random() * (ymax - ymin + 1) + ymin)];
			
 
				+        pointFeature = {
			
 
				+            "type": "Feature",
			
 
				+            "geometry": {
			
 
				+                "type": "Point",
			
 
				+                "coordinates": addPoint
			
 
				+            },
			
 
				+            "properties": {POP: 1, CAPITAL: 'test'}
			
 
				+        };
			
 
				+
			
 
				+        addPointFeaturesData.features.push(pointFeature);
			
 
				+
			
 
				+        if (!map.getLayer("addPoint")) {
			
 
				+            map.addSource("addPointsSource", {
			
 
				+                "type": "geojson",
			
 
				+                "data": addPointFeaturesData
			
 
				+            });
			
 
				+            map.addLayer({
			
 
				+                "id": "addPoint",
			
 
				+                "type": "circle",
			
 
				+                "source": "addPointsSource",
			
 
				+                'paint': {
			
 
				+                    'circle-radius': 8,
			
 
				+                    'circle-color': 'rgba(255, 0, 0, 0.2)',
			
 
				+                    "circle-stroke-color": 'red',
			
 
				+                    "circle-stroke-width": 2,
			
 
				+//                    "circle-translate": [0, 13] //设置偏移量
			
 
				+                },
			
 
				+            });
			
 
				+        } else {
			
 
				+            map.getSource("addPointsSource").setData(addPointFeaturesData);
			
 
				+        }
			
 
				+
			
 
				+        map.flyTo({
			
 
				+            center: addPoint,
			
 
				+            zoom: 5,
			
 
				+            bearing: 0,
			
 
				+            speed: 1.2,
			
 
				+            curve: 1,
			
 
				+            easing: function (t) {
			
 
				+                return t;
			
 
				+            }
			
 
				+        });
			
 
				+    }
			
 
				+
			
 
				+    function revocationMarker() {
			
 
				+        closeClearListener();
			
 
				+        if (pointFeature) {
			
 
				+            addPointFeaturesData.features = [];
			
 
				+            map.getSource("addPointsSource").setData(addPointFeaturesData);
			
 
				+            pointFeature = null;
			
 
				+        } else {
			
 
				+            widgets.alert.showAlert(resources.msg_noRevocableMarker, false);
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    //提交添加
			
 
				+    function commit() {
			
 
				+        closeClearListener();
			
 
				+        widgets.alert.clearAlert();
			
 
				+        if (!pointFeature) {
			
 
				+            widgets.alert.showAlert(resources.msg_noMarkerToSubmit, false);
			
 
				+            return;
			
 
				+        }
			
 
				+        //更新添加的source
			
 
				+        var addFeatureParams = new SuperMap.EditFeaturesParameters({
			
 
				+            features: pointFeature,
			
 
				+            dataSourceName: "World",
			
 
				+            dataSetName: "Capitals",
			
 
				+            editType: "add",
			
 
				+            returnContent: true
			
 
				+        });
			
 
				+        featureService.editFeatures(addFeatureParams, function (serviceResult) {
			
 
				+            if (serviceResult.result.succeed) {
			
 
				+                addPointFeaturesData.features = [];
			
 
				+                map.getSource("addPointsSource").setData(addPointFeaturesData);
			
 
				+                pointFeature = null;
			
 
				+                map.removeLayer("queryDatasLayer");
			
 
				+                widgets.alert.showAlert(resources.msg_submitSuccess, true);
			
 
				+                pointFeature = null;
			
 
				+                initFeature();
			
 
				+            }
			
 
				+        });
			
 
				+    }
			
 
				+
			
 
				+
			
 
				+    var popup = new mapboxgl.Popup({
			
 
				+        anchor: 'left',
			
 
				+        closeButton: false,
			
 
				+        offset: {'left': [10, 10]}
			
 
				+    });
			
 
				+
			
 
				+    function clearLayer() {
			
 
				+        closeClearListener();
			
 
				+        widgets.alert.clearAlert();
			
 
				+        map.on('mousemove', mousemoveListener);
			
 
				+        map.on('click', 'queryDatasLayer', dataClickListener);
			
 
				+    }
			
 
				+
			
 
				+    function mousemoveListener(e) {
			
 
				+        popup.setLngLat(e.lngLat).setHTML(resources.msg_selectDeletePoint).addTo(map);
			
 
				+    }
			
 
				+
			
 
				+    function dataClickListener(e) {
			
 
				+
			
 
				+        var deleteParams = new SuperMap.EditFeaturesParameters({
			
 
				+            dataSourceName: "World",
			
 
				+            dataSetName: "Capitals",
			
 
				+            IDs: [e.features[0].id],
			
 
				+            editType: "delete"
			
 
				+        });
			
 
				+
			
 
				+        featureService.editFeatures(deleteParams, function (serviceResult) {
			
 
				+            if (serviceResult.result.succeed) {
			
 
				+                map.removeLayer("queryDatasLayer");
			
 
				+                //重载数据默认集
			
 
				+                initFeature();
			
 
				+                map.getCanvas().style.cursor = '';
			
 
				+                closeClearListener();
			
 
				+                widgets.alert.showAlert(resources.text_deleteSuccess, true);
			
 
				+            } else {
			
 
				+                widgets.alert.showAlert(resources.msg_deleteFailed, false);
			
 
				+            }
			
 
				+        });
			
 
				+    }
			
 
				+
			
 
				+    function closeClearListener() {
			
 
				+        popup.remove();
			
 
				+        map.off('mousemove', mousemoveListener);
			
 
				+        map.off('click', 'queryDatasLayer', dataClickListener);
			
 
				+    }
			
 
				+
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/02_fieldStatistics.html
+++ b/public/supermap/examples/mapboxgl/02_fieldStatistics.html
@@ -0,0 +1,181 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title data-i18n="resources.title_fieldStatistics"></title>
			
 
				+    <style>
			
 
				+        #popup {
			
 
				+            position: absolute;
			
 
				+            background-color: white;
			
 
				+            filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
			
 
				+            padding: 10px;
			
 
				+            border-radius: 5px;
			
 
				+            border: 1px solid #cccccc;
			
 
				+            bottom: 10px;
			
 
				+            left: 10px;
			
 
				+            min-width: 280px;
			
 
				+            z-index: 1;
			
 
				+        }
			
 
				+    </style>
			
 
				+</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 id="popup">
			
 
				+        <div id="popup-content">
			
 
				+            <div style="line-height: 35px;">
			
 
				+                <div id="tableName"><strong data-i18n="resources.text_layer"></strong>（continent_T@World）&nbsp;&nbsp;&nbsp;<strong
			
 
				+                        data-i18n="resources.text_field"></strong></div>
			
 
				+                <div>
			
 
				+                    <div style="line-height: 35px;"><strong data-i18n="resources.text_statisticResult"></strong>
			
 
				+                        <div>
			
 
				+                            <table id="trafficRes" class="table table-bordered">
			
 
				+                                <tbody>
			
 
				+                                <tr>
			
 
				+                                    <td data-i18n="resources.text_averageValue"></td>
			
 
				+                                    <td data-i18n="resources.text_maxValue"></td>
			
 
				+                                    <td data-i18n="resources.text_minValue"></td>
			
 
				+                                    <td data-i18n="resources.text_standardDeviation"></td>
			
 
				+                                    <td data-i18n="resources.text_sum"></td>
			
 
				+                                    <td data-i18n="resources.text_variance"></td>
			
 
				+                                </tr>
			
 
				+                                <tr>
			
 
				+                                    <td id="AVERAGE"></td>
			
 
				+                                    <td id="MAX"></td>
			
 
				+                                    <td id="MIN"></td>
			
 
				+                                    <td id="STDDEVIATION"></td>
			
 
				+                                    <td id="SUM"></td>
			
 
				+                                    <td id="VARIANCE"></td>
			
 
				+                                </tr>
			
 
				+                                </tbody>
			
 
				+                            </table>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script type="text/javascript" include="bootstrap-css" src="../js/include-web.js"></script>
			
 
				+<script type="text/javascript" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+<script>
			
 
				+    var map, currentData, layersName = [],
			
 
				+        baseUrl = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/map-world/rest/maps/World Map",
			
 
				+        mapUrl = baseUrl + "/zxyTileImage.png?z={z}&x={x}&y={y}",
			
 
				+        dataUrl = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/data-world/rest/data";
			
 
				+    var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+        " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+       " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
			
 
				+
			
 
				+    map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [mapUrl],
			
 
				+                    "tileSize": 256
			
 
				+                }
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+            }]
			
 
				+        },
			
 
				+        center: [0, 0],
			
 
				+        zoom: 2
			
 
				+    });
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+    map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
			
 
				+
			
 
				+    showLayersInfo();
			
 
				+
			
 
				+    //获取子图层信息
			
 
				+    function showLayersInfo() {
			
 
				+        var subLayer;
			
 
				+        new mapboxgl.supermap.LayerInfoService(baseUrl).getLayersInfo(function (serviceResult) {
			
 
				+            var layers = serviceResult.result.subLayers.layers;
			
 
				+            if (!layers) return;
			
 
				+            for (var i = 0, len = layers.length; i < len; i++) {
			
 
				+                subLayer = layers[i];
			
 
				+                if ("UGC" == subLayer.type) {
			
 
				+                    //记录数据源，数据集信息供字段查询统计使用
			
 
				+                    if (subLayer.datasetInfo.name && subLayer.datasetInfo.dataSourceName) {
			
 
				+                        layersName[i] = {
			
 
				+                            dataSetName: subLayer.datasetInfo.name,
			
 
				+                            dataSourceName: subLayer.datasetInfo.dataSourceName,
			
 
				+                            layerName: subLayer.name
			
 
				+                        };
			
 
				+                    }
			
 
				+                }
			
 
				+            }
			
 
				+            getFields();
			
 
				+        });
			
 
				+    }
			
 
				+
			
 
				+    function getFields() {
			
 
				+        var name = 'continent_T@World';
			
 
				+        var dataInfo;
			
 
				+        for (var i = 0; i < layersName.length; i++) {
			
 
				+            dataInfo = layersName[i];
			
 
				+            if (dataInfo.layerName == name) {
			
 
				+                //设置数据集，数据源，查询fields信息
			
 
				+                currentData = dataInfo;
			
 
				+                var param = new SuperMap.FieldParameters({
			
 
				+                    datasource: dataInfo.dataSourceName,
			
 
				+                    dataset: dataInfo.dataSetName
			
 
				+                });
			
 
				+                new mapboxgl.supermap.FieldService(dataUrl).getFields(param, function (serviceResult) {
			
 
				+                    fieldStatistic();
			
 
				+                });
			
 
				+            }
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    function fieldStatistic() {
			
 
				+        var fieldName = 'SmID';
			
 
				+        var param = new SuperMap.FieldStatisticsParameters({
			
 
				+            datasource: currentData.dataSourceName,
			
 
				+            dataset: currentData.dataSetName,
			
 
				+            fieldName: fieldName,
			
 
				+            statisticMode: [
			
 
				+                SuperMap.StatisticMode.MAX,
			
 
				+                SuperMap.StatisticMode.MIN,
			
 
				+                SuperMap.StatisticMode.SUM,
			
 
				+                SuperMap.StatisticMode.AVERAGE,
			
 
				+                SuperMap.StatisticMode.STDDEVIATION,
			
 
				+                SuperMap.StatisticMode.VARIANCE
			
 
				+            ]
			
 
				+        });
			
 
				+        if (currentData) {
			
 
				+            new mapboxgl.supermap.FieldService(dataUrl).getFieldStatisticsInfo(param, function (serviceResult) {
			
 
				+                showResult(serviceResult.result);
			
 
				+            });
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    function showResult(serviceResult) {
			
 
				+        if (!serviceResult) {
			
 
				+            return;
			
 
				+        }
			
 
				+
			
 
				+        var tableName = document.getElementById("tableName");
			
 
				+        tableName.textContent += '（' + serviceResult.fieldName + '）';
			
 
				+
			
 
				+        var keys = ["AVERAGE", "MAX", "MIN", "STDDEVIATION", "SUM", "VARIANCE"];
			
 
				+        document.getElementById("AVERAGE").textContent += serviceResult[keys[0]];
			
 
				+        document.getElementById("MAX").textContent += serviceResult[keys[1]];
			
 
				+        document.getElementById("MIN").textContent += serviceResult[keys[2]];
			
 
				+        document.getElementById("STDDEVIATION").textContent += serviceResult[keys[3]];
			
 
				+        document.getElementById("SUM").textContent += serviceResult[keys[4]];
			
 
				+        document.getElementById("VARIANCE").textContent += serviceResult[keys[5]];
			
 
				+    }
			
 
				+</script>
			
 
				+
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/02_fieldsService.html
+++ b/public/supermap/examples/mapboxgl/02_fieldsService.html
@@ -0,0 +1,62 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title data-i18n="resources.title_fieldService"></title>
			
 
				+    <script type="text/javascript" include="bootstrap-css" src="../js/include-web.js"></script>
			
 
				+    <script type="text/javascript" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+</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>
			
 
				+<script>
			
 
				+    var map,
			
 
				+        baseUrl = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/map-world/rest/maps/World Map/zxyTileImage.png?z={z}&x={x}&y={y}",
			
 
				+        dataUrl = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/data-world/rest/data";
			
 
				+    var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+        " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+       " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
			
 
				+
			
 
				+    map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [baseUrl],
			
 
				+                    "tileSize": 256
			
 
				+                }
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+            }]
			
 
				+        },
			
 
				+        center: [0, 0],
			
 
				+        zoom: 2
			
 
				+    });
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+    map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
			
 
				+
			
 
				+    map.on("load", function () {
			
 
				+        mapService();
			
 
				+    });
			
 
				+
			
 
				+    function mapService() {
			
 
				+        var param = new SuperMap.FieldParameters({
			
 
				+            datasource: "World",
			
 
				+            dataset: "continent_T"
			
 
				+        });
			
 
				+        new mapboxgl.supermap.FieldService(dataUrl).getFields(param, function (serviceResult) {
			
 
				+            var innerHTML = serviceResult.result.fieldNames.join(', ');
			
 
				+            new mapboxgl.Popup().setLngLat([0, 0]).setHTML(innerHTML).addTo(map);
			
 
				+        });
			
 
				+    }
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/02_getFeatureByBounds.html
+++ b/public/supermap/examples/mapboxgl/02_getFeatureByBounds.html
@@ -0,0 +1,114 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
			
 
				+    <title data-i18n="resources.title_getFeatureByBounds"></title>
			
 
				+    <script type="text/javascript" src="../js/include-web.js"></script>
			
 
				+    <script type="text/javascript" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+    <style>
			
 
				+        body {
			
 
				+            margin: 0;
			
 
				+            padding: 0;
			
 
				+        }
			
 
				+
			
 
				+        #map {
			
 
				+            position: absolute;
			
 
				+            top: 0;
			
 
				+            bottom: 0;
			
 
				+            width: 100%;
			
 
				+        }
			
 
				+    </style>
			
 
				+
			
 
				+</head>
			
 
				+<body>
			
 
				+
			
 
				+<div id="map"></div>
			
 
				+<script>
			
 
				+    var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+        " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+        " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
			
 
				+    baseUrl = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/map-world/rest/maps/World/zxyTileImage.png?z={z}&x={x}&y={y}",
			
 
				+        dataUrl = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/data-world/rest/data";
			
 
				+
			
 
				+    var map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [baseUrl],
			
 
				+                    "tileSize": 256
			
 
				+                }
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+            }]
			
 
				+        },
			
 
				+        center: [-10, 15],
			
 
				+        zoom: 2
			
 
				+    });
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+    map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
			
 
				+
			
 
				+    map.on('load', function () {
			
 
				+        map.addLayer({
			
 
				+            "id": "QueryBondsArea",
			
 
				+            "type": "fill",
			
 
				+            "source": {
			
 
				+                "type": "geojson",
			
 
				+                "data": {
			
 
				+                    "type": "Feature",
			
 
				+                    "geometry": {
			
 
				+                        "type": "Polygon",
			
 
				+                        "coordinates": [[[-20, 20], [-20, -20], [20, -20], [20, 20], [-20, 20]]]
			
 
				+                    }
			
 
				+                }
			
 
				+            },
			
 
				+            "paint": {
			
 
				+                "fill-color": "rgba(0, 0, 255, 0.1)",
			
 
				+                'fill-outline-color': "red",
			
 
				+            },
			
 
				+        });
			
 
				+
			
 
				+        query();
			
 
				+    });
			
 
				+
			
 
				+    function query() {
			
 
				+        var sw = new mapboxgl.LngLat(-20, -20);
			
 
				+        var ne = new mapboxgl.LngLat(20, 20);
			
 
				+        var lngLatBounds = new mapboxgl.LngLatBounds(sw, ne);
			
 
				+
			
 
				+        var boundsParam = new SuperMap.GetFeaturesByBoundsParameters({
			
 
				+            datasetNames: ["World:Capitals"],
			
 
				+            bounds: lngLatBounds
			
 
				+        });
			
 
				+
			
 
				+        new mapboxgl.supermap.FeatureService(dataUrl).getFeaturesByBounds(boundsParam, function (serviceResult) {
			
 
				+            map.addSource("queryDatas", {
			
 
				+                "type": "geojson",
			
 
				+                "data": serviceResult.result.features
			
 
				+            });
			
 
				+            map.addLayer({
			
 
				+                "id": "queryDatas",
			
 
				+                "type": "circle",
			
 
				+                "source": "queryDatas",
			
 
				+                "paint": {
			
 
				+                    "circle-radius": 6, /* 圆的直径，单位像素 */
			
 
				+                    "circle-color": "blue", /* 圆的颜色 */
			
 
				+                    "circle-opacity": 0.5  /* 圆的颜色 */
			
 
				+                },
			
 
				+            });
			
 
				+        });
			
 
				+    }
			
 
				+</script>
			
 
				+
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/02_getFeatureByBuffer.html
+++ b/public/supermap/examples/mapboxgl/02_getFeatureByBuffer.html
@@ -0,0 +1,97 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title data-i18n="resources.title_getFeatureByBuffer"></title>
			
 
				+    <script type="text/javascript" include="bootstrap-css" src="../js/include-web.js"></script>
			
 
				+    <script type="text/javascript" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+</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>
			
 
				+<script>
			
 
				+    var map, queryBufferGeometry,
			
 
				+        baseUrl = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/map-world/rest/maps/World",
			
 
				+        mapUrl = baseUrl + "/zxyTileImage.png?z={z}&x={x}&y={y}",
			
 
				+        dataUrl = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/data-world/rest/data";
			
 
				+    var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+        " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+       " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
			
 
				+
			
 
				+    map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [mapUrl],
			
 
				+                    "tileSize": 256
			
 
				+                }
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+            }]
			
 
				+        },
			
 
				+        center: [0, 0],
			
 
				+        zoom: 2
			
 
				+    });
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+    map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
			
 
				+
			
 
				+    map.on("load", function () {
			
 
				+        queryBufferGeometry = {
			
 
				+            "type": "Polygon",
			
 
				+            "coordinates": [[[-20, 20], [-20, -20], [20, -20], [20, 20], [-20, 20]]]
			
 
				+        };
			
 
				+        map.addLayer({
			
 
				+            "id": "queryPolygon",
			
 
				+            "type": "fill",
			
 
				+            "source": {
			
 
				+                "type": "geojson",
			
 
				+                "data": {
			
 
				+                    "type": "Feature",
			
 
				+                    "geometry": queryBufferGeometry
			
 
				+                }
			
 
				+            },
			
 
				+            "paint": {
			
 
				+                "fill-color": "rgba(0, 0, 255, 0.1)",
			
 
				+                'fill-outline-color': "red",
			
 
				+            },
			
 
				+        });
			
 
				+
			
 
				+        query();
			
 
				+    });
			
 
				+
			
 
				+    function query() {
			
 
				+        var bufferParam = new SuperMap.GetFeaturesByBufferParameters({
			
 
				+            datasetNames: ["World:Capitals"],
			
 
				+            bufferDistance: 30,
			
 
				+            geometry: queryBufferGeometry
			
 
				+        });
			
 
				+        new mapboxgl.Popup().setText(resources.text_bufferDistance+' = 30').setLngLat([0, 0]).addTo(map);
			
 
				+        new mapboxgl.supermap.FeatureService(dataUrl).getFeaturesByBuffer(bufferParam, function (serviceResult) {
			
 
				+            map.addSource("queryDatas", {
			
 
				+                "type": "geojson",
			
 
				+                "data": serviceResult.result.features
			
 
				+            });
			
 
				+            map.addLayer({
			
 
				+                "id": "queryDatas",
			
 
				+                "type": "circle",
			
 
				+                "source": "queryDatas",
			
 
				+                "paint": {
			
 
				+                    "circle-radius": 6, /* 圆的直径，单位像素 */
			
 
				+                    "circle-color": "blue", /* 圆的颜色 */
			
 
				+                    "circle-opacity": 0.5  /* 圆的颜色 */
			
 
				+                },
			
 
				+            });
			
 
				+        });
			
 
				+    }
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/02_getFeatureByGeometry.html
+++ b/public/supermap/examples/mapboxgl/02_getFeatureByGeometry.html
@@ -0,0 +1,95 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title data-i18n="resources.title_getFeatureByGeometry"></title>
			
 
				+    <script type="text/javascript" include="bootstrap-css" src="../js/include-web.js"></script>
			
 
				+    <script type="text/javascript" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+</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>
			
 
				+<script>
			
 
				+    var map, queryPolygonGeometry,
			
 
				+        baseUrl = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/map-world/rest/maps/World",
			
 
				+        mapUrl = baseUrl + "/zxyTileImage.png?z={z}&x={x}&y={y}",
			
 
				+        dataUrl = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/data-world/rest/data";
			
 
				+    var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+        " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+       " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
			
 
				+
			
 
				+    map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [mapUrl],
			
 
				+                    "tileSize": 256
			
 
				+                }
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+            }]
			
 
				+        },
			
 
				+        center: [0, 0],
			
 
				+        zoom: 2
			
 
				+    });
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+    map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
			
 
				+
			
 
				+    map.on("load", function () {
			
 
				+        queryPolygonGeometry = {
			
 
				+            "type": "Polygon",
			
 
				+            "coordinates": [[[0, 0], [-10, 30], [-30, 0], [0, 0]]]
			
 
				+        };
			
 
				+        map.addLayer({
			
 
				+            "id": "queryPolygon",
			
 
				+            "type": "fill",
			
 
				+            "source": {
			
 
				+                "type": "geojson",
			
 
				+                "data": {
			
 
				+                    "type": "Feature",
			
 
				+                    "geometry": queryPolygonGeometry
			
 
				+                }
			
 
				+            },
			
 
				+            "paint": {
			
 
				+                "fill-color": "rgba(0, 0, 255, 0.1)",
			
 
				+                "fill-outline-color": "red",
			
 
				+            },
			
 
				+        });
			
 
				+
			
 
				+        query();
			
 
				+    });
			
 
				+
			
 
				+    function query() {
			
 
				+        var geometryParam = new SuperMap.GetFeaturesByGeometryParameters({
			
 
				+            datasetNames: ["World:Countries"],
			
 
				+            geometry: queryPolygonGeometry,
			
 
				+            spatialQueryMode: "INTERSECT"
			
 
				+        });
			
 
				+        new mapboxgl.supermap.FeatureService(dataUrl).getFeaturesByGeometry(geometryParam, function (serviceResult) {
			
 
				+            map.addSource("queryDatas", {
			
 
				+                "type": "geojson",
			
 
				+                "data": serviceResult.result.features
			
 
				+            });
			
 
				+            map.addLayer({
			
 
				+                "id": "queryDatas",
			
 
				+                "type": "fill",
			
 
				+                "source": "queryDatas",
			
 
				+                "paint": {
			
 
				+                    "fill-color": "rgba(255, 251, 240, 0.4)",
			
 
				+                    'fill-outline-color': "#0066FF",
			
 
				+                },
			
 
				+            });
			
 
				+        });
			
 
				+    }
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/02_getFeatureByIDs.html
+++ b/public/supermap/examples/mapboxgl/02_getFeatureByIDs.html
@@ -0,0 +1,94 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
			
 
				+    <title data-i18n="resources.title_getFeatureByIDs"></title>
			
 
				+    <script type="text/javascript" src="../js/include-web.js"></script>
			
 
				+    <style>
			
 
				+        body {
			
 
				+            margin: 0;
			
 
				+            padding: 0;
			
 
				+        }
			
 
				+
			
 
				+        #map {
			
 
				+            position: absolute;
			
 
				+            top: 0;
			
 
				+            bottom: 0;
			
 
				+            width: 100%;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+<div id="map"></div>
			
 
				+<script type="text/javascript" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+<script type="text/javascript">
			
 
				+    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+    var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+        " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+       " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
			
 
				+    var baseUrl = host + '/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}',
			
 
				+        dataUrl = host + "/iserver/services/data-world/rest/data";
			
 
				+    var map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [baseUrl],
			
 
				+                    "tileSize": 256
			
 
				+                }
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+                "minzoom": 0,
			
 
				+                "maxzoom": 22
			
 
				+            }]
			
 
				+        },
			
 
				+        center: [120.143, 30.236],
			
 
				+        zoom: 3
			
 
				+    });
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+    map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
			
 
				+
			
 
				+    //查询函数：
			
 
				+    function query() {
			
 
				+        var idsParam = new SuperMap.GetFeaturesByIDsParameters({
			
 
				+            IDs: [247],
			
 
				+            datasetNames: ["World:Countries"]
			
 
				+        });
			
 
				+
			
 
				+        var service = new mapboxgl.supermap.FeatureService(dataUrl);
			
 
				+        service.getFeaturesByIDs(idsParam, function (serviceResult) {
			
 
				+            map.addSource("queryDatas", {
			
 
				+                "type": "geojson",
			
 
				+                "data": serviceResult.result.features
			
 
				+            });
			
 
				+            map.addLayer({
			
 
				+                "id": "queryDatas",
			
 
				+                "type": "fill",
			
 
				+                "source": "queryDatas",
			
 
				+                "paint": {
			
 
				+                    "fill-color": "#008080", /* 填充的颜色 */
			
 
				+                    "fill-opacity": 0.4      /* 透明度 */
			
 
				+                },
			
 
				+                "filter": ["==", "$type", "Polygon"]
			
 
				+            });
			
 
				+
			
 
				+        });
			
 
				+    }
			
 
				+
			
 
				+    map.on('load', function () {
			
 
				+        query();
			
 
				+    });
			
 
				+
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/02_getFeatureBySQL.html
+++ b/public/supermap/examples/mapboxgl/02_getFeatureBySQL.html
@@ -0,0 +1,99 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
			
 
				+    <title data-i18n="resources.title_getFeatureBySQL"></title>
			
 
				+    <script type="text/javascript" src="../js/include-web.js"></script>
			
 
				+    <script type="text/javascript" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+    <style>
			
 
				+        body {
			
 
				+            margin: 0;
			
 
				+            padding: 0;
			
 
				+        }
			
 
				+
			
 
				+        #map {
			
 
				+            position: absolute;
			
 
				+            top: 0;
			
 
				+            bottom: 0;
			
 
				+            width: 100%;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+<div id="map"></div>
			
 
				+<script>
			
 
				+    var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+        "with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+        " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span>";
			
 
				+        var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+        var baseUrl = host + '/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}';
			
 
				+        var dataUrl = host + "/iserver/services/data-world/rest/data";
			
 
				+
			
 
				+    var map = new mapboxgl.Map({
			
 
				+        container: 'map', //div id
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [baseUrl],
			
 
				+                    "tileSize": 256
			
 
				+                }
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+                "maxzoom": 18
			
 
				+            }]
			
 
				+        },
			
 
				+        center: [120.143, 30.236],
			
 
				+        zoom: 3
			
 
				+    });
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+    map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
			
 
				+
			
 
				+    map.on('load', function () {
			
 
				+        query();
			
 
				+    });
			
 
				+
			
 
				+    function query() {
			
 
				+        var sqlParam = new SuperMap.GetFeaturesBySQLParameters({
			
 
				+            queryParameter: {
			
 
				+                name: "Countries@World",
			
 
				+                attributeFilter: "SMID = 247"
			
 
				+            },
			
 
				+            datasetNames: ["World:Countries"]
			
 
				+        });
			
 
				+
			
 
				+        new mapboxgl.supermap.FeatureService(dataUrl).getFeaturesBySQL(sqlParam, function (serviceResult) {
			
 
				+            map.addSource("queryDatas", {
			
 
				+                "type": "geojson",
			
 
				+                "data": serviceResult.result.features
			
 
				+            });
			
 
				+            map.addLayer({
			
 
				+                "id": "queryDatas",
			
 
				+                "type": "fill", /* fill类型一般用来表示一个面，一般较大 */
			
 
				+                "source": "queryDatas",
			
 
				+                "paint": {
			
 
				+                    "fill-color": "#FF3300", /* 填充的颜色 */
			
 
				+                    "fill-opacity": 0.6      /* 透明度 */
			
 
				+                },
			
 
				+            });
			
 
				+            map.on('click', 'queryDatas', function (e) {
			
 
				+                new mapboxgl.Popup()
			
 
				+                    .setLngLat(e.lngLat)
			
 
				+                    .setHTML(e.features[0].properties.SMID + "<br>" + resources.text_country + "：" + e.features[0].properties.COUNTRY)
			
 
				+                    .addTo(map);
			
 
				+            });
			
 
				+        });
			
 
				+    }
			
 
				+
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/02_getGridCellInfos.html
+++ b/public/supermap/examples/mapboxgl/02_getGridCellInfos.html
@@ -0,0 +1,75 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title data-i18n="resources.title_getGridCellInfos"></title>
			
 
				+    <script type="text/javascript" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+</head>
			
 
				+<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
			
 
				+<h5 data-i18n="resources.text_clickGridCellToQuery"
			
 
				+    style=" position: absolute; display: block; margin-left: 60px; z-index: 100;"></h5>
			
 
				+<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
			
 
				+<script type="text/javascript" src="../js/include-web.js"></script>
			
 
				+<script>
			
 
				+    var map,
			
 
				+        baseUrl = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/map-world/rest/maps/World Map/zxyTileImage.png?z={z}&x={x}&y={y}",
			
 
				+        dataUrl = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/data-world/rest/data";
			
 
				+    var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+        " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+       " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
			
 
				+
			
 
				+    map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [baseUrl],
			
 
				+                    "tileSize": 256
			
 
				+                }
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+            }]
			
 
				+        },
			
 
				+        center: [0, 0],
			
 
				+        zoom: 3
			
 
				+    });
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+    map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
			
 
				+
			
 
				+    map.on("click", function (evt) {
			
 
				+        var x = evt.lngLat.lng;
			
 
				+        var y = evt.lngLat.lat;
			
 
				+        if (x < -180.0 || x > 180.0 || y < -90 || y > 90) {
			
 
				+            return;
			
 
				+        }
			
 
				+        var getGridCellInfosParam = new SuperMap.GetGridCellInfosParameters({
			
 
				+            dataSourceName: "World",
			
 
				+            datasetName: "WorldEarth",
			
 
				+            X: x,
			
 
				+            Y: y
			
 
				+        });
			
 
				+
			
 
				+        new mapboxgl.supermap.GridCellInfosService(dataUrl).getGridCellInfos(getGridCellInfosParam, function (serviceResult) {
			
 
				+            if (!serviceResult.result) {
			
 
				+                return;
			
 
				+            }
			
 
				+            var result = serviceResult.result;
			
 
				+            var innerHTML = resources.text_gridQueryResult + "<br>" + "column: " + result.column + "<br>";
			
 
				+            innerHTML += "row: " + result.row + "<br>";
			
 
				+            innerHTML += "value: " + result.value + "<br>";
			
 
				+            new mapboxgl.Popup().setLngLat([x, y]).setHTML(innerHTML).addTo(map);
			
 
				+        });
			
 
				+    });
			
 
				+</script>
			
 
				+
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/03_themeDotDensity.html
+++ b/public/supermap/examples/mapboxgl/03_themeDotDensity.html
@@ -0,0 +1,93 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title data-i18n="resources.title_themeDotDensity"></title>
			
 
				+    <script type="text/javascript" src="../js/include-web.js"></script>
			
 
				+</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>
			
 
				+<script type="text/javascript" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+<span id="show"></span>
			
 
				+<script type="text/javascript">
			
 
				+    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+
			
 
				+    var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+       "with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+       " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
			
 
				+
			
 
				+    var dataUrl = host + "/iserver/services/map-world/rest/maps/World";
			
 
				+    var map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [host + '/iserver/services/maps/rest/maps/World/zxyTileImage.png?prjCoordSys='+encodeURIComponent('{"epsgCode":3857}')+'&z={z}&x={x}&y={y}'],
			
 
				+                    "tileSize": 256,
			
 
				+                },
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+                "minzoom": 0,
			
 
				+                "maxzoom": 22
			
 
				+            }]
			
 
				+        },
			
 
				+        center: [0, 0],
			
 
				+        zoom: 2
			
 
				+    });
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+    map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
			
 
				+
			
 
				+
			
 
				+    function createTheme() {
			
 
				+        var themeDotDensity = new SuperMap.ThemeDotDensity({
			
 
				+            dotExpression: "Pop_1994",
			
 
				+            value: 5000000,
			
 
				+            style: new SuperMap.ServerStyle({
			
 
				+                markerSize: 3,
			
 
				+                markerSymbolID: 12
			
 
				+            })
			
 
				+        });
			
 
				+        var themeParameters = new SuperMap.ThemeParameters({
			
 
				+            themes: [themeDotDensity],
			
 
				+            datasetNames: ["Countries"],
			
 
				+            dataSourceNames: ["World"]
			
 
				+        });
			
 
				+
			
 
				+        var themeService = new mapboxgl.supermap.ThemeService(dataUrl);
			
 
				+        themeService.getThemeInfo(themeParameters, function (serviceResult) {
			
 
				+            var result = serviceResult.result;
			
 
				+
			
 
				+            if (result && result.newResourceID) {
			
 
				+                map.addSource("theme", {
			
 
				+                    "type": 'raster',
			
 
				+                    "tiles": [host + '/iserver/services/maps/rest/maps/World/zxyTileImage.png?z={z}&x={x}&y={y}&transparent=true&cacheEnabled=false&noWrap=true&layersID=' + result.newResourceID],
			
 
				+                    "tileSize": 256,
			
 
				+                });
			
 
				+
			
 
				+                map.addLayer({
			
 
				+                    "id": "themeLayer",
			
 
				+                    "type": "raster",
			
 
				+                    "source": "theme",
			
 
				+                });
			
 
				+            }
			
 
				+        })
			
 
				+    }
			
 
				+
			
 
				+    map.on('load', function () {
			
 
				+
			
 
				+        createTheme();
			
 
				+    });
			
 
				+
			
 
				+</script>
			
 
				+
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/03_themeGraduatedSymbol.html
+++ b/public/supermap/examples/mapboxgl/03_themeGraduatedSymbol.html
@@ -0,0 +1,96 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title data-i18n="resources.text_graduatedSymbol"></title>
			
 
				+    <script type="text/javascript" src="../js/include-web.js"></script>
			
 
				+</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>
			
 
				+<script type="text/javascript" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+<span id="show"></span>
			
 
				+<script type="text/javascript">
			
 
				+    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+
			
 
				+    var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+       "with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+       " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
			
 
				+
			
 
				+    var dataUrl = host + "/iserver/services/map-china400/rest/maps/China";
			
 
				+    var map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [host + '/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?prjCoordSys='+encodeURIComponent('{"epsgCode":3857}')+'&z={z}&x={x}&y={y}'],
			
 
				+                    "tileSize": 256,
			
 
				+                },
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+                "minzoom": 0,
			
 
				+                "maxzoom": 22
			
 
				+            }]
			
 
				+        },
			
 
				+        center: [100, 39],
			
 
				+        zoom: 3
			
 
				+    });
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+    map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
			
 
				+
			
 
				+    function createTheme() {
			
 
				+        var themeGraduatedSymbol = new SuperMap.ThemeGraduatedSymbol({
			
 
				+            expression: "SMAREA",
			
 
				+            baseValue: 3000000000000,
			
 
				+            graduatedMode: SuperMap.GraduatedMode.CONSTANT,
			
 
				+            style: new SuperMap.ThemeGraduatedSymbolStyle({
			
 
				+                positiveStyle: new SuperMap.ServerStyle({
			
 
				+                    markerSize: 50,
			
 
				+                    markerSymbolID: 0,
			
 
				+                    lineColor: new SuperMap.ServerColor(255, 165, 0),
			
 
				+                    fillBackColor: new SuperMap.ServerColor(255, 0, 0)
			
 
				+                })
			
 
				+            })
			
 
				+        });
			
 
				+
			
 
				+        var themeParameters = new SuperMap.ThemeParameters({
			
 
				+            themes: [themeGraduatedSymbol],
			
 
				+            datasetNames: ["China_Province_pg"],
			
 
				+            dataSourceNames: ["China"]
			
 
				+        });
			
 
				+
			
 
				+        new mapboxgl.supermap.ThemeService(dataUrl).getThemeInfo(themeParameters, function (serviceResult) {
			
 
				+            var result = serviceResult.result;
			
 
				+            if (result && result.newResourceID) {
			
 
				+                map.addSource("theme", {
			
 
				+                    "type": 'raster',
			
 
				+                    "tiles": [host + '/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}&transparent=true&cacheEnabled=false&layersID=' + result.newResourceID],
			
 
				+                    "tileSize": 256,
			
 
				+                });
			
 
				+
			
 
				+                map.addLayer({
			
 
				+                    "id": "themeLayer",
			
 
				+                    "type": "raster",
			
 
				+                    "source": "theme",
			
 
				+                });
			
 
				+            }
			
 
				+        })
			
 
				+    }
			
 
				+
			
 
				+    map.on('load', function () {
			
 
				+
			
 
				+        createTheme();
			
 
				+    });
			
 
				+
			
 
				+</script>
			
 
				+
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/03_themeGraph.html
+++ b/public/supermap/examples/mapboxgl/03_themeGraph.html
@@ -0,0 +1,124 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title data-i18n="resources.title_themeGraph"></title>
			
 
				+    <script type="text/javascript" src="../js/include-web.js"></script>
			
 
				+</head>
			
 
				+<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
			
 
				+<div id="title" style="position:absolute;top: 10px;text-align:center;width:100%;z-index: 10;color: #f7931e" data-i18n="resources.text_GDPStatistic"></div>
			
 
				+<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
			
 
				+<script type="text/javascript" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+<span id="show"></span>
			
 
				+<script type="text/javascript">
			
 
				+    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+
			
 
				+    var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+       "with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+       " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
			
 
				+
			
 
				+    var dataUrl = host + "/iserver/services/map-china400/rest/maps/China";
			
 
				+    var map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [host + '/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?&z={z}&x={x}&y={y}'],
			
 
				+                    "tileSize": 256,
			
 
				+                },
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+                "minzoom": 0,
			
 
				+                "maxzoom": 22
			
 
				+            }]
			
 
				+        },
			
 
				+        center: [104, 38],
			
 
				+        zoom: 3.55
			
 
				+    });
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+    map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
			
 
				+
			
 
				+    function createTheme() {
			
 
				+        themeGraph = new SuperMap.ThemeGraph({
			
 
				+            items: [
			
 
				+                new SuperMap.ThemeGraphItem({
			
 
				+                    caption: "全国省份2013_GDP",
			
 
				+                    graphExpression: "GDP_2013",
			
 
				+                    uniformStyle: new SuperMap.ServerStyle({
			
 
				+                        fillForeColor: new SuperMap.ServerColor(255, 215, 0),
			
 
				+                        lineWidth: 0
			
 
				+                    })
			
 
				+                }),
			
 
				+                new SuperMap.ThemeGraphItem({
			
 
				+                    caption: "全国省份2014_GDP",
			
 
				+                    graphExpression: "GDP_2014",
			
 
				+                    uniformStyle: new SuperMap.ServerStyle({
			
 
				+                        fillForeColor: new SuperMap.ServerColor(0, 191, 255),
			
 
				+                        lineWidth: 0
			
 
				+                    })
			
 
				+                }),
			
 
				+            ],
			
 
				+            barWidth: 0.001,
			
 
				+            graduatedMode: SuperMap.GraduatedMode.CONSTANT,
			
 
				+            graphAxes: new SuperMap.ThemeGraphAxes({
			
 
				+                axesDisplayed: true
			
 
				+            }),
			
 
				+            graphSize: new SuperMap.ThemeGraphSize({
			
 
				+                maxGraphSize: 500000,
			
 
				+                minGraphSize: 200000
			
 
				+            }),
			
 
				+            graphText: new SuperMap.ThemeGraphText({
			
 
				+                graphTextDisplayed: true,
			
 
				+                graphTextFormat: SuperMap.ThemeGraphTextFormat.VALUE,
			
 
				+                graphTextStyle: new SuperMap.ServerTextStyle({
			
 
				+                    fontHeight: 10,
			
 
				+                    fontWidth: 10
			
 
				+                })
			
 
				+            }),
			
 
				+            overlapAvoided: false,
			
 
				+            graphSizeFixed: false,
			
 
				+            graphType: SuperMap.ThemeGraphType.BAR
			
 
				+        });
			
 
				+        themeParameters = new SuperMap.ThemeParameters({
			
 
				+            themes: [themeGraph],
			
 
				+            datasetNames: ["China_Province_pg"],
			
 
				+            dataSourceNames: ["China"]
			
 
				+
			
 
				+        });
			
 
				+
			
 
				+        new mapboxgl.supermap.ThemeService(dataUrl).getThemeInfo(themeParameters, function (serviceResult) {
			
 
				+            var result = serviceResult.result;
			
 
				+            if (result && result.newResourceID) {
			
 
				+                map.addSource("theme", {
			
 
				+                    "type": 'raster',
			
 
				+                    "tiles": [host + '/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}&transparent=true&cacheEnabled=false&layersID=' + result.newResourceID],
			
 
				+                    "tileSize": 256,
			
 
				+                });
			
 
				+
			
 
				+                map.addLayer({
			
 
				+                    "id": "themeLayer",
			
 
				+                    "type": "raster",
			
 
				+                    "source": "theme",
			
 
				+                });
			
 
				+            }
			
 
				+        })
			
 
				+    }
			
 
				+
			
 
				+    map.on('load', function () {
			
 
				+
			
 
				+        createTheme();
			
 
				+    });
			
 
				+
			
 
				+</script>
			
 
				+
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/03_themeGridRange.html
+++ b/public/supermap/examples/mapboxgl/03_themeGridRange.html
@@ -0,0 +1,180 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title data-i18n="resources.title_themeGridRange"></title>
			
 
				+    <script type="text/javascript" src="../js/include-web.js"></script>
			
 
				+</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>
			
 
				+<script type="text/javascript" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+<span id="show"></span>
			
 
				+<script type="text/javascript">
			
 
				+    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+
			
 
				+    var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+       "with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+       " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
			
 
				+
			
 
				+    var dataUrl = host + "/iserver/services/map-jingjin/rest/maps/京津地区人口分布图_专题图";
			
 
				+    var map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [host + '/iserver/services/map-jingjin/rest/maps/京津地区人口分布图_专题图/zxyTileImage.png?prjCoordSys='+encodeURIComponent('{"epsgCode":3857}')+'&z={z}&x={x}&y={y}'],
			
 
				+                    "tileSize": 256,
			
 
				+                },
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+                "minzoom": 0,
			
 
				+                "maxzoom": 22
			
 
				+            }]
			
 
				+        },
			
 
				+        center: [117, 40],
			
 
				+        zoom: 6
			
 
				+    });
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+    map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
			
 
				+
			
 
				+    function createTheme() {
			
 
				+        var themeGridRangeItem1 = new SuperMap.ThemeGridRangeItem({
			
 
				+                start: -4,
			
 
				+                end: 120,
			
 
				+                color: new SuperMap.ServerColor(198, 244, 240)
			
 
				+            }),
			
 
				+
			
 
				+            themeGridRangeItem2 = new SuperMap.ThemeGridRangeItem({
			
 
				+                start: 120,
			
 
				+                end: 240,
			
 
				+                color: new SuperMap.ServerColor(176, 244, 188)
			
 
				+            }),
			
 
				+            themeGridRangeItem3 = new SuperMap.ThemeGridRangeItem({
			
 
				+                start: 240,
			
 
				+                end: 360,
			
 
				+                color: new SuperMap.ServerColor(218, 251, 178)
			
 
				+            }),
			
 
				+            themeGridRangeItem4 = new SuperMap.ThemeGridRangeItem({
			
 
				+                start: 360,
			
 
				+                end: 480,
			
 
				+                color: new SuperMap.ServerColor(220, 236, 145)
			
 
				+            }),
			
 
				+            themeGridRangeItem5 = new SuperMap.ThemeGridRangeItem({
			
 
				+                start: 480,
			
 
				+                end: 600,
			
 
				+                color: new SuperMap.ServerColor(96, 198, 66)
			
 
				+            }),
			
 
				+            themeGridRangeItem6 = new SuperMap.ThemeGridRangeItem({
			
 
				+                start: 600,
			
 
				+                end: 720,
			
 
				+                color: new SuperMap.ServerColor(20, 142, 53)
			
 
				+            }),
			
 
				+            themeGridRangeItem7 = new SuperMap.ThemeGridRangeItem({
			
 
				+                start: 720,
			
 
				+                end: 840,
			
 
				+                color: new SuperMap.ServerColor(85, 144, 55)
			
 
				+            }),
			
 
				+
			
 
				+            themeGridRangeItem8 = new SuperMap.ThemeGridRangeItem({
			
 
				+                start: 840,
			
 
				+                end: 960,
			
 
				+                color: new SuperMap.ServerColor(171, 168, 38)
			
 
				+            }),
			
 
				+            themeGridRangeItem9 = new SuperMap.ThemeGridRangeItem({
			
 
				+                start: 960,
			
 
				+                end: 1100,
			
 
				+                color: new SuperMap.ServerColor(235, 165, 9)
			
 
				+            }),
			
 
				+            themeGridRangeItem10 = new SuperMap.ThemeGridRangeItem({
			
 
				+                start: 1100,
			
 
				+                end: 1220,
			
 
				+                color: new SuperMap.ServerColor(203, 89, 2)
			
 
				+            }),
			
 
				+            themeGridRangeItem11 = new SuperMap.ThemeGridRangeItem({
			
 
				+                start: 1220,
			
 
				+                end: 1340,
			
 
				+                color: new SuperMap.ServerColor(157, 25, 1)
			
 
				+            }),
			
 
				+            themeGridRangeItem12 = new SuperMap.ThemeGridRangeItem({
			
 
				+                start: 1340,
			
 
				+                end: 1460,
			
 
				+                color: new SuperMap.ServerColor(118, 15, 3)
			
 
				+            }),
			
 
				+            themeGridRangeItem13 = new SuperMap.ThemeGridRangeItem({
			
 
				+                start: 1460,
			
 
				+                end: 1600,
			
 
				+                color: new SuperMap.ServerColor(112, 32, 7)
			
 
				+            }),
			
 
				+
			
 
				+            themeGridRangeItem14 = new SuperMap.ThemeGridRangeItem({
			
 
				+                start: 1600,
			
 
				+                end: 1800,
			
 
				+                color: new SuperMap.ServerColor(106, 45, 12)
			
 
				+            }),
			
 
				+            themeGridRangeItem15 = new SuperMap.ThemeGridRangeItem({
			
 
				+                start: 1800,
			
 
				+                end: 2000,
			
 
				+                color: new SuperMap.ServerColor(129, 80, 50)
			
 
				+            }),
			
 
				+            themeGridRangeItem16 = new SuperMap.ThemeGridRangeItem({
			
 
				+                start: 2000,
			
 
				+                end: 2167,
			
 
				+                color: new SuperMap.ServerColor(160, 154, 146)
			
 
				+            });
			
 
				+        themeGridRange = new SuperMap.ThemeGridRange({
			
 
				+            reverseColor: false,
			
 
				+            rangeMode: SuperMap.RangeMode.EQUALINTERVAL,
			
 
				+            items: [
			
 
				+                themeGridRangeItem1, themeGridRangeItem2,
			
 
				+                themeGridRangeItem3, themeGridRangeItem4,
			
 
				+                themeGridRangeItem5, themeGridRangeItem6,
			
 
				+                themeGridRangeItem7, themeGridRangeItem8,
			
 
				+                themeGridRangeItem9, themeGridRangeItem10,
			
 
				+                themeGridRangeItem11, themeGridRangeItem12,
			
 
				+                themeGridRangeItem13, themeGridRangeItem14,
			
 
				+                themeGridRangeItem15, themeGridRangeItem16
			
 
				+            ]
			
 
				+        });
			
 
				+        themeParameters = new SuperMap.ThemeParameters({
			
 
				+            datasetNames: ["JingjinTerrain"],
			
 
				+            dataSourceNames: ["Jingjin"],
			
 
				+            joinItems: null,
			
 
				+            themes: [themeGridRange]
			
 
				+        });
			
 
				+
			
 
				+        new mapboxgl.supermap.ThemeService(dataUrl).getThemeInfo(themeParameters, function (serviceResult) {
			
 
				+            var result = serviceResult.result;
			
 
				+            if (result && result.newResourceID) {
			
 
				+                map.addSource("theme", {
			
 
				+                    "type": 'raster',
			
 
				+                    "tiles": [host + '/iserver/services/map-jingjin/rest/maps/京津地区人口分布图_专题图/zxyTileImage.png?z={z}&x={x}&y={y}&transparent=true&cacheEnabled=false&layersID=' + result.newResourceID],
			
 
				+                    "tileSize": 256,
			
 
				+                });
			
 
				+
			
 
				+                map.addLayer({
			
 
				+                    "id": "themeLayer",
			
 
				+                    "type": "raster",
			
 
				+                    "source": "theme",
			
 
				+                });
			
 
				+            }
			
 
				+        })
			
 
				+    }
			
 
				+
			
 
				+    map.on('load', function () {
			
 
				+
			
 
				+        createTheme();
			
 
				+    });
			
 
				+
			
 
				+</script>
			
 
				+
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/03_themeGridUnique.html
+++ b/public/supermap/examples/mapboxgl/03_themeGridUnique.html
@@ -0,0 +1,172 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title data-i18n="resources.title_themeGridUnique"></title>
			
 
				+    <script type="text/javascript" src="../js/include-web.js"></script>
			
 
				+</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>
			
 
				+<script type="text/javascript" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+<span id="show"></span>
			
 
				+<script type="text/javascript">
			
 
				+    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+
			
 
				+    var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+       "with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+       " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
			
 
				+
			
 
				+    var dataUrl = host + "/iserver/services/map-jingjin/rest/maps/京津地区地图";
			
 
				+    var map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [host + '/iserver/services/map-jingjin/rest/maps/京津地区地图/zxyTileImage.png?prjCoordSys='+encodeURIComponent('{"epsgCode":3857}')+'&z={z}&x={x}&y={y}'],
			
 
				+                    "tileSize": 256,
			
 
				+                },
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+                "minzoom": 0,
			
 
				+                "maxzoom": 22
			
 
				+            }]
			
 
				+        },
			
 
				+        center: [117, 40],
			
 
				+        zoom: 6
			
 
				+    });
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+    map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
			
 
				+
			
 
				+    function setItems() {
			
 
				+        var items = [],
			
 
				+            color0 = new SuperMap.ServerColor(198, 244, 240),
			
 
				+            color1 = new SuperMap.ServerColor(176, 244, 188),
			
 
				+            color2 = new SuperMap.ServerColor(218, 251, 178),
			
 
				+            color3 = new SuperMap.ServerColor(220, 236, 145),
			
 
				+            color4 = new SuperMap.ServerColor(96, 198, 66),
			
 
				+            color5 = new SuperMap.ServerColor(20, 142, 53),
			
 
				+            color6 = new SuperMap.ServerColor(85, 144, 55),
			
 
				+            color7 = new SuperMap.ServerColor(171, 168, 38),
			
 
				+            color8 = new SuperMap.ServerColor(235, 165, 9),
			
 
				+            color9 = new SuperMap.ServerColor(203, 89, 2),
			
 
				+            color10 = new SuperMap.ServerColor(157, 25, 1),
			
 
				+            color11 = new SuperMap.ServerColor(118, 15, 3),
			
 
				+            color12 = new SuperMap.ServerColor(112, 32, 7),
			
 
				+            color13 = new SuperMap.ServerColor(106, 45, 12),
			
 
				+            color14 = new SuperMap.ServerColor(129, 80, 50),
			
 
				+            color15 = new SuperMap.ServerColor(160, 154, 146);
			
 
				+
			
 
				+        for (var i = -4; i < 2197; i++) {
			
 
				+            var num = parseInt(i / 135);
			
 
				+            var item = new SuperMap.ThemeGridUniqueItem();
			
 
				+            item.caption = 1;
			
 
				+            item.unique = i;
			
 
				+            item.visible = true;
			
 
				+            switch (num) {
			
 
				+                case 0:
			
 
				+                    item.color = color0;
			
 
				+                    break;
			
 
				+                case 1:
			
 
				+                    item.color = color1;
			
 
				+                    break;
			
 
				+                case 2:
			
 
				+                    item.color = color2;
			
 
				+                    break;
			
 
				+                case 3:
			
 
				+                    item.color = color3;
			
 
				+                    break;
			
 
				+                case 4:
			
 
				+                    item.color = color4;
			
 
				+                    break;
			
 
				+                case 5:
			
 
				+                    item.color = color5;
			
 
				+                    break;
			
 
				+                case 6:
			
 
				+                    item.color = color6;
			
 
				+                    break;
			
 
				+                case 7:
			
 
				+                    item.color = color7;
			
 
				+                    break;
			
 
				+                case 8:
			
 
				+                    item.color = color8;
			
 
				+                    break;
			
 
				+                case 9:
			
 
				+                    item.color = color9;
			
 
				+                    break;
			
 
				+                case 10:
			
 
				+                    item.color = color10;
			
 
				+                    break;
			
 
				+                case 11:
			
 
				+                    item.color = color11;
			
 
				+                    break;
			
 
				+                case 12:
			
 
				+                    item.color = color12;
			
 
				+                    break;
			
 
				+                case 13:
			
 
				+                    item.color = color13;
			
 
				+                    break;
			
 
				+                case 14:
			
 
				+                    item.color = color14;
			
 
				+                    break;
			
 
				+                case 15:
			
 
				+                    item.color = color15;
			
 
				+                    break;
			
 
				+                default:
			
 
				+                    item.color = color0;
			
 
				+                    break;
			
 
				+            }
			
 
				+            items.push(item);
			
 
				+        }
			
 
				+        return items;
			
 
				+    }
			
 
				+
			
 
				+
			
 
				+    function createTheme() {
			
 
				+
			
 
				+        themeGridUnique = new SuperMap.ThemeGridUnique({
			
 
				+            defaultcolor: new SuperMap.ServerColor(0, 0, 0),
			
 
				+            items: setItems()
			
 
				+        });
			
 
				+
			
 
				+        themeParameters = new SuperMap.ThemeParameters({
			
 
				+            datasetNames: ["JingjinTerrain"],
			
 
				+            dataSourceNames: ["Jingjin"],
			
 
				+            themes: [themeGridUnique]
			
 
				+        });
			
 
				+
			
 
				+        new mapboxgl.supermap.ThemeService(dataUrl).getThemeInfo(themeParameters, function (serviceResult) {
			
 
				+            var result = serviceResult.result;
			
 
				+            if (result && result.newResourceID) {
			
 
				+                map.addSource("theme", {
			
 
				+                    "type": 'raster',
			
 
				+                    "tiles": [host + '/iserver/services/map-jingjin/rest/maps/京津地区地图/zxyTileImage.png?z={z}&x={x}&y={y}&noWrap=true&transparent=true&cacheEnabled=false&layersID=' + result.newResourceID],
			
 
				+                    "tileSize": 256,
			
 
				+                });
			
 
				+
			
 
				+                map.addLayer({
			
 
				+                    "id": "themeLayer",
			
 
				+                    "type": "raster",
			
 
				+                    "source": "theme",
			
 
				+                });
			
 
				+            }
			
 
				+        })
			
 
				+    }
			
 
				+
			
 
				+    map.on('load', function () {
			
 
				+
			
 
				+        createTheme();
			
 
				+    });
			
 
				+
			
 
				+</script>
			
 
				+
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/03_themeLabel.html
+++ b/public/supermap/examples/mapboxgl/03_themeLabel.html
@@ -0,0 +1,129 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title data-i18n="resources.title_themeLabel"></title>
			
 
				+    <script type="text/javascript" src="../js/include-web.js"></script>
			
 
				+</head>
			
 
				+<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
			
 
				+<div id="title" style="position:absolute;top: 10px;text-align:center;width:100%;z-index: 10;color: #f7931e" data-i18n="resources.text_popThemeLayer"></div>
			
 
				+<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
			
 
				+<script type="text/javascript" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+<span id="show"></span>
			
 
				+<script type="text/javascript">
			
 
				+    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+
			
 
				+    var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+       "with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+       " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
			
 
				+
			
 
				+    var dataUrl = host + "/iserver/services/map-china400/rest/maps/China";
			
 
				+    var map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [host + '/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?prjCoordSys='+encodeURIComponent('{"epsgCode":3857}')+'&z={z}&x={x}&y={y}'],
			
 
				+                    "tileSize": 256,
			
 
				+                },
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+                "minzoom": 0,
			
 
				+                "maxzoom": 22
			
 
				+            }]
			
 
				+        },
			
 
				+        center: [117, 37],
			
 
				+        zoom: 3
			
 
				+    });
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+    map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
			
 
				+
			
 
				+
			
 
				+    function createTheme() {
			
 
				+        var style1, style2, style3;
			
 
				+        style1 = new SuperMap.ServerTextStyle({
			
 
				+            fontHeight: 4,
			
 
				+            foreColor: new SuperMap.ServerColor(0, 0, 0),
			
 
				+
			
 
				+        });
			
 
				+        style2 = new SuperMap.ServerTextStyle({
			
 
				+            fontHeight: 4,
			
 
				+            foreColor: new SuperMap.ServerColor(155, 30, 45),
			
 
				+        });
			
 
				+        style3 = new SuperMap.ServerTextStyle({
			
 
				+            fontHeight: 4,
			
 
				+            foreColor: new SuperMap.ServerColor(30, 45, 155),
			
 
				+        });
			
 
				+        var themeLabelItem1, themeLabelItem2, themeLabelItem3;
			
 
				+        themeLabelItem1 = new SuperMap.ThemeLabelItem({
			
 
				+            start: 300,//110000,
			
 
				+            end: 3508,//350000,
			
 
				+            style: style1
			
 
				+        });
			
 
				+        themeLabelItem2 = new SuperMap.ThemeLabelItem({
			
 
				+            start: 3508,//350000,
			
 
				+            end: 5508,//550000,
			
 
				+            style: style2
			
 
				+        });
			
 
				+        themeLabelItem3 = new SuperMap.ThemeLabelItem({
			
 
				+            start: 5508,//550000,
			
 
				+            end: 10724,//820000,
			
 
				+            style: style3
			
 
				+        });
			
 
				+
			
 
				+        var themeLabel = new SuperMap.ThemeLabel({
			
 
				+            labelExpression: "NAME",
			
 
				+            rangeExpression: "pop_2014",
			
 
				+            numericPrecision: 0,
			
 
				+            items: [themeLabelItem1, themeLabelItem2, themeLabelItem3],
			
 
				+            background: new SuperMap.ThemeLabelBackground({
			
 
				+                backStyle: new SuperMap.ServerStyle({
			
 
				+                    fillForeColor: new SuperMap.ServerColor(179, 209, 193),
			
 
				+                    fillOpaqueRate: 60,
			
 
				+                    lineWidth: 0.1
			
 
				+                }),
			
 
				+                labelBackShape: "RECT"
			
 
				+            })
			
 
				+        });
			
 
				+        var themeParameters = new SuperMap.ThemeParameters({
			
 
				+            themes: [themeLabel],
			
 
				+            datasetNames: ["China_Province_pg"],
			
 
				+            dataSourceNames: ["China"]
			
 
				+        });
			
 
				+
			
 
				+        new mapboxgl.supermap.ThemeService(dataUrl).getThemeInfo(themeParameters, function (serviceResult) {
			
 
				+            var result = serviceResult.result;
			
 
				+            if (result && result.newResourceID) {
			
 
				+                map.addSource("theme", {
			
 
				+                    "type": 'raster',
			
 
				+                    "tiles": [host + '/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}&transparent=true&cacheEnabled=false&layersID=' + result.newResourceID],
			
 
				+                    "tileSize": 256,
			
 
				+                });
			
 
				+
			
 
				+                map.addLayer({
			
 
				+                    "id": "themeLayer",
			
 
				+                    "type": "raster",
			
 
				+                    "source": "theme",
			
 
				+                });
			
 
				+            }
			
 
				+        })
			
 
				+    }
			
 
				+
			
 
				+    map.on('load', function () {
			
 
				+
			
 
				+        createTheme();
			
 
				+    });
			
 
				+
			
 
				+</script>
			
 
				+
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/03_themeRange.html
+++ b/public/supermap/examples/mapboxgl/03_themeRange.html
@@ -0,0 +1,119 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title data-i18n="resources.title_themeRange"></title>
			
 
				+    <script type="text/javascript" src="../js/include-web.js"></script>
			
 
				+</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>
			
 
				+<script type="text/javascript" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+<span id="show"></span>
			
 
				+<script type="text/javascript">
			
 
				+    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+
			
 
				+    var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+       "with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+       " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
			
 
				+
			
 
				+    var dataUrl = host + "/iserver/services/map-china400/rest/maps/China";
			
 
				+    var map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [host + '/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?prjCoordSys='+encodeURIComponent('{"epsgCode":3857}')+'&z={z}&x={x}&y={y}'],
			
 
				+                    "tileSize": 256,
			
 
				+                },
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+                "minzoom": 0,
			
 
				+                "maxzoom": 22
			
 
				+            }]
			
 
				+        },
			
 
				+        center: [110, 30],
			
 
				+        zoom: 3
			
 
				+    });
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+    map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
			
 
				+
			
 
				+
			
 
				+    function createTheme() {
			
 
				+        var themeRangeItem1, themeRangeItem2,
			
 
				+            themeRangeItem3, themeRange;
			
 
				+        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
			
 
				+            })
			
 
				+        });
			
 
				+        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
			
 
				+            })
			
 
				+        });
			
 
				+        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]
			
 
				+        });
			
 
				+        var themeParameters = new SuperMap.ThemeParameters({
			
 
				+            datasetNames: ["China_Province_pg"],
			
 
				+            dataSourceNames: ["China"],
			
 
				+            joinItems: null,
			
 
				+            themes: [themeRange]
			
 
				+        });
			
 
				+
			
 
				+
			
 
				+        new mapboxgl.supermap.ThemeService(dataUrl).getThemeInfo(themeParameters, function (serviceResult) {
			
 
				+            var result = serviceResult.result;
			
 
				+            if (result && result.newResourceID) {
			
 
				+                map.addSource("theme", {
			
 
				+                    "type": 'raster',
			
 
				+                    "tiles": [host + '/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}&noWrap=true&transparent=true&cacheEnabled=false&layersID=' + result.newResourceID],
			
 
				+                    "tileSize": 256,
			
 
				+                });
			
 
				+
			
 
				+                map.addLayer({
			
 
				+                    "id": "themeLayer",
			
 
				+                    "type": "raster",
			
 
				+                    "source": "theme",
			
 
				+                });
			
 
				+            }
			
 
				+        })
			
 
				+    }
			
 
				+
			
 
				+    map.on('load', function () {
			
 
				+
			
 
				+        createTheme();
			
 
				+    });
			
 
				+
			
 
				+</script>
			
 
				+
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/03_themeUnique.html
+++ b/public/supermap/examples/mapboxgl/03_themeUnique.html
@@ -0,0 +1,250 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title data-i18n="resources.title_themeUnique"></title>
			
 
				+    <script type="text/javascript" src="../js/include-web.js"></script>
			
 
				+</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>
			
 
				+<script type="text/javascript" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+<span id="show"></span>
			
 
				+<script type="text/javascript">
			
 
				+    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+
			
 
				+    var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+       "with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+       " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
			
 
				+
			
 
				+    var dataUrl = host + "/iserver/services/map-china400/rest/maps/China";
			
 
				+    var map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [host + '/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?prjCoordSys='+encodeURIComponent('{"epsgCode":3857}')+'&z={z}&x={x}&y={y}'],
			
 
				+                    "tileSize": 256,
			
 
				+                },
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+                "minzoom": 0,
			
 
				+                "maxzoom": 22
			
 
				+            }]
			
 
				+        },
			
 
				+        center: [110, 37],
			
 
				+        zoom: 3
			
 
				+    });
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+    map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
			
 
				+
			
 
				+    function createTheme() {
			
 
				+        var style1, style2, style3, style4, style5, style6;
			
 
				+        style1 = new SuperMap.ServerStyle({
			
 
				+            fillForeColor: new SuperMap.ServerColor(248, 203, 249),
			
 
				+            lineColor: new SuperMap.ServerColor(255, 255, 255),
			
 
				+            lineWidth: 0.1
			
 
				+        });
			
 
				+        style2 = new SuperMap.ServerStyle({
			
 
				+            fillForeColor: new SuperMap.ServerColor(196, 255, 189),
			
 
				+            lineColor: new SuperMap.ServerColor(255, 255, 255),
			
 
				+            lineWidth: 0.1
			
 
				+        });
			
 
				+        style3 = new SuperMap.ServerStyle({
			
 
				+            fillForeColor: new SuperMap.ServerColor(255, 173, 173),
			
 
				+            lineColor: new SuperMap.ServerColor(255, 255, 255),
			
 
				+            lineWidth: 0.1
			
 
				+        });
			
 
				+        style4 = new SuperMap.ServerStyle({
			
 
				+            fillForeColor: new SuperMap.ServerColor(255, 239, 168),
			
 
				+            lineColor: new SuperMap.ServerColor(255, 255, 255),
			
 
				+            lineWidth: 0.1
			
 
				+        });
			
 
				+        style5 = new SuperMap.ServerStyle({
			
 
				+            fillForeColor: new SuperMap.ServerColor(173, 209, 255),
			
 
				+            lineColor: new SuperMap.ServerColor(255, 255, 255),
			
 
				+            lineWidth: 0.1
			
 
				+        });
			
 
				+        style6 = new SuperMap.ServerStyle({
			
 
				+            fillForeColor: new SuperMap.ServerColor(132, 164, 232),
			
 
				+            lineColor: new SuperMap.ServerColor(255, 255, 255),
			
 
				+            lineWidth: 0.1
			
 
				+        });
			
 
				+
			
 
				+        var themeUniqueIteme1 = new SuperMap.ThemeUniqueItem({
			
 
				+                unique: "黑龙江省",
			
 
				+                style: style1
			
 
				+            }),
			
 
				+            themeUniqueIteme2 = new SuperMap.ThemeUniqueItem({
			
 
				+                unique: "湖北省",
			
 
				+                style: style2
			
 
				+            }),
			
 
				+            themeUniqueIteme3 = new SuperMap.ThemeUniqueItem({
			
 
				+                unique: "吉林省",
			
 
				+                style: style3
			
 
				+            }),
			
 
				+            themeUniqueIteme4 = new SuperMap.ThemeUniqueItem({
			
 
				+                unique: "内蒙古自治区",
			
 
				+                style: style4
			
 
				+            }),
			
 
				+            themeUniqueIteme5 = new SuperMap.ThemeUniqueItem({
			
 
				+                unique: "青海省",
			
 
				+                style: style5
			
 
				+            }),
			
 
				+            themeUniqueIteme6 = new SuperMap.ThemeUniqueItem({
			
 
				+                unique: "新疆维吾尔自治区",
			
 
				+                style: style6
			
 
				+            }),
			
 
				+            themeUniqueIteme7 = new SuperMap.ThemeUniqueItem({
			
 
				+                unique: "云南省",
			
 
				+                style: style1
			
 
				+            }),
			
 
				+            themeUniqueIteme8 = new SuperMap.ThemeUniqueItem({
			
 
				+                unique: "四川省",
			
 
				+                style: style4
			
 
				+            }),
			
 
				+            themeUniqueIteme9 = new SuperMap.ThemeUniqueItem({
			
 
				+                unique: "贵州省",
			
 
				+                style: style3
			
 
				+            }),
			
 
				+            themeUniqueIteme10 = new SuperMap.ThemeUniqueItem({
			
 
				+                unique: "甘肃省",
			
 
				+                style: style3
			
 
				+            }),
			
 
				+            themeUniqueIteme11 = new SuperMap.ThemeUniqueItem({
			
 
				+                unique: "宁夏回族自治区",
			
 
				+                style: style5
			
 
				+            }),
			
 
				+            themeUniqueIteme12 = new SuperMap.ThemeUniqueItem({
			
 
				+                unique: "重庆市",
			
 
				+                style: style6
			
 
				+            }),
			
 
				+            themeUniqueIteme13 = new SuperMap.ThemeUniqueItem({
			
 
				+                unique: "山东省",
			
 
				+                style: style1
			
 
				+            }),
			
 
				+            themeUniqueIteme14 = new SuperMap.ThemeUniqueItem({
			
 
				+                unique: "安徽省",
			
 
				+                style: style2
			
 
				+            }),
			
 
				+            themeUniqueIteme15 = new SuperMap.ThemeUniqueItem({
			
 
				+                unique: "江西省",
			
 
				+                style: style3
			
 
				+            }),
			
 
				+            themeUniqueIteme16 = new SuperMap.ThemeUniqueItem({
			
 
				+                unique: "浙江省",
			
 
				+                style: style4
			
 
				+            }),
			
 
				+            themeUniqueIteme17 = new SuperMap.ThemeUniqueItem({
			
 
				+                unique: "台湾省",
			
 
				+                style: style2
			
 
				+            }),
			
 
				+            themeUniqueIteme18 = new SuperMap.ThemeUniqueItem({
			
 
				+                unique: "江苏省",
			
 
				+                style: style6
			
 
				+            }),
			
 
				+            themeUniqueIteme19 = new SuperMap.ThemeUniqueItem({
			
 
				+                unique: "湖南省",
			
 
				+                style: style5
			
 
				+            }),
			
 
				+            themeUniqueIteme20 = new SuperMap.ThemeUniqueItem({
			
 
				+                unique: "河南省",
			
 
				+                style: style4
			
 
				+            }),
			
 
				+            themeUniqueIteme21 = new SuperMap.ThemeUniqueItem({
			
 
				+                unique: "河北省",
			
 
				+                style: style3
			
 
				+            }),
			
 
				+            themeUniqueIteme22 = new SuperMap.ThemeUniqueItem({
			
 
				+                unique: "福建省",
			
 
				+                style: style5
			
 
				+            }),
			
 
				+            themeUniqueIteme23 = new SuperMap.ThemeUniqueItem({
			
 
				+                unique: "广西壮族自治区",
			
 
				+                style: style6
			
 
				+            }),
			
 
				+            themeUniqueIteme24 = new SuperMap.ThemeUniqueItem({
			
 
				+                unique: "西藏自治区",
			
 
				+                style: style2
			
 
				+            }),
			
 
				+            themeUniqueIteme25 = new SuperMap.ThemeUniqueItem({
			
 
				+                unique: "广东省",
			
 
				+                style: style4
			
 
				+            }),
			
 
				+            themeUniqueIteme26 = new SuperMap.ThemeUniqueItem({
			
 
				+                unique: "山西省",
			
 
				+                style: style2
			
 
				+            }),
			
 
				+            themeUniqueIteme27 = new SuperMap.ThemeUniqueItem({
			
 
				+                unique: "陕西省",
			
 
				+                style: style1
			
 
				+            }),
			
 
				+            themeUniqueIteme28 = new SuperMap.ThemeUniqueItem({
			
 
				+                unique: "天津市",
			
 
				+                style: style5
			
 
				+            }),
			
 
				+            themeUniqueIteme29 = new SuperMap.ThemeUniqueItem({
			
 
				+                unique: "北京市",
			
 
				+                style: style2
			
 
				+            }),
			
 
				+
			
 
				+            themeUniqueIteme30 = new SuperMap.ThemeUniqueItem({
			
 
				+                unique: "辽宁省",
			
 
				+                style: style1
			
 
				+            });
			
 
				+
			
 
				+        var themeUniqueItemes = [
			
 
				+            themeUniqueIteme1, themeUniqueIteme2, themeUniqueIteme3, themeUniqueIteme4, themeUniqueIteme5,
			
 
				+            themeUniqueIteme6, themeUniqueIteme7, themeUniqueIteme8, themeUniqueIteme9, themeUniqueIteme10,
			
 
				+            themeUniqueIteme11, themeUniqueIteme12, themeUniqueIteme13, themeUniqueIteme14, themeUniqueIteme15,
			
 
				+            themeUniqueIteme16, themeUniqueIteme17, themeUniqueIteme18, themeUniqueIteme19, themeUniqueIteme20,
			
 
				+            themeUniqueIteme21, themeUniqueIteme22, themeUniqueIteme23, themeUniqueIteme24, themeUniqueIteme25,
			
 
				+            themeUniqueIteme26, themeUniqueIteme27, themeUniqueIteme28, themeUniqueIteme29, themeUniqueIteme30
			
 
				+        ];
			
 
				+
			
 
				+        var themeUnique = new SuperMap.ThemeUnique({
			
 
				+            uniqueExpression: "Name",
			
 
				+            items: themeUniqueItemes,
			
 
				+            defaultStyle: style1
			
 
				+        });
			
 
				+        var themeParameters = new SuperMap.ThemeParameters({
			
 
				+            datasetNames: ["China_Province_pg"],
			
 
				+            dataSourceNames: ["China"],
			
 
				+            themes: [themeUnique]
			
 
				+        });
			
 
				+
			
 
				+        new mapboxgl.supermap.ThemeService(dataUrl).getThemeInfo(themeParameters, function (serviceResult) {
			
 
				+            var result = serviceResult.result;
			
 
				+            if (result && result.newResourceID) {
			
 
				+                map.addSource("theme", {
			
 
				+                    "type": 'raster',
			
 
				+                    "tiles": [host + '/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}&noWrap=true&transparent=true&cacheEnabled=false&layersID=' + result.newResourceID],
			
 
				+                    "tileSize": 256,
			
 
				+                });
			
 
				+
			
 
				+                map.addLayer({
			
 
				+                    "id": "themeLayer",
			
 
				+                    "type": "raster",
			
 
				+                    "source": "theme",
			
 
				+                });
			
 
				+            }
			
 
				+        })
			
 
				+    }
			
 
				+
			
 
				+    map.on('load', function () {
			
 
				+
			
 
				+        createTheme();
			
 
				+    });
			
 
				+
			
 
				+</script>
			
 
				+
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/04_bufferAnalystService.html
+++ b/public/supermap/examples/mapboxgl/04_bufferAnalystService.html
@@ -0,0 +1,116 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title data-i18n="resources.title_bufferAnalystService"></title>
			
 
				+    <script type="text/javascript" src="../js/include-web.js"></script>
			
 
				+</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>
			
 
				+<script type="text/javascript" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+<script type="text/javascript">
			
 
				+    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+    var map,
			
 
				+        attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+            " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+            " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ",
			
 
				+        baseUrl = host + "/iserver/services/map-jingjin/rest/maps/京津地区地图/zxyTileImage.png?z={z}&x={x}&y={y}",
			
 
				+        serviceUrl = host + "/iserver/services/spatialanalyst-sample/restjsr/spatialanalyst";
			
 
				+    map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [baseUrl],
			
 
				+                    "tileSize": 256
			
 
				+                }
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+                "minzoom": 2,
			
 
				+                "maxzoom": 18
			
 
				+            }]
			
 
				+        },
			
 
				+        center: [116.28094998209556, 39.897168019388474],
			
 
				+        zoom: 12
			
 
				+    });
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+    map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
			
 
				+
			
 
				+    map.on("load", function () {
			
 
				+        bufferAnalystProcess();
			
 
				+    });
			
 
				+
			
 
				+    function bufferAnalystProcess() {
			
 
				+        map.addLayer({
			
 
				+            "id": "route",
			
 
				+            "type": "line",
			
 
				+            "source": {
			
 
				+                "type": "geojson",
			
 
				+                "data": {
			
 
				+                    "type": "Feature",
			
 
				+                    "geometry": {
			
 
				+                        "type": "LineString",
			
 
				+                        "coordinates": [
			
 
				+                            [116.2143386597, 39.8959419733],
			
 
				+                            [116.2156351162, 39.8963250173],
			
 
				+                            [116.2182280292, 39.8968111885],
			
 
				+                            [116.2740019864, 39.8970124079],
			
 
				+                            [116.3103285499, 39.8970574832],
			
 
				+                            [116.3321510064, 39.8970392162],
			
 
				+                            [116.3377051439, 39.8973437531],
			
 
				+                            [116.3463089006, 39.8978391816],
			
 
				+                        ]
			
 
				+                    }
			
 
				+                }
			
 
				+            },
			
 
				+            "layout": {
			
 
				+                "line-join": "round",
			
 
				+                "line-cap": "round"
			
 
				+            },
			
 
				+            "paint": {
			
 
				+                "line-color": "#888",
			
 
				+                "line-width": 8
			
 
				+            }
			
 
				+        });
			
 
				+        //缓冲区分析参数
			
 
				+        var dsBufferAnalystParameters = new SuperMap.DatasetBufferAnalystParameters({
			
 
				+            dataset: "Road_L@Jingjin",
			
 
				+            filterQueryParameter: new SuperMap.FilterParameter({
			
 
				+                attributeFilter: "NAME='莲花池东路'"
			
 
				+            }),
			
 
				+            bufferSetting: new SuperMap.BufferSetting({
			
 
				+                endType: SuperMap.BufferEndType.ROUND,
			
 
				+                leftDistance: {value: 300},
			
 
				+                rightDistance: {value: 300},
			
 
				+                semicircleLineSegment: 10,
			
 
				+                radiusUnit: 'METER'
			
 
				+            })
			
 
				+        });
			
 
				+        //缓冲区分析服务
			
 
				+        new mapboxgl.supermap.SpatialAnalystService(serviceUrl).bufferAnalysis(dsBufferAnalystParameters, function (serviceResult) {
			
 
				+            map.addLayer({
			
 
				+                "id": "queryDatas",
			
 
				+                "type": "fill", /* fill类型一般用来表示一个面，一般较大 */
			
 
				+                "source": {
			
 
				+                    "type": "geojson",
			
 
				+                    "data": serviceResult.result.recordset.features
			
 
				+                },
			
 
				+                "paint": {
			
 
				+                    "fill-color": "red", /* 填充的颜色 */
			
 
				+                    "fill-opacity": 0.4  /* 透明度 */
			
 
				+                },
			
 
				+            });
			
 
				+        })
			
 
				+    }
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/04_bufferAnalystService_geometry.html
+++ b/public/supermap/examples/mapboxgl/04_bufferAnalystService_geometry.html
@@ -0,0 +1,148 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title data-i18n="resources.title_bufferAnalystServiceGeometry"></title>
			
 
				+    <script type="text/javascript" src="../js/include-web.js"></script>
			
 
				+</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>
			
 
				+<script type="text/javascript" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+<script type="text/javascript">
			
 
				+    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+    var map,
			
 
				+        attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+            " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+            " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ",
			
 
				+        baseUrl = host + "/iserver/services/map-jingjin/rest/maps/京津地区地图/zxyTileImage.png?z={z}&x={x}&y={y}",
			
 
				+        serviceUrl = host + "/iserver/services/spatialanalyst-sample/restjsr/spatialanalyst";
			
 
				+    map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [baseUrl],
			
 
				+                    "tileSize": 256
			
 
				+                }
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+            }]
			
 
				+        },
			
 
				+        center: [116.2740019864, 39.8970124079],
			
 
				+        zoom: 12
			
 
				+    });
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+    map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
			
 
				+
			
 
				+    map.on("load", function () {
			
 
				+        bufferAnalystFromGeometry();
			
 
				+    });
			
 
				+
			
 
				+    function bufferAnalystFromGeometry() {
			
 
				+        var pointList = [
			
 
				+            [116.1916654036, 39.8888542507],
			
 
				+            [116.2031567225, 39.8888542507],
			
 
				+            [116.2156351162, 39.8963250173],
			
 
				+            [116.2740019864, 39.8970124079],
			
 
				+            [116.3103285499, 39.8970574832],
			
 
				+            [116.3321510064, 39.8970392162],
			
 
				+            [116.3377051439, 39.8973437531],
			
 
				+            [116.3463089006, 39.8978391816],
			
 
				+        ];
			
 
				+
			
 
				+        //加载线
			
 
				+        var geometryLine = {
			
 
				+            "type": "Feature",
			
 
				+            "geometry": {
			
 
				+                "type": "LineString",
			
 
				+                "coordinates": pointList
			
 
				+            }
			
 
				+        };
			
 
				+        map.addLayer({
			
 
				+            "id": "bufferLine",
			
 
				+            "type": "line",
			
 
				+            "source": {
			
 
				+                "type": "geojson",
			
 
				+                "data": geometryLine
			
 
				+            },
			
 
				+            "layout": {
			
 
				+                "line-join": "round",
			
 
				+                "line-cap": "round"
			
 
				+            },
			
 
				+            "paint": {
			
 
				+                "line-color": "red",
			
 
				+                "line-width": 4
			
 
				+            },
			
 
				+        });
			
 
				+
			
 
				+        //加载点
			
 
				+        var pointGeometryFetures = [];
			
 
				+        for (i = 0; i < pointList.length; i++) {
			
 
				+            pointGeometryFetures.push({
			
 
				+                "type": "Feature",
			
 
				+                "geometry": {
			
 
				+                    "type": "Point",
			
 
				+                    "coordinates": pointList[i],
			
 
				+                }
			
 
				+            });
			
 
				+        }
			
 
				+        map.addLayer({
			
 
				+            "id": "bufferPoint",
			
 
				+            "type": "circle",
			
 
				+            "source": {
			
 
				+                "type": "geojson",
			
 
				+                "data": {
			
 
				+                    "type": "FeatureCollection",
			
 
				+                    "features": pointGeometryFetures
			
 
				+                }
			
 
				+            },
			
 
				+            "paint": {
			
 
				+                "circle-radius": 6, /* 圆的直径，单位像素 */
			
 
				+                "circle-color": "black", /* 圆的颜色 */
			
 
				+            },
			
 
				+            "filter": ["==", "$type", "Point"],
			
 
				+        });
			
 
				+
			
 
				+        var geoBufferAnalystParams = new SuperMap.GeometryBufferAnalystParameters({
			
 
				+            sourceGeometry: geometryLine,
			
 
				+            sourceGeometrySRID: 4326,
			
 
				+            bufferSetting: new SuperMap.BufferSetting({
			
 
				+                endType: SuperMap.BufferEndType.ROUND,
			
 
				+                leftDistance: new SuperMap.BufferDistance({value: 300}),
			
 
				+                rightDistance: new SuperMap.BufferDistance({value: 300}),
			
 
				+                radiusUnit: "METER",
			
 
				+                semicircleLineSegment: 10
			
 
				+            })
			
 
				+
			
 
				+        });
			
 
				+        new mapboxgl.supermap.SpatialAnalystService(serviceUrl).bufferAnalysis(geoBufferAnalystParams, function (serviceResult) {
			
 
				+            map.addSource("queryDatas", {
			
 
				+                "type": "geojson",
			
 
				+                "data": {
			
 
				+                    "type": "FeatureCollection",
			
 
				+                    "features": [serviceResult.result.resultGeometry]
			
 
				+                }
			
 
				+            });
			
 
				+            map.addLayer({
			
 
				+                "id": "queryDatas",
			
 
				+                "type": "fill",
			
 
				+                "source": "queryDatas",
			
 
				+                "paint": {
			
 
				+                    "fill-color": "red", /* 填充的颜色 */
			
 
				+                    "fill-opacity": 0.4  /* 透明度 */
			
 
				+                },
			
 
				+            });
			
 
				+        });
			
 
				+    }
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/04_geometryBatchAnalystService.html
+++ b/public/supermap/examples/mapboxgl/04_geometryBatchAnalystService.html
@@ -0,0 +1,290 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title data-i18n="resources.title_geometryBatchAnalystService"></title>
			
 
				+    <script type="text/javascript" src="../js/include-web.js"></script>
			
 
				+</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>
			
 
				+<script type="text/javascript" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+<script type="text/javascript">
			
 
				+    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+    var map,
			
 
				+        attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+            " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+            " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ",
			
 
				+        baseUrl = host + "/iserver/services/map-jingjin/rest/maps/京津地区地图/zxyTileImage.png?z={z}&x={x}&y={y}",
			
 
				+        serviceUrl = host + "/iserver/services/spatialanalyst-sample/restjsr/spatialanalyst";
			
 
				+    map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [baseUrl],
			
 
				+                    "tileSize": 256
			
 
				+                }
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+            }]
			
 
				+        },
			
 
				+        center: [117, 40],
			
 
				+        zoom: 8
			
 
				+    });
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+    map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
			
 
				+
			
 
				+    map.on("load", function () {
			
 
				+        batchAnalystFromGeometry();
			
 
				+    });
			
 
				+
			
 
				+    function batchAnalystFromGeometry() {
			
 
				+        //缓冲区分析数据：
			
 
				+        var bufferLine = {
			
 
				+            "type": "Feature",
			
 
				+            "geometry": {
			
 
				+                "type": "LineString",
			
 
				+                "coordinates": [[117, 40.50], [118, 40]]
			
 
				+            }
			
 
				+        };
			
 
				+        var bufferPoint = {
			
 
				+            "type": "Feature",
			
 
				+            "geometry": {
			
 
				+                "type": "Point",
			
 
				+                "coordinates": [117, 40]
			
 
				+            }
			
 
				+        };
			
 
				+        //叠加分析数据：
			
 
				+        var sourceGeometry = {
			
 
				+            "type": "Feature",
			
 
				+            "geometry": {
			
 
				+                "type": "Polygon",
			
 
				+                "coordinates": [[[116, 39.75],
			
 
				+                    [116, 39.15],
			
 
				+                    [117, 39.15],
			
 
				+                    [117, 39.85],
			
 
				+                    [116, 39.85]]]
			
 
				+            }
			
 
				+        };
			
 
				+        var operateGeometry = {
			
 
				+            "type": "Feature",
			
 
				+            "geometry": {
			
 
				+                "type": "Polygon",
			
 
				+                "coordinates": [[[116.25, 40.5],
			
 
				+                    [116.25, 38.5],
			
 
				+                    [116.75, 38.5],
			
 
				+                    [116.75, 40.5],
			
 
				+                    [116.25, 40.5]]]
			
 
				+            }
			
 
				+        };
			
 
				+
			
 
				+        //数据加载到地图：
			
 
				+        map.addSource("analystSource", {
			
 
				+            "type": "geojson",
			
 
				+            "data": {
			
 
				+                "type": "FeatureCollection",
			
 
				+                "features": [bufferLine, bufferPoint, sourceGeometry, operateGeometry]
			
 
				+            }
			
 
				+        });
			
 
				+
			
 
				+        //绘制缓冲区线
			
 
				+        map.addLayer({
			
 
				+            "id": "bufferLine",
			
 
				+            "type": "line",
			
 
				+            "source": "analystSource",
			
 
				+            "layout": {
			
 
				+                "line-join": "round",
			
 
				+                "line-cap": "round"
			
 
				+            },
			
 
				+            "paint": {
			
 
				+                "line-color": "red",
			
 
				+                "line-width": 4
			
 
				+            },
			
 
				+            "filter": ["==", "$type", "LineString"]
			
 
				+        });
			
 
				+
			
 
				+        //绘制缓冲区点
			
 
				+        map.addLayer({
			
 
				+            "id": "bufferPoint",
			
 
				+            "type": "circle",
			
 
				+            "source": "analystSource",
			
 
				+            "paint": {
			
 
				+                "circle-radius": 6, /* 圆的直径，单位像素 */
			
 
				+                "circle-color": "blue", /* 圆的颜色 */
			
 
				+            },
			
 
				+            "filter": ["==", "$type", "Point"],
			
 
				+        });
			
 
				+
			
 
				+        //绘制叠加分析面：
			
 
				+        map.addLayer({
			
 
				+            "id": "overlayPolygon",
			
 
				+            "type": "fill",
			
 
				+            "source": "analystSource",
			
 
				+            'paint': {
			
 
				+                'fill-outline-color': 'blue',
			
 
				+                'fill-color': 'rgba(0, 0, 255, 0.1)'
			
 
				+            },
			
 
				+            "filter": ["==", "$type", "Polygon"],
			
 
				+        });
			
 
				+
			
 
				+        //缓冲区分析参数
			
 
				+        var geoBufferAnalystParams = {
			
 
				+            analystName: "buffer",
			
 
				+            param: new SuperMap.GeometryBufferAnalystParameters({
			
 
				+                sourceGeometry: bufferLine,
			
 
				+                sourceGeometrySRID: 4326,
			
 
				+                bufferSetting: new SuperMap.BufferSetting({
			
 
				+                    endType: SuperMap.BufferEndType.ROUND,
			
 
				+                    leftDistance: new SuperMap.BufferDistance({value: 5000}),
			
 
				+                    rightDistance: new SuperMap.BufferDistance({value: 5000}),
			
 
				+                    radiusUnit: "METER",
			
 
				+                    semicircleLineSegment: 10
			
 
				+                })
			
 
				+
			
 
				+            })
			
 
				+        };
			
 
				+        var geoBufferAnalystParams_Point = {
			
 
				+            analystName: "buffer",
			
 
				+            param: new SuperMap.GeometryBufferAnalystParameters({
			
 
				+                sourceGeometry: bufferPoint,
			
 
				+                sourceGeometrySRID: 4326,
			
 
				+                bufferSetting: new SuperMap.BufferSetting({
			
 
				+                    endType: SuperMap.BufferEndType.ROUND,
			
 
				+                    leftDistance: new SuperMap.BufferDistance({value: 10000}),
			
 
				+                    rightDistance: new SuperMap.BufferDistance({value: 10000}),
			
 
				+                    radiusUnit: "METER",
			
 
				+                    semicircleLineSegment: 10
			
 
				+                })
			
 
				+
			
 
				+            })
			
 
				+        };
			
 
				+
			
 
				+        //叠加分析参数
			
 
				+        var OverlayBatchAnalystParameters = {
			
 
				+            analystName: "overlay",
			
 
				+            param: new SuperMap.GeometryOverlayAnalystParameters({
			
 
				+                sourceGeometry: sourceGeometry,
			
 
				+                operateGeometry: operateGeometry,
			
 
				+                operation: SuperMap.OverlayOperationType.CLIP
			
 
				+            })
			
 
				+        };
			
 
				+
			
 
				+        //批量分析参数
			
 
				+        var paramter = [geoBufferAnalystParams, OverlayBatchAnalystParameters, geoBufferAnalystParams_Point];
			
 
				+
			
 
				+        //批量分析
			
 
				+        new mapboxgl.supermap.SpatialAnalystService(serviceUrl).geometrybatchAnalysis(paramter, function (serviceResult) {
			
 
				+            //结果展示
			
 
				+            map.addSource("bufferResultLine", {
			
 
				+                "type": "geojson",
			
 
				+                "data": {
			
 
				+                    "type": "FeatureCollection",
			
 
				+                    "features": [
			
 
				+                        serviceResult.result[0].resultGeometry,
			
 
				+                    ]
			
 
				+                }
			
 
				+            });
			
 
				+            map.addSource("bufferResultPoint", {
			
 
				+                "type": "geojson",
			
 
				+                "data": {
			
 
				+                    "type": "FeatureCollection",
			
 
				+                    "features": [
			
 
				+                        serviceResult.result[2].resultGeometry,
			
 
				+                    ]
			
 
				+                }
			
 
				+            });
			
 
				+            map.addSource("overlayResult", {
			
 
				+                "type": "geojson",
			
 
				+                "data": {
			
 
				+                    "type": "FeatureCollection",
			
 
				+                    "features": [
			
 
				+                        serviceResult.result[1].resultGeometry,
			
 
				+                    ]
			
 
				+                }
			
 
				+            });
			
 
				+            map.addLayer({
			
 
				+                "id": "bufferResultLayer_line",
			
 
				+                "type": "fill",
			
 
				+                "source": "bufferResultLine",
			
 
				+                "paint": {
			
 
				+                    "fill-color": "red", /* 填充的颜色 */
			
 
				+                    "fill-opacity": 0.4  /* 透明度 */
			
 
				+                },
			
 
				+            });
			
 
				+            map.addLayer({
			
 
				+                "id": "bufferResultLayer_point",
			
 
				+                "type": "fill",
			
 
				+                "source": "bufferResultPoint",
			
 
				+                "paint": {
			
 
				+                    "fill-color": "red", /* 填充的颜色 */
			
 
				+                    "fill-opacity": 0.4  /* 透明度 */
			
 
				+                },
			
 
				+            });
			
 
				+            map.addLayer({
			
 
				+                "id": "overlayResultLayer",
			
 
				+                "type": "fill",
			
 
				+                "source": "overlayResult",
			
 
				+                "paint": {
			
 
				+                    "fill-color": "red", /* 填充的颜色 */
			
 
				+                    "fill-opacity": 0.4  /* 透明度 */
			
 
				+                },
			
 
				+            });
			
 
				+
			
 
				+            var bufferPop = new mapboxgl.Popup()
			
 
				+                .setLngLat([117.15, 40.45])
			
 
				+                .setHTML("<h4>" + resources.text_bufferAnalystResult + "</h4>");
			
 
				+            var overlayPop = new mapboxgl.Popup()
			
 
				+                .setLngLat([116.35, 39.75])
			
 
				+                .setHTML("<h4>" + resources.text_overlayAnalystResult + "</h4>");
			
 
				+
			
 
				+
			
 
				+            map.on('mouseenter', 'bufferResultLayer_line', function (e) {
			
 
				+                bufferPop.remove();
			
 
				+                map.getCanvas().style.cursor = 'pointer';
			
 
				+
			
 
				+                bufferPop.setLngLat([117.5, 40.25])
			
 
				+                    .setHTML("<h4>" + resources.text_bufferAnalystResult + "</h4>")
			
 
				+                    .addTo(map);
			
 
				+            });
			
 
				+            map.on('mouseleave', 'bufferResultLayer_line', function () {
			
 
				+                map.getCanvas().style.cursor = '';
			
 
				+                bufferPop.remove();
			
 
				+            });
			
 
				+            map.on('mouseenter', 'bufferResultLayer_point', function (e) {
			
 
				+                bufferPop.remove();
			
 
				+                map.getCanvas().style.cursor = 'pointer';
			
 
				+
			
 
				+                bufferPop.setLngLat([117, 40])
			
 
				+                    .setHTML("<h4>" + resources.text_bufferAnalystResult + "</h4>")
			
 
				+                    .addTo(map);
			
 
				+            });
			
 
				+            map.on('mouseleave', 'bufferResultLayer_point', function () {
			
 
				+                map.getCanvas().style.cursor = '';
			
 
				+                bufferPop.remove();
			
 
				+            });
			
 
				+
			
 
				+            map.on('mouseenter', 'overlayResultLayer', function (e) {
			
 
				+                map.getCanvas().style.cursor = 'pointer';
			
 
				+
			
 
				+                overlayPop.setLngLat([116.5, 39.5])
			
 
				+                    .setHTML("<h4>" + resources.text_overlayAnalystResult + "</h4>")
			
 
				+                    .addTo(map);
			
 
				+            });
			
 
				+            map.on('mouseleave', 'overlayResultLayer', function () {
			
 
				+                map.getCanvas().style.cursor = '';
			
 
				+                overlayPop.remove();
			
 
				+            });
			
 
				+        });
			
 
				+    }
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/04_geometryOverlayBatchAnalystService.html
+++ b/public/supermap/examples/mapboxgl/04_geometryOverlayBatchAnalystService.html
@@ -0,0 +1,160 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title data-i18n="resources.title_geometryOverlayBatchAnalystService"></title>
			
 
				+    <script type="text/javascript" src="../js/include-web.js"></script>
			
 
				+</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>
			
 
				+<script type="text/javascript" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+<script type="text/javascript">
			
 
				+    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+    var map,
			
 
				+        attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+            " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+            " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ",
			
 
				+        baseUrl = host + "/iserver/services/map-jingjin/rest/maps/京津地区地图/zxyTileImage.png?z={z}&x={x}&y={y}",
			
 
				+        serviceUrl = host + "/iserver/services/spatialanalyst-sample/restjsr/spatialanalyst";
			
 
				+    map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [baseUrl],
			
 
				+                    "tileSize": 256
			
 
				+                }
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+            }]
			
 
				+        },
			
 
				+        center: [117, 40],
			
 
				+        zoom: 8
			
 
				+    });
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+    map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
			
 
				+
			
 
				+    map.on("load", function () {
			
 
				+        overlayerBatchAnalystFromGeometry();
			
 
				+    });
			
 
				+
			
 
				+    function overlayerBatchAnalystFromGeometry() {
			
 
				+        //叠加分析数据：
			
 
				+        var sourceGeometry1 = {
			
 
				+            "type": "Feature",
			
 
				+            "geometry": {
			
 
				+                "type": "Polygon",
			
 
				+                "coordinates": [[[116.25, 40.25],
			
 
				+                    [116.25, 39.75],
			
 
				+                    [117.25, 39.75],
			
 
				+                    [117.25, 40.25],
			
 
				+                    [116.25, 40.25]]]
			
 
				+            }
			
 
				+        };
			
 
				+        var sourceGeometry2 = {
			
 
				+            "type": "Feature",
			
 
				+            "geometry": {
			
 
				+                "type": "Polygon",
			
 
				+                "coordinates": [[[116.75, 40.25],
			
 
				+                    [116.75, 39.75],
			
 
				+                    [117.75, 39.75],
			
 
				+                    [117.75, 40.25],
			
 
				+                    [116.75, 40.25]]]
			
 
				+            }
			
 
				+        };
			
 
				+        var operateGeometry1 = {
			
 
				+            "type": "Feature",
			
 
				+            "geometry": {
			
 
				+                "type": "Polygon",
			
 
				+                "coordinates": [[[116.75, 39.75],
			
 
				+                    [117.25, 39.75],
			
 
				+                    [117.25, 40.75],
			
 
				+                    [116.75, 40.75],
			
 
				+                    [116.75, 39.75]]]
			
 
				+            }
			
 
				+        };
			
 
				+
			
 
				+        var operateGeometry2 = {
			
 
				+            "type": "Feature",
			
 
				+            "geometry": {
			
 
				+                "type": "Polygon",
			
 
				+                "coordinates": [[[116.75, 40.25],
			
 
				+                    [116.75, 39.25],
			
 
				+                    [117.25, 39.25],
			
 
				+                    [117.25, 40.25],
			
 
				+                    [116.75, 40.25]]]
			
 
				+            }
			
 
				+        };
			
 
				+
			
 
				+        //数据加载到地图：
			
 
				+        map.addSource("analystSource", {
			
 
				+            "type": "geojson",
			
 
				+            "data": {
			
 
				+                "type": "FeatureCollection",
			
 
				+                "features": [sourceGeometry1, sourceGeometry2, operateGeometry1, operateGeometry2]
			
 
				+            }
			
 
				+        });
			
 
				+        //绘制叠加分析面：
			
 
				+        map.addLayer({
			
 
				+            "id": "overlayPolygon",
			
 
				+            "type": "fill",
			
 
				+            "source": "analystSource",
			
 
				+            'paint': {
			
 
				+                'fill-outline-color': 'blue',
			
 
				+                'fill-color': 'rgba(0, 0, 255, 0.1)'
			
 
				+            },
			
 
				+        });
			
 
				+
			
 
				+        var OverlayBatchAnalystParameters = new SuperMap.GeometryOverlayAnalystParameters({
			
 
				+            sourceGeometries: [sourceGeometry1, sourceGeometry2],
			
 
				+            operateGeometries: [operateGeometry1, operateGeometry2],
			
 
				+            operation: SuperMap.OverlayOperationType.INTERSECT
			
 
				+        });
			
 
				+
			
 
				+        new mapboxgl.supermap.SpatialAnalystService(serviceUrl).overlayAnalysis(OverlayBatchAnalystParameters, function (serviceResult) {
			
 
				+            map.addSource("queryDatas", {
			
 
				+                "type": "geojson",
			
 
				+                "data": {
			
 
				+                    "type": "FeatureCollection",
			
 
				+                    "features": [
			
 
				+                        serviceResult.result[0].resultGeometry,
			
 
				+                    ]
			
 
				+                }
			
 
				+            });
			
 
				+            map.addLayer({
			
 
				+                "id": "bufferResultLayer",
			
 
				+                "type": "fill",
			
 
				+                "source": "queryDatas",
			
 
				+                "paint": {
			
 
				+                    "fill-color": "red", /* 填充的颜色 */
			
 
				+                    "fill-opacity": 0.4  /* 透明度 */
			
 
				+                },
			
 
				+            });
			
 
				+
			
 
				+            var overlayPop = new mapboxgl.Popup()
			
 
				+                .setLngLat([117, 40])
			
 
				+                .setHTML("<h4>" + resources.text_overlayBatchAnalystResult + "</h4>");
			
 
				+
			
 
				+            map.on('mouseenter', 'bufferResultLayer', function (e) {
			
 
				+                map.getCanvas().style.cursor = 'pointer';
			
 
				+
			
 
				+                overlayPop.addTo(map);
			
 
				+            });
			
 
				+            map.on('mouseleave', 'bufferResultLayer', function () {
			
 
				+                map.getCanvas().style.cursor = '';
			
 
				+                overlayPop.remove();
			
 
				+            });
			
 
				+        });
			
 
				+    }
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/04_mathExpressionAnalysisService.html
+++ b/public/supermap/examples/mapboxgl/04_mathExpressionAnalysisService.html
@@ -0,0 +1,146 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title data-i18n="resources.title_mathExpression"></title>
			
 
				+    <script type="text/javascript" src="../js/include-web.js"></script>
			
 
				+    <script type="text/javascript" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+</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>
			
 
				+<script type="text/javascript">
			
 
				+    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+    var map, mathExpressionAnalysisService, mathExpressionAnalysisParameters, mathExpressionAnalysisResult,
			
 
				+        themeService, themeGridRange, themeParameters, themeLayer,
			
 
				+        baseUrl = host + "/iserver/services/map-jingjin/rest/maps/京津地区地图/zxyTileImage.png?z={z}&x={x}&y={y}",
			
 
				+        dataUrl = host + "/iserver/services/map-jingjin/rest/maps/京津地区地图",
			
 
				+        serviceUrl = host + "/iserver/services/spatialanalyst-sample/restjsr/spatialanalyst",
			
 
				+        attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+            " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+            " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
			
 
				+    map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [baseUrl],
			
 
				+                    "tileSize": 256
			
 
				+                }
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+            }]
			
 
				+        },
			
 
				+        center: [116.85, 39.79],
			
 
				+        zoom: 7
			
 
				+    });
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+    map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
			
 
				+
			
 
				+    map.on("load", function () {
			
 
				+        mathExpressionAnalysisProcess();
			
 
				+    });
			
 
				+
			
 
				+    function mathExpressionAnalysisProcess() {
			
 
				+        //创建栅格代数运算服务实例
			
 
				+        mathExpressionAnalysisService = new mapboxgl.supermap.SpatialAnalystService(serviceUrl);
			
 
				+        //创建栅格代数运算参数实例
			
 
				+        mathExpressionAnalysisParameters = new SuperMap.MathExpressionAnalysisParameters({
			
 
				+            //指定数据集,必设
			
 
				+            dataset: "JingjinTerrain@Jingjin",
			
 
				+            //要执行的栅格运算代数表达式,必设
			
 
				+            expression: "[Jingjin.JingjinTerrain] + 600",
			
 
				+            //存储结果数据集的数据源,必设
			
 
				+            targetDatasource: "Jingjin",
			
 
				+            //结果数据集名称,必设
			
 
				+            resultGridName: "MathExpressionAnalysis_Result",
			
 
				+            deleteExistResultDataset: true
			
 
				+            /*//指定数据集中参与栅格代数运算的区域
			
 
				+             extractRegion: L.polygon([
			
 
				+             [38, 116],
			
 
				+             [38, 117],
			
 
				+             [42, 117],
			
 
				+             [42, 116]
			
 
				+             ])*/
			
 
				+        });
			
 
				+        //向iServer发起栅格代数运算请求
			
 
				+        mathExpressionAnalysisService.mathExpressionAnalysis(mathExpressionAnalysisParameters, function (serviceResult) {
			
 
				+            mathExpressionAnalysisResult = serviceResult.result;
			
 
				+            //用栅格专题图展示分析结果
			
 
				+            showAnalysisResult_ThemeGridRange();
			
 
				+        });
			
 
				+    }
			
 
				+
			
 
				+    function showAnalysisResult_ThemeGridRange() {
			
 
				+        themeService = new mapboxgl.supermap.ThemeService(dataUrl);
			
 
				+        var themeGridRangeIteme1 = new SuperMap.ThemeGridRangeItem({
			
 
				+                start: 0,
			
 
				+                end: 650,
			
 
				+                color: new SuperMap.ServerColor(40, 140, 40)
			
 
				+            }),
			
 
				+            themeGridRangeIteme2 = new SuperMap.ThemeGridRangeItem({
			
 
				+                start: 650,
			
 
				+                end: 750,
			
 
				+                color: new SuperMap.ServerColor(170, 198, 40)
			
 
				+            }),
			
 
				+            themeGridRangeIteme3 = new SuperMap.ThemeGridRangeItem({
			
 
				+                start: 750,
			
 
				+                end: 900,
			
 
				+                color: new SuperMap.ServerColor(191, 191, 0)
			
 
				+            }),
			
 
				+            themeGridRangeIteme4 = new SuperMap.ThemeGridRangeItem({
			
 
				+                start: 900,
			
 
				+                end: 1350,
			
 
				+                color: new SuperMap.ServerColor(191, 95, 0)
			
 
				+            }),
			
 
				+            themeGridRangeIteme5 = new SuperMap.ThemeGridRangeItem({
			
 
				+                start: 1350,
			
 
				+                end: 3600,
			
 
				+                color: new SuperMap.ServerColor(127, 0, 0)
			
 
				+            });
			
 
				+        themeGridRange = new SuperMap.ThemeGridRange({
			
 
				+            reverseColor: false,
			
 
				+            rangeMode: SuperMap.RangeMode.EQUALINTERVAL,
			
 
				+            //栅格分段专题图子项数组
			
 
				+            items: [themeGridRangeIteme1,
			
 
				+                themeGridRangeIteme2,
			
 
				+                themeGridRangeIteme3,
			
 
				+                themeGridRangeIteme4,
			
 
				+                themeGridRangeIteme5
			
 
				+            ]
			
 
				+        });
			
 
				+        themeParameters = new SuperMap.ThemeParameters({
			
 
				+            //制作专题图的数据集
			
 
				+            datasetNames: [mathExpressionAnalysisResult.dataset.split('@')[0]],
			
 
				+            dataSourceNames: ["Jingjin"],
			
 
				+            joinItems: null,
			
 
				+            themes: [themeGridRange]
			
 
				+        });
			
 
				+        themeService.getThemeInfo(themeParameters, function (serviceResult1) {
			
 
				+            var result = serviceResult1.result;
			
 
				+            if (result && result.newResourceID) {
			
 
				+                map.addLayer({
			
 
				+                    "id": "themeLayer",
			
 
				+                    "type": "raster",
			
 
				+                    "source": {
			
 
				+                        "type": "raster",
			
 
				+                        "tiles": [baseUrl + "&transparent=true&cacheEnabled=false&layersID=" + result.newResourceID],
			
 
				+                        "tileSize": 256
			
 
				+                    },
			
 
				+                    "minzoom": 0,
			
 
				+                    "maxzoom": 22
			
 
				+                });
			
 
				+            }
			
 
				+        });
			
 
				+    }
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/04_overlayAnalystService.html
+++ b/public/supermap/examples/mapboxgl/04_overlayAnalystService.html
@@ -0,0 +1,75 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title data-i18n="resources.title_overlayAnalyst"></title>
			
 
				+<script type="text/javascript" include="bootstrap-css" src="../js/include-web.js"></script>
			
 
				+<script type="text/javascript" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+</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>
			
 
				+<script type="text/javascript">
			
 
				+    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+    var map,
			
 
				+        attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+            " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+            " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ",
			
 
				+        baseUrl = host + "/iserver/services/map-jingjin/rest/maps/京津地区地图/zxyTileImage.png?z={z}&x={x}&y={y}",
			
 
				+        serviceUrl = host + "/iserver/services/spatialanalyst-sample/restjsr/spatialanalyst";
			
 
				+    map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [baseUrl],
			
 
				+                    "tileSize": 256
			
 
				+                }
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+            }]
			
 
				+        },
			
 
				+        center: [116.2740019864, 39.8970124079],
			
 
				+        zoom: 6.5
			
 
				+    });
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+    map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
			
 
				+
			
 
				+    map.on("load", function () {
			
 
				+        overlayAnalystProcess();
			
 
				+    });
			
 
				+
			
 
				+    function overlayAnalystProcess() {
			
 
				+        var datasetOverlayAnalystParameters = new SuperMap.DatasetOverlayAnalystParameters({
			
 
				+            sourceDataset: "BaseMap_R@Jingjin",
			
 
				+            operateDataset: "Neighbor_R@Jingjin",
			
 
				+            tolerance: 0,
			
 
				+            operation: SuperMap.OverlayOperationType.UNION
			
 
				+        });
			
 
				+        new mapboxgl.supermap.SpatialAnalystService(serviceUrl).overlayAnalysis(datasetOverlayAnalystParameters, function (serviceResult) {
			
 
				+            map.addSource("analystDatas", {
			
 
				+                "type": "geojson",
			
 
				+                "data": serviceResult.result.recordset.features
			
 
				+            });
			
 
				+            map.addLayer({
			
 
				+                "id": "analystLayer",
			
 
				+                "type": "fill",
			
 
				+                "source": "analystDatas",
			
 
				+                "paint": {
			
 
				+                    "fill-color": "rgba(0, 0, 255, 0.1)",
			
 
				+                    "fill-outline-color": "rgba(100, 100, 225, 10)"
			
 
				+                },
			
 
				+            });
			
 
				+        });
			
 
				+    }
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/04_routeCalculateMeasureService.html
+++ b/public/supermap/examples/mapboxgl/04_routeCalculateMeasureService.html
@@ -0,0 +1,132 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title data-i18n="resources.title_routeCalculateMeasure"></title>
			
 
				+    <script type="text/javascript" include="bootstrap-css" src="../js/include-web.js"></script>
			
 
				+    <script type="text/javascript" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+</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>
			
 
				+<script type="text/javascript">
			
 
				+    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+    var map,
			
 
				+        routeCalculateMeasureParameters, routeCalculateMeasureService,
			
 
				+        attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+            " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+            " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ",
			
 
				+        mapUrl = host + "/iserver/services/map-jingjin/rest/maps/京津地区地图/zxyTileImage.png?z={z}&x={x}&y={y}",
			
 
				+        serviceUrl = host + "/iserver/services/spatialanalyst-sample/restjsr/spatialanalyst";
			
 
				+
			
 
				+    map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [mapUrl],
			
 
				+                    "tileSize": 256
			
 
				+                }
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+            }]
			
 
				+        },
			
 
				+        center: [116.2740019864, 39.8970124079],
			
 
				+        zoom: 12
			
 
				+    });
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+    map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
			
 
				+
			
 
				+    map.on("load", function () {
			
 
				+        routeCalculateMeasureProcess();
			
 
				+    });
			
 
				+
			
 
				+    function routeCalculateMeasureProcess() {
			
 
				+
			
 
				+        var piontLists = [
			
 
				+            [116.2143386597, 39.8959419733, 0],
			
 
				+            [116.217501999125, 39.896670999665, 282.3879789906],
			
 
				+            [116.220156000875, 39.896820999605, 509.9746364534],
			
 
				+            [116.228716999, 39.8968419995966, 1242.1340098965],
			
 
				+            [116.25000000025, 39.8968619995886, 3062.3045713007],
			
 
				+            [116.27412300025, 39.8967689996258, 5125.3836697258],
			
 
				+            [116.310443000875, 39.8971139994878, 8231.7823666408],
			
 
				+            [116.344168500812, 39.8976724992644, 11116.7053546891]
			
 
				+        ];
			
 
				+
			
 
				+        var LineGeometryData = {
			
 
				+            "type": "Feature",
			
 
				+            "geometry": {
			
 
				+                "type": "LineString",
			
 
				+                "coordinates": piontLists
			
 
				+            }
			
 
				+        };
			
 
				+        map.addLayer({
			
 
				+            "id": "route",
			
 
				+            "type": "line",
			
 
				+            "source": {
			
 
				+                "type": "geojson",
			
 
				+                "data": LineGeometryData
			
 
				+            },
			
 
				+            "layout": {
			
 
				+                "line-join": "round",
			
 
				+                "line-cap": "round"
			
 
				+            },
			
 
				+            "paint": {
			
 
				+                "line-color": "#888",
			
 
				+                "line-width": 8
			
 
				+            }
			
 
				+        });
			
 
				+
			
 
				+        //将形成路由的点提出来，为了构造下面点定里程服务sourceRoute
			
 
				+        var routeObj = LineGeometryData.geometry.coordinates;
			
 
				+        var routeLine = LineGeometryData;
			
 
				+
			
 
				+        //在组成路由的点中选取一个查询点(数组中第4个点),并添加到地图上
			
 
				+        var point = [routeObj[4][0], routeObj[4][1]];
			
 
				+        var pointGeometryData = {
			
 
				+            "type": "Feature",
			
 
				+            "geometry": {
			
 
				+                "type": "Point",
			
 
				+                "coordinates": point
			
 
				+            }
			
 
				+        };
			
 
				+
			
 
				+        //点定里程服务
			
 
				+        routeCalculateMeasureService = new mapboxgl.supermap.SpatialAnalystService(serviceUrl);
			
 
				+        routeCalculateMeasureParameters = new SuperMap.RouteCalculateMeasureParameters({
			
 
				+            "sourceRoute": routeLine,   //必选,路由类型
			
 
				+            "point": pointGeometryData,  //必选
			
 
				+            "tolerance": 0.0001,
			
 
				+            "isIgnoreGap": false
			
 
				+        });
			
 
				+        routeCalculateMeasureService.routeCalculateMeasure(routeCalculateMeasureParameters, function (routeCaculateServiceResult) {
			
 
				+
			
 
				+            map.addLayer({
			
 
				+                "id": "Point",
			
 
				+                "type": "circle",
			
 
				+                "source": {
			
 
				+                    "type": "geojson",
			
 
				+                    "data": pointGeometryData
			
 
				+                },
			
 
				+                "paint": {
			
 
				+                    "circle-radius": 6,
			
 
				+                    "circle-color": "red",
			
 
				+                },
			
 
				+            });
			
 
				+
			
 
				+            var innerHTML = resources.msg_MByQuery + routeCaculateServiceResult.result.measure;
			
 
				+            new mapboxgl.Popup().setLngLat(point).setHTML(innerHTML).addTo(map);
			
 
				+        });
			
 
				+    }
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/04_routeLocatorService_line.html
+++ b/public/supermap/examples/mapboxgl/04_routeLocatorService_line.html
@@ -0,0 +1,123 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title data-i18n="resources.title_routeLocatorLine"></title>
			
 
				+    <script type="text/javascript" src="../js/include-web.js"></script>
			
 
				+    <script type="text/javascript" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+</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>
			
 
				+<script type="text/javascript">
			
 
				+    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+    var map,
			
 
				+        routeLocatorParameters_line, routeLocatorService,
			
 
				+        attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+            " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+            " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ",
			
 
				+        mapUrl = host + "/iserver/services/map-jingjin/rest/maps/京津地区地图/zxyTileImage.png?z={z}&x={x}&y={y}",
			
 
				+        serviceUrl = host + "/iserver/services/spatialanalyst-sample/restjsr/spatialanalyst";
			
 
				+
			
 
				+    map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [mapUrl],
			
 
				+                    "tileSize": 256
			
 
				+                }
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+            }]
			
 
				+        },
			
 
				+        center: [116.2740019864, 39.8970124079],
			
 
				+        zoom: 12
			
 
				+    });
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+    map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
			
 
				+
			
 
				+    map.on("load", function () {
			
 
				+        routeCalculateMeasureProcess();
			
 
				+    });
			
 
				+
			
 
				+    function routeCalculateMeasureProcess() {
			
 
				+        var piontLists = [
			
 
				+            [116.2143386597, 39.8959419733, 0],
			
 
				+            [116.217501999125, 39.896670999665, 282.3879789906],
			
 
				+            [116.220156000875, 39.896820999605, 511.787745072744],
			
 
				+            [116.228716999, 39.8968419995966, 1253.201708792909],
			
 
				+            [116.25000000025, 39.8968619995886, 3103.167523778722],
			
 
				+            [116.27412300025, 39.8967689996258, 5201.062444476062],
			
 
				+            [116.310443000875, 39.8971139994878, 8360.617856315024],
			
 
				+            [116.344168500812, 39.8976724992644, 11294.738396325054]
			
 
				+        ];
			
 
				+
			
 
				+        var LineGeometryData = {
			
 
				+            "type": "Feature",
			
 
				+            "geometry": {
			
 
				+                "type": "LineString",
			
 
				+                "coordinates": piontLists
			
 
				+            }
			
 
				+        };
			
 
				+        map.addLayer({
			
 
				+            "id": "route",
			
 
				+            "type": "line",
			
 
				+            "source": {
			
 
				+                "type": "geojson",
			
 
				+                "data": LineGeometryData
			
 
				+            },
			
 
				+            "layout": {
			
 
				+                "line-join": "round",
			
 
				+                "line-cap": "round"
			
 
				+            },
			
 
				+            "paint": {
			
 
				+                "line-color": "#888",
			
 
				+                "line-width": 8
			
 
				+            }
			
 
				+        });
			
 
				+
			
 
				+        //将形成路由的点提出来，为了构造下面点定里程服务sourceRoute
			
 
				+        var routeLine = LineGeometryData;
			
 
				+
			
 
				+        //里程定线服务
			
 
				+        routeLocatorService = new mapboxgl.supermap.SpatialAnalystService(serviceUrl);
			
 
				+        routeLocatorParameters_line = new SuperMap.RouteLocatorParameters({
			
 
				+            "sourceRoute": routeLine,
			
 
				+            "type": "LINE",
			
 
				+            "startMeasure": 1123,
			
 
				+            "endMeasure": 4489,
			
 
				+            "isIgnoreGap": true
			
 
				+        });
			
 
				+        routeLocatorService.routeLocate(routeLocatorParameters_line, function (routeLocateServiceResult) {
			
 
				+            map.addLayer({
			
 
				+                "id": "Point",
			
 
				+                "type": "line",
			
 
				+                "source": {
			
 
				+                    "type": "geojson",
			
 
				+                    "data": routeLocateServiceResult.result.resultGeometry
			
 
				+                },
			
 
				+                "layout": {
			
 
				+                    "line-join": "round",
			
 
				+                    "line-cap": "round"
			
 
				+                },
			
 
				+                "paint": {
			
 
				+                    "line-color": "red",
			
 
				+                    "line-width": 8
			
 
				+                }
			
 
				+            });
			
 
				+        });
			
 
				+
			
 
				+    }
			
 
				+</script>
			
 
				+
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/04_routeLocatorService_point.html
+++ b/public/supermap/examples/mapboxgl/04_routeLocatorService_point.html
@@ -0,0 +1,128 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title data-i18n="resources.title_routeLocatorPoint"></title>
			
 
				+    <script type="text/javascript" src="../js/include-web.js"></script>
			
 
				+    <script type="text/javascript" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+</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>
			
 
				+<script type="text/javascript">
			
 
				+    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+    var map,
			
 
				+        routeLocatorParameters_point, routeLocatorService,
			
 
				+        attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+            " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+            " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ",
			
 
				+        mapUrl = host + "/iserver/services/map-jingjin/rest/maps/京津地区地图/zxyTileImage.png?z={z}&x={x}&y={y}",
			
 
				+        serviceUrl = host + "/iserver/services/spatialanalyst-sample/restjsr/spatialanalyst";
			
 
				+
			
 
				+    map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [mapUrl],
			
 
				+                    "tileSize": 256
			
 
				+                }
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+            }]
			
 
				+        },
			
 
				+        center: [116.2740019864, 39.8970124079],
			
 
				+        zoom: 12
			
 
				+    });
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+    map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
			
 
				+
			
 
				+    map.on("load", function () {
			
 
				+        routeCalculateMeasureProcess();
			
 
				+    });
			
 
				+
			
 
				+    function routeCalculateMeasureProcess() {
			
 
				+
			
 
				+        var piontLists = [
			
 
				+            [116.2143386597, 39.8959419733, 0],
			
 
				+            [116.217501999125, 39.896670999665, 282.3879789906],
			
 
				+            [116.220156000875, 39.896820999605, 511.787745072744],
			
 
				+            [116.228716999, 39.8968419995966, 1253.201708792909],
			
 
				+            [116.25000000025, 39.8968619995886, 3103.167523778722],
			
 
				+            [116.27412300025, 39.8967689996258, 5201.062444476062],
			
 
				+            [116.310443000875, 39.8971139994878, 8360.617856315024],
			
 
				+            [116.344168500812, 39.8976724992644, 11294.738396325054]
			
 
				+        ];
			
 
				+
			
 
				+        var LineGeometryData = {
			
 
				+            "type": "Feature",
			
 
				+            "geometry": {
			
 
				+                "type": "LineString",
			
 
				+                "coordinates": piontLists
			
 
				+            }
			
 
				+        };
			
 
				+        map.addLayer({
			
 
				+            "id": "route",
			
 
				+            "type": "line",
			
 
				+            "source": {
			
 
				+                "type": "geojson",
			
 
				+                "data": LineGeometryData
			
 
				+            },
			
 
				+            "layout": {
			
 
				+                "line-join": "round",
			
 
				+                "line-cap": "round"
			
 
				+            },
			
 
				+            "paint": {
			
 
				+                "line-color": "#888",
			
 
				+                "line-width": 8
			
 
				+            }
			
 
				+        });
			
 
				+
			
 
				+        //将形成路由的点提出来，为了构造下面点定里程服务sourceRoute
			
 
				+        var routeLine = LineGeometryData;
			
 
				+
			
 
				+        //点定里程服务
			
 
				+        routeLocatorService = new mapboxgl.supermap.SpatialAnalystService(serviceUrl);
			
 
				+        routeLocatorParameters_point = new SuperMap.RouteLocatorParameters({
			
 
				+            "sourceRoute": routeLine,
			
 
				+            "type": "POINT",
			
 
				+            "measure": 6753,
			
 
				+            "offset": 0,
			
 
				+            "isIgnoreGap": true
			
 
				+        });
			
 
				+        routeLocatorService.routeLocate(routeLocatorParameters_point, function (routeLocateServiceResult) {
			
 
				+            var point = routeLocateServiceResult.result.resultGeometry.geometry.coordinates;
			
 
				+            map.addLayer({
			
 
				+                "id": "Point",
			
 
				+                "type": "circle",
			
 
				+                "source": {
			
 
				+                    "type": "geojson",
			
 
				+                    "data": {
			
 
				+                        "type": "Feature",
			
 
				+                        "geometry": {
			
 
				+                            "type": "Point",
			
 
				+                            "coordinates": point
			
 
				+                        }
			
 
				+                    }
			
 
				+                },
			
 
				+                "paint": {
			
 
				+                    "circle-radius": 6,
			
 
				+                    "circle-color": "red",
			
 
				+                },
			
 
				+            });
			
 
				+            var innerHTML = resources.msg_queryMileagePoint1 + routeLocatorParameters_point.measure + resources.msg_queryMileagePoint2;
			
 
				+            new mapboxgl.Popup().setLngLat(point).setHTML(innerHTML).addTo(map);
			
 
				+        });
			
 
				+    }
			
 
				+</script>
			
 
				+
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/04_surfaceAnalystService.html
+++ b/public/supermap/examples/mapboxgl/04_surfaceAnalystService.html
@@ -0,0 +1,124 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title data-i18n="resources.title_surfaceAnalystService"></title>
			
 
				+    <script type="text/javascript" src="../js/include-web.js"></script>
			
 
				+    <script type="text/javascript" include="proj4" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+</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>
			
 
				+<script type="text/javascript">
			
 
				+    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+    var map, surfaceAnalystService, surfaceAnalystParameters,
			
 
				+        attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+            " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+            " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ",
			
 
				+        baseUrl = host + "/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}",
			
 
				+        serviceUrl = host + "/iserver/services/spatialanalyst-sample/restjsr/spatialanalyst";
			
 
				+    map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [baseUrl],
			
 
				+                    "tileSize": 256
			
 
				+                }
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+            }]
			
 
				+        },
			
 
				+        center: [116.2740019864, 39.8970124079],
			
 
				+        zoom: 3
			
 
				+    });
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+    map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
			
 
				+
			
 
				+    map.on("load", function () {
			
 
				+        surfaceAnalystProcess();
			
 
				+    });
			
 
				+
			
 
				+    function surfaceAnalystProcess() {
			
 
				+        //创建表面分析服务参数
			
 
				+        var region = {
			
 
				+            "type": "Feature",
			
 
				+            "geometry": {
			
 
				+                "type": "Polygon",
			
 
				+                "coordinates": [[
			
 
				+                    [0, 4010338],
			
 
				+                    [1063524, 4010338],
			
 
				+                    [1063524, 3150322],
			
 
				+                    [0, 3150322]
			
 
				+                ]]
			
 
				+            }
			
 
				+        };
			
 
				+        surfaceAnalystParameters = new SuperMap.DatasetSurfaceAnalystParameters({
			
 
				+            extractParameter: new SuperMap.SurfaceAnalystParametersSetting({
			
 
				+                datumValue: 0,
			
 
				+                interval: 2,
			
 
				+                resampleTolerance: 0,
			
 
				+                smoothMethod: SuperMap.SmoothMethod.BSPLINE,
			
 
				+                smoothness: 3,
			
 
				+                clipRegion: region
			
 
				+            }),
			
 
				+            dataset: "SamplesP@Interpolation",
			
 
				+            resolution: 9000,
			
 
				+            zValueFieldName: "AVG_TMP"
			
 
				+        });
			
 
				+        //创建表面分析服务实例
			
 
				+        surfaceAnalystService = new mapboxgl.supermap.SpatialAnalystService(serviceUrl);
			
 
				+        surfaceAnalystService.surfaceAnalysis(surfaceAnalystParameters, function (surfaceAnalystServiceResult) {
			
 
				+            var resultFeatures = surfaceAnalystServiceResult.result.recordset.features.features;
			
 
				+            var i, j, changesFeatures = [];
			
 
				+            for (i = 0; i < resultFeatures.length; i++) {
			
 
				+                var lineTemp = resultFeatures[i];
			
 
				+                var changeCoordinates = [];
			
 
				+                //转换line中的点
			
 
				+                for (j = 0; j < lineTemp.geometry.coordinates.length; j++) {
			
 
				+                    var x = lineTemp.geometry.coordinates[j][0];
			
 
				+                    var y = lineTemp.geometry.coordinates[j][1];
			
 
				+                    var coordinate = proj4('EPSG:3857', 'EPSG:4326', [x, y]);
			
 
				+                    //组成转后的点数组
			
 
				+                    coordinate[0] += 106;
			
 
				+                    changeCoordinates.push(coordinate)
			
 
				+                }
			
 
				+                lineTemp.geometry.coordinates = changeCoordinates;
			
 
				+                changesFeatures.push(lineTemp);
			
 
				+            }
			
 
				+
			
 
				+            var changedResultFeatures = {
			
 
				+                "type": "FeatureCollection",
			
 
				+                "features": changesFeatures
			
 
				+            }
			
 
				+
			
 
				+            map.addSource("analystDatas", {
			
 
				+                "type": "geojson",
			
 
				+                "data": changedResultFeatures
			
 
				+            });
			
 
				+            map.addLayer({
			
 
				+                "id": "analystLayer",
			
 
				+                "type": "line",
			
 
				+                "source": "analystDatas",
			
 
				+                "layout": {
			
 
				+                    "line-join": "round",
			
 
				+                    "line-cap": "round"
			
 
				+                },
			
 
				+                "paint": {
			
 
				+                    "line-color": "red",
			
 
				+                    "line-width": 4
			
 
				+                }
			
 
				+            });
			
 
				+        });
			
 
				+    }
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/04_terrainCurvatureCalculationService.html
+++ b/public/supermap/examples/mapboxgl/04_terrainCurvatureCalculationService.html
@@ -0,0 +1,135 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title data-i18n="resources.title_terrainCurvatureCalculation"></title>
			
 
				+    <script type="text/javascript" src="../js/include-web.js"></script>
			
 
				+    <script type="text/javascript" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+</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>
			
 
				+<script type="text/javascript">
			
 
				+    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+    var map, terrainCurvatureCalculationService, terrainCurvatureCalculationParameters,
			
 
				+        terrainCurvatureCalculationResult,
			
 
				+        themeService, themeGridRange, themeParameters, themeLayer,
			
 
				+        baseUrl = host + "/iserver/services/map-jingjin/rest/maps/京津地区地图/zxyTileImage.png?z={z}&x={x}&y={y}",
			
 
				+        dataUrl = host + "/iserver/services/map-jingjin/rest/maps/京津地区地图",
			
 
				+        serviceUrl = host + "/iserver/services/spatialanalyst-sample/restjsr/spatialanalyst",
			
 
				+        attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+            " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+            " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
			
 
				+    map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [baseUrl],
			
 
				+                    "tileSize": 256
			
 
				+                }
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+            }]
			
 
				+        },
			
 
				+        center: [116.85, 39.79],
			
 
				+        zoom: 7
			
 
				+    });
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+    map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
			
 
				+
			
 
				+    map.on("load", function () {
			
 
				+        terrainCurvatureCalculationProcess();
			
 
				+    });
			
 
				+
			
 
				+    function terrainCurvatureCalculationProcess() {
			
 
				+        //创建地形曲率计算服务实例
			
 
				+        terrainCurvatureCalculationService = new mapboxgl.supermap.SpatialAnalystService(serviceUrl);
			
 
				+        //创建地形曲率计算参数实例
			
 
				+        terrainCurvatureCalculationParameters = new SuperMap.TerrainCurvatureCalculationParameters({
			
 
				+            dataset: "JingjinTerrain@Jingjin",
			
 
				+            zFactor: 1.0,
			
 
				+            averageCurvatureName: "CurvatureA",
			
 
				+            deleteExistResultDataset: true
			
 
				+        });
			
 
				+        //向iServer发起地形曲率计算请求
			
 
				+        terrainCurvatureCalculationService.terrainCurvatureCalculate(terrainCurvatureCalculationParameters, function (serviceResult) {
			
 
				+            terrainCurvatureCalculationResult = serviceResult.result;
			
 
				+            //用栅格专题图展示分析结果
			
 
				+            showAnalysisResult_ThemeGridRange();
			
 
				+        });
			
 
				+    }
			
 
				+
			
 
				+    function showAnalysisResult_ThemeGridRange() {
			
 
				+        themeService = new mapboxgl.supermap.ThemeService(dataUrl);
			
 
				+        var themeGridRangeIteme1 = new SuperMap.ThemeGridRangeItem({
			
 
				+                start: -9000000,
			
 
				+                end: -1000,
			
 
				+                color: new SuperMap.ServerColor(0, 0, 255)
			
 
				+            }),
			
 
				+            themeGridRangeIteme2 = new SuperMap.ThemeGridRangeItem({
			
 
				+                start: -1000,
			
 
				+                end: -1,
			
 
				+                color: new SuperMap.ServerColor(0, 0, 125)
			
 
				+            }),
			
 
				+            themeGridRangeIteme3 = new SuperMap.ThemeGridRangeItem({
			
 
				+                start: -1,
			
 
				+                end: 1,
			
 
				+                color: new SuperMap.ServerColor(0, 125, 125)
			
 
				+            }),
			
 
				+            themeGridRangeIteme4 = new SuperMap.ThemeGridRangeItem({
			
 
				+                start: 1,
			
 
				+                end: 1000,
			
 
				+                color: new SuperMap.ServerColor(0, 125, 0)
			
 
				+            }),
			
 
				+            themeGridRangeIteme5 = new SuperMap.ThemeGridRangeItem({
			
 
				+                start: 1000,
			
 
				+                end: 20000000,
			
 
				+                color: new SuperMap.ServerColor(0, 255, 0)
			
 
				+            });
			
 
				+        themeGridRange = new SuperMap.ThemeGridRange({
			
 
				+            reverseColor: false,
			
 
				+            rangeMode: SuperMap.RangeMode.EQUALINTERVAL,
			
 
				+            //栅格分段专题图子项数组
			
 
				+            items: [themeGridRangeIteme1,
			
 
				+                themeGridRangeIteme2,
			
 
				+                themeGridRangeIteme3,
			
 
				+                themeGridRangeIteme4,
			
 
				+                themeGridRangeIteme5
			
 
				+            ]
			
 
				+        });
			
 
				+        themeParameters = new SuperMap.ThemeParameters({
			
 
				+            //制作专题图的数据集（地形曲率计算的结果数据集）
			
 
				+            datasetNames: [terrainCurvatureCalculationResult.averageCurvatureResult.dataset.split('@')[0]],
			
 
				+            dataSourceNames: ["Jingjin"],
			
 
				+            joinItems: null,
			
 
				+            themes: [themeGridRange]
			
 
				+        });
			
 
				+        themeService.getThemeInfo(themeParameters, function (serviceResult1) {
			
 
				+            var result = serviceResult1.result;
			
 
				+            if (result && result.newResourceID) {
			
 
				+                map.addLayer({
			
 
				+                    "id": "themeLayer",
			
 
				+                    "type": "raster",
			
 
				+                    "source": {
			
 
				+                        "type": "raster",
			
 
				+                        "tiles": [baseUrl + "&transparent=true&cacheEnabled=false&layersID=" + result.newResourceID],
			
 
				+                        "tileSize": 256
			
 
				+                    },
			
 
				+                    "minzoom": 0,
			
 
				+                    "maxzoom": 22
			
 
				+                });
			
 
				+            }
			
 
				+        })
			
 
				+    }
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/04_thiessenAnalystService_datasets.html
+++ b/public/supermap/examples/mapboxgl/04_thiessenAnalystService_datasets.html
@@ -0,0 +1,72 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title data-i18n="resources.title_thiessenAnalystDataset"></title>
			
 
				+    <script type="text/javascript" include="bootstrap-css" src="../js/include-web.js"></script>
			
 
				+    <script type="text/javascript" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+</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>
			
 
				+<script type="text/javascript">
			
 
				+    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+    var map,
			
 
				+        attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+            " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+            " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ",
			
 
				+        baseUrl = host + "/iserver/services/map-jingjin/rest/maps/京津地区地图/zxyTileImage.png?z={z}&x={x}&y={y}",
			
 
				+        serviceUrl = host + "/iserver/services/spatialanalyst-sample/restjsr/spatialanalyst";
			
 
				+    map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [baseUrl],
			
 
				+                    "tileSize": 256
			
 
				+                }
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+            }]
			
 
				+        },
			
 
				+        center: [116.2740019864, 39.8970124079],
			
 
				+        zoom: 7
			
 
				+    });
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+    map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
			
 
				+
			
 
				+    map.on("load", function () {
			
 
				+        thiessenAnalystProcess();
			
 
				+    });
			
 
				+
			
 
				+    function thiessenAnalystProcess() {
			
 
				+        var dThiessenAnalystParameters = new SuperMap.DatasetThiessenAnalystParameters({
			
 
				+            dataset: "Town_P@Jingjin"
			
 
				+        });
			
 
				+        new mapboxgl.supermap.SpatialAnalystService(serviceUrl).thiessenAnalysis(dThiessenAnalystParameters, function (serviceResult) {
			
 
				+            map.addSource("analystDatas", {
			
 
				+                "type": "geojson",
			
 
				+                "data": serviceResult.result.regions
			
 
				+            });
			
 
				+            map.addLayer({
			
 
				+                "id": "analystLayer",
			
 
				+                "type": "fill",
			
 
				+                "source": "analystDatas",
			
 
				+                "paint": {
			
 
				+                    "fill-color": "rgba(0, 0, 255, 0.1)",
			
 
				+                    "fill-outline-color": "rgba(100, 100, 225, 10)"
			
 
				+                },
			
 
				+            });
			
 
				+        });
			
 
				+    }
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/04_thiessenAnalystService_geometry.html
+++ b/public/supermap/examples/mapboxgl/04_thiessenAnalystService_geometry.html
@@ -0,0 +1,124 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title data-i18n="resources.title_thiessenAnalystGeometry"></title>
			
 
				+    <script type="text/javascript" include="bootstrap-css" src="../js/include-web.js"></script>
			
 
				+    <script type="text/javascript" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+</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>
			
 
				+<script type="text/javascript">
			
 
				+    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+    var map,
			
 
				+        attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+            " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+            " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ",
			
 
				+        baseUrl = host + "/iserver/services/map-jingjin/rest/maps/京津地区地图/zxyTileImage.png?z={z}&x={x}&y={y}",
			
 
				+        serviceUrl = host + "/iserver/services/spatialanalyst-sample/restjsr/spatialanalyst";
			
 
				+    map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [baseUrl],
			
 
				+                    "tileSize": 256
			
 
				+                }
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+            }]
			
 
				+        },
			
 
				+        center: [116.2740019864, 39.8970124079],
			
 
				+        zoom: 8
			
 
				+    });
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+    map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
			
 
				+
			
 
				+    map.on("load", function () {
			
 
				+        thiessenAnalystProcess();
			
 
				+    });
			
 
				+
			
 
				+    function thiessenAnalystProcess() {
			
 
				+        //创建几何泰森多边形参数
			
 
				+        var pointsList = [{
			
 
				+                "type": "Feature",
			
 
				+                "geometry": {
			
 
				+                    "type": "Point",
			
 
				+                    "coordinates": [116.1916654036, 39.8888542507]
			
 
				+                }
			
 
				+            },{
			
 
				+                "type": "Feature",
			
 
				+                "geometry": {
			
 
				+                    "type": "Point",
			
 
				+                    "coordinates": [116.7031567225, 40.0118542507]
			
 
				+                }
			
 
				+            },{
			
 
				+                "type": "Feature",
			
 
				+                "geometry": {
			
 
				+                    "type": "Point",
			
 
				+                    "coordinates": [116.2156351162, 39.8963250173]
			
 
				+                }
			
 
				+            },{
			
 
				+                "type": "Feature",
			
 
				+                "geometry": {
			
 
				+                    "type": "Point",
			
 
				+                    "coordinates": [116.2740019864, 40.0000124079]
			
 
				+                }
			
 
				+            },{
			
 
				+                "type": "Feature",
			
 
				+                "geometry": {
			
 
				+                    "type": "Point",
			
 
				+                    "coordinates": [116.6003285499, 39.8970574832]
			
 
				+                }
			
 
				+            },{
			
 
				+                "type": "Feature",
			
 
				+                "geometry": {
			
 
				+                    "type": "Point",
			
 
				+                    "coordinates": [116.3321510064, 39.7970392162]
			
 
				+                }
			
 
				+            },{
			
 
				+                "type": "Feature",
			
 
				+                "geometry": {
			
 
				+                    "type": "Point",
			
 
				+                    "coordinates": [116.3377051439, 39.8973437531]
			
 
				+                }
			
 
				+            },{
			
 
				+                "type": "Feature",
			
 
				+                "geometry": {
			
 
				+                    "type": "Point",
			
 
				+                    "coordinates":  [116.3463089006, 39.8978391816]
			
 
				+                }
			
 
				+            }];
			
 
				+
			
 
				+        var gThiessenAnalystParameters = new SuperMap.GeometryThiessenAnalystParameters({
			
 
				+            points: pointsList
			
 
				+        });
			
 
				+        //创建泰森多边形服务实例
			
 
				+        new mapboxgl.supermap.SpatialAnalystService(serviceUrl).thiessenAnalysis(gThiessenAnalystParameters, function (serviceResult) {
			
 
				+            map.addSource("analystDatas", {
			
 
				+                "type": "geojson",
			
 
				+                "data": serviceResult.result.regions
			
 
				+            });
			
 
				+            map.addLayer({
			
 
				+                "id": "analystLayer",
			
 
				+                "type": "fill",
			
 
				+                "source": "analystDatas",
			
 
				+                "paint": {
			
 
				+                    "fill-color": "rgba(255, 0, 0, 0.2)",
			
 
				+                    "fill-outline-color": "blue"
			
 
				+                },
			
 
				+            });
			
 
				+        })
			
 
				+    }
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/GTC2017.html
+++ b/public/supermap/examples/mapboxgl/GTC2017.html
@@ -0,0 +1,92 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+    <meta charset='utf-8'/>
			
 
				+    <title>GTC2017</title>
			
 
				+    <meta name="viewport" content="width=device-width,initial-scale=0.5,maximum-scale=1,user-scalable=no"/>
			
 
				+    <script type="text/javascript" include="mapv" src="https://iclient.supermap.io/web/libs/gtc2017/dist/mbgl-include.js"></script>
			
 
				+    <script type="text/javascript" src="https://iclient.supermap.io/web/libs/gtc2017/index.js"></script>
			
 
				+</head>
			
 
				+<body>
			
 
				+<div class="loader loader-curtain"></div>
			
 
				+<div id='map'></div>
			
 
				+<script>
			
 
				+    var iServerUrl = "https://iserver.supermap.io/iserver/services/map-city/rest/maps/city/tileFeature.mvt?_cache=false&returnAttributes=true&compressTolerance=-1&width=512&height=512&viewBounds={bbox-epsg-3857}";
			
 
				+
			
 
				+    var buildingLayer, heightField = "floor", ratio = 15, layerId = "buildings",
			
 
				+        center = [106.540545, 29.531714];
			
 
				+
			
 
				+    var map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: mapboxgl.supermap.map.getDefaultVectorTileStyle(iServerUrl),
			
 
				+        pitch: 60,
			
 
				+        bearing: 290,
			
 
				+        center: center,
			
 
				+        zoom: 12
			
 
				+    });
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+    //加载进度
			
 
				+    map.on('styledata', function (evt) {
			
 
				+        showLoader();
			
 
				+    });
			
 
				+    //关闭进度
			
 
				+    map.on('render', function (evt) {
			
 
				+        evt.target.areTilesLoaded() && removeLoader();
			
 
				+    });
			
 
				+
			
 
				+    map.on('load', function () {
			
 
				+        /*绿色风格*/
			
 
				+        mapboxgl.supermap.map.setBackground(map, "hsl(47, 26%, 88%)");
			
 
				+        mapboxgl.supermap.map.setPaintProperty(map, '水系多边形@city', 'fill', {'fill-color': 'hsl(205, 56%, 73%)'});
			
 
				+        mapboxgl.supermap.map.setPaintProperty(map, '植被_多边形_R@city', 'fill', {'fill-color': 'hsl(82, 46%, 72%)', 'fill-opacity': 0.4});
			
 
				+        mapboxgl.supermap.map.setPaintProperty(map, ['R_一级道路@city', 'R_二级道路@city'], 'line', {'line-color': '#fff', 'line-width': 2});
			
 
				+        mapboxgl.supermap.map.setPaintProperty(map, ['R_三级道路@city', 'R_四级道路@city'], 'line', {'line-color': 'hsl(0, 0%, 97%)', 'line-width': 1});
			
 
				+
			
 
				+        /*切换蓝色风格*/
			
 
				+        mapboxgl.supermap.map.setBackground(map, "#042133");
			
 
				+        mapboxgl.supermap.map.setPaintProperty(map, '水系多边形@city', 'fill', {'fill-color': '#021019'});
			
 
				+        mapboxgl.supermap.map.setPaintProperty(map, '植被_多边形_R@city', 'fill', {'fill-color': '#021019', 'fill-opacity': 0.4});
			
 
				+        mapboxgl.supermap.map.setPaintProperty(map, ['R_一级道路@city', 'R_二级道路@city'], 'line', {'line-color': '#021019', 'line-width': 2});
			
 
				+        mapboxgl.supermap.map.setPaintProperty(map, ['R_三级道路@city', 'R_四级道路@city'], 'line', {'line-color': '#021019', 'line-width': 1});
			
 
				+
			
 
				+        /*加载三维专题图*/
			
 
				+        buildingLayer = new mapboxgl.supermap.RankTheme3DLayer(layerId, map, {
			
 
				+            // 设置分段
			
 
				+            heightField: heightField,
			
 
				+            heightStops: [[1, 15], [40, 600]],
			
 
				+            colorStops: [
			
 
				+                [0, 'rgba(33, 41, 52, 0.8)'], [10, 'rgba(69,117,180, 0.7)'], [15, 'rgba(116,173,209, 0.7)'], [20, 'rgba(171,217,233, 0.7)'],
			
 
				+                [25, 'rgba(254,224,144,0.7)'], [30, 'rgba(253,174,97,0.7)'], [35, 'rgba(244,109,67,0.8)'], [40, 'rgba(215,48,39,0.8)']
			
 
				+            ],
			
 
				+            // 显示图例
			
 
				+            showLegend: true,
			
 
				+            legendTheme: 'dark',
			
 
				+            legendRatio: ratio,
			
 
				+            legendTitle: "高度"
			
 
				+        });
			
 
				+        buildingLayer.setData(buildings).show();
			
 
				+
			
 
				+        /*加载O-D图*/
			
 
				+        var trafficEndPointLayer = new mapboxgl.supermap.MapvLayer(map, mapboxgl.supermap.MapvDataSet.getPoints(trafficPoints), {
			
 
				+            fillStyle: 'rgba(143,242,249,0.8)', shadowColor: 'rgba(65,105,225,1)', shadowBlur: 10, size: 3, draw: 'simple'
			
 
				+        });
			
 
				+        var trafficTimePointLayer = new mapboxgl.supermap.MapvLayer(map, mapboxgl.supermap.MapvDataSet.getCurveDynamicPoints(center, trafficPoints), {
			
 
				+            fillStyle: 'rgba(143,242,249,0.8)', globalCompositeOperation: "lighter", size: 2,
			
 
				+            animation: {type: 'time', stepsRange: {start: 0, end: 50}, trails: 10, duration: 5},
			
 
				+            draw: 'simple'
			
 
				+        });
			
 
				+        var trafficLineLayer = new mapboxgl.supermap.MapvLayer(map, mapboxgl.supermap.MapvDataSet.getCurveLines(center, trafficPoints), {
			
 
				+            strokeStyle: 'rgba(32,228,243, 0.8)', shadowColor: 'rgba(65,105,225, 0.8)', shadowBlur: 10, lineWidth: 1, draw: 'simple'
			
 
				+        });
			
 
				+        var trafficCenterLayer = new mapboxgl.supermap.MapvLayer(map, mapboxgl.supermap.MapvDataSet.getPoint(center), {
			
 
				+            fillStyle: 'rgba(192,16,26, 0.8)', shadowColor: 'rgba(192,16,26,1)', shadowBlur: 20, size: 6, draw: 'simple'
			
 
				+        });
			
 
				+
			
 
				+        map.setMaxZoom(13.4)
			
 
				+    });
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/SummaryMeshJobService.html
+++ b/public/supermap/examples/mapboxgl/SummaryMeshJobService.html
@@ -0,0 +1,226 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title data-i18n="resources.title_SummaryMeshJobService"></title>
			
 
				+    <style>
			
 
				+        .mb-popup {
			
 
				+            position: absolute;
			
 
				+            top: 10px;
			
 
				+            right: 10px;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+
			
 
				+<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
			
 
				+    <div id="map" style="width: 100%;height:100%"></div>
			
 
				+    <div id="popup" class="mb-popup" data-i18n="[style]resources.style_width350px">
			
 
				+        <div class="panel panel-default">
			
 
				+            <div class="panel-heading">
			
 
				+                <h3 class="panel-title" data-i18n="resources.title_SummaryMeshJobService"></h3>
			
 
				+            </div>
			
 
				+            <div class="panel-body">
			
 
				+                <div class="input-group">
			
 
				+                    <span class="input-group-addon"><span data-i18n="resources.text_inputData"></span><span data-i18n="[title]resources.text_requiredField"
			
 
				+                            style="color: red;"> * </span>　</span>
			
 
				+                    <input id="datasetName" type="text" class="form-control" value="samples_newyork_taxi_2013-01_14k" />
			
 
				+                </div>
			
 
				+                <p>
			
 
				+
			
 
				+                    <div class="input-group">
			
 
				+                        <span class="input-group-addon"><span data-i18n="resources.text_polymerizationType"></span><span
			
 
				+                                data-i18n="[title]resources.text_requiredField" style="color: red;"> * </span>　</span>
			
 
				+                        <select class="form-control" id="type" name="clientType">
			
 
				+                            <option value="SUMMARYMESH" data-i18n="resources.text_polymerizationMesh" selected="selected">
			
 
				+                                网格面聚合
			
 
				+                            </option>
			
 
				+                            <option value="SUMMARYREGION" data-i18n="resources.text_polymerizationRegion"></option>
			
 
				+                        </select>
			
 
				+                    </div>
			
 
				+                    <p>
			
 
				+                        <div id="summarymeshS">
			
 
				+                            <div class="input-group">
			
 
				+                                <span class="input-group-addon"><span data-i18n="resources.text_meshSurfaceType"></span><span
			
 
				+                                        data-i18n="[title]resources.text_requiredField" style="color: red;"> * </span></span>
			
 
				+                                <select class="form-control" id="meshType" name="clientType">
			
 
				+                                    <option value="0" selected="selected" data-i18n="resources.text_4grid"></option>
			
 
				+                                    <option value="1" data-i18n="resources.text_6grid"></option>
			
 
				+                                </select>
			
 
				+                            </div>
			
 
				+                            <p>
			
 
				+
			
 
				+                                <div class="input-group">
			
 
				+                                    <span class="input-group-addon" data-i18n="resources.text_analysisRange"></span>
			
 
				+                                    <input id="query" type="text" class="form-control" value="-74.150, 40.550, -73.750, 40.950" />
			
 
				+                                </div>
			
 
				+                                <p>
			
 
				+
			
 
				+                                    <div class="input-group">
			
 
				+                                        <span class="input-group-addon"><span data-i18n="resources.text_resolution"></span><span
			
 
				+                                                data-i18n="[title]resources.text_requiredField" style="color: red;"> *
			
 
				+                                            </span>　　</span>
			
 
				+                                        <input id="resolution" type="text" class="form-control" value="100" />
			
 
				+                                    </div>
			
 
				+                                    <p>
			
 
				+                        </div>
			
 
				+                        <div id="summaryregionS" style="display: none">
			
 
				+                            <div class="input-group">
			
 
				+                                <span class="input-group-addon" data-i18n="resources.text_regionDataset"></span>
			
 
				+                                <select class="form-control" id="regionDataset" name="clientType">
			
 
				+                                    <option value="samples_processing_newyorkZone_R" selected="selected">
			
 
				+                                        samples_processing_newyorkZone_R
			
 
				+                                    </option>
			
 
				+                                    <option value="samples_processing_singleRegion_R">samples_processing_singleRegion_R
			
 
				+                                    </option>
			
 
				+                                </select>
			
 
				+                            </div>
			
 
				+                            <p>
			
 
				+                        </div>
			
 
				+                        <div class="input-group">
			
 
				+                            <span class="input-group-addon" data-i18n="resources.text_statisticModes"></span>
			
 
				+                            <input id="statisticModes" type="text" class="form-control" value="max" />
			
 
				+                        </div>
			
 
				+                        <p>
			
 
				+
			
 
				+                            <div class="input-group">
			
 
				+                                <span class="input-group-addon" data-i18n="resources.text_weightField"></span>
			
 
				+                                <input id="fields" type="text" class="form-control" value="col7" />
			
 
				+                            </div>
			
 
				+                            <p>
			
 
				+
			
 
				+                                <div align="right">
			
 
				+                                    <input type="button" id='btn' class="btn btn-primary" data-i18n="[value]resources.btn_polymerization" />
			
 
				+                                </div>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+        <script type="text/javascript" include="bootstrap,jquery,widgets" src="../js/include-web.js"></script>
			
 
				+        <script type="text/javascript" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+        <script>
			
 
				+            var map,
			
 
				+                baseUrl = (window.isLocal ? window.server : "https://iserver.supermap.io") +
			
 
				+                "/iserver/services/map-world/rest/maps/World",
			
 
				+                mapUrl = baseUrl + "/zxyTileImage.png?z={z}&x={x}&y={y}",
			
 
				+                processingsUrl = (window.isLocal ? window.server : "https://iserver.supermap.io") +
			
 
				+                "/iserver/services/distributedanalyst/rest/v1/jobs";
			
 
				+            var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+                " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+                " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
			
 
				+
			
 
				+            map = new mapboxgl.Map({
			
 
				+                container: 'map',
			
 
				+                style: {
			
 
				+                    "version": 8,
			
 
				+                    "sources": {
			
 
				+                        "raster-tiles": {
			
 
				+                            "attribution": attribution,
			
 
				+                            "type": "raster",
			
 
				+                            "tiles": [mapUrl],
			
 
				+                            "tileSize": 256
			
 
				+                        }
			
 
				+                    },
			
 
				+                    "layers": [{
			
 
				+                        "id": "simple-tiles",
			
 
				+                        "type": "raster",
			
 
				+                        "source": "raster-tiles",
			
 
				+                    }]
			
 
				+                },
			
 
				+                center: [-73.95, 40.75],
			
 
				+                zoom: 11
			
 
				+            });
			
 
				+            map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+            map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
			
 
				+
			
 
				+            //控制两种分析选项值：
			
 
				+            $(".form-control").change(function (e) {
			
 
				+                if (e.target.selectedIndex == 0) {
			
 
				+                    $("#summarymeshS").show();
			
 
				+                    $("summaryregionS").hide();
			
 
				+                    return;
			
 
				+                }
			
 
				+                $("#summarymeshS").hide();
			
 
				+                $("#summaryregionS").show();
			
 
				+            });
			
 
				+
			
 
				+            SuperMap.SecurityManager.registerToken(processingsUrl, window.exampleToken);
			
 
				+
			
 
				+            //分布式分析：
			
 
				+            var processingService = new mapboxgl.supermap.ProcessingService(processingsUrl, {
			
 
				+                withCredentials: window.isLocal
			
 
				+            });
			
 
				+
			
 
				+            function getQuery() {
			
 
				+                if ($('#query').val() === "") {
			
 
				+                    return "";
			
 
				+                }
			
 
				+                var query = [];
			
 
				+                $('#query').val().split(',').map(function (el) {
			
 
				+                    query.push(parseFloat(el));
			
 
				+                });
			
 
				+                var sw = new mapboxgl.LngLat(query[0], query[1]);
			
 
				+                var ne = new mapboxgl.LngLat(query[2], query[3]);
			
 
				+
			
 
				+                return new mapboxgl.LngLatBounds(sw, ne);
			
 
				+            }
			
 
				+
			
 
				+            $('#btn').on('click', function () {
			
 
				+                if ($('#msg_container')[0]) {
			
 
				+                    $('#msg_container').remove();
			
 
				+                }
			
 
				+                widgets.loader.showLoader();
			
 
				+                if (map.getLayer("summaryLayer")) {
			
 
				+                    map.removeLayer("summaryLayer");
			
 
				+                    map.removeSource("summarySource");
			
 
				+                }
			
 
				+                var summaryMeshJobParameter = new SuperMap.SummaryMeshJobParameter({
			
 
				+                    datasetName: $('#datasetName').val(),
			
 
				+                    resolution: $('#resolution').val(),
			
 
				+                    meshType: $('#meshType option:selected').attr('value'),
			
 
				+                    fields: $('#fields').val(),
			
 
				+                    query: getQuery(),
			
 
				+                    statisticModes: $('#statisticModes').val(),
			
 
				+                    type: $('#type option:selected').attr('value'),
			
 
				+                    regionDataset: $('#regionDataset option:selected').attr('value')
			
 
				+                });
			
 
				+                processingService.addSummaryMeshJob(summaryMeshJobParameter, function (serviceResult) {
			
 
				+                    if (serviceResult.error) {
			
 
				+                        widgets.loader.removeLoader();
			
 
				+                        var errorMsg = serviceResult.error.errorMsg || "code: " + serviceResult.error.code;
			
 
				+                        widgets.alert.showAlert(resources.msg_createFailed + "<br>" + errorMsg, false);
			
 
				+                        return;
			
 
				+                    }
			
 
				+                    serviceResult.result.setting.serviceInfo.targetServiceInfos.map(function (info) {
			
 
				+                        if (info.serviceType === 'RESTMAP') {
			
 
				+                            SuperMap.FetchRequest.get(info.serviceAddress + '/maps').then(
			
 
				+                                function (response) {
			
 
				+                                    return response.json();
			
 
				+                                }).then(function (result) {
			
 
				+                                var mapUrl = result[0].path +
			
 
				+                                    "/zxyTileImage.png?z={z}&x={x}&y={y}&width=256&height=256&transparent=true";
			
 
				+                                map.addSource("summarySource", {
			
 
				+                                    "type": "raster",
			
 
				+                                    "tiles": [mapUrl],
			
 
				+                                    "tileSize": 256
			
 
				+                                });
			
 
				+                                map.addLayer({
			
 
				+                                    "id": "summaryLayer",
			
 
				+                                    "type": "raster",
			
 
				+                                    "source": "summarySource",
			
 
				+                                    "minzoom": 0,
			
 
				+                                    "maxzoom": 22
			
 
				+                                });
			
 
				+
			
 
				+                                widgets.loader.removeLoader();
			
 
				+                            });
			
 
				+                        }
			
 
				+                    });
			
 
				+                });
			
 
				+            });
			
 
				+        </script>
			
 
				+
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/SummaryRegionJobService.html
+++ b/public/supermap/examples/mapboxgl/SummaryRegionJobService.html
@@ -0,0 +1,301 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title data-i18n="resources.title_SummaryRegionJobService"></title>
			
 
				+    <style>
			
 
				+        .mb-popup {
			
 
				+            position: absolute;
			
 
				+            top: 10px;
			
 
				+            right: 10px;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+
			
 
				+<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
			
 
				+    <div id="map" style="width: 100%;height:100%"></div>
			
 
				+    <div id="popup" class="mb-popup" data-i18n="[style]resources.style_width420px">
			
 
				+        <div class="panel panel-default">
			
 
				+            <div class="panel-heading">
			
 
				+                <h3 class="panel-title" data-i18n="resources.title_SummaryRegionJobService"></h3>
			
 
				+            </div>
			
 
				+            <div class="panel-body">
			
 
				+                <div class="input-group">
			
 
				+                    <span class="input-group-addon"><span data-i18n="resources.text_inputData"></span><span data-i18n="[title]resources.text_requiredField"
			
 
				+                            style="color: red;"> * </span>　　　　　</span>
			
 
				+                    <input id="datasetName" type="text" class="form-control" value="samples_processing_newyorkZone_R" />
			
 
				+                </div>
			
 
				+                <p>
			
 
				+
			
 
				+                    <div class="input-group">
			
 
				+                        <span class="input-group-addon"><span data-i18n="resources.text_summaryType"></span><span
			
 
				+                                data-i18n="[title]resources.text_requiredField" style="color: red;"> * </span>　　　　　</span>
			
 
				+
			
 
				+                        <div>
			
 
				+                            <select class="form-control" id="type" name="clientType">
			
 
				+                                <option value="SUMMARYMESH" data-i18n="resources.text_summaryMesh" selected="selected"></option>
			
 
				+                                <option value="SUMMARYREGION" data-i18n="resources.text_summaryRegion"></option>
			
 
				+                            </select>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                    <p>
			
 
				+
			
 
				+                        <div id="meshTypeS" class="input-group">
			
 
				+                            <span class="input-group-addon"><span data-i18n="resources.text_meshSurfaceType"></span><span
			
 
				+                                    data-i18n="[title]resources.text_requiredField" style="color: red;"> * </span>　　</span>
			
 
				+                            <select class="form-control" id="meshType" name="clientType">
			
 
				+                                <option value="0" data-i18n="resources.text_4grid" selected="selected"></option>
			
 
				+                                <option value="1" data-i18n="resources.text_6grid"></option>
			
 
				+                            </select>
			
 
				+                        </div>
			
 
				+                        <p>
			
 
				+
			
 
				+                            <div id="regionDatasetS" class="input-group">
			
 
				+                                <span class="input-group-addon" data-i18n="resources.text_summaryDataset"><span
			
 
				+                                        data-i18n="[title]resources.text_requiredField" style="color: red;"> * </span>　　</span>
			
 
				+                                <input id="regionDataset" type="text" class="form-control" value="samples_processing_newyorkZone_R" />
			
 
				+                            </div>
			
 
				+                            <p>
			
 
				+
			
 
				+                                <div class="input-group">
			
 
				+                                    <span class="input-group-addon" data-i18n="resources.text_analysisRange"></span>
			
 
				+                                    <input id="query" type="text" class="form-control" value="-74.050,40.650,-73.850,40.850" />
			
 
				+                                </div>
			
 
				+                                <p>
			
 
				+
			
 
				+                                    <p>
			
 
				+
			
 
				+                                        <div class="input-group">
			
 
				+                                            <span class="input-group-addon" data-i18n="resources.text_statisticStandardField"></span>
			
 
				+                                            <span class="form-control">
			
 
				+                                                <input id="standardSummaryFields" type="checkbox">
			
 
				+                                            </span>
			
 
				+                                            <span class="input-group-addon" data-i18n="resources.text_statisticWeightField"></span>
			
 
				+                                            <span class="form-control">
			
 
				+                                                <input id="weightedSummaryFields" type="checkbox">
			
 
				+                                            </span>
			
 
				+                                        </div>
			
 
				+                                        <p>
			
 
				+                                            <div id="standardS" style="display: none">
			
 
				+                                                <div class="input-group">
			
 
				+                                                    <span class="input-group-addon"><span data-i18n="resources.text_statisticAttrFieldMode"></span><span
			
 
				+                                                            data-i18n="[title]resources.text_requiredField" style="color: red;">
			
 
				+                                                            * </span>　</span>
			
 
				+                                                    <input id="standardStatisticModes" type="text" class="form-control"
			
 
				+                                                        value="max" />
			
 
				+                                                </div>
			
 
				+                                                <p>
			
 
				+
			
 
				+                                                    <div class="input-group">
			
 
				+                                                        <span class="input-group-addon"><span data-i18n="resources.text_AttrFieldName"></span><span
			
 
				+                                                                data-i18n="[title]resources.text_requiredField" style="color: red;">
			
 
				+                                                                * </span>　　　　</span>
			
 
				+                                                        <input id="standardFields" type="text" class="form-control"
			
 
				+                                                            value="LocationID" />
			
 
				+                                                    </div>
			
 
				+                                                    <p>
			
 
				+                                            </div>
			
 
				+                                            <div id="weightS" style="display: none">
			
 
				+                                                <div class="input-group">
			
 
				+                                                    <span class="input-group-addon"><span data-i18n="resources.text_statisticWeightFieldMode"></span><span
			
 
				+                                                            data-i18n="[title]resources.text_requiredField" style="color: red;">
			
 
				+                                                            * </span>　</span>
			
 
				+                                                    <input id="weightedStatisticModes" type="text" class="form-control"
			
 
				+                                                        value="max" />
			
 
				+                                                </div>
			
 
				+                                                <p>
			
 
				+
			
 
				+                                                    <div class="input-group">
			
 
				+                                                        <span class="input-group-addon"><span data-i18n="resources.text_weightFieldName"></span><span
			
 
				+                                                                data-i18n="[title]resources.text_requiredField" style="color: red;">
			
 
				+                                                                * </span>　　　　</span>
			
 
				+                                                        <input id="weightedFields" type="text" class="form-control"
			
 
				+                                                            value="LocationID" />
			
 
				+                                                    </div>
			
 
				+                                                    <p>
			
 
				+                                            </div>
			
 
				+
			
 
				+                                            <div id="resolutionS" class="input-group">
			
 
				+                                                <span class="input-group-addon" data-i18n="resources.text_gridSize"></span>
			
 
				+                                                <input id="resolution" type="text" class="form-control" value="100" />
			
 
				+                                            </div>
			
 
				+                                            <p>
			
 
				+
			
 
				+                                                <div id="meshSizeUnitS" class="input-group">
			
 
				+                                                    <span class="input-group-addon" data-i18n="resources.text_gridSizeUnit"></span>
			
 
				+                                                    <select class="form-control" id="meshSizeUnit" name="clientType">
			
 
				+                                                        <option value="Meter" selected="selected">Meter</option>
			
 
				+                                                        <option value="Kilometer">Kilometer</option>
			
 
				+                                                        <option value="Yard">Yard</option>
			
 
				+                                                        <option value="Foot">Foot</option>
			
 
				+                                                        <option value="Mile">Mile</option>
			
 
				+                                                    </select>
			
 
				+                                                </div>
			
 
				+                                                <p>
			
 
				+
			
 
				+                                                    <div class="input-group">
			
 
				+                                                        <span class="input-group-addon" data-i18n="resources.text_lengthAndArea"></span>
			
 
				+                                                        <span class="form-control">
			
 
				+                                                            <input id="sumShape" type="checkbox" checked>
			
 
				+                                                        </span>
			
 
				+                                                    </div>
			
 
				+                                                    <p>
			
 
				+
			
 
				+                                                        <div align="right">
			
 
				+                                                            <input type="button" id='btn' class="btn btn-primary"
			
 
				+                                                                data-i18n="[value]resources.btn_summary" />
			
 
				+                                                        </div>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+        <script type="text/javascript" include="bootstrap,jquery,widgets" src="../js/include-web.js"></script>
			
 
				+        <script type="text/javascript" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+        <script>
			
 
				+            var map,
			
 
				+                baseUrl = (window.isLocal ? window.server : "https://iserver.supermap.io") +
			
 
				+                "/iserver/services/map-world/rest/maps/World",
			
 
				+                mapUrl = baseUrl + "/zxyTileImage.png?z={z}&x={x}&y={y}",
			
 
				+                processingsUrl = (window.isLocal ? window.server : "https://iserver.supermap.io") +
			
 
				+                "/iserver/services/distributedanalyst/rest/v1/jobs";
			
 
				+            var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+                " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+                " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
			
 
				+
			
 
				+            map = new mapboxgl.Map({
			
 
				+                container: 'map',
			
 
				+                style: {
			
 
				+                    "version": 8,
			
 
				+                    "sources": {
			
 
				+                        "raster-tiles": {
			
 
				+                            "attribution": attribution,
			
 
				+                            "type": "raster",
			
 
				+                            "tiles": [mapUrl],
			
 
				+                            "tileSize": 256
			
 
				+                        }
			
 
				+                    },
			
 
				+                    "layers": [{
			
 
				+                        "id": "simple-tiles",
			
 
				+                        "type": "raster",
			
 
				+                        "source": "raster-tiles",
			
 
				+                    }]
			
 
				+                },
			
 
				+                center: [-73.95, 40.75],
			
 
				+                zoom: 10
			
 
				+            });
			
 
				+            map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+            map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
			
 
				+
			
 
				+            $("#standardSummaryFields").change(function (e) {
			
 
				+                if (e.target.checked) {
			
 
				+                    $("#standardS").show();
			
 
				+                    return;
			
 
				+                }
			
 
				+                $("#standardS").hide();
			
 
				+            });
			
 
				+            $("#weightedSummaryFields").change(function (e) {
			
 
				+                if (e.target.checked) {
			
 
				+                    $("#weightS").show();
			
 
				+                    return;
			
 
				+                }
			
 
				+                $("#weightS").hide();
			
 
				+            });
			
 
				+            $("#type").change(function (e) {
			
 
				+                if (e.target.selectedIndex === 0) {
			
 
				+                    $("#meshTypeS").show();
			
 
				+                    $("#resolutionS").show();
			
 
				+                    $("#meshSizeUnitS").show();
			
 
				+                    $("#regionDatasetS").hide();
			
 
				+                    return;
			
 
				+                }
			
 
				+                $("#meshTypeS").hide();
			
 
				+                $("#resolutionS").hide();
			
 
				+                $("#meshSizeUnitS").hide();
			
 
				+                $("#regionDatasetS").show();
			
 
				+            });
			
 
				+
			
 
				+            SuperMap.SecurityManager.registerToken(processingsUrl, window.exampleToken);
			
 
				+
			
 
				+            var processingService = new mapboxgl.supermap.ProcessingService(processingsUrl, {
			
 
				+                withCredentials: window.isLocal
			
 
				+            });
			
 
				+
			
 
				+            function getQuery() {
			
 
				+                if ($('#query').val() === "") {
			
 
				+                    return "";
			
 
				+                }
			
 
				+                var query = [];
			
 
				+                $('#query').val().split(',').map(function (el) {
			
 
				+                    query.push(parseFloat(el));
			
 
				+                });
			
 
				+                var sw = new mapboxgl.LngLat(query[0], query[1]);
			
 
				+                var ne = new mapboxgl.LngLat(query[2], query[3]);
			
 
				+
			
 
				+                return new mapboxgl.LngLatBounds(sw, ne);
			
 
				+            }
			
 
				+
			
 
				+            $('#btn').on('click', function () {
			
 
				+                if ($('#msg_container')[0]) {
			
 
				+                    $('#msg_container').remove();
			
 
				+                }
			
 
				+                widgets.loader.showLoader();
			
 
				+                if (map.getLayer("summaryLayer")) {
			
 
				+                    map.removeLayer("summaryLayer");
			
 
				+                    map.removeSource("summarySource");
			
 
				+                }
			
 
				+                var summaryRegionJobParameter = new SuperMap.SummaryRegionJobParameter({
			
 
				+                    datasetName: $('#datasetName').val(),
			
 
				+                    regionDataset: $('#regionDataset').val(),
			
 
				+                    type: $('#type option:selected').attr('value'),
			
 
				+                    meshType: $('#meshType option:selected').attr('value'),
			
 
				+                    query: getQuery(),
			
 
				+                    standardSummaryFields: $('#standardSummaryFields').get(0).checked,
			
 
				+                    weightedSummaryFields: $('#weightedSummaryFields').get(0).checked,
			
 
				+                    standardStatisticModes: $('#standardStatisticModes').val(),
			
 
				+                    standardFields: $('#standardFields').val(),
			
 
				+                    weightedStatisticModes: $('#weightedStatisticModes').val(),
			
 
				+                    weightedFields: $('#weightedFields').val(),
			
 
				+                    resolution: $('#resolution').val(),
			
 
				+                    meshSizeUnit: $('#meshSizeUnit option:selected').attr('value'),
			
 
				+                    sumShape: $('#sumShape').get(0).checked
			
 
				+                });
			
 
				+                processingService.addSummaryRegionJob(summaryRegionJobParameter, function (serviceResult) {
			
 
				+                    if (serviceResult.error) {
			
 
				+                        widgets.loader.removeLoader();
			
 
				+                        var errorMsg = serviceResult.error.errorMsg || "code: " + serviceResult.error.code;
			
 
				+                        widgets.alert.showAlert(resources.msg_createFailed + "<br>" + errorMsg, false);
			
 
				+                        return;
			
 
				+                    }
			
 
				+                    serviceResult.result.setting.serviceInfo.targetServiceInfos.map(function (info) {
			
 
				+                        if (info.serviceType === 'RESTMAP') {
			
 
				+                            SuperMap.FetchRequest.get(info.serviceAddress + '/maps').then(
			
 
				+                                function (response) {
			
 
				+                                    return response.json();
			
 
				+                                }).then(function (result) {
			
 
				+                                var mapUrl = result[0].path +
			
 
				+                                    "/zxyTileImage.png?z={z}&x={x}&y={y}&width=256&height=256&transparent=true";
			
 
				+                                map.addSource("summarySource", {
			
 
				+                                    "type": "raster",
			
 
				+                                    "tiles": [mapUrl],
			
 
				+                                    "tileSize": 256
			
 
				+                                });
			
 
				+                                map.addLayer({
			
 
				+                                    "id": "summaryLayer",
			
 
				+                                    "type": "raster",
			
 
				+                                    "source": "summarySource",
			
 
				+                                    "minzoom": 0,
			
 
				+                                    "maxzoom": 22
			
 
				+                                });
			
 
				+
			
 
				+                                widgets.loader.removeLoader();
			
 
				+                            });
			
 
				+                        }
			
 
				+                    });
			
 
				+                });
			
 
				+            });
			
 
				+        </script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/addressMatchService.html
+++ b/public/supermap/examples/mapboxgl/addressMatchService.html
@@ -0,0 +1,241 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title data-i18n="resources.title_addressMatchService"></title>
			
 
				+    <script type="text/javascript" include="jquery,bootstrap" src="../js/include-web.js"></script>
			
 
				+    <style>
			
 
				+        body {
			
 
				+            margin: 0;
			
 
				+            overflow: hidden;
			
 
				+            background: #fff;
			
 
				+            width: 100%;
			
 
				+            height: 100%;
			
 
				+            position: absolute;
			
 
				+            top: 0;
			
 
				+        }
			
 
				+
			
 
				+        #map {
			
 
				+            margin: 0 auto;
			
 
				+            width: 100%;
			
 
				+            height: 100%;
			
 
				+            position: absolute;
			
 
				+        }
			
 
				+
			
 
				+        .panel-default {
			
 
				+            width: 20%;
			
 
				+            float: right;
			
 
				+            margin: 15px 15px 0 0;
			
 
				+            position: relative;
			
 
				+        }
			
 
				+
			
 
				+        .input-group {
			
 
				+            margin-bottom: 15px;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+<div id="map"></div>
			
 
				+<div class='panel panel-default'>
			
 
				+    <div class='panel-body'>
			
 
				+        <ul class='nav nav-tabs nav-justified' style="margin-bottom: 15px">
			
 
				+            <li id='geocode' role='presentation' class='active'>
			
 
				+                <a href='#' data-i18n="resources.text_code"></a>
			
 
				+            </li>
			
 
				+            <li id='geodecode' role='presentation'>
			
 
				+                <a href='#' data-i18n="resources.text_decode"></a>
			
 
				+            </li>
			
 
				+        </ul>
			
 
				+        <div class='tab-content'>
			
 
				+            <div id='geocodeParam' role='tabpanel' class='tab-pane deplistContent active'>
			
 
				+                <div class='input-group'>
			
 
				+                    <span class='input-group-addon' data-i18n="resources.text_address"></span>
			
 
				+                    <input id='address' type='text' class='form-control' placeholder='超图软件'/></div>
			
 
				+                <div class='input-group'>
			
 
				+                    <span class='input-group-addon' data-i18n="resources.text_filterField"></span>
			
 
				+                    <input id='filters' type='text' class='form-control' placeholder='北京市,朝阳区'/></div>
			
 
				+                <div class='input-group'>
			
 
				+                    <span class='input-group-addon' data-i18n="resources.text_minIndex"></span>
			
 
				+                    <input id='fromIndex' type='text' class='form-control' placeholder='0'/></div>
			
 
				+                <div class='input-group'>
			
 
				+                    <span class='input-group-addon' data-i18n="resources.text_maxIndex"></span>
			
 
				+                    <input id='toIndex' type='text' class='form-control' placeholder='10'/></div>
			
 
				+                <div class='input-group'>
			
 
				+                    <span class='input-group-addon' data-i18n="resources.text_maxCount"></span>
			
 
				+                    <input id='maxReturn' type='text' class='form-control' placeholder='-1'/></div>
			
 
				+                <div class='input-group'>
			
 
				+                    <span class='input-group-addon' data-i18n="resources.text_coorSystem"></span>
			
 
				+                    <input id='prjCoordSys' type='text' class='form-control' placeholder='{epsgcode:4326}'/></div>
			
 
				+                <div align='right'>
			
 
				+                    <input type='button' id='codeBtn' class='btn btn-primary'
			
 
				+                           data-i18n="[value]resources.text_input_value_match"/>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+            <div id='geodecodeParam' role='tabpanel' class='tab-pane deplistContent'>
			
 
				+                <div class='input-group'>
			
 
				+                    <span class='input-group-addon' data-i18n="resources.text_abscissa"></span>
			
 
				+                    <input id='xCoord' type='text' class='form-control' placeholder='116.3518541194752'/></div>
			
 
				+                <div class='input-group'>
			
 
				+                    <span class='input-group-addon' data-i18n="resources.text_ordinate"></span>
			
 
				+                    <input id='yCoord' type='text' class='form-control' placeholder='40.00097839595237'/></div>
			
 
				+                <div class='input-group'>
			
 
				+                    <span class='input-group-addon' data-i18n="resources.text_filterField"></span>
			
 
				+                    <input id='filters2' type='text' class='form-control' placeholder=''/></div>
			
 
				+                <div class='input-group'>
			
 
				+                    <span class='input-group-addon' data-i18n="resources.text_minIndex"></span>
			
 
				+                    <input id='fromIndex2' type='text' class='form-control' placeholder='0'/></div>
			
 
				+                <div class='input-group'>
			
 
				+                    <span class='input-group-addon' data-i18n="resources.text_maxIndex"></span>
			
 
				+                    <input id='toIndex2' type='text' class='form-control' placeholder='10'/></div>
			
 
				+                <div class='input-group'>
			
 
				+                    <span class='input-group-addon' data-i18n="resources.text_maxCount"></span>
			
 
				+                    <input id='maxReturn2' type='text' class='form-control' placeholder='-1'/></div>
			
 
				+                <div class='input-group'>
			
 
				+                    <span class='input-group-addon' data-i18n="resources.text_queryRadius"></span>
			
 
				+                    <input id='geoDecodingRadius' type='text' class='form-control' placeholder='-1'/></div>
			
 
				+                <div class='input-group'>
			
 
				+                    <span class='input-group-addon' data-i18n="resources.text_coorSystem"></span>
			
 
				+                    <input id='prjCoordSys2' type='text' class='form-control' placeholder='{epsgcode:4326}'/></div>
			
 
				+                <div align='right'>
			
 
				+                    <input type='button' id='decodeBtn' class='btn btn-primary'
			
 
				+                           data-i18n="[value]resources.text_input_value_match"/>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script type="text/javascript" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+<script type="text/javascript">
			
 
				+    //绑定两个按钮触发事件
			
 
				+    $("#geocode").click(function () {
			
 
				+        $("#geocode")[0].className = 'active';
			
 
				+        $("#geodecode")[0].className = '';
			
 
				+        $("#geocodeParam").addClass('active');
			
 
				+        $("#geodecodeParam").removeClass('active');
			
 
				+    });
			
 
				+    $("#geodecode").click(function () {
			
 
				+        $("#geocode")[0].className = '';
			
 
				+        $("#geodecode")[0].className = 'active';
			
 
				+        $("#geodecodeParam").addClass('active');
			
 
				+        $("#geocodeParam").removeClass('active');
			
 
				+    });
			
 
				+    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+
			
 
				+    var codeMarkers = [], decodeMarkers = [],
			
 
				+        attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+            " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+            " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ",
			
 
				+        url = host + "/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}",
			
 
				+        addressUrl = host + "/iserver/services/addressmatch-Address/restjsr/v1/address",
			
 
				+
			
 
				+        map = new mapboxgl.Map({
			
 
				+            container: 'map',
			
 
				+            style: {
			
 
				+                "version": 8,
			
 
				+                "sources": {
			
 
				+                    "raster-tiles": {
			
 
				+                        "attribution": attribution,
			
 
				+                        "type": "raster",
			
 
				+                        "tiles": [url],
			
 
				+                        "tileSize": 256
			
 
				+                    }
			
 
				+                },
			
 
				+                "layers": [{
			
 
				+                    "id": "simple-tiles",
			
 
				+                    "type": "raster",
			
 
				+                    "source": "raster-tiles",
			
 
				+                    "minzoom": 2,
			
 
				+                    "maxzoom": 18
			
 
				+                }]
			
 
				+            },
			
 
				+            center: [116.383572, 39.914714],
			
 
				+            zoom: 11
			
 
				+        });
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+    map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
			
 
				+
			
 
				+    //判断输入字符串是否为空或者全部都是空格
			
 
				+    function isNull(str) {
			
 
				+        if (str == "") return true;
			
 
				+        var regu = "^[ ]+$";
			
 
				+        var re = new RegExp(regu);
			
 
				+        return re.test(str);
			
 
				+    }
			
 
				+
			
 
				+    var addressMatchService = new mapboxgl.supermap.AddressMatchService(addressUrl);
			
 
				+
			
 
				+    $("#codeBtn").click(function () {
			
 
				+        var geoCodeParam = new SuperMap.GeoCodingParameter({
			
 
				+            address: $('#address').val() || $('#address').attr('placeholder'),
			
 
				+            fromIndex: $('#fromIndex').val() || $('#fromIndex').attr('placeholder'),
			
 
				+            toIndex: $('#toIndex').val() || $('#toIndex').attr('placeholder'),
			
 
				+            filters: $('#filters').val() || $('#filters').attr('placeholder'),
			
 
				+            prjCoordSys: $('#prjCoordSys').val() || $('#prjCoordSys').attr('placeholder'),
			
 
				+            maxReturn: $('#maxReturn').val() || $('#maxReturn').attr('placeholder')
			
 
				+        });
			
 
				+        addressMatchService.code(geoCodeParam, match);
			
 
				+    });
			
 
				+    $("#decodeBtn").click(function () {
			
 
				+        var geoDecodeParam = new SuperMap.GeoDecodingParameter({
			
 
				+            x: $('#xCoord').val() || $('#xCoord').attr('placeholder'),
			
 
				+            y: $('#yCoord').val() || $('#yCoord').attr('placeholder'),
			
 
				+            fromIndex: $('#fromIndex2').val() || $('#fromIndex2').attr('placeholder'),
			
 
				+            toIndex: $('#toIndex2').val() || $('#toIndex2').attr('placeholder'),
			
 
				+            filters: $('#filters2').val() || $('#filters2').attr('placeholder'),
			
 
				+            prjCoordSys: $('#prjCoordSys2').val() || $('#prjCoordSys2').attr('placeholder'),
			
 
				+            maxReturn: $('#maxReturn2').val() || $('#maxReturn2').attr('placeholder'),
			
 
				+            geoDecodingRadius: $('#geoDecodingRadius').val() || $('#geoDecodingRadius').attr('placeholder'),
			
 
				+        });
			
 
				+        addressMatchService.decode(geoDecodeParam, match);
			
 
				+    });
			
 
				+
			
 
				+    function match(obj) {
			
 
				+        clearMarkers();
			
 
				+        obj.result.map(function (item) {
			
 
				+            var img = new Image();
			
 
				+            img.src = '../img/marker-icon.png';
			
 
				+
			
 
				+            var marker = new mapboxgl.Marker(img).setLngLat([item.location.x, item.location.y]);
			
 
				+            decodeMarkers.push(marker);
			
 
				+
			
 
				+            var innerHTML = "";
			
 
				+            innerHTML += resources.text_address + ":" + item.address + "<br>";
			
 
				+            var x = Number(item.location.x.toString().match(/^\d+(?:\.\d{0,2})?/));
			
 
				+            var y = Number(item.location.y.toString().match(/^\d+(?:\.\d{0,2})?/));
			
 
				+            innerHTML += resources.text_coordinate + ":[" + x + "," + y + "]<br>";
			
 
				+            if (item.score > 0) {
			
 
				+                innerHTML += resources.text_matchDegree + ":" + item.score + "<br>";
			
 
				+            }
			
 
				+            innerHTML += resources.text_filterField + ":" + item.filters + "<br>";
			
 
				+
			
 
				+            var markerPopup = new mapboxgl.Popup().setLngLat([item.location.x, item.location.y]).setHTML(innerHTML);
			
 
				+            marker.setPopup(markerPopup);
			
 
				+        });
			
 
				+        for (var i = 0; i < decodeMarkers.length; i++) {
			
 
				+            decodeMarkers[i].addTo(map);
			
 
				+        }
			
 
				+        map.setCenter([116.383572, 39.914714]);
			
 
				+        map.setZoom(10);
			
 
				+        // map.setView(L.latLng( 116.383572,39.914714), 10);
			
 
				+    }
			
 
				+
			
 
				+    function clearMarkers() {
			
 
				+        if (codeMarkers) {
			
 
				+            for (var i = 0; i < codeMarkers.length; i++) {
			
 
				+                codeMarkers[i].remove();
			
 
				+            }
			
 
				+        }
			
 
				+        if (decodeMarkers) {
			
 
				+            for (var i = 0; i < decodeMarkers.length; i++) {
			
 
				+                decodeMarkers[i].remove();
			
 
				+            }
			
 
				+        }
			
 
				+        codeMarkers = [];
			
 
				+        decodeMarkers = [];
			
 
				+    }
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/buffersAnalystJobService.html
+++ b/public/supermap/examples/mapboxgl/buffersAnalystJobService.html
@@ -0,0 +1,188 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title data-i18n="resources.title_buffersAnalystJobService"></title>
			
 
				+    <style>
			
 
				+        .mb-popup {
			
 
				+            position: absolute;
			
 
				+            top: 10px;
			
 
				+            right: 10px;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+
			
 
				+<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
			
 
				+    <div id="map" style="width: 100%;height:100%"></div>
			
 
				+    <div id="popup" class="mb-popup" style='width:350px'>
			
 
				+        <div class="panel panel-default">
			
 
				+            <div class='panel-heading'>
			
 
				+                <h3 class='panel-title' data-i18n="resources.text_bufferAnalyst"></h3>
			
 
				+            </div>
			
 
				+            <div class='panel-body'>
			
 
				+                <div class='input-group'>
			
 
				+                    <span class='input-group-addon'><span data-i18n="resources.text_inputData"></span><span data-i18n="[title]resources.text_requiredField"
			
 
				+                            style="color: red;"> * </span>　</span>
			
 
				+                    <input id='datasetName' type='text' class='form-control' value='samples_processing_newyorkPoint_P' />
			
 
				+                </div>
			
 
				+                <p></p>
			
 
				+                <div class='input-group'>
			
 
				+                    <span class='input-group-addon' data-i18n="resources.text_analysisRange"></span>
			
 
				+                    <input id='bounds' type='text' class='form-control' value='-74.150, 40.550, -73.750, 40.950' />
			
 
				+                </div>
			
 
				+                <p></p>
			
 
				+                <div class='input-group'>
			
 
				+                    <span class='input-group-addon' data-i18n="resources.text_bufferDistance"></span>
			
 
				+                    <input id='distace' type='text' class='form-control' value='15' />
			
 
				+                </div>
			
 
				+                <p></p>
			
 
				+                <div class='input-group'>
			
 
				+                    <span class='input-group-addon' data-i18n="resources.text_bufferDistanceField"></span>
			
 
				+                    <input id='distanceField' type='text' class='form-control' value='pickup_latitude' />
			
 
				+                </div>
			
 
				+                <p></p>
			
 
				+                <div class='input-group'>
			
 
				+                    <span class='input-group-addon' data-i18n="resources.text_bufferDistanceUnit"></span>
			
 
				+                    <select class='form-control' id='distanceUnit' name='distanceUnit'>
			
 
				+                        <option value='Meter' selected='selected'>Meter</option>
			
 
				+                        <option value='Kilometer'>Kilometer</option>
			
 
				+                        <option value='Yard'>Yard</option>
			
 
				+                        <option value='Foot'>Foot</option>
			
 
				+                        <option value='Mile'>Mile</option>
			
 
				+                    </select></div>
			
 
				+                <p></p>
			
 
				+                <div class='input-group'>
			
 
				+                    <span class='input-group-addon' data-i18n="resources.text_fusionField"></span>
			
 
				+                    <input id='dissoveField' type='text' class='form-control' value='pickup_longitude' />
			
 
				+                </div>
			
 
				+                <p></p>
			
 
				+                <div align='right'>
			
 
				+                    <input type='button' id='btn' class='btn btn-primary' data-i18n="[value]resources.text_analyst" />
			
 
				+                </div>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+    </div>
			
 
				+    <script type="text/javascript" include="bootstrap,jquery,widgets" src="../js/include-web.js"></script>
			
 
				+    <script type="text/javascript" include="draw" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+    <script>
			
 
				+        var map,
			
 
				+            baseUrl = (window.isLocal ? window.server : "https://iserver.supermap.io") +
			
 
				+            "/iserver/services/map-world/rest/maps/World",
			
 
				+            mapUrl = baseUrl + "/zxyTileImage.png?z={z}&x={x}&y={y}",
			
 
				+            processingsUrl = (window.isLocal ? window.server : "https://iserver.supermap.io") +
			
 
				+            "/iserver/services/distributedanalyst/rest/v1/jobs";
			
 
				+        var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+            " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+            " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
			
 
				+
			
 
				+        map = new mapboxgl.Map({
			
 
				+            container: 'map',
			
 
				+            style: {
			
 
				+                "version": 8,
			
 
				+                "sources": {
			
 
				+                    "raster-tiles": {
			
 
				+                        "attribution": attribution,
			
 
				+                        "type": "raster",
			
 
				+                        "tiles": [mapUrl],
			
 
				+                        "tileSize": 256
			
 
				+                    }
			
 
				+                },
			
 
				+                "layers": [{
			
 
				+                    "id": "simple-tiles",
			
 
				+                    "type": "raster",
			
 
				+                    "source": "raster-tiles",
			
 
				+                }]
			
 
				+            },
			
 
				+            center: [-73.95, 40.75],
			
 
				+            zoom: 11
			
 
				+        });
			
 
				+        map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+        map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
			
 
				+
			
 
				+        bindClick();
			
 
				+
			
 
				+        SuperMap.SecurityManager.registerToken(processingsUrl, window.exampleToken);
			
 
				+
			
 
				+        var processingService = new mapboxgl.supermap.ProcessingService(processingsUrl, {
			
 
				+            withCredentials: window.isLocal
			
 
				+        });
			
 
				+
			
 
				+        function bindClick() {
			
 
				+            $('#btn').on('click', function () {
			
 
				+                if ($('#msg_container')[0]) {
			
 
				+                    $('#msg_container').remove();
			
 
				+                }
			
 
				+                widgets.loader.showLoader();
			
 
				+                if (map.getLayer("createBufferAnalystJobLayer")) {
			
 
				+                    map.removeLayer("createBufferAnalystJobLayer");
			
 
				+                    map.removeSource("createBufferAnalystJobSource");
			
 
				+                }
			
 
				+                createBufferAnalystJobs();
			
 
				+            });
			
 
				+        }
			
 
				+
			
 
				+        function getBounds() {
			
 
				+            if ($('#bounds').val() === "") {
			
 
				+                return "";
			
 
				+            }
			
 
				+            var bounds = [];
			
 
				+            $('#bounds').val().split(',').map(function (el) {
			
 
				+                bounds.push(parseFloat(el));
			
 
				+            });
			
 
				+            var sw = new mapboxgl.LngLat(bounds[0], bounds[1]);
			
 
				+            var ne = new mapboxgl.LngLat(bounds[2], bounds[3]);
			
 
				+
			
 
				+            return new mapboxgl.LngLatBounds(sw, ne);
			
 
				+        }
			
 
				+
			
 
				+        function createBufferAnalystJobs() {
			
 
				+            var buffersAnalystJobsParameter = new SuperMap.BuffersAnalystJobsParameter({
			
 
				+                datasetName: $('#datasetName').val(),
			
 
				+                bounds: getBounds(),
			
 
				+                distance: $('#distace').val(),
			
 
				+                distanceField: $('#distanceField').val(),
			
 
				+                distanceUnit: $('#distanceUnit option:selected').attr('value'),
			
 
				+                dissolveField: $('#dissoveField').val()
			
 
				+            });
			
 
				+            processingService.addBuffersJob(buffersAnalystJobsParameter, function (serviceResult) {
			
 
				+                if (serviceResult.error) {
			
 
				+                    widgets.loader.removeLoader();
			
 
				+                    var errorMsg = serviceResult.error.errorMsg || "code: " + serviceResult.error.code;
			
 
				+                    widgets.alert.showAlert(resources.msg_createFailed + "<br>" + errorMsg, false);
			
 
				+                    return;
			
 
				+                }
			
 
				+                serviceResult.result.setting.serviceInfo.targetServiceInfos.map(function (info) {
			
 
				+                    if (info.serviceType === 'RESTMAP') {
			
 
				+                        SuperMap.FetchRequest.get(info.serviceAddress + '/maps').then(function (
			
 
				+                            response) {
			
 
				+                            return response.json();
			
 
				+                        }).then(function (result) {
			
 
				+                            var mapUrl = result[0].path +
			
 
				+                                "/zxyTileImage.png?z={z}&x={x}&y={y}&width=256&height=256&transparent=true";
			
 
				+                            map.addSource("createBufferAnalystJobSource", {
			
 
				+                                "type": "raster",
			
 
				+                                "tiles": [mapUrl],
			
 
				+                                "tileSize": 256
			
 
				+                            });
			
 
				+                            map.addLayer({
			
 
				+                                "id": "createBufferAnalystJobLayer",
			
 
				+                                "type": "raster",
			
 
				+                                "source": "createBufferAnalystJobSource",
			
 
				+                                "minzoom": 0,
			
 
				+                                "maxzoom": 22
			
 
				+                            });
			
 
				+                            widgets.loader.removeLoader();
			
 
				+                        });
			
 
				+                    }
			
 
				+                });
			
 
				+            });
			
 
				+        }
			
 
				+    </script>
			
 
				+
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/components_chart_iptl.html
+++ b/public/supermap/examples/mapboxgl/components_chart_iptl.html
@@ -0,0 +1,192 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en-US">
			
 
				+
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title data-i18n='resources.title_chart_iPortal'></title>
			
 
				+    <script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script>
			
 
				+    <script type="text/javascript" include="iclient-mapboxgl-css,echarts" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+
			
 
				+    <style>
			
 
				+        .chart-setting {
			
 
				+            position: absolute;
			
 
				+            top: 50px;
			
 
				+            right: 10px;
			
 
				+            width: 450px;
			
 
				+            height: 50px;
			
 
				+            z-index: 800;
			
 
				+            background-color: #fff;
			
 
				+        }
			
 
				+
			
 
				+        .chart-type-btn {
			
 
				+            position: absolute;
			
 
				+            top: 8px;
			
 
				+            right: 20px;
			
 
				+            width: 112px;
			
 
				+            height: 36px;
			
 
				+            float: right;
			
 
				+            z-index: 800;
			
 
				+        }
			
 
				+
			
 
				+        .chart-setting .input-group {
			
 
				+            left: 16px;
			
 
				+            top: 8px;
			
 
				+            width: 260px;
			
 
				+        }
			
 
				+
			
 
				+        .graph {
			
 
				+            margin: 5px;
			
 
				+            width: 26px;
			
 
				+            height: 26px;
			
 
				+            border: none;
			
 
				+            border-radius: 4px;
			
 
				+            background-size: 100%;
			
 
				+            outline: none;
			
 
				+        }
			
 
				+
			
 
				+        button {
			
 
				+            float: right;
			
 
				+        }
			
 
				+
			
 
				+        #bar {
			
 
				+            background-image: url("../img/bar.png");
			
 
				+        }
			
 
				+
			
 
				+        #line {
			
 
				+            background-image: url("../img/ling.png");
			
 
				+        }
			
 
				+
			
 
				+        #scatter {
			
 
				+            background-image: url("../img/scatter.png");
			
 
				+        }
			
 
				+
			
 
				+        #chart {
			
 
				+            position: absolute;
			
 
				+            top: 100px;
			
 
				+            right: 10px;
			
 
				+            width: 450px;
			
 
				+            height: 350px;
			
 
				+            z-index: 800;
			
 
				+        }
			
 
				+    </style>
			
 
				+</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>
			
 
				+    <div class="chart-setting"></div>
			
 
				+    <div id="chart"></div>
			
 
				+    <script>
			
 
				+        init();
			
 
				+
			
 
				+        function init() {
			
 
				+            var container = document.getElementsByClassName("chart-setting")[0];
			
 
				+            container.innerHTML =
			
 
				+                "<div class='chart-type-btn'>" +
			
 
				+                "<button type='button' class='btn btn-default graph' id='scatter' title='" + resources.title_Scatter +
			
 
				+                "'></button>" +
			
 
				+                "<button type='button' class='btn btn-default graph' id='line' title='" + resources.title_GraphLine +
			
 
				+                "'></button>" +
			
 
				+                "<button type='button' class='btn btn-default graph active' id='bar' title='" + resources.title_GraphBar +
			
 
				+                "''></button></div>"
			
 
				+        }
			
 
				+        var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+        var map, resultLayer, url = host + "/iserver/services/map-world/rest/maps/World";
			
 
				+        var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+            " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+            " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
			
 
				+        map = new mapboxgl.Map({
			
 
				+            container: 'map',
			
 
				+            style: {
			
 
				+                "version": 8,
			
 
				+                "sources": {
			
 
				+                    "raster-tiles": {
			
 
				+                        "attribution": attribution,
			
 
				+                        "type": "raster",
			
 
				+                        "tiles": [url + "/zxyTileImage.png?z={z}&x={x}&y={y}"],
			
 
				+                        "tileSize": 256
			
 
				+                    }
			
 
				+                },
			
 
				+                "layers": [{
			
 
				+                    "id": "simple-tiles",
			
 
				+                    "type": "raster",
			
 
				+                    "source": "raster-tiles",
			
 
				+                }]
			
 
				+            },
			
 
				+            center: [118, 40],
			
 
				+            zoom: 6
			
 
				+        });
			
 
				+        //图表组件
			
 
				+        var options = {
			
 
				+            type: 'bar',
			
 
				+            datasets: {
			
 
				+                type: 'iPortal', //iServer iPortal 
			
 
				+                url: 'https://iportal.supermap.io/iportal/web/datas/676516522',
			
 
				+                withCredentials: false, //默认值是false
			
 
				+                queryInfo: {
			
 
				+                    attributeFilter: "SmID > 0"
			
 
				+
			
 
				+                }
			
 
				+            },
			
 
				+            chartOptions: [{
			
 
				+                xAxis: {
			
 
				+                    field: "机场",
			
 
				+                    name: "Airport"
			
 
				+                },
			
 
				+                yAxis: {
			
 
				+                    field: "同比增速%",
			
 
				+                    name: "GrowthRate%"
			
 
				+                }
			
 
				+            }]
			
 
				+        }
			
 
				+        var barChart = new SuperMap.Components.Chart("chart", options);
			
 
				+        //加载图表之后，将要素添加到地图上
			
 
				+        barChart.onAdd(addDataToMap);
			
 
				+
			
 
				+        function addDataToMap() {
			
 
				+            var features = barChart.getFeatures();
			
 
				+            var layer = {
			
 
				+                "id": '1',
			
 
				+                "type": 'circle',
			
 
				+                "layout": {
			
 
				+                    'visibility': 'visible',
			
 
				+                },
			
 
				+                "paint": {
			
 
				+                    "circle-radius": 8,
			
 
				+                    "circle-color": 'blue'
			
 
				+                },
			
 
				+                "source": {
			
 
				+                    "type": "geojson",
			
 
				+                    "data": features
			
 
				+                }
			
 
				+            };
			
 
				+            resultLayer = map.addLayer(layer);
			
 
				+        }
			
 
				+
			
 
				+        //为图表类型按钮绑定事件
			
 
				+        bindEvent();
			
 
				+
			
 
				+        function bindEvent() {
			
 
				+            $(".graph").on("click", function () {
			
 
				+                $(".graph").removeClass("active");
			
 
				+            });
			
 
				+
			
 
				+            $("#bar").on("click", function () {
			
 
				+                $("#bar").addClass("active");
			
 
				+                barChart.changeType('bar');
			
 
				+            });
			
 
				+            $("#line").on("click", function () {
			
 
				+                $("#line").addClass("active");
			
 
				+                barChart.changeType('line');
			
 
				+            });
			
 
				+            $("#scatter").on("click", function () {
			
 
				+                $("#scatter").addClass("active");
			
 
				+                barChart.changeType('scatter');
			
 
				+            });
			
 
				+        }
			
 
				+    </script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/components_chart_isvr.html
+++ b/public/supermap/examples/mapboxgl/components_chart_isvr.html
@@ -0,0 +1,288 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en-US">
			
 
				+
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title data-i18n='resources.title_chart_iServer'></title>
			
 
				+    <script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script>
			
 
				+    <script type="text/javascript" include="iclient-mapboxgl-css,echarts" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+
			
 
				+    <style>
			
 
				+        .chart-setting {
			
 
				+            position: absolute;
			
 
				+            top: 50px;
			
 
				+            right: 10px;
			
 
				+            width: 450px;
			
 
				+            height: 50px;
			
 
				+            z-index: 800;
			
 
				+            background-color: #fff;
			
 
				+        }
			
 
				+
			
 
				+        .chart-type-btn {
			
 
				+            position: absolute;
			
 
				+            top: 8px;
			
 
				+            right: 20px;
			
 
				+            width: 112px;
			
 
				+            height: 36px;
			
 
				+            float: right;
			
 
				+            z-index: 800;
			
 
				+        }
			
 
				+
			
 
				+        .chart-setting .input-group {
			
 
				+            left: 16px;
			
 
				+            top: 8px;
			
 
				+            width: 260px;
			
 
				+        }
			
 
				+
			
 
				+        .graph {
			
 
				+            margin: 5px;
			
 
				+            width: 26px;
			
 
				+            height: 26px;
			
 
				+            border: none;
			
 
				+            border-radius: 4px;
			
 
				+            background-size: 100%;
			
 
				+            outline: none;
			
 
				+        }
			
 
				+
			
 
				+        button {
			
 
				+            float: right;
			
 
				+        }
			
 
				+
			
 
				+        #bar {
			
 
				+            background-image: url("../img/bar.png");
			
 
				+        }
			
 
				+
			
 
				+        #line {
			
 
				+            background-image: url("../img/ling.png");
			
 
				+        }
			
 
				+
			
 
				+        #scatter {
			
 
				+            background-image: url("../img/scatter.png");
			
 
				+        }
			
 
				+
			
 
				+        #chart {
			
 
				+            position: absolute;
			
 
				+            top: 100px;
			
 
				+            right: 10px;
			
 
				+            width: 450px;
			
 
				+            height: 350px;
			
 
				+            z-index: 800;
			
 
				+        }
			
 
				+    </style>
			
 
				+</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>
			
 
				+    <div class="chart-setting"></div>
			
 
				+    <div id="chart"></div>
			
 
				+    <script>
			
 
				+        init();
			
 
				+
			
 
				+        function init() {
			
 
				+            var container = document.getElementsByClassName("chart-setting")[0];
			
 
				+            container.innerHTML = "<div class='input-group'><span class='input-group-addon'>" +
			
 
				+                resources.text_dataset + "</span>" +
			
 
				+                "<select class='form-control' id='rule' name='rule'>" +
			
 
				+                "<option value='https://iserver.supermap.io/iserver/services/data-jingjin/rest/data/datasources/Jingjin/datasets/Landuse_R' selected>Landuse_R@Jingjin</option>" +
			
 
				+                "<option value='https://iserver.supermap.io/iserver/services/data-jingjin/rest/data/datasources/Jingjin/datasets/BaseMap_P'>BaseMap_P@Jingjin</option>" +
			
 
				+                "<option value='https://iserver.supermap.io/iserver/services/map-world/rest/maps/World/layers/Rivers@World@@World'>Rivers@World</option>" +
			
 
				+                "</select></div>" +
			
 
				+                "<div class='chart-type-btn'>" +
			
 
				+                "<button type='button' class='btn btn-default graph' id='scatter' title='" + resources.title_Scatter +
			
 
				+                "'></button>" +
			
 
				+                "<button type='button' class='btn btn-default graph' id='line' title='" + resources.title_GraphLine +
			
 
				+                "'></button>" +
			
 
				+                "<button type='button' class='btn btn-default graph active' id='bar' title='" + resources.title_GraphBar +
			
 
				+                "''></button></div>"
			
 
				+        }
			
 
				+
			
 
				+        var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+        var map, resultLayer, url = host + "/iserver/services/map-world/rest/maps/World";
			
 
				+        var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+            " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+            " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
			
 
				+        map = new mapboxgl.Map({
			
 
				+            container: 'map',
			
 
				+            style: {
			
 
				+                "version": 8,
			
 
				+                "sources": {
			
 
				+                    "raster-tiles": {
			
 
				+                        "attribution": attribution,
			
 
				+                        "type": "raster",
			
 
				+                        "tiles": [url + "/zxyTileImage.png?z={z}&x={x}&y={y}"],
			
 
				+                        "tileSize": 256
			
 
				+                    }
			
 
				+                },
			
 
				+                "layers": [{
			
 
				+                    "id": "simple-tiles",
			
 
				+                    "type": "raster",
			
 
				+                    "source": "raster-tiles",
			
 
				+                }]
			
 
				+            },
			
 
				+            center: [118, 40],
			
 
				+            zoom: 6
			
 
				+        });
			
 
				+        //图表组件
			
 
				+        var options = {
			
 
				+            type: 'bar',
			
 
				+            datasets: {
			
 
				+                type: 'iServer', //iServer iPortal 
			
 
				+                url: host + "/iserver/services/data-jingjin/rest/data/datasources/Jingjin/datasets/Landuse_R",
			
 
				+                withCredentials: false, //默认值是false
			
 
				+                queryInfo: {
			
 
				+                    attributeFilter: "SmID > 0"
			
 
				+
			
 
				+                }
			
 
				+            },
			
 
				+            chartOptions: [{
			
 
				+                xAxis: {
			
 
				+                    field: "LANDTYPE",
			
 
				+                    name: "type"
			
 
				+                },
			
 
				+                yAxis: {
			
 
				+                    field: "AREA",
			
 
				+                    name: "Area"
			
 
				+                }
			
 
				+            }]
			
 
				+        }
			
 
				+        var barChart = new SuperMap.Components.Chart("chart", options);
			
 
				+        resultLayer = {
			
 
				+            "id": 'jinjin',
			
 
				+            "type": 'fill',
			
 
				+            // "layout": {
			
 
				+            //     'visibility': 'visible',
			
 
				+            // },
			
 
				+            "paint": {
			
 
				+                'fill-color': 'blue', // 返回的是id的值
			
 
				+            }
			
 
				+        };
			
 
				+        //加载图表之后，将要素添加到地图上
			
 
				+        barChart.onAdd(addDataToMap);
			
 
				+
			
 
				+        function addDataToMap() {
			
 
				+            var features = barChart.getFeatures();
			
 
				+            // resultLayer.source = {
			
 
				+            //     "type": "geojson",
			
 
				+            //     "data": features
			
 
				+            // }
			
 
				+            map.addSource(resultLayer.id,{
			
 
				+                "type": "geojson",
			
 
				+                "data": features
			
 
				+            })
			
 
				+            resultLayer.source = resultLayer.id;
			
 
				+
			
 
				+            map.addLayer(resultLayer);
			
 
				+           
			
 
				+        }
			
 
				+
			
 
				+
			
 
				+        //为图表类型按钮绑定事件
			
 
				+        bindEvent();
			
 
				+
			
 
				+        function bindEvent() {
			
 
				+            $(".graph").on("click", function () {
			
 
				+                $(".graph").removeClass("active");
			
 
				+            });
			
 
				+
			
 
				+            $("#bar").on("click", function () {
			
 
				+                $("#bar").addClass("active");
			
 
				+                barChart.changeType('bar');
			
 
				+            });
			
 
				+            $("#line").on("click", function () {
			
 
				+                $("#line").addClass("active");
			
 
				+                barChart.changeType('line');
			
 
				+            });
			
 
				+            $("#scatter").on("click", function () {
			
 
				+                $("#scatter").addClass("active");
			
 
				+                barChart.changeType('scatter');
			
 
				+            });
			
 
				+        }
			
 
				+        //切换数据集
			
 
				+        $("#rule").change(function () {
			
 
				+            var selectedIndex = ($(this).get(0).selectedIndex);
			
 
				+            var url = $(this).val();
			
 
				+            var chartOption, serviceType, withCredentials;
			
 
				+            // 如果已上图，删除当前地图上的图层和数据集
			
 
				+            map.getLayer(resultLayer.id) && map.removeLayer(resultLayer.id) && map.removeSource(resultLayer.id);
			
 
				+            if (selectedIndex === 0) {
			
 
				+                chartOption = [{
			
 
				+                    xAxis: {
			
 
				+                        field: "LANDTYPE",
			
 
				+                        name: "type"
			
 
				+                    },
			
 
				+                    yAxis: {
			
 
				+                        field: "AREA",
			
 
				+                        name: "Area"
			
 
				+                    }
			
 
				+                }];
			
 
				+                // 重新设置上图的id, 图层的样式，图层ID
			
 
				+                resultLayer = {
			
 
				+                    "id": 'jinjin',
			
 
				+                    "type": 'fill',
			
 
				+                    "paint": {
			
 
				+                        'fill-color': 'blue', // 返回的是id的值
			
 
				+                    }
			
 
				+                };
			
 
				+                
			
 
				+            } else if (selectedIndex === 1) {
			
 
				+                chartOption = [{
			
 
				+                    xAxis: {
			
 
				+                        field: "NAME",
			
 
				+                        name: "NAME"
			
 
				+                    },
			
 
				+                    yAxis: {
			
 
				+                        field: "ADCLASS",
			
 
				+                        name: "ADCLASS"
			
 
				+                    },
			
 
				+                }];
			
 
				+                resultLayer = {
			
 
				+                    "id": 'ADCLASS',
			
 
				+                    "type": 'circle',
			
 
				+                    "paint": {
			
 
				+                        "circle-radius": 8,
			
 
				+                        /* 圆的直径，单位像素 */
			
 
				+                        "circle-color": 'blue'
			
 
				+                    }
			
 
				+                };
			
 
				+
			
 
				+            } else {
			
 
				+                chartOption = [{
			
 
				+                    xAxis: {
			
 
				+                        field: "NAME",
			
 
				+                        name: "name"
			
 
				+                    },
			
 
				+                    yAxis: {
			
 
				+                        field: "KILOMETERS",
			
 
				+                        name: "Kilometers"
			
 
				+                    }
			
 
				+                }];
			
 
				+                resultLayer = {
			
 
				+                    "id": 'river',
			
 
				+                    "type": 'line',
			
 
				+                    "paint": {
			
 
				+                        "line-width": 3,
			
 
				+                        'line-color': '#78c4ec',
			
 
				+                    }
			
 
				+                };
			
 
				+  
			
 
				+            }
			
 
				+
			
 
				+            serviceType = 'iServer';
			
 
				+            datasets = {
			
 
				+                type: serviceType, //iServer iPortal 
			
 
				+                url,
			
 
				+                withCredentials, //默认值是false
			
 
				+                queryInfo: {
			
 
				+                    attributeFilter: "SmID > 0"
			
 
				+                }
			
 
				+            };
			
 
				+            barChart.onAdd(addDataToMap);
			
 
				+            barChart.updateData(datasets, chartOption);
			
 
				+        });
			
 
				+    </script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/config.js
+++ b/public/supermap/examples/mapboxgl/config.js
--- a/public/supermap/examples/mapboxgl/control_attributionControl.html
+++ b/public/supermap/examples/mapboxgl/control_attributionControl.html
@@ -0,0 +1,54 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title data-i18n="resources.title_attribution"></title>
			
 
				+    <script type="text/javascript" src="../js/include-web.js"></script>
			
 
				+</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>
			
 
				+<script type="text/javascript" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+<script type="text/javascript">
			
 
				+    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+    var url = host + "/iserver/services/map-world/rest/maps/World/zxyTileImage.png?prjCoordSys="+encodeURIComponent('{"epsgCode":3857}')+"&z={z}&x={x}&y={y}";
			
 
				+    var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+       "with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+       " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
			
 
				+    var map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        attributionControl: false,
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [url],
			
 
				+                    "tileSize": 256,
			
 
				+                },
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+                "minzoom": 0,
			
 
				+                "maxzoom": 22
			
 
				+            }]
			
 
				+        },
			
 
				+        center: [-74.50, 40],
			
 
				+        maxZoom: 18,
			
 
				+        zoom: 2,
			
 
				+    });
			
 
				+
			
 
				+    //mapboxgl默认 Attribution控件
			
 
				+    map.addControl(new mapboxgl.AttributionControl({compact: true}));
			
 
				+
			
 
				+    map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+</script>
			
 
				+
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/control_drawControl.html
+++ b/public/supermap/examples/mapboxgl/control_drawControl.html
@@ -0,0 +1,53 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title data-i18n="resources.title_drawControl"></title>
			
 
				+    <script type="text/javascript" src="../js/include-web.js"></script>
			
 
				+    <script type="text/javascript" include="draw" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+</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>
			
 
				+<script>
			
 
				+    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+    var url = host + "/iserver/services/map-world/rest/maps/World/zxyTileImage.png?"+encodeURIComponent('{"epsgCode":3857}')+"&z={z}&x={x}&y={y}";
			
 
				+    var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+       "with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+       " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
			
 
				+    var map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [url],
			
 
				+                    "tileSize": 256,
			
 
				+                },
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+                "minzoom": 0,
			
 
				+                "maxzoom": 22
			
 
				+            }]
			
 
				+        },
			
 
				+        center: [-74.50, 40],
			
 
				+        maxZoom: 18,
			
 
				+        zoom: 2,
			
 
				+    });
			
 
				+    map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+
			
 
				+    //mapbox 绘制要素图形控件
			
 
				+    var Draw = new MapboxDraw();
			
 
				+    map.addControl(Draw,'top-left')
			
 
				+
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/control_drawControl_4326.html
+++ b/public/supermap/examples/mapboxgl/control_drawControl_4326.html
@@ -0,0 +1,111 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+    <head>
			
 
				+        <meta charset="utf-8" />
			
 
				+        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
			
 
				+        <title data-i18n="resources.title_drawControlWGS84"></title>
			
 
				+        <script type="text/javascript" src="../js/include-web.js"></script>
			
 
				+        <script
			
 
				+            type="text/javascript"
			
 
				+            include="mapbox-gl-enhance,draw"
			
 
				+            src="../../dist/mapboxgl/include-mapboxgl.js"
			
 
				+        ></script>
			
 
				+        <style>
			
 
				+            body {
			
 
				+                margin: 0;
			
 
				+                padding: 0;
			
 
				+            }
			
 
				+
			
 
				+            #map {
			
 
				+                position: absolute;
			
 
				+                top: 0;
			
 
				+                bottom: 0;
			
 
				+                width: 100%;
			
 
				+            }
			
 
				+        </style>
			
 
				+    </head>
			
 
				+
			
 
				+    <body>
			
 
				+        <div id="map"></div>
			
 
				+        <script type="text/javascript">
			
 
				+            var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
			
 
				+            var count = -1;
			
 
				+            var map = new mapboxgl.Map({
			
 
				+                container: 'map',
			
 
				+                style: {
			
 
				+                    version: 8,
			
 
				+                    sources: {
			
 
				+                        'raster-tiles': {
			
 
				+                            type: 'raster',
			
 
				+                            tiles: [host + '/iserver/services/map-world/rest/maps/World'],
			
 
				+                            rasterSource: 'iserver',
			
 
				+                            tileSize: 256
			
 
				+                        }
			
 
				+                    },
			
 
				+
			
 
				+                    layers: [
			
 
				+                        {
			
 
				+                            id: 'simple-tiles',
			
 
				+                            type: 'raster',
			
 
				+                            source: 'raster-tiles',
			
 
				+                            minzoom: 0,
			
 
				+                            maxzoom: 22
			
 
				+                        }
			
 
				+                    ]
			
 
				+                },
			
 
				+                crs: mapboxgl.CRS.EPSG4326,
			
 
				+                center: [0, 0],
			
 
				+                zoom: 2
			
 
				+            });
			
 
				+            map.on('load', function() {
			
 
				+                draw = new MapboxDraw({
			
 
				+                    displayControlsDefault: false,
			
 
				+                    controls: {
			
 
				+                        polygon: true,
			
 
				+                        trash: true
			
 
				+                    }
			
 
				+                });
			
 
				+                map.addControl(draw, 'top-left');
			
 
				+                map.on('draw.create', getFeature);
			
 
				+
			
 
				+                function getFeature(e) {
			
 
				+                    if (map.getLayer('queryDatas')) {
			
 
				+                        map.removeLayer('queryDatas');
			
 
				+                    }
			
 
				+                    if (map.getSource('queryDatas')) {
			
 
				+                        map.removeSource('queryDatas');
			
 
				+                    }
			
 
				+
			
 
				+                    var data = draw.getAll();
			
 
				+                    var feature = data.features[data.features.length - 1];
			
 
				+                    var geometryParam = new SuperMap.GetFeaturesByGeometryParameters({
			
 
				+                        datasetNames: ['World:Countries'],
			
 
				+                        geometry: feature,
			
 
				+                        spatialQueryMode: 'INTERSECT'
			
 
				+                    });
			
 
				+                    new mapboxgl.supermap.FeatureService(
			
 
				+                        host + '/iserver/services/data-world/rest/data'
			
 
				+                    ).getFeaturesByGeometry(geometryParam, function(serviceResult) {
			
 
				+                        map.addSource('queryDatas', {
			
 
				+                            type: 'geojson',
			
 
				+                            data: serviceResult.result.features
			
 
				+                        });
			
 
				+                        map.addLayer({
			
 
				+                            id: 'queryDatas',
			
 
				+                            type: 'fill',
			
 
				+                            source: 'queryDatas',
			
 
				+                            paint: {
			
 
				+                                'fill-color': 'rgba(255, 251, 240, 0.4)',
			
 
				+                                'fill-outline-color': '#ff0000'
			
 
				+                            }
			
 
				+                        });
			
 
				+                    });
			
 
				+                }
			
 
				+                map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+            });
			
 
				+        </script>
			
 
				+    </body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/control_fullscreenControl.html
+++ b/public/supermap/examples/mapboxgl/control_fullscreenControl.html
@@ -0,0 +1,53 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title data-i18n="resources.title_fullscreenControl"></title>
			
 
				+    <script type="text/javascript" src="../js/include-web.js"></script>
			
 
				+</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>
			
 
				+<script type="text/javascript" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+<script type="text/javascript">
			
 
				+    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+    var url = host + "/iserver/services/map-world/rest/maps/World/zxyTileImage.png?prjCoordSys="+encodeURIComponent('{"epsgCode":3857}')+"&z={z}&x={x}&y={y}";
			
 
				+    var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+       "with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+       " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
			
 
				+    var map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [url],
			
 
				+                    "tileSize": 256,
			
 
				+                },
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+                "minzoom": 0,
			
 
				+                "maxzoom": 22
			
 
				+            }]
			
 
				+        },
			
 
				+        center: [-74.50, 40],
			
 
				+        maxZoom: 18,
			
 
				+        zoom: 2,
			
 
				+    });
			
 
				+
			
 
				+    //mapboxgl 全屏控件
			
 
				+    map.addControl(new mapboxgl.FullscreenControl(),'top-left');
			
 
				+
			
 
				+    map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+</script>
			
 
				+
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/control_geolocateControl.html
+++ b/public/supermap/examples/mapboxgl/control_geolocateControl.html
@@ -0,0 +1,58 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title data-i18n="resources.title_geolocateControl"></title>
			
 
				+    <script type="text/javascript" src="../js/include-web.js"></script>
			
 
				+</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>
			
 
				+<script type="text/javascript" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+<script type="text/javascript">
			
 
				+    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+    var url = host + "/iserver/services/map-world/rest/maps/World/zxyTileImage.png?prjCoordSys="+encodeURIComponent('{"epsgCode":3857}')+"&z={z}&x={x}&y={y}";
			
 
				+    var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+       "with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+       " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
			
 
				+    var map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [url],
			
 
				+                    "tileSize": 256,
			
 
				+                },
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+                "minzoom": 0,
			
 
				+                "maxzoom": 22
			
 
				+            }]
			
 
				+        },
			
 
				+        center: [-74.50, 40],
			
 
				+        maxZoom: 18,
			
 
				+        zoom: 2,
			
 
				+    });
			
 
				+
			
 
				+    //mapboxgl 定位控件，当浏览器禁用定位后，该控件不再显示
			
 
				+    map.addControl(new mapboxgl.GeolocateControl({
			
 
				+        positionOptions: {
			
 
				+            enableHighAccuracy: true
			
 
				+        },
			
 
				+        trackUserLocation: true
			
 
				+    }),'top-left');
			
 
				+
			
 
				+    map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+</script>
			
 
				+
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/control_navigationControl.html
+++ b/public/supermap/examples/mapboxgl/control_navigationControl.html
@@ -0,0 +1,51 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title data-i18n="resources.title_navigationControl"></title>
			
 
				+    <script type="text/javascript" src="../js/include-web.js"></script>
			
 
				+</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>
			
 
				+<script type="text/javascript" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+<script type="text/javascript">
			
 
				+    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+    var url = host + "/iserver/services/map-world/rest/maps/World/zxyTileImage.png?prjCoordSys="+encodeURIComponent('{"epsgCode":3857}')+"&z={z}&x={x}&y={y}";
			
 
				+    var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+       "with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+       " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
			
 
				+    var map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [url],
			
 
				+                    "tileSize": 256,
			
 
				+                },
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+                "minzoom": 0,
			
 
				+                "maxzoom": 22
			
 
				+            }]
			
 
				+        },
			
 
				+        center: [-74.50, 40],
			
 
				+        maxZoom: 18,
			
 
				+        zoom: 2,
			
 
				+    });
			
 
				+
			
 
				+    //mapbox导航及放大缩小控件
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+    map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
			
 
				+</script>
			
 
				+
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/control_scaleControl.html
+++ b/public/supermap/examples/mapboxgl/control_scaleControl.html
@@ -0,0 +1,53 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title data-i18n="resources.title_scaleline"></title>
			
 
				+    <script type="text/javascript" src="../js/include-web.js"></script>
			
 
				+</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>
			
 
				+<script type="text/javascript" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+<script type="text/javascript">
			
 
				+    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+    var url = host + "/iserver/services/map-world/rest/maps/World/zxyTileImage.png?prjCoordSys="+encodeURIComponent('{"epsgCode":3857}')+"&z={z}&x={x}&y={y}";
			
 
				+    var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+       "with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+       " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
			
 
				+    var map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [url],
			
 
				+                    "tileSize": 256,
			
 
				+                },
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+                "minzoom": 0,
			
 
				+                "maxzoom": 22
			
 
				+            }]
			
 
				+        },
			
 
				+        center: [-74.50, 40],
			
 
				+        maxZoom: 18,
			
 
				+        zoom: 2,
			
 
				+    });
			
 
				+
			
 
				+    //mapbox 比例尺控件
			
 
				+    map.addControl(new mapboxgl.ScaleControl({}));
			
 
				+
			
 
				+    map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+</script>
			
 
				+
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/control_swipeBetweenMaps.html
+++ b/public/supermap/examples/mapboxgl/control_swipeBetweenMaps.html
@@ -0,0 +1,108 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+    <head>
			
 
				+        <meta charset="UTF-8" />
			
 
				+        <title data-i18n="resources.title_swipeBetweenMaps"></title>
			
 
				+        <script type="text/javascript" src="../js/include-web.js"></script>
			
 
				+        <script type="text/javascript" include="compare" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+        <style>
			
 
				+            body {
			
 
				+                margin: 0;
			
 
				+                overflow: hidden;
			
 
				+                background: #fff;
			
 
				+                width: 100%;
			
 
				+                height: 100%;
			
 
				+                position: absolute;
			
 
				+                top: 0;
			
 
				+            }
			
 
				+            body * {
			
 
				+                -webkit-touch-callout: none;
			
 
				+                -webkit-user-select: none;
			
 
				+                -moz-user-select: none;
			
 
				+                -ms-user-select: none;
			
 
				+                user-select: none;
			
 
				+            }
			
 
				+            .map {
			
 
				+                position: absolute;
			
 
				+                top: 0;
			
 
				+                bottom: 0;
			
 
				+                width: 100%;
			
 
				+            }
			
 
				+        </style>
			
 
				+    </head>
			
 
				+    <body>
			
 
				+        <div id="wrapper">
			
 
				+            <div id="before" class="map"></div>
			
 
				+            <div id="after" class="map"></div>
			
 
				+            <div class="controls"></div>
			
 
				+        </div>
			
 
				+        <script type="text/javascript">
			
 
				+            var host = window.isLocal ? window.server : 'https://iserver.supermap.io',
			
 
				+                chinaUrl = host + '/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}',
			
 
				+                chinaDarkUrl =
			
 
				+                    host + '/iserver/services/map-china400/rest/maps/ChinaDark/zxyTileImage.png?z={z}&x={x}&y={y}',
			
 
				+                attribution =
			
 
				+                    "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+                    " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+                    " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
			
 
				+            var beforeMap = new mapboxgl.Map({
			
 
				+                container: 'before',
			
 
				+                style: {
			
 
				+                    version: 8,
			
 
				+                    sources: {
			
 
				+                        'raster-tiles': {
			
 
				+                            attribution: attribution,
			
 
				+                            type: 'raster',
			
 
				+                            tiles: [chinaUrl],
			
 
				+                            tileSize: 256
			
 
				+                        }
			
 
				+                    },
			
 
				+                    layers: [
			
 
				+                        {
			
 
				+                            id: 'before',
			
 
				+                            type: 'raster',
			
 
				+                            source: 'raster-tiles',
			
 
				+                            minzoom: 0,
			
 
				+                            maxzoom: 22
			
 
				+                        }
			
 
				+                    ]
			
 
				+                },
			
 
				+                center: [0, 0],
			
 
				+                zoom: 0
			
 
				+            });
			
 
				+
			
 
				+            beforeMap.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
			
 
				+            beforeMap.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+            var afterMap = new mapboxgl.Map({
			
 
				+                container: 'after',
			
 
				+                style: {
			
 
				+                    version: 8,
			
 
				+                    sources: {
			
 
				+                        'raster-tiles': {
			
 
				+                            type: 'raster',
			
 
				+                            tiles: [chinaDarkUrl],
			
 
				+                            tileSize: 256
			
 
				+                        }
			
 
				+                    },
			
 
				+                    layers: [
			
 
				+                        {
			
 
				+                            id: 'after',
			
 
				+                            type: 'raster',
			
 
				+                            source: 'raster-tiles',
			
 
				+                            minzoom: 0,
			
 
				+                            maxzoom: 22
			
 
				+                        }
			
 
				+                    ]
			
 
				+                },
			
 
				+                center: [0, 0],
			
 
				+                zoom: 0
			
 
				+            });
			
 
				+
			
 
				+            //mapbox 卷帘（对比）控件, mapbox-gl-compare v0.3.0版本，新增container属性
			
 
				+            var map = new mapboxgl.Compare(beforeMap, afterMap, '#wrapper');
			
 
				+        </script>
			
 
				+    </body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/dataFlowService.html
+++ b/public/supermap/examples/mapboxgl/dataFlowService.html
@@ -0,0 +1,164 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title data-i18n="resources.title_dataFlowService"></title>
			
 
				+    <script type="text/javascript" src="../js/include-web.js"></script>
			
 
				+    <style>
			
 
				+        .mapboxgl-popup {
			
 
				+            max-width: 200px;
			
 
				+        }
			
 
				+    </style>
			
 
				+</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>
			
 
				+    <script type="text/javascript" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+    <script>
			
 
				+        var host = (window.isLocal ? window.server : "https://iserver.supermap.io"),
			
 
				+            tileUrl = host +
			
 
				+            '/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?prjCoordSys='+encodeURIComponent('{"epsgCode":3857}')+'&z={z}&x={x}&y={y}',
			
 
				+            urlQuery = host + "/iserver/services/map-china400/rest/maps/China_4326";
			
 
				+
			
 
				+        wsHost = "wss:\//" + (window.isLocal ? document.location.hostname + ":8800" : "iclsvrws.supermap.io");
			
 
				+
			
 
				+        var urlDataFlow = wsHost + "/iserver/services/dataflowTest/dataflow";
			
 
				+        var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+            " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+            " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
			
 
				+        var dataFlowService;
			
 
				+        var map = new mapboxgl.Map({
			
 
				+            container: 'map',
			
 
				+            style: {
			
 
				+                "version": 8,
			
 
				+                "sources": {
			
 
				+                    "raster-tiles": {
			
 
				+                        "attribution": attribution,
			
 
				+                        "type": "raster",
			
 
				+                        "tiles": [tileUrl],
			
 
				+                        "tileSize": 256,
			
 
				+                    },
			
 
				+                },
			
 
				+                "layers": [{
			
 
				+                    "id": "simple-tiles",
			
 
				+                    "type": "raster",
			
 
				+                    "source": "raster-tiles",
			
 
				+                    "minzoom": 0,
			
 
				+                    "maxzoom": 18
			
 
				+                }],
			
 
				+            },
			
 
				+            center: [116.443571, 39.887549],
			
 
				+            maxZoom: 18,
			
 
				+            zoom: 10
			
 
				+        });
			
 
				+        map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
			
 
				+        map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+
			
 
				+        SuperMap.SecurityManager.registerToken(urlDataFlow, window.exampleToken);
			
 
				+        var popup = new mapboxgl.Popup();
			
 
				+
			
 
				+        map.on('load', function () {
			
 
				+            var options = {
			
 
				+                ws: urlDataFlow
			
 
				+            };
			
 
				+            var dataFlowSubscribe = new mapboxgl.supermap.DataFlowService(options.ws, {
			
 
				+                geometry: options.geometry,
			
 
				+                prjCoordSys: options.prjCoordSys,
			
 
				+                excludeField: options.excludeField
			
 
				+            }).initSubscribe();
			
 
				+            dataFlowSubscribe.on('messageSucceeded', function (msg) {
			
 
				+                popup.remove();
			
 
				+                addLayer(msg);
			
 
				+            });
			
 
				+            query();
			
 
				+        });
			
 
				+
			
 
				+        //模拟实时数据 start
			
 
				+        //查询一个线数据，每两秒将一个点通过dataFlowService广播给iSevrer的dataflow服务
			
 
				+        function query() {
			
 
				+            var param = new SuperMap.QueryBySQLParameters({
			
 
				+                queryParams: {
			
 
				+                    name: "Main_Road_L@China#1",
			
 
				+                    attributeFilter: "SMID = 1755"
			
 
				+                }
			
 
				+            });
			
 
				+            queryService = new mapboxgl.supermap.QueryService(urlQuery).queryBySQL(param, function (serviceResult) {
			
 
				+                featureResult = serviceResult;
			
 
				+                dataFlowBroadcast = new mapboxgl.supermap.DataFlowService(urlDataFlow).initBroadcast();
			
 
				+                dataFlowBroadcast.on('broadcastSocketConnected', function (e) {
			
 
				+                    timer = window.setInterval("broadcast()", 2000);
			
 
				+                });
			
 
				+
			
 
				+            });
			
 
				+        }
			
 
				+
			
 
				+        var count = 200;
			
 
				+
			
 
				+        function broadcast() {
			
 
				+
			
 
				+            if (count >= featureResult.result.recordsets[0].features.features[0].geometry.coordinates.length) {
			
 
				+                window.clearInterval(timer);
			
 
				+                return;
			
 
				+            }
			
 
				+            var point = featureResult.result.recordsets[0].features.features[0].geometry.coordinates[count];
			
 
				+            var feature = {
			
 
				+                geometry: {
			
 
				+                    coordinates: [point[0], point[1]],
			
 
				+                    type: "Point"
			
 
				+                },
			
 
				+                type: "Feature",
			
 
				+                properties: {
			
 
				+                    id: 1,
			
 
				+                    time: new Date()
			
 
				+                }
			
 
				+            };
			
 
				+            dataFlowBroadcast.broadcast(feature);
			
 
				+            count += 3;
			
 
				+        }
			
 
				+
			
 
				+        function addLayer(msg) {
			
 
				+            if (!msg.featureResult) {
			
 
				+                return;
			
 
				+            }
			
 
				+            var feature = msg.featureResult;
			
 
				+            var coord = feature.geometry.coordinates;
			
 
				+            var data = {
			
 
				+                geometry: {
			
 
				+                    type: 'Point',
			
 
				+                    coordinates: coord,
			
 
				+                },
			
 
				+                type: "Feature"
			
 
				+            };
			
 
				+
			
 
				+            if (!map.getSource('location')) {
			
 
				+                map.addSource('location', {
			
 
				+                    'type': 'geojson',
			
 
				+                    'data': data
			
 
				+                });
			
 
				+                map.addLayer({
			
 
				+                    "id": "point",
			
 
				+                    "type": "circle",
			
 
				+                    "paint": {
			
 
				+                        "circle-radius": 6,
			
 
				+                        "circle-color": 'red',
			
 
				+                    },
			
 
				+                    "source": 'location'
			
 
				+                });
			
 
				+            }
			
 
				+
			
 
				+            map.getSource('location').setData(data);
			
 
				+
			
 
				+            popup.setLngLat(coord)
			
 
				+                .setHTML(feature.properties.time)
			
 
				+                .addTo(map);
			
 
				+        }
			
 
				+        //模拟实时数据 end
			
 
				+    </script>
			
 
				+
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/deckglLayer_arcLayer.html
+++ b/public/supermap/examples/mapboxgl/deckglLayer_arcLayer.html
@@ -0,0 +1,117 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
			
 
				+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
			
 
				+    <title data-i18n="resources.title_mb_deckglLayer_arcLayer"></title>
			
 
				+    <style>
			
 
				+        body {
			
 
				+            margin: 0;
			
 
				+            overflow: hidden;
			
 
				+            background: #fff;
			
 
				+            width: 100%;
			
 
				+            height: 100%
			
 
				+        }
			
 
				+
			
 
				+        #map {
			
 
				+            position: absolute;
			
 
				+            top: 0;
			
 
				+            bottom: 0;
			
 
				+            width: 100%;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+<div id="map"></div>
			
 
				+<script type="text/javascript" include="papaparse,widgets" src="../js/include-web.js"></script>
			
 
				+<script type="text/javascript" include="deck" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+<script type="text/javascript">
			
 
				+    var host = window.isLocal ? window.server : "https://iserver.supermap.io",
			
 
				+        url = host + "/iserver/services/map-china400/rest/maps/ChinaDark";
			
 
				+    var map, deckglLayer;
			
 
				+    var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+            " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+            " Map Data <span>© <a href='https://uber.github.io/deck.gl' target='_blank'>deck.gl</a></span> ";
			
 
				+
			
 
				+    map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [url + '/zxyTileImage.png?z={z}&x={x}&y={y}'],
			
 
				+                    "tileSize": 256,
			
 
				+                },
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+                "minzoom": 0,
			
 
				+                "maxzoom": 22
			
 
				+            }]
			
 
				+        },
			
 
				+        center: [-122.271604, 37.803664],
			
 
				+        zoom: 10,
			
 
				+    });
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+
			
 
				+    widgets.loader.showLoader("data loading...");
			
 
				+
			
 
				+    $.get('../data/deck.gl/bart-segments.json', function (features) {
			
 
				+        widgets.loader.removeLoader();
			
 
				+        addLayer(features);
			
 
				+    });
			
 
				+
			
 
				+    function addLayer(features) {
			
 
				+
			
 
				+        deckglLayer = new mapboxgl.supermap.DeckglLayer("arc-layer", {
			
 
				+            data: features,
			
 
				+            props: {
			
 
				+                strokeWidth: 12 //线宽
			
 
				+                //该类型可配置的其他参数有：
			
 
				+                //fp64 否应以高精度64位模式呈现图层，默认为 false
			
 
				+            },
			
 
				+            callback: {
			
 
				+//                getStrokeWidth: 12,
			
 
				+                getSourcePosition: function(d) { return d.from.coordinates },
			
 
				+                getTargetPosition: function(d) { return d.to.coordinates },
			
 
				+                getSourceColor: function(d) { return [Math.sqrt(d.inbound), 140, 0] },
			
 
				+                getTargetColor: function(d) { return [Math.sqrt(d.outbound), 140, 0] },
			
 
				+            }
			
 
				+        });
			
 
				+        map.addLayer(deckglLayer);
			
 
				+    }
			
 
				+
			
 
				+    var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
			
 
				+    /*16进制颜色转为RGB格式*/
			
 
				+    String.prototype.colorRgb = function () {
			
 
				+        var sColor = this.toLowerCase();
			
 
				+        if (sColor && reg.test(sColor)) {
			
 
				+            if (sColor.length === 4) {
			
 
				+                var sColorNew = "#";
			
 
				+                for (var i = 1; i < 4; i += 1) {
			
 
				+                    sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
			
 
				+                }
			
 
				+                sColor = sColorNew;
			
 
				+            }
			
 
				+            //处理六位的颜色值
			
 
				+            var sColorChange = [];
			
 
				+            for (var i = 1; i < 7; i += 2) {
			
 
				+                sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
			
 
				+            }
			
 
				+            return sColorChange;
			
 
				+        } else {
			
 
				+            return sColor;
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/deckglLayer_hexagonLayer.html
+++ b/public/supermap/examples/mapboxgl/deckglLayer_hexagonLayer.html
@@ -0,0 +1,97 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
			
 
				+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
			
 
				+    <title data-i18n="resources.title_mb_deckglLayer_hexagonLayer"></title>
			
 
				+    <style>
			
 
				+        body {
			
 
				+            margin: 0;
			
 
				+            overflow: hidden;
			
 
				+            background: #fff;
			
 
				+            width: 100%;
			
 
				+            height: 100%
			
 
				+        }
			
 
				+
			
 
				+        #map {
			
 
				+            position: absolute;
			
 
				+            top: 0;
			
 
				+            bottom: 0;
			
 
				+            width: 100%;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+<div id="map"></div>
			
 
				+<script type="text/javascript" include="papaparse,widgets" src="../js/include-web.js"></script>
			
 
				+<script type="text/javascript" include="deck" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+<script type="text/javascript">
			
 
				+
			
 
				+    var host = window.isLocal ? window.server : "https://iserver.supermap.io",
			
 
				+        url = host + "/iserver/services/map-china400/rest/maps/ChinaDark";
			
 
				+    var map, deckglLayer;
			
 
				+    var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+            " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+            " Map Data <span>© <a href='https://uber.github.io/deck.gl' target='_blank'>deck.gl</a></span> ";
			
 
				+
			
 
				+    map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [url + '/zxyTileImage.png?z={z}&x={x}&y={y}'],
			
 
				+                    "tileSize": 256,
			
 
				+                },
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+                "minzoom": 0,
			
 
				+                "maxzoom": 22
			
 
				+            }]
			
 
				+        },
			
 
				+        center: [-122.430844, 37.772276],
			
 
				+        zoom: 12,
			
 
				+        pitch: 60,
			
 
				+        bearing: 36
			
 
				+    });
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+
			
 
				+    widgets.loader.showLoader("data loading...");
			
 
				+
			
 
				+    $.get('../data/deck.gl/sf-bike-parking.json', function (features) {
			
 
				+        widgets.loader.removeLoader();
			
 
				+        addLayer(features);
			
 
				+    });
			
 
				+
			
 
				+
			
 
				+    function addLayer(features) {
			
 
				+
			
 
				+        deckglLayer = new mapboxgl.supermap.DeckglLayer("hexagon-layer", {
			
 
				+            data: features,
			
 
				+            props: {
			
 
				+                extruded: true, //是否拉伸要素，默认为 false；
			
 
				+                radius: 200, //六边形半径值，默认为 1000
			
 
				+                elevationScale: 4, //高程乘数
			
 
				+                coverage: 0.8 //六边形半径乘数，介于0 - 1之间。六边形的最终半径通过覆盖半径计算。
			
 
				+                //还可配置的参数：
			
 
				+                //colorRange 色带，默认为 [[255,255,178,255],[254,217,118,255],[254,178,76,255],[253,141,60,255],[240,59,32,255],[189,0,38,255]]
			
 
				+            },
			
 
				+            callback: {
			
 
				+                getPosition: function (d) { return d.COORDINATES },
			
 
				+            }
			
 
				+        });
			
 
				+        map.addLayer(deckglLayer);
			
 
				+    }
			
 
				+
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/deckglLayer_nyBuilding.html
+++ b/public/supermap/examples/mapboxgl/deckglLayer_nyBuilding.html
@@ -0,0 +1,475 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title data-i18n="resources.title_mb_deckglLayer_nyBuilding"></title>
			
 
				+    <style>
			
 
				+        body {
			
 
				+            font-family: "Avenir Next W00", "Helvetica Neue", Helvetica, Arial, sans-serif;
			
 
				+        }
			
 
				+
			
 
				+        .splitContainer {
			
 
				+            height: 200px;
			
 
				+            width: 600px;
			
 
				+            z-index: 1000;
			
 
				+            color: #ffffff;
			
 
				+            font-size: 12px;
			
 
				+        }
			
 
				+
			
 
				+        .whiteBackground {
			
 
				+            background-color: rgba(225, 225, 225, 0.1);
			
 
				+            border-top: 1px dotted;
			
 
				+            border-image: linear-gradient(to right, rgba(114, 159, 207, 1), rgba(104, 104, 104, 1) 200px, rgba(104, 104, 104, 0) 75%) 30;
			
 
				+        }
			
 
				+
			
 
				+        .blueBackground {
			
 
				+            background: linear-gradient(to right, rgba(114, 159, 207, 0.3) 0%, rgba(255, 255, 255, 0.1) 200px, rgba(00, 00, 00, 0) 75%);
			
 
				+            border-bottom: 1px dotted;
			
 
				+            border-image: linear-gradient(to right, rgba(104, 104, 104, 1), rgba(104, 104, 104, 1) 200px, rgba(104, 104, 104, 0) 75%) 30;
			
 
				+        }
			
 
				+
			
 
				+        ._flex {
			
 
				+            display: flex;
			
 
				+        }
			
 
				+
			
 
				+        ._topRight {
			
 
				+            position: absolute;
			
 
				+            /*bottom: 0;*/
			
 
				+            top: 15px;
			
 
				+            right: 50px;
			
 
				+        }
			
 
				+
			
 
				+        .header-div {
			
 
				+            display: flex;
			
 
				+            height: 70px;
			
 
				+            padding: 0 15px 0 12px;
			
 
				+            color: #ffffff;
			
 
				+            align-items: center;
			
 
				+            z-index: 1000;
			
 
				+        }
			
 
				+
			
 
				+        ._playContainer {
			
 
				+            padding: 20px 15px 0 12px;
			
 
				+            height: auto;
			
 
				+        }
			
 
				+
			
 
				+        .header-label {
			
 
				+            flex: 1 1 100%;
			
 
				+            order: 1;
			
 
				+            font-size: 32px;
			
 
				+            align-self: flex-end;
			
 
				+        }
			
 
				+
			
 
				+        #sliderLabels {
			
 
				+            flex: 1 1 auto;
			
 
				+            order: 1;
			
 
				+            display: flex;
			
 
				+            justify-content: space-between;
			
 
				+            margin-top: 15px;
			
 
				+        }
			
 
				+
			
 
				+        #rangeWrapper {
			
 
				+            flex: 1 1 auto;
			
 
				+            order: 2;
			
 
				+            position: relative;
			
 
				+            padding: 0 20px;
			
 
				+        }
			
 
				+
			
 
				+        #sliderValue {
			
 
				+            flex: 0 0 100px;
			
 
				+            order: 1;
			
 
				+            display: flex;
			
 
				+            justify-content: center;
			
 
				+            flex-direction: column;
			
 
				+            text-align: center;
			
 
				+            font-size: 300%;
			
 
				+        }
			
 
				+
			
 
				+        #sliderInnerContainer {
			
 
				+            flex: 1 1 auto;
			
 
				+            order: 2;
			
 
				+            display: flex;
			
 
				+            flex-direction: column;
			
 
				+            justify-content: center;
			
 
				+            padding: 0 20px;
			
 
				+        }
			
 
				+
			
 
				+        #slider .ui-slider-range {
			
 
				+            background: #729fcf;
			
 
				+        }
			
 
				+
			
 
				+        #slider .ui-slider-handle {
			
 
				+            border-color: #729fcf;
			
 
				+        }
			
 
				+
			
 
				+        #slider .ui-slider-handle :hover {
			
 
				+            cursor: pointer;
			
 
				+        }
			
 
				+
			
 
				+        #playButton {
			
 
				+            flex: 0 0 100px;
			
 
				+            flex-flow: row nowrap;
			
 
				+            display: flex;
			
 
				+            justify-content: center;
			
 
				+            background-color: rgba(0, 0, 0, 0.2);
			
 
				+            order: 3;
			
 
				+            text-align: center;
			
 
				+            margin: 20px 0;
			
 
				+        }
			
 
				+
			
 
				+        #playButton:hover {
			
 
				+            cursor: pointer;
			
 
				+            background-color: rgba(0, 0, 0, 0.4);
			
 
				+        }
			
 
				+
			
 
				+        .toggle-button-icon {
			
 
				+            padding: 10px 0 10px 0;
			
 
				+        }
			
 
				+
			
 
				+        .icon-play, .icon-pause {
			
 
				+            padding-right: 5px;
			
 
				+        }
			
 
				+
			
 
				+        .legendContainer {
			
 
				+            position: absolute;
			
 
				+            bottom: 25px;
			
 
				+            right: 25px;
			
 
				+            width: 180px;
			
 
				+            color: white;
			
 
				+            padding: 10px;
			
 
				+            z-index: 1000;
			
 
				+        }
			
 
				+
			
 
				+        .legendHead {
			
 
				+            font-size: 20px;
			
 
				+            align-self: flex-end;
			
 
				+            flex-direction: column;
			
 
				+        }
			
 
				+
			
 
				+        .legendBody {
			
 
				+            padding-top: 10px;
			
 
				+        }
			
 
				+
			
 
				+        .legendDiv {
			
 
				+            flex: 0 0 50px;
			
 
				+            height: 150px;
			
 
				+            width: 50px;
			
 
				+            background: linear-gradient(to bottom, rgba(0, 255, 255, 1), rgba(255, 0, 255, 0.6) 50%, rgba(68, 0, 68, 0.3));
			
 
				+        }
			
 
				+
			
 
				+        .legendText {
			
 
				+            flex: 0 0 auto;
			
 
				+            flex-direction: column;
			
 
				+            padding-left: 10px;
			
 
				+            font-size: 18px;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
			
 
				+<div class="splitContainer whiteBackground _topRight">
			
 
				+    <div class="header-div blueBackground _flex">
			
 
				+        <div class="header-label" data-i18n="resources.title_mb_deckglLayer_nyBuilding"></div>
			
 
				+    </div>
			
 
				+    <div class="_playContainer _flex">
			
 
				+        <div id="sliderValue">1880</div>
			
 
				+        <div id="sliderInnerContainer">
			
 
				+            <div id="sliderLabels">
			
 
				+                <span id="startYear">1880</span>
			
 
				+                <span id="endYear">2015</span>
			
 
				+            </div>
			
 
				+            <div id="rangeWrapper">
			
 
				+                <div id="slider"></div>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+        <div id="playButton">
			
 
				+            <div class="toggle-button-icon -play _flex">
			
 
				+                <img src="../img/icon_play.png" class="icon-play">
			
 
				+                <div data-i18n="resources.text_paly"></div>
			
 
				+            </div>
			
 
				+            <div class="toggle-button-icon -pause _flex" style="display:none">
			
 
				+                <img src="../img/icon_pause.png" class="icon-pause">
			
 
				+                <div data-i18n="resources.text_pause"></div>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+    </div>
			
 
				+</div>
			
 
				+<div class="legendContainer whiteBackground">
			
 
				+    <div class="legendHead _flex">
			
 
				+        <div>Polygon color</div>
			
 
				+        <div>by years</div>
			
 
				+    </div>
			
 
				+    <div class="legendBody _flex">
			
 
				+        <div class="legendDiv"></div>
			
 
				+        <div class="legendText _flex">
			
 
				+            <div id="legendStart" style="flex:1 1 auto; align-self: flex-start"></div>
			
 
				+            <div id="legendMiddle" style="flex:1 1 auto;align-self: flex-start"></div>
			
 
				+            <div id="legendEnd" style="align-self: flex-end"></div>
			
 
				+        </div>
			
 
				+    </div>
			
 
				+</div>
			
 
				+<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
			
 
				+<script type="text/javascript" include="papaparse,bootstrap,widgets,jquery-ui" src="../js/include-web.js"></script>
			
 
				+<script type="text/javascript" include="deck" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+<script type="text/javascript">
			
 
				+    var host = window.isLocal ? window.server : "https://iserver.supermap.io", map,
			
 
				+        url = host + "/iserver/services/map-china400/rest/maps/ChinaDark",
			
 
				+        dataUrl = "https://iserver.supermap.io/iserver/services/data-ny/rest/data",
			
 
				+        deckglLayer, popup,
			
 
				+        currentYear = 1950,
			
 
				+        attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+            " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+            " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
			
 
				+    map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [url + '/zxyTileImage.png?z={z}&x={x}&y={y}'],
			
 
				+                    "tileSize": 256,
			
 
				+                },
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+                "minzoom": 13,
			
 
				+                "maxzoom": 22
			
 
				+            }]
			
 
				+        },
			
 
				+        center: [-73.981480, 40.702389],
			
 
				+        zoom: 14,
			
 
				+        minZoom: 14
			
 
				+    });
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+    initEvent();
			
 
				+    init();
			
 
				+
			
 
				+    function initEvent() {
			
 
				+        $("#sliderValue").html(currentYear);
			
 
				+        $("#legendStart").html("in " + currentYear);
			
 
				+        $("#legendMiddle").html("in " + (currentYear - 25));
			
 
				+        $("#legendEnd").html("before " + (currentYear - 50));
			
 
				+
			
 
				+        $("#playButton").click(function () {
			
 
				+            $(".toggle-button-icon").toggle();
			
 
				+        });
			
 
				+        $(".-play").click(function () {
			
 
				+            start();
			
 
				+        });
			
 
				+        $(".-pause").click(function () {
			
 
				+            pause();
			
 
				+        });
			
 
				+
			
 
				+        $("#slider").slider({
			
 
				+            orientation: "horizontal",
			
 
				+            range: "min",
			
 
				+            min: 1880,
			
 
				+            max: 2015,
			
 
				+            value: 1950,
			
 
				+//            slide: refreshSwatch,
			
 
				+            change: refreshSwatch
			
 
				+        });
			
 
				+        map.on("moveend", eventHandle);
			
 
				+        map.on("resize", eventHandle);
			
 
				+    }
			
 
				+
			
 
				+    //是否为新的请求
			
 
				+    var isNewRequest = false;
			
 
				+
			
 
				+    //地图事件
			
 
				+    function eventHandle() {
			
 
				+        isNewRequest = true;
			
 
				+        requestData();
			
 
				+    }
			
 
				+
			
 
				+    //进度条更新事件
			
 
				+    function refreshSwatch() {
			
 
				+        currentYear = $("#slider").slider("value");
			
 
				+        $("#sliderValue").html(currentYear);
			
 
				+        $("#sliderValue").html(currentYear);
			
 
				+
			
 
				+        $("#legendStart").html("in " + currentYear);
			
 
				+        $("#legendMiddle").html("in " + (currentYear - 25));
			
 
				+        $("#legendEnd").html("before " + (currentYear - 50));
			
 
				+        deckglLayer.update();
			
 
				+    }
			
 
				+
			
 
				+
			
 
				+    //初始加载
			
 
				+    function init() {
			
 
				+        currentYear = $("#slider").slider("value");
			
 
				+        requestData();
			
 
				+    }
			
 
				+
			
 
				+    //动画控制
			
 
				+    function start() {
			
 
				+        Animation();
			
 
				+    }
			
 
				+
			
 
				+    //动画控制
			
 
				+    function pause() {
			
 
				+        clearInterval(animation);
			
 
				+    }
			
 
				+
			
 
				+    var animation;
			
 
				+
			
 
				+    //动画
			
 
				+    function Animation() {
			
 
				+        //动画：
			
 
				+        window.setTimeout(function () {
			
 
				+            animation = window.setInterval(timeCount, 100);
			
 
				+        }, 1000);
			
 
				+
			
 
				+        function timeCount() {
			
 
				+            deckglLayer.update();
			
 
				+            if (currentYear === 2015) {
			
 
				+                currentYear = 1880;
			
 
				+            }
			
 
				+            currentYear++;
			
 
				+            $("#slider").slider("value", currentYear);
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    //todo 一个合理的请求方式，初始化和界面范围变化时触发请求，还需要避免两种情况冲突
			
 
				+    var responseCounts = 0;
			
 
				+
			
 
				+    //请求数据
			
 
				+    function requestData() {
			
 
				+        for (var i = 1; i <= 5; i++) {
			
 
				+            query(i)
			
 
				+        }
			
 
				+
			
 
				+        function query(count) {
			
 
				+            var boundsParam = new SuperMap.GetFeaturesByBoundsParameters({
			
 
				+                datasetNames: ["ny:Building_Footprints"],
			
 
				+                attributeFilter: "cnstrct_yr > " + (1880 + 26 * (count - 1)) + " And cnstrct_yr <= " + (1880 + 26 * count),
			
 
				+                bounds: map.getBounds(),
			
 
				+                toIndex: 1000000,
			
 
				+                maxFeatures: 1000000,
			
 
				+            });
			
 
				+
			
 
				+            new mapboxgl.supermap.FeatureService(dataUrl).getFeaturesByBounds(boundsParam, callback);
			
 
				+        }
			
 
				+
			
 
				+        function callback(result) {
			
 
				+            if (isNewRequest) {
			
 
				+                responseCounts++;
			
 
				+            }
			
 
				+            if (deckglLayer) {
			
 
				+                updateLayer(dataSetAdjust(result));
			
 
				+            } else {
			
 
				+                deckglLayer = new mapboxgl.supermap.DeckglLayer("polygon-layer", {
			
 
				+                    data: dataSetAdjust(result),
			
 
				+                    props: {
			
 
				+                        stroked: false,
			
 
				+                        onHover: function (feature) {
			
 
				+                            if (!popup) {
			
 
				+                                popup = new mapboxgl.Popup({
			
 
				+                                    anchor: 'bottom',
			
 
				+                                    closeButton: false,
			
 
				+                                    offset: {
			
 
				+                                        'bottom': [0, -10],
			
 
				+                                    }
			
 
				+                                });
			
 
				+                            }
			
 
				+                            if (!feature.object || !feature.object.properties.isShow) {
			
 
				+                                popup.remove();
			
 
				+                                return;
			
 
				+                            }
			
 
				+                            //+ "x:" + feature.lngLat[0] + ",y:" + feature.lngLat[1]
			
 
				+                            popup.setHTML("于 " + feature.object.properties.CNSTRCT_YR + " 年建成");
			
 
				+                            popup.setLngLat(map.unproject([feature.x, feature.y]));
			
 
				+                            popup.addTo(map);
			
 
				+                        }
			
 
				+                    },
			
 
				+                    callback: {getFillColor: updateLayerOptions},
			
 
				+
			
 
				+                });
			
 
				+                map.addLayer(deckglLayer);
			
 
				+
			
 
				+            }
			
 
				+
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    //调整请求回来得数据格式以支持图层绘制
			
 
				+    function dataSetAdjust(result) {
			
 
				+        return result.result.features.features.map(function (item) {
			
 
				+            if (item.geometry.type !== "Polygon") {
			
 
				+                item.geometry.coordinates[0] = item.geometry.coordinates[0][0];
			
 
				+                item.geometry.type = 'Polygon';
			
 
				+
			
 
				+            }
			
 
				+            return item;
			
 
				+        });
			
 
				+    }
			
 
				+
			
 
				+
			
 
				+    //配置颜色的算法
			
 
				+    function updateLayerOptions(feature) {
			
 
				+        // rgba(0, 255, 255, 1), rgba(255, 0, 255, 0.6) 50%,rgba(68, 0,68, 0.3)
			
 
				+        var proportion = 1, r, g, b, a;
			
 
				+        if (Number(feature.properties.CNSTRCT_YR) > currentYear) {
			
 
				+            feature.properties.isShow = false;
			
 
				+            return [0, 0, 0, 0];
			
 
				+        }
			
 
				+        feature.properties.isShow = true;
			
 
				+        if (Number(feature.properties.CNSTRCT_YR) <= (currentYear - 50)) {
			
 
				+            return [68, 0, 68, 80];
			
 
				+        }
			
 
				+
			
 
				+        var centerYear = currentYear - 25;
			
 
				+        var endYear = currentYear - 50;
			
 
				+
			
 
				+        if (Number(feature.properties.CNSTRCT_YR) >= centerYear) {
			
 
				+            if (currentYear !== endYear) {
			
 
				+                proportion = 1 - ((Number(feature.properties.CNSTRCT_YR) - centerYear) / (currentYear - centerYear));
			
 
				+            }
			
 
				+
			
 
				+            r = proportion * 255;
			
 
				+            g = 255 - proportion * 255;
			
 
				+            b = 255;
			
 
				+            a = 127.5 + (1 - proportion) * 127.5;
			
 
				+
			
 
				+            return [r, g, b, a];
			
 
				+        } else {
			
 
				+            if (currentYear !== endYear) {
			
 
				+                proportion = 1 - ((Number(feature.properties.CNSTRCT_YR) - endYear) / (centerYear - endYear));
			
 
				+            }
			
 
				+
			
 
				+            r = 255 - proportion * (255 - 68);
			
 
				+            g = 0;
			
 
				+            b = 255 - proportion * (255 - 68);
			
 
				+            a = 80 + (1 - proportion) * 127.5;
			
 
				+
			
 
				+            return [r, g, b, a];
			
 
				+        }
			
 
				+
			
 
				+    }
			
 
				+
			
 
				+    //更新图层
			
 
				+    function updateLayer(features) {
			
 
				+        if (isNewRequest && responseCounts === 1) {
			
 
				+            deckglLayer.setData(features);
			
 
				+//            Animation();
			
 
				+        } else {
			
 
				+            deckglLayer.addData(features);
			
 
				+        }
			
 
				+
			
 
				+        //当新的请求全部返回完成后，重置请求状态
			
 
				+        if (isNewRequest && responseCounts === 5) {
			
 
				+            isNewRequest = false;
			
 
				+            responseCounts = 0;
			
 
				+        }
			
 
				+
			
 
				+    }
			
 
				+
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/deckglLayer_nyc_census.html
+++ b/public/supermap/examples/mapboxgl/deckglLayer_nyc_census.html
@@ -0,0 +1,233 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+  <head>
			
 
				+    <meta charset="UTF-8" />
			
 
				+    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
			
 
				+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" />
			
 
				+    <title data-i18n="resources.title_mb_deckglLayer_nyc_census"></title>
			
 
				+    <style>
			
 
				+      body {
			
 
				+        margin: 0;
			
 
				+        overflow: hidden;
			
 
				+        background: #fff;
			
 
				+        width: 100%;
			
 
				+        height: 100%;
			
 
				+      }
			
 
				+
			
 
				+      #map {
			
 
				+        position: absolute;
			
 
				+        top: 0;
			
 
				+        bottom: 0;
			
 
				+        width: 100%;
			
 
				+      }
			
 
				+
			
 
				+      #title {
			
 
				+        position: absolute;
			
 
				+        color: white;
			
 
				+        left: 40%;
			
 
				+        top: 30px;
			
 
				+        text-align: center;
			
 
				+        width: 500px;
			
 
				+        z-index: 2;
			
 
				+      }
			
 
				+
			
 
				+      #title > h3 {
			
 
				+        margin: 10px 0;
			
 
				+        letter-spacing: 0.1em;
			
 
				+      }
			
 
				+
			
 
				+      #title > h6 {
			
 
				+        margin: 0;
			
 
				+        font-weight: normal;
			
 
				+      }
			
 
				+
			
 
				+      .whiteBackground {
			
 
				+        background-color: rgba(225, 225, 225, 0.1);
			
 
				+        border-top: 1px dotted;
			
 
				+        border-image: linear-gradient(
			
 
				+            to right,
			
 
				+            rgba(114, 159, 207, 1),
			
 
				+            rgba(104, 104, 104, 1) 200px,
			
 
				+            rgba(104, 104, 104, 0) 75%
			
 
				+          )
			
 
				+          30;
			
 
				+      }
			
 
				+
			
 
				+      .legendContainer {
			
 
				+        position: absolute;
			
 
				+        bottom: 25px;
			
 
				+        right: 25px;
			
 
				+        color: white;
			
 
				+        padding: 10px 10px 0 10px;
			
 
				+        z-index: 1000;
			
 
				+      }
			
 
				+
			
 
				+      .legendHead {
			
 
				+        align-self: flex-end;
			
 
				+      }
			
 
				+
			
 
				+      .legendBody {
			
 
				+        padding-top: 10px;
			
 
				+      }
			
 
				+    </style>
			
 
				+  </head>
			
 
				+  <body>
			
 
				+    <div id="title">
			
 
				+      <h3 data-i18n="resources.title_mb_deckglLayer_nyc_census"></h3>
			
 
				+      <h6 data-i18n="resources.text_mb_deckglLayer_nyc_census"></h6>
			
 
				+    </div>
			
 
				+    <div class="legendContainer whiteBackground">
			
 
				+      <div class="legendHead _flex">
			
 
				+        <div>NYC 2010 Census Tracts</div>
			
 
				+        <div>Polygon color</div>
			
 
				+        <div>by Population</div>
			
 
				+      </div>
			
 
				+      <div class="legendBody _flex">
			
 
				+        <svg width="180" height="200">
			
 
				+          <g transform="translate(0, 0)">
			
 
				+            <rect width="30" height="20" style="fill: rgb(25, 66, 102);"></rect>
			
 
				+            <text x="38" y="14" fill="white">[ 0, 1670.5 ]</text>
			
 
				+          </g>
			
 
				+          <g transform="translate(0, 24)">
			
 
				+            <rect width="30" height="20" style="fill: rgb(53, 92, 125);"></rect>
			
 
				+            <text x="38" y="14" fill="white">( 1670.5, 2259.0]</text>
			
 
				+          </g>
			
 
				+          <g transform="translate(0, 48)">
			
 
				+            <rect width="30" height="20" style="fill: rgb(99, 97, 127);"></rect>
			
 
				+            <text x="38" y="14" fill="white">( 2259.0, 2862.88]</text>
			
 
				+          </g>
			
 
				+          <g transform="translate(0, 72)">
			
 
				+            <rect width="30" height="20" style="fill: rgb(145, 102, 129);"></rect>
			
 
				+            <text x="38" y="14" fill="white">( 2862.88, 3426.50]</text>
			
 
				+          </g>
			
 
				+          <g transform="translate(0, 96)">
			
 
				+            <rect width="30" height="20" style="fill: rgb(192, 108, 132);"></rect>
			
 
				+            <text x="38" y="14" fill="white">( 3426.50, 4013.25 ]</text>
			
 
				+          </g>
			
 
				+          <g transform="translate(0, 120)">
			
 
				+            <rect width="30" height="20" style="fill: rgb(210, 131, 137);"></rect>
			
 
				+            <text x="38" y="14" fill="white">( 4013.25, 4814.00 ]</text>
			
 
				+          </g>
			
 
				+          <g transform="translate(0, 144)">
			
 
				+            <rect width="30" height="20" style="fill: rgb(229, 154, 143);"></rect>
			
 
				+            <text x="38" y="14" fill="white">( 4814.00, 6204.25 ]</text>
			
 
				+          </g>
			
 
				+          <g transform="translate(0, 168)">
			
 
				+            <rect width="30" height="20" style="fill: rgb(248, 177, 149);"></rect>
			
 
				+            <text x="38" y="14" fill="white">( 6204.25, 26588.00 ]</text>
			
 
				+          </g>
			
 
				+        </svg>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <div id="map"></div>
			
 
				+    <script
			
 
				+      type="text/javascript"
			
 
				+      include="jquery,bootstrap,papaparse,dat-gui,widgets"
			
 
				+      src="../js/include-web.js"
			
 
				+    ></script>
			
 
				+    <script type="text/javascript" include="deck" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+    <script type="text/javascript">
			
 
				+      var host = window.isLocal ? window.server : 'https://iserver.supermap.io',
			
 
				+        url = host + '/iserver/services/map-china400/rest/maps/ChinaDark';
			
 
				+      var map, deckglLayer;
			
 
				+
			
 
				+      var attribution =
			
 
				+        "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+        " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+        " Map Data <span>© <a href='https://uber.github.io/kepler.gl' target='_blank'>kepler.gl</a></span> ";
			
 
				+      map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+          version: 8,
			
 
				+          sources: {
			
 
				+            'raster-tiles': {
			
 
				+              attribution: attribution,
			
 
				+              type: 'raster',
			
 
				+              tiles: [url + '/zxyTileImage.png?z={z}&x={x}&y={y}'],
			
 
				+              tileSize: 256
			
 
				+            }
			
 
				+          },
			
 
				+          layers: [
			
 
				+            {
			
 
				+              id: 'simple-tiles',
			
 
				+              type: 'raster',
			
 
				+              source: 'raster-tiles',
			
 
				+              minzoom: 0,
			
 
				+              maxzoom: 22
			
 
				+            }
			
 
				+          ]
			
 
				+        },
			
 
				+        center: [-73.83429, 40.725818],
			
 
				+        zoom: 11.5,
			
 
				+        pitch: 60,
			
 
				+        bearing: -100
			
 
				+      });
			
 
				+      map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+
			
 
				+      widgets.loader.showLoader('data loading...');
			
 
				+
			
 
				+      $.get('../data/deck.gl/nyc_census_data.json', function(features) {
			
 
				+        widgets.loader.removeLoader();
			
 
				+        addLayer(features.features);
			
 
				+      });
			
 
				+
			
 
				+      function addLayer(features) {
			
 
				+        deckglLayer = new mapboxgl.supermap.DeckglLayer('polygon-layer', {
			
 
				+          data: features,
			
 
				+          props: {
			
 
				+            stroked: false,
			
 
				+            extruded: true,
			
 
				+            filled: true,
			
 
				+            opacity: 0.7,
			
 
				+            autoHighlight: true,
			
 
				+            highlightColor: [255, 255, 0, 255],
			
 
				+            lightSettings: {
			
 
				+              lightsPosition: [-73, 40, 5000, -74, 41, 5000],
			
 
				+              ambientRatio: 0.2,
			
 
				+              diffuseRatio: 0.5,
			
 
				+              specularRatio: 0.3,
			
 
				+              lightsStrength: [1.0, 0.0, 2.0, 0.0],
			
 
				+              numberOfLights: 2
			
 
				+            }
			
 
				+          },
			
 
				+          callback: {
			
 
				+            getPolygon: function(feature) {
			
 
				+              if (!feature.geometry || !feature.geometry.coordinates) {
			
 
				+                return [0, 0];
			
 
				+              }
			
 
				+              return feature.geometry.coordinates;
			
 
				+            },
			
 
				+            getElevation: function(d) {
			
 
				+              return d.properties.Population / 8;
			
 
				+            },
			
 
				+            getFillColor: function(feature) {
			
 
				+              if (feature.properties.Population >= 0 && feature.properties.Population < 1670.5) {
			
 
				+                return [25, 66, 102];
			
 
				+              } else if (feature.properties.Population >= 1670.5 && feature.properties.Population < 2259.0) {
			
 
				+                return [53, 92, 125];
			
 
				+              } else if (feature.properties.Population >= 2259.0 && feature.properties.Population < 2862.88) {
			
 
				+                return [99, 97, 127];
			
 
				+              } else if (feature.properties.Population >= 2862.88 && feature.properties.Population < 3426.5) {
			
 
				+                return [145, 102, 129];
			
 
				+              } else if (feature.properties.Population >= 3426.5 && feature.properties.Population < 4013.25) {
			
 
				+                return [192, 108, 132];
			
 
				+              } else if (feature.properties.Population >= 4013.25 && feature.properties.Population < 4814.0) {
			
 
				+                return [210, 131, 137];
			
 
				+              } else if (feature.properties.Population >= 4814.0 && feature.properties.Population < 6204.25) {
			
 
				+                return [229, 154, 143];
			
 
				+              } else if (feature.properties.Population >= 6204.25) {
			
 
				+                return [248, 177, 149];
			
 
				+              }
			
 
				+
			
 
				+              return [0, 0, 0, 0];
			
 
				+            }
			
 
				+          }
			
 
				+        });
			
 
				+        map.addLayer(deckglLayer);
			
 
				+      }
			
 
				+    </script>
			
 
				+  </body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/deckglLayer_pathLayer.html
+++ b/public/supermap/examples/mapboxgl/deckglLayer_pathLayer.html
@@ -0,0 +1,127 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+  <head>
			
 
				+    <meta charset="UTF-8" />
			
 
				+    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
			
 
				+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" />
			
 
				+    <title data-i18n="resources.title_mb_deckglLayer_pathLayer"></title>
			
 
				+    <style>
			
 
				+      body {
			
 
				+        margin: 0;
			
 
				+        overflow: hidden;
			
 
				+        background: #fff;
			
 
				+        width: 100%;
			
 
				+        height: 100%;
			
 
				+      }
			
 
				+
			
 
				+      #map {
			
 
				+        position: absolute;
			
 
				+        top: 0;
			
 
				+        bottom: 0;
			
 
				+        width: 100%;
			
 
				+      }
			
 
				+    </style>
			
 
				+  </head>
			
 
				+  <body>
			
 
				+    <div id="map"></div>
			
 
				+    <script type="text/javascript" include="widgets" src="../js/include-web.js"></script>
			
 
				+    <script type="text/javascript" include="deck" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+    <script type="text/javascript">
			
 
				+      var host = window.isLocal ? window.server : 'https://iserver.supermap.io',
			
 
				+        url = host + '/iserver/services/map-china400/rest/maps/ChinaDark';
			
 
				+      var map, deckglLayer;
			
 
				+      var attribution =
			
 
				+        "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+        " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+        " Map Data <span>© <a href='https://uber.github.io/deck.gl' target='_blank'>deck.gl</a></span> ";
			
 
				+
			
 
				+      map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+          version: 8,
			
 
				+          sources: {
			
 
				+            'raster-tiles': {
			
 
				+              attribution: attribution,
			
 
				+              type: 'raster',
			
 
				+              tiles: [url + '/zxyTileImage.png?z={z}&x={x}&y={y}'],
			
 
				+              tileSize: 256
			
 
				+            }
			
 
				+          },
			
 
				+          layers: [
			
 
				+            {
			
 
				+              id: 'simple-tiles',
			
 
				+              type: 'raster',
			
 
				+              source: 'raster-tiles',
			
 
				+              minzoom: 0,
			
 
				+              maxzoom: 22
			
 
				+            }
			
 
				+          ]
			
 
				+        },
			
 
				+        center: [-122.271604, 37.803664],
			
 
				+        zoom: 12
			
 
				+      });
			
 
				+      map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+
			
 
				+      widgets.loader.showLoader('data loading...');
			
 
				+
			
 
				+      $.get('../data/deck.gl/bart-lines.json', function(features) {
			
 
				+        widgets.loader.removeLoader();
			
 
				+        addLayer(features);
			
 
				+      });
			
 
				+
			
 
				+      function addLayer(features) {
			
 
				+        deckglLayer = new mapboxgl.supermap.DeckglLayer('path-layer', {
			
 
				+          data: features,
			
 
				+          props: {
			
 
				+            widthScale: 20, //线宽比例
			
 
				+            widthMinPixels: 2 //线宽最小像素值
			
 
				+            //该类型可配置的其他参数有：
			
 
				+            //widthMaxPixels  线宽最大像素值，默认为 Number.MAX_SAFE_INTEGER；
			
 
				+            //rounded  节点是否绘制为弧形，可选参数，默认为 false；
			
 
				+            //miterLimit  节点相对于线宽的最大范围，默认为 4，仅在 rounded 为 false 时有效；
			
 
				+            //fp64  否应以高精度64位模式呈现图层，默认为 false；
			
 
				+            //dashJustified 是否虚线形式显示，默认为 false，仅在 getDashArray() 回调函数被指定时有效；
			
 
				+          },
			
 
				+          callback: {
			
 
				+            getPath: function(d) {
			
 
				+              return d.path;
			
 
				+            },
			
 
				+            getColor: function(d) {
			
 
				+              return d.color.colorRgb();
			
 
				+            },
			
 
				+            getWidth: function(d) {
			
 
				+              return 5;
			
 
				+            }
			
 
				+          }
			
 
				+        });
			
 
				+        map.addLayer(deckglLayer);
			
 
				+      }
			
 
				+
			
 
				+      var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
			
 
				+      /*16进制颜色转为RGB格式*/
			
 
				+      String.prototype.colorRgb = function() {
			
 
				+        var sColor = this.toLowerCase();
			
 
				+        if (sColor && reg.test(sColor)) {
			
 
				+          if (sColor.length === 4) {
			
 
				+            var sColorNew = '#';
			
 
				+            for (var i = 1; i < 4; i += 1) {
			
 
				+              sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
			
 
				+            }
			
 
				+            sColor = sColorNew;
			
 
				+          }
			
 
				+          //处理六位的颜色值
			
 
				+          var sColorChange = [];
			
 
				+          for (var i = 1; i < 7; i += 2) {
			
 
				+            sColorChange.push(parseInt('0x' + sColor.slice(i, i + 2)));
			
 
				+          }
			
 
				+          return sColorChange;
			
 
				+        } else {
			
 
				+          return sColor;
			
 
				+        }
			
 
				+      };
			
 
				+    </script>
			
 
				+  </body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/deckglLayer_pathLayer_4326.html
+++ b/public/supermap/examples/mapboxgl/deckglLayer_pathLayer_4326.html
@@ -0,0 +1,131 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+  <head>
			
 
				+    <meta charset="utf-8" />
			
 
				+    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
			
 
				+    <title data-i18n="resources.title_mb_deckglLayer_pathLayerWGS84"></title>
			
 
				+    <script type="text/javascript" include="jquery" src="../js/include-web.js"></script>
			
 
				+    <style>
			
 
				+      body {
			
 
				+        margin: 0;
			
 
				+        padding: 0;
			
 
				+      }
			
 
				+
			
 
				+      #map {
			
 
				+        position: absolute;
			
 
				+        top: 0;
			
 
				+        bottom: 0;
			
 
				+        width: 100%;
			
 
				+      }
			
 
				+      .mapboxgl-marker {
			
 
				+        width: 10px;
			
 
				+        height: 10px;
			
 
				+        background: red;
			
 
				+        margin-top: -5px;
			
 
				+        margin-left: -5px;
			
 
				+        border-radius: 5px;
			
 
				+        cursor: pointer;
			
 
				+      }
			
 
				+    </style>
			
 
				+  </head>
			
 
				+
			
 
				+  <body>
			
 
				+    <div id="map"></div>
			
 
				+    <script
			
 
				+      type="text/javascript"
			
 
				+      include="mapbox-gl-enhance,deck"
			
 
				+      src="../../dist/mapboxgl/include-mapboxgl.js"
			
 
				+    ></script>
			
 
				+    <script type="text/javascript">
			
 
				+      var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
			
 
				+      var map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+          version: 8,
			
 
				+          sources: {
			
 
				+            'raster-tiles': {
			
 
				+              type: 'raster',
			
 
				+              tiles: [host + '/iserver/services/map-world/rest/maps/World'],
			
 
				+              rasterSource: 'iserver',
			
 
				+              tileSize: 256
			
 
				+            }
			
 
				+          },
			
 
				+
			
 
				+          layers: [
			
 
				+            {
			
 
				+              id: 'simple-tiles',
			
 
				+              type: 'raster',
			
 
				+              source: 'raster-tiles',
			
 
				+              minzoom: 0,
			
 
				+              maxzoom: 22
			
 
				+            }
			
 
				+          ]
			
 
				+        },
			
 
				+        crs: 'EPSG:4326',
			
 
				+        center: [-122.28293365065224, 37.924513609424366],
			
 
				+        zoom: 11
			
 
				+      });
			
 
				+      $.get('../data/deck.gl/bart-lines.json', function(features) {
			
 
				+        addLayer(features);
			
 
				+      });
			
 
				+
			
 
				+      function addLayer(features) {
			
 
				+        deckglLayer = new mapboxgl.supermap.DeckglLayer('path-layer', {
			
 
				+          data: features,
			
 
				+          props: {
			
 
				+            widthScale: 20, //线宽比例
			
 
				+            widthMinPixels: 2, //线宽最小像素值
			
 
				+            coordinateSystem: 3,
			
 
				+            onHover: function(feature) {
			
 
				+              console.log(feature);
			
 
				+            }
			
 
				+            //该类型可配置的其他参数有：
			
 
				+            //widthMaxPixels  线宽最大像素值，默认为 Number.MAX_SAFE_INTEGER；
			
 
				+            //rounded  节点是否绘制为弧形，可选参数，默认为 false；
			
 
				+            //miterLimit  节点相对于线宽的最大范围，默认为 4，仅在 rounded 为 false 时有效；
			
 
				+            //fp64  否应以高精度64位模式呈现图层，默认为 false；
			
 
				+            //dashJustified 是否虚线形式显示，默认为 false，仅在 getDashArray() 回调函数被指定时有效；
			
 
				+          },
			
 
				+          callback: {
			
 
				+            getPath: function(d) {
			
 
				+              return d.path;
			
 
				+            },
			
 
				+            getColor: function(d) {
			
 
				+              return d.color.colorRgb();
			
 
				+            },
			
 
				+            getWidth: function(d) {
			
 
				+              return 5;
			
 
				+            }
			
 
				+          }
			
 
				+        });
			
 
				+        map.addLayer(deckglLayer);
			
 
				+      }
			
 
				+
			
 
				+      var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
			
 
				+      /*16进制颜色转为RGB格式*/
			
 
				+      String.prototype.colorRgb = function() {
			
 
				+        var sColor = this.toLowerCase();
			
 
				+        if (sColor && reg.test(sColor)) {
			
 
				+          if (sColor.length === 4) {
			
 
				+            var sColorNew = '#';
			
 
				+            for (var i = 1; i < 4; i += 1) {
			
 
				+              sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
			
 
				+            }
			
 
				+            sColor = sColorNew;
			
 
				+          }
			
 
				+          //处理六位的颜色值
			
 
				+          var sColorChange = [];
			
 
				+          for (var i = 1; i < 7; i += 2) {
			
 
				+            sColorChange.push(parseInt('0x' + sColor.slice(i, i + 2)));
			
 
				+          }
			
 
				+          return sColorChange;
			
 
				+        } else {
			
 
				+          return sColor;
			
 
				+        }
			
 
				+      };
			
 
				+    </script>
			
 
				+  </body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/deckglLayer_polygonLayer.html
+++ b/public/supermap/examples/mapboxgl/deckglLayer_polygonLayer.html
@@ -0,0 +1,115 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+  <head>
			
 
				+    <meta charset="UTF-8" />
			
 
				+    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
			
 
				+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" />
			
 
				+    <title data-i18n="resources.title_mb_deckglLayer_polygonLayer"></title>
			
 
				+    <style>
			
 
				+      body {
			
 
				+        margin: 0;
			
 
				+        overflow: hidden;
			
 
				+        background: #fff;
			
 
				+        width: 100%;
			
 
				+        height: 100%;
			
 
				+      }
			
 
				+
			
 
				+      #map {
			
 
				+        position: absolute;
			
 
				+        top: 0;
			
 
				+        bottom: 0;
			
 
				+        width: 100%;
			
 
				+      }
			
 
				+    </style>
			
 
				+  </head>
			
 
				+  <body>
			
 
				+    <div id="map"></div>
			
 
				+    <script type="text/javascript" include="widgets" src="../js/include-web.js"></script>
			
 
				+    <script type="text/javascript" include="deck" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+    <script type="text/javascript">
			
 
				+      var host = window.isLocal ? window.server : 'https://iserver.supermap.io',
			
 
				+        url = host + '/iserver/services/map-china400/rest/maps/ChinaDark';
			
 
				+      var map, deckglLayer;
			
 
				+
			
 
				+      var attribution =
			
 
				+        "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+        " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+        " Map Data <span>© <a href='https://uber.github.io/deck.gl' target='_blank'>deck.gl</a></span> ";
			
 
				+      map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+          version: 8,
			
 
				+          sources: {
			
 
				+            'raster-tiles': {
			
 
				+              attribution: attribution,
			
 
				+              type: 'raster',
			
 
				+              tiles: [url + '/zxyTileImage.png?z={z}&x={x}&y={y}'],
			
 
				+              tileSize: 256
			
 
				+            }
			
 
				+          },
			
 
				+          layers: [
			
 
				+            {
			
 
				+              id: 'simple-tiles',
			
 
				+              type: 'raster',
			
 
				+              source: 'raster-tiles',
			
 
				+              minzoom: 0,
			
 
				+              maxzoom: 22
			
 
				+            }
			
 
				+          ]
			
 
				+        },
			
 
				+        center: [-122.4628047, 37.7688628],
			
 
				+        zoom: 11.5,
			
 
				+        pitch: 60,
			
 
				+        bearing: 36
			
 
				+      });
			
 
				+      map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+
			
 
				+      widgets.loader.showLoader('data loading...');
			
 
				+
			
 
				+      $.get('../data/deck.gl/sf-zipcodes.json', function(features) {
			
 
				+        widgets.loader.removeLoader();
			
 
				+        addLayer(features);
			
 
				+      });
			
 
				+
			
 
				+      function addLayer(features) {
			
 
				+        deckglLayer = new mapboxgl.supermap.DeckglLayer('polygon-layer', {
			
 
				+          data: features,
			
 
				+          props: {
			
 
				+            extruded: true, //是否拉伸建筑，可选参数，默认为 false；
			
 
				+            stroked: true, //是否绘制边线，可选参数，默认为 true；
			
 
				+            filled: true, //是否填充面，可选参数，默认为 true
			
 
				+            wireframe: true, //当面被拉伸为建筑时，是否描绘建筑物边线，可选参数，默认为 false；
			
 
				+            lineWidthMinPixels: 1 //线宽最小像素值，可选参数，默认为 0；
			
 
				+            //该类型可配置的其他参数有：
			
 
				+            //elevationScale  海拔比例，可选参数，默认为 1；
			
 
				+            //lineWidthScale  线宽比例，可选参数，默认为 1；
			
 
				+            //lineWidthMaxPixels  线宽最大像素值，可选参数，默认为 Number.MAX_SAFE_INTEGER；
			
 
				+            //lineJointRounded  节点是否绘制为弧形，可选参数，默认为 false；
			
 
				+            //lineMiterLimit  节点相对于线宽的最大范围，可选参数，默认为 4，仅在 lineJointRounded 为 false 时有效；
			
 
				+            //lineDashJustified 是否虚线形式显示，可选参数，默认为 false，仅在 getLineDashArray() 回调函数被指定时有效；
			
 
				+            //fp64 否应以高精度64位模式呈现图层，可选参数，默认为 false；
			
 
				+          },
			
 
				+          callback: {
			
 
				+            getPolygon: function(d) {
			
 
				+              return d.contour;
			
 
				+            },
			
 
				+            getElevation: function(d) {
			
 
				+              return d.population / d.area / 10;
			
 
				+            },
			
 
				+            getFillColor: function(d) {
			
 
				+              return [d.population / d.area / 60, 140, 0];
			
 
				+            },
			
 
				+            getLineColor: function() {
			
 
				+              return [80, 80, 80]
			
 
				+            },
			
 
				+            getLineWidth: 1
			
 
				+          }
			
 
				+        });
			
 
				+        map.addLayer(deckglLayer);
			
 
				+      }
			
 
				+    </script>
			
 
				+  </body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/deckglLayer_scatterPlot.html
+++ b/public/supermap/examples/mapboxgl/deckglLayer_scatterPlot.html
@@ -0,0 +1,224 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
			
 
				+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
			
 
				+    <title data-i18n="resources.title_mb_deckglLayer_scatterPlot"></title>
			
 
				+    <style>
			
 
				+        body {
			
 
				+            margin: 0;
			
 
				+            overflow: hidden;
			
 
				+            background: #fff;
			
 
				+            width: 100%;
			
 
				+            height: 100%
			
 
				+        }
			
 
				+
			
 
				+        #map {
			
 
				+            position: absolute;
			
 
				+            top: 0;
			
 
				+            bottom: 0;
			
 
				+            width: 100%;
			
 
				+        }
			
 
				+
			
 
				+        #title {
			
 
				+            position: absolute;
			
 
				+            color: white;
			
 
				+            left: 40%;
			
 
				+            top: 30px;
			
 
				+            text-align: center;
			
 
				+            width: 500px;
			
 
				+            z-index: 2;
			
 
				+        }
			
 
				+
			
 
				+        #title > h3 {
			
 
				+            margin: 10px 0;
			
 
				+            letter-spacing: 0.1em;
			
 
				+        }
			
 
				+
			
 
				+        #title > h6 {
			
 
				+            margin: 0;
			
 
				+            font-weight: normal;
			
 
				+        }
			
 
				+
			
 
				+        .whiteBackground {
			
 
				+            background-color: rgba(225, 225, 225, 0.1);
			
 
				+            border-top: 1px dotted;
			
 
				+            border-image: linear-gradient(to right, rgba(114, 159, 207, 1), rgba(104, 104, 104, 1) 200px, rgba(104, 104, 104, 0) 75%) 30;
			
 
				+        }
			
 
				+
			
 
				+        .legendContainer {
			
 
				+            position: absolute;
			
 
				+            bottom: 25px;
			
 
				+            right: 25px;
			
 
				+            color: white;
			
 
				+            padding: 10px 10px 0px 10px;
			
 
				+            z-index: 1000;
			
 
				+        }
			
 
				+
			
 
				+        .legendHead {
			
 
				+            align-self: flex-end;
			
 
				+        }
			
 
				+
			
 
				+        .legendBody {
			
 
				+            padding-top: 10px;
			
 
				+        }
			
 
				+
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+<div id="title">
			
 
				+    <h3 data-i18n="resources.title_mb_deckglLayer_scatterPlot"></h3>
			
 
				+    <h6 data-i18n="resources.text_mb_deckglLayer_scatterPlot"></h6>
			
 
				+</div>
			
 
				+<div class="legendContainer whiteBackground">
			
 
				+    <div class="legendHead _flex">
			
 
				+        <div>Point</div>
			
 
				+        <div>Point color</div>
			
 
				+        <div>by Magnitude</div>
			
 
				+    </div>
			
 
				+    <div class="legendBody _flex">
			
 
				+        <svg width="120">
			
 
				+            <g transform="translate(0, 0)">
			
 
				+                <rect width="30" height="20" style="fill: rgb(118, 42, 131);"></rect>
			
 
				+                <text x="38" y="14" fill="white">[ 2.50, 3.31 ]</text>
			
 
				+            </g>
			
 
				+            <g transform="translate(0, 24)">
			
 
				+                <rect width="30" height="20" style="fill: rgb(175, 141, 195);"></rect>
			
 
				+                <text x="38" y="14" fill="white">( 3.31, 4.13 ]</text>
			
 
				+            </g>
			
 
				+            <g transform="translate(0, 48)">
			
 
				+                <rect width="30" height="20" style="fill: rgb(231, 212, 232);"></rect>
			
 
				+                <text x="38" y="14" fill="white">( 4.13, 4.94 ]</text>
			
 
				+            </g>
			
 
				+            <g transform="translate(0, 72)">
			
 
				+                <rect width="30" height="20" style="fill: rgb(217, 240, 211);"></rect>
			
 
				+                <text x="38" y="14" fill="white">( 4.94, 5.76 ]</text>
			
 
				+            </g>
			
 
				+            <g transform="translate(0, 96)">
			
 
				+                <rect width="30" height="20" style="fill: rgb(127, 191, 123);"></rect>
			
 
				+                <text x="38" y="14" fill="white">( 5.76, 6.57 ]</text>
			
 
				+            </g>
			
 
				+            <g transform="translate(0, 120)">
			
 
				+                <rect width="30" height="20" style="fill: rgb(27, 120, 55);"></rect>
			
 
				+                <text x="38" y="14" fill="white">( 6.57, 7.39 ]</text>
			
 
				+            </g>
			
 
				+        </svg>
			
 
				+    </div>
			
 
				+
			
 
				+</div>
			
 
				+<div id="map"></div>
			
 
				+<script type="text/javascript" include="papaparse,bootstrap,widgets" src="../js/include-web.js"></script>
			
 
				+<script type="text/javascript" include="deck" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+<script type="text/javascript">
			
 
				+
			
 
				+    var host = window.isLocal ? window.server : "https://iserver.supermap.io",
			
 
				+        url = host + "/iserver/services/map-china400/rest/maps/ChinaDark";
			
 
				+    var map, deckglLayer;
			
 
				+    var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+            " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+            " Map Data <span>© <a href='https://uber.github.io/kepler.gl' target='_blank'>kepler.gl</a></span> ";
			
 
				+
			
 
				+    map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [url + '/zxyTileImage.png?z={z}&x={x}&y={y}'],
			
 
				+                    "tileSize": 256,
			
 
				+                },
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+                "minzoom": 0,
			
 
				+                "maxzoom": 22
			
 
				+            }]
			
 
				+        },
			
 
				+        center: [-121.40334, 38.19812],
			
 
				+        zoom: 5.5
			
 
				+    });
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+
			
 
				+    widgets.loader.showLoader("data loading...");
			
 
				+
			
 
				+    $.get('../data/deck.gl/earthquakes_data.csv', function (csvstr) {
			
 
				+        widgets.loader.removeLoader();
			
 
				+        var result = Papa.parse(csvstr, {skipEmptyLines: true, header: true});
			
 
				+        addLayer(result.data);
			
 
				+    });
			
 
				+
			
 
				+    function addLayer(points) {
			
 
				+        var popup = new mapboxgl.Popup({closeOnClick: false}).addTo(map);
			
 
				+        deckglLayer = new mapboxgl.supermap.DeckglLayer("scatter-plot", {
			
 
				+            data: points,
			
 
				+            props: {
			
 
				+                radiusScale: 300,
			
 
				+                radiusMaxPixels: 500,
			
 
				+                opacity: 0.3,
			
 
				+                autoHighlight: true,
			
 
				+                highlightColor: [255, 255, 0, 255],
			
 
				+                onHover: function (e) {
			
 
				+                    if (!popup) {
			
 
				+                        popup = new mapboxgl.Popup({
			
 
				+                            anchor: 'bottom',
			
 
				+                            closeButton: false,
			
 
				+                            offset: {
			
 
				+                                'bottom': [0, -10],
			
 
				+                            }
			
 
				+                        });
			
 
				+                    }
			
 
				+                    if (!e.object || e.object.Magnitude < 2.73) {
			
 
				+                        popup.remove();
			
 
				+                        return;
			
 
				+                    }
			
 
				+                    popup.setLngLat(map.unproject([e.x, e.y])).setHTML("Magnitude: " + e.object.Magnitude);
			
 
				+                    popup.addTo(map);
			
 
				+                }
			
 
				+            },
			
 
				+            callback: {
			
 
				+                getPosition: function (feature) {
			
 
				+                    if (!feature || !feature.Longitude || !feature.Latitude) {
			
 
				+                        return [0, 0, 0];
			
 
				+                    }
			
 
				+                    return [Number(feature.Longitude), Number(feature.Latitude), 0];
			
 
				+                },
			
 
				+                getColor: function (feature) {
			
 
				+                    if (feature.Magnitude >= 2.5 && feature.Magnitude <= 3.31) {
			
 
				+                        return [118, 42, 131];
			
 
				+                    } else if (feature.Magnitude > 3.31 && feature.Magnitude <= 4.13) {
			
 
				+                        return [175, 141, 195];
			
 
				+                    } else if (feature.Magnitude > 4.13 && feature.Magnitude <= 4.94) {
			
 
				+                        return [231, 212, 232];
			
 
				+                    } else if (feature.Magnitude > 4.94 && feature.Magnitude <= 5.76) {
			
 
				+                        return [217, 240, 211];
			
 
				+                    } else if (feature.Magnitude > 5.76 && feature.Magnitude <= 6.57) {
			
 
				+                        return [127, 191, 123];
			
 
				+                    } else if (feature.Magnitude >= 6.57) {
			
 
				+                        return [27, 120, 55];
			
 
				+                    }
			
 
				+
			
 
				+                    return [0, 0, 0, 0]
			
 
				+                },
			
 
				+                getRadius: function (feature) {
			
 
				+                    if (feature.Magnitude < 2.73) {
			
 
				+                        return Number(feature.Magnitude);
			
 
				+                    }
			
 
				+                    return Math.pow(Number(feature.Magnitude), 2.5);
			
 
				+                }
			
 
				+            }
			
 
				+        });
			
 
				+        map.addLayer(deckglLayer);
			
 
				+
			
 
				+    }
			
 
				+
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/deckglLayer_sfcontour.html
+++ b/public/supermap/examples/mapboxgl/deckglLayer_sfcontour.html
@@ -0,0 +1,257 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+  <head>
			
 
				+    <meta charset="UTF-8" />
			
 
				+    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
			
 
				+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" />
			
 
				+    <title data-i18n="resources.title_mb_deckglLayer_sfcontour"></title>
			
 
				+    <style>
			
 
				+      body {
			
 
				+        margin: 0;
			
 
				+        overflow: hidden;
			
 
				+        background: #fff;
			
 
				+        width: 100%;
			
 
				+        height: 100%;
			
 
				+      }
			
 
				+
			
 
				+      #map {
			
 
				+        position: absolute;
			
 
				+        top: 0;
			
 
				+        bottom: 0;
			
 
				+        width: 100%;
			
 
				+      }
			
 
				+
			
 
				+      #title {
			
 
				+        position: absolute;
			
 
				+        color: white;
			
 
				+        left: 40%;
			
 
				+        top: 30px;
			
 
				+        text-align: center;
			
 
				+        width: 500px;
			
 
				+        z-index: 2;
			
 
				+      }
			
 
				+
			
 
				+      #title > h3 {
			
 
				+        margin: 10px 0;
			
 
				+        letter-spacing: 0.1em;
			
 
				+      }
			
 
				+
			
 
				+      #title > h6 {
			
 
				+        margin: 0;
			
 
				+        font-weight: normal;
			
 
				+      }
			
 
				+
			
 
				+      .whiteBackground {
			
 
				+        background-color: rgba(225, 225, 225, 0.1);
			
 
				+        border-top: 1px dotted;
			
 
				+        border-image: linear-gradient(
			
 
				+            to right,
			
 
				+            rgba(114, 159, 207, 1),
			
 
				+            rgba(104, 104, 104, 1) 200px,
			
 
				+            rgba(104, 104, 104, 0) 75%
			
 
				+          )
			
 
				+          30;
			
 
				+      }
			
 
				+
			
 
				+      .legendContainer {
			
 
				+        position: absolute;
			
 
				+        bottom: 25px;
			
 
				+        right: 25px;
			
 
				+        color: white;
			
 
				+        padding: 10px 10px 0px 10px;
			
 
				+        z-index: 1000;
			
 
				+      }
			
 
				+
			
 
				+      .legendHead {
			
 
				+        align-self: flex-end;
			
 
				+      }
			
 
				+
			
 
				+      .legendBody {
			
 
				+        padding-top: 10px;
			
 
				+      }
			
 
				+    </style>
			
 
				+  </head>
			
 
				+  <body>
			
 
				+    <div id="title">
			
 
				+      <h3 data-i18n="resources.title_mb_deckglLayer_sfcontour"></h3>
			
 
				+      <h6 data-i18n="resources.text_mb_deckglLayer_sfcontour"></h6>
			
 
				+    </div>
			
 
				+    <div class="legendContainer whiteBackground">
			
 
				+      <div class="legendHead _flex">
			
 
				+        <div>sf_contour.geo</div>
			
 
				+        <div>Polygon color</div>
			
 
				+        <div>by elevation</div>
			
 
				+      </div>
			
 
				+      <div class="legendBody _flex">
			
 
				+        <svg width="132" height="200">
			
 
				+          <g transform="translate(0, 0)">
			
 
				+            <rect width="30" height="20" style="fill: rgb(55, 83, 94);"></rect>
			
 
				+            <text x="38" y="14" fill="white">[ -40, 79.4 ]</text>
			
 
				+          </g>
			
 
				+          <g transform="translate(0, 24)">
			
 
				+            <rect width="30" height="20" style="fill: rgb(58, 116, 138);"></rect>
			
 
				+            <text x="38" y="14" fill="white">( 79.4, 198.8]</text>
			
 
				+          </g>
			
 
				+          <g transform="translate(0, 48)">
			
 
				+            <rect width="30" height="20" style="fill: rgb(75, 154, 149);"></rect>
			
 
				+            <text x="38" y="14" fill="white">( 198.8, 318.1]</text>
			
 
				+          </g>
			
 
				+          <g transform="translate(0, 72)">
			
 
				+            <rect width="30" height="20" style="fill: rgb(94, 171, 139);"></rect>
			
 
				+            <text x="38" y="14" fill="white">( 318.1, 437.5]</text>
			
 
				+          </g>
			
 
				+          <g transform="translate(0, 96)">
			
 
				+            <rect width="30" height="20" style="fill: rgb(115, 188, 132);"></rect>
			
 
				+            <text x="38" y="14" fill="white">( 437.5, 556.9 ]</text>
			
 
				+          </g>
			
 
				+          <g transform="translate(0, 120)">
			
 
				+            <rect width="30" height="20" style="fill: rgb(146, 204, 139);"></rect>
			
 
				+            <text x="38" y="14" fill="white">( 556.9, 676.3 ]</text>
			
 
				+          </g>
			
 
				+          <g transform="translate(0, 144)">
			
 
				+            <rect width="30" height="20" style="fill: rgb(190, 221, 165);"></rect>
			
 
				+            <text x="38" y="14" fill="white">( 676.3, 795.6 ]</text>
			
 
				+          </g>
			
 
				+          <g transform="translate(0, 168)">
			
 
				+            <rect width="30" height="20" style="fill: rgb(229, 238, 193);"></rect>
			
 
				+            <text x="38" y="14" fill="white">( 795.6, 915.0 ]</text>
			
 
				+          </g>
			
 
				+        </svg>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <div id="map"></div>
			
 
				+    <script type="text/javascript" include="widgets,bootstrap" src="../js/include-web.js"></script>
			
 
				+    <script type="text/javascript" include="deck" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+    <script type="text/javascript">
			
 
				+      var host = window.isLocal ? window.server : 'https://iserver.supermap.io',
			
 
				+        url = host + '/iserver/services/map-china400/rest/maps/ChinaDark';
			
 
				+      var map, deckglLayer, popup;
			
 
				+      var attribution =
			
 
				+        "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+        " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+        " Map Data <span>© <a href='https://uber.github.io/kepler.gl' target='_blank'>kepler.gl</a></span> ";
			
 
				+      map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+          version: 8,
			
 
				+          sources: {
			
 
				+            'raster-tiles': {
			
 
				+              attribution: attribution,
			
 
				+              type: 'raster',
			
 
				+              tiles: [url + '/zxyTileImage.png?z={z}&x={x}&y={y}'],
			
 
				+              tileSize: 256
			
 
				+            }
			
 
				+          },
			
 
				+          layers: [
			
 
				+            {
			
 
				+              id: 'simple-tiles',
			
 
				+              type: 'raster',
			
 
				+              source: 'raster-tiles',
			
 
				+              minzoom: 0,
			
 
				+              maxzoom: 22
			
 
				+            }
			
 
				+          ]
			
 
				+        },
			
 
				+        center: [-122.4629751, 37.73956691],
			
 
				+        zoom: 13,
			
 
				+        pitch: 60,
			
 
				+        bearing: 30
			
 
				+      });
			
 
				+      map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+
			
 
				+      widgets.loader.showLoader('data loading...');
			
 
				+
			
 
				+      $.get('https://iclient.supermap.io/web/data/deck.gl/sfcontour_data.json', function(features) {
			
 
				+        widgets.loader.removeLoader();
			
 
				+        addLayer(features.features);
			
 
				+      });
			
 
				+
			
 
				+      function addLayer(features) {
			
 
				+        deckglLayer = new mapboxgl.supermap.DeckglLayer('path-layer', {
			
 
				+          data: features,
			
 
				+          props: {
			
 
				+            widthScale: 20,
			
 
				+            widthMinPixels: 2,
			
 
				+            onHover: function(feature) {
			
 
				+              if (!popup) {
			
 
				+                popup = new mapboxgl.Popup({
			
 
				+                  anchor: 'bottom',
			
 
				+                  closeButton: false,
			
 
				+                  offset: {
			
 
				+                    bottom: [0, -10]
			
 
				+                  }
			
 
				+                });
			
 
				+              }
			
 
				+              if (!feature.object) {
			
 
				+                popup.remove();
			
 
				+                return;
			
 
				+              }
			
 
				+              popup.setHTML('海拔： ' + feature.object.properties.elevation + '米');
			
 
				+              popup.setLngLat(map.unproject([feature.x, feature.y]));
			
 
				+              popup.addTo(map);
			
 
				+            }
			
 
				+          },
			
 
				+          callback: {
			
 
				+            getPath: function(feature) {
			
 
				+              if (!feature.geometry || !feature.geometry.coordinates) {
			
 
				+                return [0, 0];
			
 
				+              }
			
 
				+              return feature.geometry.coordinates;
			
 
				+            },
			
 
				+            getColor: function(feature) {
			
 
				+              if (feature.properties.elevation >= -40 && feature.properties.elevation < 79.4) {
			
 
				+                return [55, 83, 94];
			
 
				+              } else if (feature.properties.elevation >= 79.4 && feature.properties.elevation < 198.8) {
			
 
				+                return [58, 116, 138];
			
 
				+              } else if (feature.properties.elevation >= 198.8 && feature.properties.elevation < 318.1) {
			
 
				+                return [75, 154, 149];
			
 
				+              } else if (feature.properties.elevation >= 318.1 && feature.properties.elevation < 437.5) {
			
 
				+                return [94, 171, 139];
			
 
				+              } else if (feature.properties.elevation >= 437.5 && feature.properties.elevation < 556.9) {
			
 
				+                return [115, 188, 132];
			
 
				+              } else if (feature.properties.elevation >= 556.9 && feature.properties.elevation < 676.3) {
			
 
				+                return [146, 204, 139];
			
 
				+              } else if (feature.properties.elevation >= 676.3 && feature.properties.elevation < 795.6) {
			
 
				+                return [190, 221, 165];
			
 
				+              } else if (feature.properties.elevation >= 795.6) {
			
 
				+                return [229, 238, 193];
			
 
				+              }
			
 
				+
			
 
				+              return [0, 0, 0, 0];
			
 
				+            },
			
 
				+            getWidth: function(d) {
			
 
				+              return 0.05;
			
 
				+            }
			
 
				+          }
			
 
				+        });
			
 
				+        map.addLayer(deckglLayer);
			
 
				+      }
			
 
				+
			
 
				+      var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
			
 
				+      /*16进制颜色转为RGB格式*/
			
 
				+      String.prototype.colorRgb = function() {
			
 
				+        var sColor = this.toLowerCase();
			
 
				+        if (sColor && reg.test(sColor)) {
			
 
				+          if (sColor.length === 4) {
			
 
				+            var sColorNew = '#';
			
 
				+            for (var i = 1; i < 4; i += 1) {
			
 
				+              sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
			
 
				+            }
			
 
				+            sColor = sColorNew;
			
 
				+          }
			
 
				+          //处理六位的颜色值
			
 
				+          var sColorChange = [];
			
 
				+          for (var i = 1; i < 7; i += 2) {
			
 
				+            sColorChange.push(parseInt('0x' + sColor.slice(i, i + 2)));
			
 
				+          }
			
 
				+          return sColorChange;
			
 
				+        } else {
			
 
				+          return sColor;
			
 
				+        }
			
 
				+      };
			
 
				+    </script>
			
 
				+  </body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/deckglLayer_sftrees.html
+++ b/public/supermap/examples/mapboxgl/deckglLayer_sftrees.html
@@ -0,0 +1,225 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
			
 
				+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
			
 
				+    <title data-i18n="resources.title_mb_deckglLayer_sftrees"></title>
			
 
				+    <style>
			
 
				+        body {
			
 
				+            margin: 0;
			
 
				+            overflow: hidden;
			
 
				+            background: #fff;
			
 
				+            width: 100%;
			
 
				+            height: 100%
			
 
				+        }
			
 
				+
			
 
				+        #map {
			
 
				+            position: absolute;
			
 
				+            top: 0;
			
 
				+            bottom: 0;
			
 
				+            width: 100%;
			
 
				+        }
			
 
				+
			
 
				+        #title {
			
 
				+            position: absolute;
			
 
				+            color: white;
			
 
				+            left: 40%;
			
 
				+            top: 30px;
			
 
				+            text-align: center;
			
 
				+            width: 500px;
			
 
				+            z-index: 2;
			
 
				+        }
			
 
				+
			
 
				+        #title > h3 {
			
 
				+            margin: 10px 0;
			
 
				+            letter-spacing: 0.1em;
			
 
				+        }
			
 
				+
			
 
				+        #title > h6 {
			
 
				+            margin: 0;
			
 
				+            font-weight: normal;
			
 
				+        }
			
 
				+
			
 
				+        .whiteBackground {
			
 
				+            background-color: rgba(225, 225, 225, 0.1);
			
 
				+            border-top: 1px dotted;
			
 
				+            border-image: linear-gradient(to right, rgba(114, 159, 207, 1), rgba(104, 104, 104, 1) 200px, rgba(104, 104, 104, 0) 75%) 30;
			
 
				+        }
			
 
				+
			
 
				+        .legendContainer {
			
 
				+            position: absolute;
			
 
				+            bottom: 25px;
			
 
				+            right: 25px;
			
 
				+            color: white;
			
 
				+            padding: 10px 10px 0px 10px;
			
 
				+            z-index: 1000;
			
 
				+        }
			
 
				+
			
 
				+        .legendHead {
			
 
				+            align-self: flex-end;
			
 
				+        }
			
 
				+
			
 
				+        .legendBody {
			
 
				+            padding-top: 10px;
			
 
				+        }
			
 
				+
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+<div id="title">
			
 
				+    <h3 data-i18n="resources.title_mb_deckglLayer_sftrees"></h3>
			
 
				+    <h6 data-i18n="resources.text_mb_deckglLayer_sftrees"></h6>
			
 
				+</div>
			
 
				+<div class="legendContainer whiteBackground">
			
 
				+    <div class="legendHead _flex">
			
 
				+        <div>Point</div>
			
 
				+        <div>Hexbin color</div>
			
 
				+        <div>by Point Count</div>
			
 
				+    </div>
			
 
				+    <div class="legendBody _flex">
			
 
				+        <svg width="120" height="200">
			
 
				+            <g transform="translate(0, 0)">
			
 
				+                <rect width="30" height="20" style="fill: rgb(43, 30, 61);"></rect>
			
 
				+                <text x="38" y="14" fill="white">[ 1.0, 5.1 ]</text>
			
 
				+            </g>
			
 
				+            <g transform="translate(0, 24)">
			
 
				+                <rect width="30" height="20" style="fill: rgb(56, 60, 101);"></rect>
			
 
				+                <text x="38" y="14" fill="white">( 5.1, 9.3 ]</text>
			
 
				+            </g>
			
 
				+            <g transform="translate(0, 48)">
			
 
				+                <rect width="30" height="20" style="fill: rgb(62, 95, 126);"></rect>
			
 
				+                <text x="38" y="14" fill="white">( 9.3, 13.4 ]</text>
			
 
				+            </g>
			
 
				+            <g transform="translate(0, 72)">
			
 
				+                <rect width="30" height="20" style="fill: rgb(73, 131, 138);"></rect>
			
 
				+                <text x="38" y="14" fill="white">( 13.4 , 17.6 ]</text>
			
 
				+            </g>
			
 
				+            <g transform="translate(0, 96)">
			
 
				+                <rect width="30" height="20" style="fill: rgb(94, 162, 141);"></rect>
			
 
				+                <text x="38" y="14" fill="white">( 17.6, 21.6 ]</text>
			
 
				+            </g>
			
 
				+            <g transform="translate(0, 120)">
			
 
				+                <rect width="30" height="20" style="fill: rgb(130, 187, 146);"></rect>
			
 
				+                <text x="38" y="14" fill="white">( 21.6, 25.8 ]</text>
			
 
				+            </g>
			
 
				+            <g transform="translate(0, 144)">
			
 
				+                <rect width="30" height="20" style="fill: rgb(174, 206, 161);"></rect>
			
 
				+                <text x="38" y="14" fill="white">( 25.8, 29.9 ]</text>
			
 
				+            </g>
			
 
				+            <g transform="translate(0, 168)">
			
 
				+                <rect width="30" height="20" style="fill: rgb(214, 222, 191);"></rect>
			
 
				+                <text x="38" y="14" fill="white">( 29.9, 34.0 ]</text>
			
 
				+            </g>
			
 
				+        </svg>
			
 
				+    </div>
			
 
				+
			
 
				+</div>
			
 
				+<div id="map"></div>
			
 
				+<script type="text/javascript" include="papaparse,bootstrap,widgets" src="../js/include-web.js"></script>
			
 
				+<script type="text/javascript" include="deck" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+<script type="text/javascript">
			
 
				+
			
 
				+    var host = window.isLocal ? window.server : "https://iserver.supermap.io",
			
 
				+        url = host + "/iserver/services/map-china400/rest/maps/ChinaDark";
			
 
				+    var map, popup;
			
 
				+    var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+        " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+        " Map Data <span>© <a href='https://uber.github.io/kepler.gl' target='_blank'>kepler.gl</a></span> ";
			
 
				+
			
 
				+    map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [url + '/zxyTileImage.png?z={z}&x={x}&y={y}'],
			
 
				+                    "tileSize": 256,
			
 
				+                },
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+                "minzoom": 0,
			
 
				+                "maxzoom": 22
			
 
				+            }]
			
 
				+        },
			
 
				+        center: [-122.430844, 37.772276],
			
 
				+        zoom: 12,
			
 
				+        pitch: 60,
			
 
				+        bearing: 36
			
 
				+    });
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+
			
 
				+    widgets.loader.showLoader("data loading...");
			
 
				+
			
 
				+    $.get('../data/deck.gl/strees_data.csv', function (csvstr) {
			
 
				+        widgets.loader.removeLoader();
			
 
				+        var features = Papa.parse(csvstr, {skipEmptyLines: true, header: true});
			
 
				+        addLayer(features.data);
			
 
				+    });
			
 
				+
			
 
				+
			
 
				+    function addLayer(features) {
			
 
				+        var deckglLayer = new mapboxgl.supermap.DeckglLayer("hexagon-layer", {
			
 
				+            data: features,
			
 
				+            props: {
			
 
				+                extruded: true,
			
 
				+                radius: 55,
			
 
				+                autoHighlight: true,
			
 
				+                upperPercentile: 99,
			
 
				+                coverage: 0.8,
			
 
				+                elevationScale: 400,
			
 
				+                colorRange: [[43, 30, 61, 255], [56, 60, 101, 255], [62, 95, 126, 255], [73, 131, 138, 255], [94, 162, 141, 255], [130, 187, 146, 255], [174, 206, 161, 255], [214, 222, 191, 255]],
			
 
				+                opacity: 0.8,
			
 
				+                // lightSettings 光照配置参数，配置三维光照效果，
			
 
				+                lightSettings: {
			
 
				+                    lightsPosition: [-122.5, 37.7, 3000, -122.2, 37.9, 3000], // 指定为`[x，y，z]`的光在平面阵列中的位置
			
 
				+                    ambientRatio: 0.2,   //光照的环境比例
			
 
				+                    diffuseRatio: 0.5,  //光的漫反射率
			
 
				+                    specularRatio: 0.3, //光的镜面反射率
			
 
				+                    lightsStrength: [1.0, 0.0, 2.0, 0.0], //平面阵列中指定为“[x，y]`的灯的强度。 长度应该是`2 x numberOfLights`
			
 
				+                    numberOfLights: 4 //光照值
			
 
				+                },
			
 
				+                //如需了解其他配置详情，请查看 DeckglLayer api
			
 
				+                onHover: function (feature) {
			
 
				+                    if (!popup) {
			
 
				+                        popup = new mapboxgl.Popup({
			
 
				+                            anchor: 'bottom',
			
 
				+                            closeButton: false,
			
 
				+                            offset: {
			
 
				+                                'bottom': [0, -10],
			
 
				+                            }
			
 
				+                        });
			
 
				+                    }
			
 
				+                    if (!feature.object) {
			
 
				+                        popup.remove();
			
 
				+                        return;
			
 
				+                    }
			
 
				+                    //+" "+feature.lngLat
			
 
				+                    popup.setHTML("Point Count： " + feature.object.points.length);
			
 
				+                    popup.setLngLat(map.unproject([feature.x, feature.y]));
			
 
				+                    popup.addTo(map);
			
 
				+                }
			
 
				+            },
			
 
				+            callback: {
			
 
				+                getPosition: function (feature) {
			
 
				+                    if (!feature.latitude || !feature.longitude) {
			
 
				+                        return [0, 0]
			
 
				+                    }
			
 
				+                    return [Number(feature.longitude), Number(feature.latitude)]
			
 
				+                }
			
 
				+            }
			
 
				+        });
			
 
				+        map.addLayer(deckglLayer);
			
 
				+    }
			
 
				+
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/deckglLayer_ukcommute.html
+++ b/public/supermap/examples/mapboxgl/deckglLayer_ukcommute.html
@@ -0,0 +1,255 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+  <head>
			
 
				+    <meta charset="UTF-8" />
			
 
				+    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
			
 
				+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" />
			
 
				+    <title data-i18n="resources.title_mb_deckglLayer_ukcommute"></title>
			
 
				+    <style>
			
 
				+      body {
			
 
				+        margin: 0;
			
 
				+        overflow: hidden;
			
 
				+        background: #fff;
			
 
				+        width: 100%;
			
 
				+        height: 100%;
			
 
				+      }
			
 
				+
			
 
				+      #map {
			
 
				+        position: absolute;
			
 
				+        top: 0;
			
 
				+        bottom: 0;
			
 
				+        width: 100%;
			
 
				+      }
			
 
				+
			
 
				+      #title {
			
 
				+        position: absolute;
			
 
				+        color: white;
			
 
				+        left: 40%;
			
 
				+        top: 30px;
			
 
				+        text-align: center;
			
 
				+        width: 500px;
			
 
				+        z-index: 2;
			
 
				+      }
			
 
				+
			
 
				+      #title > h3 {
			
 
				+        margin: 10px 0;
			
 
				+        letter-spacing: 0.1em;
			
 
				+      }
			
 
				+
			
 
				+      #title > h6 {
			
 
				+        margin: 0;
			
 
				+        font-weight: normal;
			
 
				+      }
			
 
				+
			
 
				+      .whiteBackground {
			
 
				+        background-color: rgba(225, 225, 225, 0.1);
			
 
				+        border-top: 1px dotted;
			
 
				+        border-image: linear-gradient(
			
 
				+            to right,
			
 
				+            rgba(114, 159, 207, 1),
			
 
				+            rgba(104, 104, 104, 1) 200px,
			
 
				+            rgba(104, 104, 104, 0) 75%
			
 
				+          )
			
 
				+          30;
			
 
				+      }
			
 
				+
			
 
				+      .legendContainer {
			
 
				+        position: absolute;
			
 
				+        bottom: 25px;
			
 
				+        right: 25px;
			
 
				+        color: white;
			
 
				+        padding: 10px 10px 0px 10px;
			
 
				+        z-index: 1000;
			
 
				+      }
			
 
				+
			
 
				+      .legendHead {
			
 
				+        align-self: flex-end;
			
 
				+      }
			
 
				+
			
 
				+      .legendBody {
			
 
				+        padding-top: 10px;
			
 
				+      }
			
 
				+    </style>
			
 
				+  </head>
			
 
				+  <body>
			
 
				+    <div id="title">
			
 
				+      <h3 data-i18n="resources.title_mb_deckglLayer_ukcommute"></h3>
			
 
				+      <h6 data-i18n="resources.text_mb_deckglLayer_ukcommute"></h6>
			
 
				+    </div>
			
 
				+    <div class="legendContainer whiteBackground">
			
 
				+      <div class="legendHead _flex">
			
 
				+        <div>home to work</div>
			
 
				+        <div>Arc Color</div>
			
 
				+      </div>
			
 
				+      <div class="legendBody _flex">
			
 
				+        <svg width="120" height="40">
			
 
				+          <g transform="translate(0, 0)">
			
 
				+            <rect width="30" height="20" style="fill: rgb(228, 155, 0);"></rect>
			
 
				+          </g>
			
 
				+          <g transform="translate(40, 0)">
			
 
				+            <rect width="30" height="20" style="fill: rgb(149, 12, 105);"></rect>
			
 
				+          </g>
			
 
				+        </svg>
			
 
				+      </div>
			
 
				+      <div class="legendHead _flex">
			
 
				+        <div>workplace add residence</div>
			
 
				+        <div>Point Color</div>
			
 
				+      </div>
			
 
				+      <div class="legendBody _flex">
			
 
				+        <svg width="120" height="40">
			
 
				+          <g transform="translate(0, 0)">
			
 
				+            <rect width="30" height="20" style="fill: rgb(255, 255, 255);"></rect>
			
 
				+          </g>
			
 
				+        </svg>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <div id="map"></div>
			
 
				+    <script type="text/javascript" include="papaparse,bootstrap,widgets" src="../js/include-web.js"></script>
			
 
				+    <script type="text/javascript" include="deck" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+    <script type="text/javascript">
			
 
				+      var host = window.isLocal ? window.server : 'https://iserver.supermap.io',
			
 
				+        url = host + '/iserver/services/map-china400/rest/maps/ChinaDark';
			
 
				+      var map, deckglLayer, popup;
			
 
				+      var attribution =
			
 
				+        "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+        " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+        " Map Data <span>© <a href='https://uber.github.io/kepler.gl' target='_blank'>kepler.gl</a></span> ";
			
 
				+
			
 
				+      map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+          version: 8,
			
 
				+          sources: {
			
 
				+            'raster-tiles': {
			
 
				+              attribution: attribution,
			
 
				+              type: 'raster',
			
 
				+              tiles: [url + '/zxyTileImage.png?z={z}&x={x}&y={y}'],
			
 
				+              tileSize: 256
			
 
				+            }
			
 
				+          },
			
 
				+          layers: [
			
 
				+            {
			
 
				+              id: 'simple-tiles',
			
 
				+              type: 'raster',
			
 
				+              source: 'raster-tiles',
			
 
				+              minzoom: 0,
			
 
				+              maxzoom: 22
			
 
				+            }
			
 
				+          ]
			
 
				+        },
			
 
				+        center: [-1.8597998742833441, 52.430580528979654],
			
 
				+        zoom: 6.5,
			
 
				+        pitch: 40,
			
 
				+        bearing: -8
			
 
				+      });
			
 
				+      map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+
			
 
				+      widgets.loader.showLoader('data loading...');
			
 
				+
			
 
				+      $.get('https://iclient.supermap.io/web/data/deck.gl/ukcommute_data.csv', function(csvstr) {
			
 
				+        widgets.loader.removeLoader();
			
 
				+        var features = Papa.parse(csvstr, { skipEmptyLines: true, header: true });
			
 
				+        addLayer(features.data);
			
 
				+      });
			
 
				+
			
 
				+      function addLayer(features) {
			
 
				+        deckglLayer = new mapboxgl.supermap.DeckglLayer('arc-layer', {
			
 
				+          data: features,
			
 
				+          props: {
			
 
				+            pickable: true,
			
 
				+            strokeWidth: 1.5,
			
 
				+            opacity: 0.3
			
 
				+          },
			
 
				+          callback: {
			
 
				+            getStrokeWidth: 12,
			
 
				+            getSourcePosition: function(feature) {
			
 
				+              if (!feature.residence_lat || !feature.residence_lng) {
			
 
				+                return [0, 0];
			
 
				+              }
			
 
				+              return [Number(feature.residence_lng), Number(feature.residence_lat)];
			
 
				+            },
			
 
				+            getTargetPosition: function(feature) {
			
 
				+              if (!feature.workplace_lng || !feature.workplace_lat) {
			
 
				+                return [0, 0];
			
 
				+              }
			
 
				+              return [Number(feature.workplace_lng), Number(feature.workplace_lat)];
			
 
				+            },
			
 
				+            getSourceColor: function(d) {
			
 
				+              return [228, 155, 0, 255];
			
 
				+            },
			
 
				+            getTargetColor: function(d) {
			
 
				+              return [149, 12, 105, 120];
			
 
				+            }
			
 
				+          }
			
 
				+        });
			
 
				+        map.addLayer(deckglLayer);
			
 
				+
			
 
				+        var pointsProps = {
			
 
				+          opacity: 0.3,
			
 
				+          radiusMinPixels: 0.8,
			
 
				+          autoHighlight: true,
			
 
				+          highlightColor: [255, 255, 0, 255],
			
 
				+          onHover: function(e) {
			
 
				+            if (!popup) {
			
 
				+              popup = new mapboxgl.Popup({
			
 
				+                anchor: 'bottom',
			
 
				+                closeButton: false,
			
 
				+                offset: {
			
 
				+                  bottom: [0, -10]
			
 
				+                }
			
 
				+              });
			
 
				+            }
			
 
				+            if (!e.object) {
			
 
				+              popup.remove();
			
 
				+              return;
			
 
				+            }
			
 
				+            popup.setHTML('all_flows： ' + e.object.all_flows);
			
 
				+            popup.setLngLat(map.unproject([e.x, e.y]));
			
 
				+            popup.addTo(map);
			
 
				+          }
			
 
				+        };
			
 
				+        var workPlace = new mapboxgl.supermap.DeckglLayer('scatter-plot', {
			
 
				+          data: features,
			
 
				+          props: pointsProps,
			
 
				+          callback: {
			
 
				+            getPosition: function(feature) {
			
 
				+              if (!feature.workplace_lng || !feature.workplace_lat) {
			
 
				+                return [0, 0];
			
 
				+              }
			
 
				+              return [Number(feature.workplace_lng), Number(feature.workplace_lat)];
			
 
				+            },
			
 
				+            getColor: function(d) {
			
 
				+              return [255, 255, 255, 110];
			
 
				+            },
			
 
				+            getRadius: function(d) {
			
 
				+              return 10;
			
 
				+            }
			
 
				+          }
			
 
				+        });
			
 
				+        map.addLayer(workPlace);
			
 
				+        var homePlace = new mapboxgl.supermap.DeckglLayer('scatter-plot', {
			
 
				+          data: features,
			
 
				+          props: pointsProps,
			
 
				+          callback: {
			
 
				+            getPosition: function(feature) {
			
 
				+              if (!feature.residence_lat || !feature.residence_lng) {
			
 
				+                return [0, 0];
			
 
				+              }
			
 
				+              return [Number(feature.residence_lng), Number(feature.residence_lat)];
			
 
				+            },
			
 
				+            getColor: function(d) {
			
 
				+              return [255, 255, 255, 110];
			
 
				+            },
			
 
				+            getRadius: function(d) {
			
 
				+              return 10;
			
 
				+            }
			
 
				+          }
			
 
				+        });
			
 
				+        map.addLayer(homePlace);
			
 
				+      }
			
 
				+    </script>
			
 
				+  </body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/earthquakeHeatMap.html
+++ b/public/supermap/examples/mapboxgl/earthquakeHeatMap.html
@@ -0,0 +1,197 @@
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+
			
 
				+<head>
			
 
				+    <meta charset='utf-8' />
			
 
				+    <title data-i18n="resources.title_ChinaEarthquakeHeatWGS84"></title>
			
 
				+    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
			
 
				+    <script type="text/javascript" include="jquery,papaparse" src="../js/include-web.js"></script>
			
 
				+    <style>
			
 
				+        body {
			
 
				+            margin: 0;
			
 
				+            padding: 0;
			
 
				+        }
			
 
				+
			
 
				+        #map {
			
 
				+            position: absolute;
			
 
				+            top: 0;
			
 
				+            bottom: 0;
			
 
				+            width: 100%;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+    <div id='map'></div>
			
 
				+    <script type="text/javascript" include='mapbox-gl-enhance' src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+    <script>
			
 
				+        var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+        var map = new mapboxgl.Map({
			
 
				+            container: 'map', 
			
 
				+            style: {
			
 
				+                "version": 8,
			
 
				+                "sources": {
			
 
				+                    "raster-tiles": {
			
 
				+                        "type": "raster",
			
 
				+                        "tiles": [host + '/iserver/services/map-world/rest/maps/World'],
			
 
				+                        "rasterSource":"iserver",
			
 
				+                        "tileSize": 256
			
 
				+                    }
			
 
				+                },
			
 
				+
			
 
				+                "layers": [{
			
 
				+                    "id": "simple-tiles",
			
 
				+                    "type": "raster",
			
 
				+                    "source": "raster-tiles",
			
 
				+                    "minzoom": 0,
			
 
				+                    "maxzoom": 22
			
 
				+                }]
			
 
				+            },
			
 
				+            crs: mapboxgl.CRS.EPSG4326,
			
 
				+            center: [112, 37.94],
			
 
				+            zoom: 3 
			
 
				+        });
			
 
				+
			
 
				+        map.on('load', function () {
			
 
				+            $.get("../data/chinaEarthquake.csv", function (response) {
			
 
				+                var dataObj = Papa.parse(response, {
			
 
				+                    skipEmptyLines: true,
			
 
				+                    header: true
			
 
				+                });
			
 
				+
			
 
				+                var data = dataObj.data;
			
 
				+                var geojson = {
			
 
				+                    "type": "FeatureCollection",
			
 
				+                    "features": []
			
 
				+                };
			
 
				+                for (var i = 0; i < data.length; i++) {
			
 
				+                    var item = data[i];
			
 
				+                    var date = new Date(item.date);
			
 
				+                    var year = date.getFullYear();
			
 
				+
			
 
				+                    //2w+地震数据
			
 
				+                    if (year > 2000 && year < 2015) {
			
 
				+                        var feature = {
			
 
				+                            "type": "feature",
			
 
				+                            "geometry": {
			
 
				+                                "type": "Point",
			
 
				+                                "coordinates": []
			
 
				+                            },
			
 
				+                            "properties": {
			
 
				+                                "value": parseFloat(item.level)
			
 
				+                            }
			
 
				+                        };
			
 
				+                        feature.geometry.coordinates = [parseFloat(item.X), parseFloat(item.Y)];
			
 
				+                        geojson.features.push(feature);
			
 
				+                    }
			
 
				+                }
			
 
				+              
			
 
				+                map.addSource('earthquakes', {
			
 
				+                    "type": "geojson",
			
 
				+                    "data": geojson
			
 
				+                });
			
 
				+
			
 
				+                map.addLayer({
			
 
				+                    "id": "earthquakes-heat",
			
 
				+                    "type": "heatmap",
			
 
				+                    "source": "earthquakes",
			
 
				+                    "maxzoom": 9,
			
 
				+                    "paint": {
			
 
				+                        "heatmap-weight": [
			
 
				+                            "interpolate",
			
 
				+                            ["linear"],
			
 
				+                            ["get", "level"],
			
 
				+                            0, 0,
			
 
				+                            6, 1
			
 
				+                        ],
			
 
				+                        "heatmap-intensity": [
			
 
				+                            "interpolate",
			
 
				+                            ["linear"],
			
 
				+                            ["zoom"],
			
 
				+                            0, 1,
			
 
				+                            9, 3
			
 
				+                        ],
			
 
				+                        "heatmap-color": [
			
 
				+                            "interpolate",
			
 
				+                            ["linear"],
			
 
				+                            ["heatmap-density"],
			
 
				+                            0, "rgba(33,102,172,0)",
			
 
				+                            0.2, "rgb(103,169,207)",
			
 
				+                            0.4, "rgb(209,229,240)",
			
 
				+                            0.6, "rgb(253,219,199)",
			
 
				+                            0.8, "rgb(239,138,98)",
			
 
				+                            1, "rgb(178,24,43)"
			
 
				+                        ],
			
 
				+                        "heatmap-radius": [
			
 
				+                            "interpolate",
			
 
				+                            ["linear"],
			
 
				+                            ["zoom"],
			
 
				+                            0, 2,
			
 
				+                            9, 20
			
 
				+                        ],
			
 
				+                        "heatmap-opacity": [
			
 
				+                            "interpolate",
			
 
				+                            ["linear"],
			
 
				+                            ["zoom"],
			
 
				+                            7, 1,
			
 
				+                            9, 0
			
 
				+                        ],
			
 
				+                    }
			
 
				+                });
			
 
				+
			
 
				+                map.addLayer({
			
 
				+                    "id": "earthquakes-point",
			
 
				+                    "type": "circle",
			
 
				+                    "source": "earthquakes",
			
 
				+                    "minzoom": 7,
			
 
				+                    "paint": {
			
 
				+                        "circle-radius": [
			
 
				+                            "interpolate",
			
 
				+                            ["linear"],
			
 
				+                            ["zoom"],
			
 
				+                            7, [
			
 
				+                                "interpolate",
			
 
				+                                ["linear"],
			
 
				+                                ["get", "level"],
			
 
				+                                1, 1,
			
 
				+                                6, 4
			
 
				+                            ],
			
 
				+                            16, [
			
 
				+                                "interpolate",
			
 
				+                                ["linear"],
			
 
				+                                ["get", "level"],
			
 
				+                                1, 5,
			
 
				+                                6, 50
			
 
				+                            ]
			
 
				+                        ],
			
 
				+                        "circle-color": [
			
 
				+                            "interpolate",
			
 
				+                            ["linear"],
			
 
				+                            ["get", "level"],
			
 
				+                            1, "rgba(33,102,172,0)",
			
 
				+                            2, "rgb(103,169,207)",
			
 
				+                            3, "rgb(209,229,240)",
			
 
				+                            4, "rgb(253,219,199)",
			
 
				+                            5, "rgb(239,138,98)",
			
 
				+                            6, "rgb(178,24,43)"
			
 
				+                        ],
			
 
				+                        "circle-stroke-color": "white",
			
 
				+                        "circle-stroke-width": 1,
			
 
				+                        "circle-opacity": [
			
 
				+                            "interpolate",
			
 
				+                            ["linear"],
			
 
				+                            ["zoom"],
			
 
				+                            7, 0,
			
 
				+                            8, 1
			
 
				+                        ]
			
 
				+                    }
			
 
				+                });
			
 
				+            });
			
 
				+
			
 
				+        });
			
 
				+
			
 
				+    </script>
			
 
				+
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/earthquakeHeatMapIclient.html
+++ b/public/supermap/examples/mapboxgl/earthquakeHeatMapIclient.html
@@ -0,0 +1,106 @@
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+
			
 
				+<head>
			
 
				+    <meta charset='utf-8' />
			
 
				+    <title data-i18n="resources.title_ChinaEarthquakeHeatClient"></title>
			
 
				+    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
			
 
				+    <script type="text/javascript" include="jquery,papaparse" src="../js/include-web.js"></script>
			
 
				+    <style>
			
 
				+        body {
			
 
				+            margin: 0;
			
 
				+            padding: 0;
			
 
				+        }
			
 
				+
			
 
				+        #map {
			
 
				+            position: absolute;
			
 
				+            top: 0;
			
 
				+            bottom: 0;
			
 
				+            width: 100%;
			
 
				+        }
			
 
				+
			
 
				+    </style>
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+    <div id='map'></div>
			
 
				+    <script type="text/javascript" include='mapbox-gl-enhance' src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+    <script>
			
 
				+        var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+        var map = new mapboxgl.Map({
			
 
				+            container: 'map', 
			
 
				+            style: {
			
 
				+                "version": 8,
			
 
				+                "sources": {
			
 
				+                    "raster-tiles": {
			
 
				+                        "type": "raster",
			
 
				+                        "tiles": [host + '/iserver/services/map-world/rest/maps/World'],
			
 
				+                        "rasterSource":"iserver",
			
 
				+                        "tileSize": 256
			
 
				+                    }
			
 
				+                },
			
 
				+
			
 
				+                "layers": [{
			
 
				+                    "id": "simple-tiles",
			
 
				+                    "type": "raster",
			
 
				+                    "source": "raster-tiles",
			
 
				+                    "minzoom": 0,
			
 
				+                    "maxzoom": 22
			
 
				+                }]
			
 
				+            },
			
 
				+            crs:'EPSG:4326',
			
 
				+            center: [112, 37.94],
			
 
				+            zoom: 3 
			
 
				+        });
			
 
				+
			
 
				+        map.on('load', function () {
			
 
				+            var heatMapLayer = new mapboxgl.supermap.HeatMapLayer(
			
 
				+                "heatMap", {
			
 
				+                    "map": map,
			
 
				+                    "id": "heatmap",
			
 
				+                    "radius": 20
			
 
				+                }
			
 
				+            );
			
 
				+            $.get("../data/chinaEarthquake.csv", function (response) {
			
 
				+                var dataObj = Papa.parse(response, {
			
 
				+                    skipEmptyLines: true,
			
 
				+                    header: true
			
 
				+                });
			
 
				+
			
 
				+                var data = dataObj.data;
			
 
				+                var geojson = {
			
 
				+                    "type": "FeatureCollection",
			
 
				+                    "features": []
			
 
				+                };
			
 
				+                for (var i = 0; i < data.length; i++) {
			
 
				+                    var item = data[i];
			
 
				+                    var date = new Date(item.date);
			
 
				+                    var year = date.getFullYear();
			
 
				+
			
 
				+                    //2w+地震数据
			
 
				+                    if (year > 2000 && year < 2015) {
			
 
				+                        var feature = {
			
 
				+                            "type": "feature",
			
 
				+                            "geometry": {
			
 
				+                                "type": "Point",
			
 
				+                                "coordinates": []
			
 
				+                            },
			
 
				+                            "properties": {
			
 
				+                                "value": parseFloat(item.level)
			
 
				+                            }
			
 
				+                        };
			
 
				+                        feature.geometry.coordinates = [parseFloat(item.X), parseFloat(item.Y)];
			
 
				+                        geojson.features.push(feature);
			
 
				+                    }
			
 
				+                }
			
 
				+                heatMapLayer.addFeatures(geojson);
			
 
				+                map.addLayer(heatMapLayer)
			
 
				+            })
			
 
				+            
			
 
				+        });
			
 
				+
			
 
				+    </script>
			
 
				+
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/echartsAnimatorCar.html
+++ b/public/supermap/examples/mapboxgl/echartsAnimatorCar.html
@@ -0,0 +1,130 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<html>
			
 
				+<head>
			
 
				+    <meta charset='utf-8'/>
			
 
				+    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
			
 
				+    <title data-i18n="resources.title_animatorCar"></title>
			
 
				+    <style>
			
 
				+        body {
			
 
				+            margin: 0;
			
 
				+            padding: 0;
			
 
				+        }
			
 
				+
			
 
				+        #map {
			
 
				+            position: absolute;
			
 
				+            top: 0;
			
 
				+            bottom: 0;
			
 
				+            width: 100%;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+<div id='map'></div>
			
 
				+<script type="text/javascript" include="jquery" src="../js/include-web.js"></script>
			
 
				+<script type="text/javascript" include="echarts" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+<script type="text/javascript">
			
 
				+    var data;
			
 
				+    var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+        " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient </a> | </span>" +
			
 
				+        "Image <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a> | </span>" +
			
 
				+        "<a href='https://echarts.baidu.com' target='_blank'>© 2018 " + " ECharts</a>";
			
 
				+    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+    var tileURL = host + "/iserver/services/map-world/rest/maps/世界地图_Gray/zxyTileImage.png?z={z}&x={x}&y={y}";
			
 
				+
			
 
				+    var map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [tileURL],
			
 
				+                    "tileSize": 256,
			
 
				+                },
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+                "minzoom": 0,
			
 
				+                "maxzoom": 22
			
 
				+            }]
			
 
				+        },
			
 
				+        center: [125.33, 43.89],
			
 
				+        zoom: 13
			
 
				+    });
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+    var uploadedDataURL = "../data/changchunBus.json";
			
 
				+
			
 
				+    $.get(uploadedDataURL, function (data) {
			
 
				+
			
 
				+        var lines = [].concat.apply([], data.map(function (busLine) {
			
 
				+            busLine.lineStyle.normal.color = "#000";
			
 
				+            busLine.effect = {
			
 
				+                constantSpeed: 60,
			
 
				+                show: true,
			
 
				+                trailLength: 0,
			
 
				+                symbolSize: 30,
			
 
				+                symbol: function () {
			
 
				+                    if ((Math.round(Math.random() * 2) % 2)) {
			
 
				+                        return 'image://../classic/images/blueCar.png'
			
 
				+                    } else {
			
 
				+                        return 'image://../classic/images/redCar.png'
			
 
				+                    }
			
 
				+                }()
			
 
				+            };
			
 
				+            return busLine;
			
 
				+        }));
			
 
				+
			
 
				+        var option = {
			
 
				+            animation: false,
			
 
				+            GLMap: {
			
 
				+                roam: true
			
 
				+            },
			
 
				+            coordinateSystem: 'GLMap',
			
 
				+            geo: {
			
 
				+                map: 'GLMap',
			
 
				+            },
			
 
				+
			
 
				+            series: [{
			
 
				+                type: 'lines',
			
 
				+                polyline: true,
			
 
				+                data: lines,
			
 
				+                silent: true,
			
 
				+                lineStyle: {
			
 
				+                    normal: {
			
 
				+                        opacity: 1,
			
 
				+                        width: 2
			
 
				+                    }
			
 
				+                },
			
 
				+                progressiveThreshold: 500,
			
 
				+                progressive: 100,
			
 
				+            }, {
			
 
				+
			
 
				+                type: 'lines',
			
 
				+                coordinateSystem: 'GLMap',
			
 
				+                polyline: true,
			
 
				+                data: lines,
			
 
				+                lineStyle: {
			
 
				+                    normal: {
			
 
				+                        width: 0.2
			
 
				+                    }
			
 
				+                },
			
 
				+                effect: {
			
 
				+                    constantSpeed: 60,
			
 
				+                    show: true,
			
 
				+                    trailLength: 0,
			
 
				+                    symbolSize: 30,
			
 
				+                },
			
 
				+            }]
			
 
				+        };
			
 
				+        var echartslayer = new EchartsLayer(map);
			
 
				+        echartslayer.chart.setOption(option);
			
 
				+
			
 
				+    });
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/echartsGL_GlobalWind.html
+++ b/public/supermap/examples/mapboxgl/echartsGL_GlobalWind.html
@@ -0,0 +1,128 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title data-i18n="resources.title_GlobalWind"></title>
			
 
				+    <script type="text/javascript" include="jquery" src="../js/include-web.js"></script>
			
 
				+    <script type="text/javascript" include="echarts,echarts-gl" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+</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>
			
 
				+    <script>
			
 
				+        var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+        var map,
			
 
				+            mapUrl = host + "/iserver/services/map-china400/rest/maps/ChinaDark/zxyTileImage.png?z={z}&x={x}&y={y}",
			
 
				+            attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+            " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+            "Image <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a> | </span>" +
			
 
				+            "<a href='https://echarts.baidu.com' target='_blank'>© 2018 " + resources.title_3baidu +
			
 
				+            " ECharts  Echarts-gl</a>";
			
 
				+
			
 
				+        map = new mapboxgl.Map({
			
 
				+            container: 'map',
			
 
				+            altitudeScale: 2,
			
 
				+            style: {
			
 
				+                "version": 8,
			
 
				+                "sources": {
			
 
				+                    "raster-tiles": {
			
 
				+                        "attribution": attribution,
			
 
				+                        "type": "raster",
			
 
				+                        "tiles": [mapUrl],
			
 
				+                        "tileSize": 256
			
 
				+                    }
			
 
				+                },
			
 
				+                "layers": [{
			
 
				+                    "id": "simple-tiles",
			
 
				+                    "type": "raster",
			
 
				+                    "source": "raster-tiles",
			
 
				+                }]
			
 
				+            },
			
 
				+            center: [0, 0],
			
 
				+            zoom: 1,
			
 
				+        });
			
 
				+        map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+
			
 
				+        map.on('load', function () {
			
 
				+
			
 
				+            $.getJSON('../data/globalWindData.json', function (windData) {
			
 
				+
			
 
				+                var data = [];
			
 
				+                var p = 0;
			
 
				+                var maxMag = 0;
			
 
				+                var minMag = Infinity;
			
 
				+                for (var j = 0; j < windData.ny; j++) {
			
 
				+                    for (var i = 0; i < windData.nx; i++, p++) {
			
 
				+                        var vx = windData.data[p][0];
			
 
				+                        var vy = windData.data[p][1];
			
 
				+                        var mag = Math.sqrt(vx * vx + vy * vy);
			
 
				+                        // 数据是一个一维数组
			
 
				+                        // [ [经度, 维度，向量经度方向的值，向量维度方向的值] ]
			
 
				+                        var y = j / windData.ny * 180 - 90;
			
 
				+                        if (y > 85 || y < -85) {
			
 
				+                            continue;
			
 
				+                        }
			
 
				+                        data.push([
			
 
				+                            i / windData.nx * 360 - 180,
			
 
				+                            y,
			
 
				+                            vx,
			
 
				+                            vy,
			
 
				+                            mag
			
 
				+                        ]);
			
 
				+                        maxMag = Math.max(mag, maxMag);
			
 
				+                        minMag = Math.min(mag, minMag);
			
 
				+                    }
			
 
				+                }
			
 
				+
			
 
				+                var echartslayer = new EchartsLayer(map);
			
 
				+                echartslayer.chart.setOption({
			
 
				+                    GLMap: {
			
 
				+                        roam: true,
			
 
				+                    },
			
 
				+                    geo: {
			
 
				+                        map: "GLMap"
			
 
				+                    },
			
 
				+                    visualMap: {
			
 
				+                        left: 'right',
			
 
				+                        min: minMag,
			
 
				+                        max: maxMag,
			
 
				+                        dimension: 4,
			
 
				+                        inRange: {
			
 
				+                            //                         color: ['green', 'yellow', 'red']
			
 
				+                            color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8',
			
 
				+                                '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027',
			
 
				+                                '#a50026'
			
 
				+                            ]
			
 
				+                        },
			
 
				+                        realtime: false,
			
 
				+                        calculable: true,
			
 
				+                        textStyle: {
			
 
				+                            color: '#fff'
			
 
				+                        }
			
 
				+                    },
			
 
				+                    series: [{
			
 
				+                        type: 'flowGL',
			
 
				+                        coordinateSystem: 'GLMap',
			
 
				+                        data: data,
			
 
				+                        particleDensity: 512,
			
 
				+                        particleSpeed: 2,
			
 
				+                        particleSize: 1,
			
 
				+                        gridWidth: 180,
			
 
				+                        gridHeight: 60,
			
 
				+                        itemStyle: {
			
 
				+                            opacity: 0.7
			
 
				+                        }
			
 
				+                    }]
			
 
				+                });
			
 
				+
			
 
				+            });
			
 
				+        });
			
 
				+    </script>
			
 
				+
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/echartsGL_ShanghaiBuildingPrice.html
+++ b/public/supermap/examples/mapboxgl/echartsGL_ShanghaiBuildingPrice.html
@@ -0,0 +1,129 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<html>
			
 
				+<head>
			
 
				+    <meta charset='utf-8'/>
			
 
				+    <title data-i18n="resources.title_ShanghaiBuildingPrice"></title>
			
 
				+    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
			
 
				+    <style>
			
 
				+        body {
			
 
				+            margin: 0;
			
 
				+            padding: 0;
			
 
				+        }
			
 
				+
			
 
				+        #map {
			
 
				+            position: absolute;
			
 
				+            top: 0;
			
 
				+            bottom: 0;
			
 
				+            width: 100%;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+<div id='map'></div>
			
 
				+<script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script>
			
 
				+<script type="text/javascript" include="echarts,echarts-gl" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+<script type="text/javascript">
			
 
				+    var data;
			
 
				+    var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+        "| Image <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a> | </span>" +
			
 
				+        "<a href='https://echarts.baidu.com' target='_blank'>© 2018 " + resources.title_3baidu + " ECharts Echarts-gl</a>";
			
 
				+    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+    var tileURL = host + "/iserver/services/map-china400/rest/maps/ChinaDark/zxyTileImage.png?z={z}&x={x}&y={y}";
			
 
				+    var uploadedDataURL = "../data/ShanghaiBuildingPrice.json";
			
 
				+
			
 
				+    var myChart = echarts.init(document.getElementById('map'));
			
 
				+
			
 
				+    $.getJSON(uploadedDataURL, function (linedata) {
			
 
				+
			
 
				+        myChart.setOption({
			
 
				+
			
 
				+            visualMap: {
			
 
				+                show: false,
			
 
				+                calculable: true,
			
 
				+                realtime: false,
			
 
				+                inRange: {
			
 
				+                    color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
			
 
				+                },
			
 
				+                outOfRange: {
			
 
				+                    colorAlpha: 0
			
 
				+                },
			
 
				+                max: linedata[1]
			
 
				+            },
			
 
				+            toolBox: {
			
 
				+                feature: {
			
 
				+                    dataZoom: {
			
 
				+                        show: true,
			
 
				+                    }
			
 
				+                }
			
 
				+            },
			
 
				+            mapbox: {
			
 
				+                center: [121.4693, 31.123070],
			
 
				+                zoom: 10,
			
 
				+                pitch: 50,
			
 
				+                bearing: -10,
			
 
				+                style: {
			
 
				+                    "version": 8,
			
 
				+                    "sources": {
			
 
				+                        "raster-tiles": {
			
 
				+                            "attribution": attribution,
			
 
				+                            "type": "raster",
			
 
				+                            "tiles": [tileURL],
			
 
				+                            "tileSize": 256,
			
 
				+                        },
			
 
				+                    },
			
 
				+                    "layers": [{
			
 
				+                        "id": "simple-tiles",
			
 
				+                        "type": "raster",
			
 
				+                        "source": "raster-tiles",
			
 
				+                        "minzoom": 0,
			
 
				+                        "maxzoom": 22
			
 
				+                    }]
			
 
				+                },
			
 
				+                boxHeight: 50,
			
 
				+                // altitudeScale: 3e2,
			
 
				+                postEffect: {
			
 
				+                    enable: true,
			
 
				+                    SSAO: {
			
 
				+                        enable: true,
			
 
				+                        radius: 2,
			
 
				+                        intensity: 1.5
			
 
				+                    }
			
 
				+                },
			
 
				+                light: {
			
 
				+                    main: {
			
 
				+                        intensity: 1,
			
 
				+                        shadow: true,
			
 
				+                        shadowQuality: 'high'
			
 
				+                    },
			
 
				+                    ambient: {
			
 
				+                        intensity: 0.
			
 
				+                    },
			
 
				+                    ambientCubemap: {
			
 
				+                        texture: '../data/ShanghaiBuildingPrice.hdr',
			
 
				+                        exposure: 1,
			
 
				+                        diffuseIntensity: 0.5
			
 
				+                    }
			
 
				+                },
			
 
				+
			
 
				+            },
			
 
				+
			
 
				+            series: [{
			
 
				+                type: 'bar3D',
			
 
				+                roam: true,
			
 
				+                shading: 'realistic',
			
 
				+                coordinateSystem: 'mapbox',
			
 
				+                barSize: 0.2,
			
 
				+                silent: true,
			
 
				+                data: linedata[0]
			
 
				+            }]
			
 
				+        });
			
 
				+        //获取mapbox对象
			
 
				+        var mapbox = myChart.getModel().getComponent('mapbox3D').getMapbox();
			
 
				+        mapbox.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+    });
			
 
				+
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/echartsGL_colorfulCity.html
+++ b/public/supermap/examples/mapboxgl/echartsGL_colorfulCity.html
@@ -0,0 +1,125 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title data-i18n="resources.title_colorfulCity"></title>
			
 
				+    <script type="text/javascript" include="jquery,bootstrap" src="../js/include-web.js"></script>
			
 
				+    <script type="text/javascript" include="echarts,echarts-gl" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+</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>
			
 
				+<script>
			
 
				+    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+    var map, myChart,
			
 
				+        mapUrl = host + "/iserver/services/map-china400/rest/maps/ChinaDark/zxyTileImage.png?z={z}&x={x}&y={y}",
			
 
				+        attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+            "| Image <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a> | </span>" +
			
 
				+            "<a href='https://echarts.baidu.com' target='_blank'>© 2018 " + resources.title_3baidu + " ECharts Echarts-gl</a>";
			
 
				+
			
 
				+    myChart = echarts.init(document.getElementById("map"));
			
 
				+    myChart.showLoading();
			
 
				+    $.getJSON('../data/colorfulCityData.json', function (buildingsGeoJSON) {
			
 
				+
			
 
				+        echarts.registerMap('buildings', buildingsGeoJSON);
			
 
				+
			
 
				+        myChart.hideLoading();
			
 
				+
			
 
				+        var regionsData = buildingsGeoJSON.features.map(function (feature) {
			
 
				+            return {
			
 
				+                name: feature.properties.name,
			
 
				+                value: Math.random(),
			
 
				+                height: +feature.properties.height * 10
			
 
				+            };
			
 
				+        });
			
 
				+
			
 
				+        myChart.setOption({
			
 
				+            visualMap: {
			
 
				+                show: false,
			
 
				+                min: 0.4,
			
 
				+                max: 1,
			
 
				+                inRange: {
			
 
				+                    color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
			
 
				+                }
			
 
				+            },
			
 
				+            mapbox: {
			
 
				+                center: [13.409779, 52.520645],
			
 
				+                zoom: 13,
			
 
				+                pitch: 50,
			
 
				+                bearing: -10,
			
 
				+                style: {
			
 
				+                    "version": 8,
			
 
				+                    "sources": {
			
 
				+                        "raster-tiles": {
			
 
				+                            "attribution": attribution,
			
 
				+                            "type": "raster",
			
 
				+                            "tiles": [mapUrl],
			
 
				+                            "tileSize": 256
			
 
				+                        }
			
 
				+                    },
			
 
				+                    "layers": [{
			
 
				+                        "id": "simple-tiles",
			
 
				+                        "type": "raster",
			
 
				+                        "source": "raster-tiles",
			
 
				+                    }]
			
 
				+                },
			
 
				+                postEffect: {
			
 
				+                    enable: true,
			
 
				+                    SSAO: {
			
 
				+                        enable: true,
			
 
				+                        intensity: 1.3,
			
 
				+                        radius: 5
			
 
				+                    },
			
 
				+                    screenSpaceReflection: {
			
 
				+                        enable: false
			
 
				+                    },
			
 
				+                    depthOfField: {
			
 
				+                        enable: true,
			
 
				+                        blurRadius: 4,
			
 
				+                        focalDistance: 90
			
 
				+                    }
			
 
				+                },
			
 
				+                light: {
			
 
				+                    main: {
			
 
				+                        intensity: 3,
			
 
				+                        alpha: -40,
			
 
				+                        shadow: true,
			
 
				+                        shadowQuality: 'high'
			
 
				+                    },
			
 
				+                    ambient: {
			
 
				+                        intensity: 0.
			
 
				+                    },
			
 
				+                    ambientCubemap: {
			
 
				+                        texture: '../data/ambientCubemapTexture.hdr',
			
 
				+                        exposure: 1,
			
 
				+                        diffuseIntensity: 0.5,
			
 
				+                        specularIntensity: 1
			
 
				+                    }
			
 
				+                }
			
 
				+            },
			
 
				+            series: [{
			
 
				+                type: 'map3D',
			
 
				+                coordinateSystem: 'mapbox',
			
 
				+                map: 'buildings',
			
 
				+                data: regionsData,
			
 
				+                shading: 'realistic',
			
 
				+                instancing: true,
			
 
				+                silent: true,
			
 
				+                itemStyle: {
			
 
				+                    areaColor: '#fff'
			
 
				+                },
			
 
				+                realisticMaterial: {
			
 
				+                    metalness: 0,
			
 
				+                    roughness: 0.0
			
 
				+                }
			
 
				+            }]
			
 
				+        });
			
 
				+
			
 
				+        myChart.getModel().getComponent('mapbox3D').getMapbox().addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+    });
			
 
				+</script>
			
 
				+
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/echartsGL_flightPath.html
+++ b/public/supermap/examples/mapboxgl/echartsGL_flightPath.html
@@ -0,0 +1,220 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<html>
			
 
				+<head>
			
 
				+    <meta charset='utf-8'/>
			
 
				+    <title data-i18n="resources.title_flightPath"></title>
			
 
				+    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
			
 
				+    <style>
			
 
				+        body {
			
 
				+            margin: 0;
			
 
				+            padding: 0;
			
 
				+        }
			
 
				+
			
 
				+        #map {
			
 
				+            position: absolute;
			
 
				+            top: 0;
			
 
				+            bottom: 0;
			
 
				+            width: 100%;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+<div id='map'></div>
			
 
				+<script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script>
			
 
				+<script type="text/javascript" include="echarts,echarts-gl" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+<script type="text/javascript">
			
 
				+    // 数据来自 https://uber.github.io/deck.gl/#/examples/core-layers/line-layer
			
 
				+    var data;
			
 
				+    var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+        "| Image <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a> | </span>" +
			
 
				+        "<a href='https://echarts.baidu.com' target='_blank'>© 2018 " + resources.title_3baidu + " ECharts Echarts-gl</a>";
			
 
				+    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+    var tileURL = host + "/iserver/services/map-china400/rest/maps/ChinaDark/zxyTileImage.png?z={z}&x={x}&y={y}";
			
 
				+    var dataFile = "../data/flightpath.txt";
			
 
				+
			
 
				+    var myChart = echarts.init(document.getElementById('map'));
			
 
				+    //获取mapbox对象
			
 
				+
			
 
				+
			
 
				+    $.get(dataFile, function (text) {
			
 
				+
			
 
				+        var data = decodeFlightPathData(text);
			
 
				+
			
 
				+        var dataAll = [];
			
 
				+        for (var i = 0; i < 4; i++) {
			
 
				+            dataAll = dataAll.concat(data.map(function (item) {
			
 
				+                return {
			
 
				+                    name: item.name,
			
 
				+                    coords: item.coords.map(function (coord) {
			
 
				+                        return coord.slice();
			
 
				+                    })
			
 
				+                };
			
 
				+            }));
			
 
				+        }
			
 
				+
			
 
				+        myChart.setOption({
			
 
				+            mapbox: {
			
 
				+                center: [0, 51.5],
			
 
				+                zoom: 8,
			
 
				+                pitch: 60,
			
 
				+                altitudeScale: 5,
			
 
				+                style: {
			
 
				+                    "version": 8,
			
 
				+                    "sources": {
			
 
				+                        "raster-tiles": {
			
 
				+                            "attribution": attribution,
			
 
				+                            "type": "raster",
			
 
				+                            "tiles": [tileURL],
			
 
				+                            "tileSize": 256,
			
 
				+                        },
			
 
				+                    },
			
 
				+                    "layers": [{
			
 
				+                        "id": "simple-tiles",
			
 
				+                        "type": "raster",
			
 
				+                        "source": "raster-tiles",
			
 
				+                        "minzoom": 0,
			
 
				+                        "maxzoom": 22
			
 
				+                    }]
			
 
				+                },
			
 
				+                postEffect: {
			
 
				+                    enable: true,
			
 
				+                    bloom: {
			
 
				+                        intensity: 0.4
			
 
				+                    }
			
 
				+                }
			
 
				+            },
			
 
				+            series: [{
			
 
				+                type: 'lines3D',
			
 
				+
			
 
				+                coordinateSystem: 'mapbox',
			
 
				+
			
 
				+                effect: {
			
 
				+                    show: true,
			
 
				+                    constantSpeed: 40,
			
 
				+                    trailWidth: 2,
			
 
				+                    trailLength: 0.15,
			
 
				+                    trailOpacity: 1
			
 
				+                },
			
 
				+
			
 
				+                blendMode: 'lighter',
			
 
				+
			
 
				+                polyline: true,
			
 
				+
			
 
				+                lineStyle: {
			
 
				+                    width: 1,
			
 
				+                    color: 'rgb(50, 60, 170)',
			
 
				+                    opacity: 0.1
			
 
				+                },
			
 
				+
			
 
				+                data: dataAll
			
 
				+            }]
			
 
				+
			
 
				+        });
			
 
				+
			
 
				+        window.addEventListener('keydown', function () {
			
 
				+            myChart.dispatchAction({
			
 
				+                type: 'lines3DToggleEffect',
			
 
				+                seriesIndex: 0
			
 
				+            });
			
 
				+        });
			
 
				+
			
 
				+        //获取mapbox对象
			
 
				+        if (myChart.getModel()) {
			
 
				+            var mapbox = myChart.getModel().getComponent('mapbox3D').getMapbox();
			
 
				+            mapbox.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+        }
			
 
				+
			
 
				+    });
			
 
				+
			
 
				+
			
 
				+    function decodePolyline(str, precision) {
			
 
				+        var index = 0;
			
 
				+        var lat = 0;
			
 
				+        var lng = 0;
			
 
				+        var coordinates = [];
			
 
				+        var shift = 0;
			
 
				+        var result = 0;
			
 
				+        var byte = null;
			
 
				+        var latitude_change;
			
 
				+        var longitude_change;
			
 
				+        var factor = Math.pow(10, precision || 5);
			
 
				+        while (index < str.length) {
			
 
				+            byte = null;
			
 
				+            shift = 0;
			
 
				+            result = 0;
			
 
				+
			
 
				+            do {
			
 
				+                byte = str.charCodeAt(index++) - 63;
			
 
				+                result |= (byte & 0x1f) << shift;
			
 
				+                shift += 5;
			
 
				+            } while (byte >= 0x20);
			
 
				+
			
 
				+            latitude_change = ((result & 1) ? ~(result >> 1) : (result >> 1));
			
 
				+
			
 
				+            shift = result = 0;
			
 
				+
			
 
				+            do {
			
 
				+                byte = str.charCodeAt(index++) - 63;
			
 
				+                result |= (byte & 0x1f) << shift;
			
 
				+                shift += 5;
			
 
				+            } while (byte >= 0x20);
			
 
				+
			
 
				+            longitude_change = ((result & 1) ? ~(result >> 1) : (result >> 1));
			
 
				+
			
 
				+            lat += latitude_change;
			
 
				+            lng += longitude_change;
			
 
				+
			
 
				+            coordinates.push([lng / factor, lat / factor]);
			
 
				+        }
			
 
				+
			
 
				+        return coordinates;
			
 
				+    }
			
 
				+
			
 
				+    function decodeFlightPathData(text) {
			
 
				+        var lines = text.split('\n');
			
 
				+
			
 
				+        var result = [];
			
 
				+
			
 
				+        lines.forEach(function (line) {
			
 
				+
			
 
				+            if (!line) {
			
 
				+                return;
			
 
				+            }
			
 
				+
			
 
				+            var parts = line.split('\t');
			
 
				+            var coords0 = parts[2].split('\x01').map(function (str) {
			
 
				+                return decodePolyline(str, 5)
			
 
				+            });
			
 
				+            var coords1 = parts[3].split('\x01').map(function (str) {
			
 
				+                return decodePolyline(str, 1)
			
 
				+            });
			
 
				+
			
 
				+            var coords = [];
			
 
				+            coords0.forEach(function (lineStr, i) {
			
 
				+                for (var j = 1; j < lineStr.length; j++) {
			
 
				+                    var prevPt0 = coords0[i][j - 1],
			
 
				+                        prevPt1 = coords1[i][j - 1],
			
 
				+                        currPt0 = coords0[i][j],
			
 
				+                        currPt1 = coords1[i][j];
			
 
				+
			
 
				+                    coords.push(
			
 
				+                        [prevPt0[0], prevPt0[1], prevPt1[0]],
			
 
				+                        [currPt0[0], currPt0[1], currPt1[0]]
			
 
				+                    );
			
 
				+                }
			
 
				+            });
			
 
				+
			
 
				+            result.push({
			
 
				+                name: parts[0],
			
 
				+                country: parts[1],
			
 
				+                coords: coords
			
 
				+            });
			
 
				+        });
			
 
				+        return result;
			
 
				+    }
			
 
				+
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/echartsGL_taxiRoutesOfCapeTown.html
+++ b/public/supermap/examples/mapboxgl/echartsGL_taxiRoutesOfCapeTown.html
@@ -0,0 +1,227 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<html>
			
 
				+  <head>
			
 
				+    <meta charset="utf-8" />
			
 
				+    <title data-i18n="resources.title_taxiRoutesOfCapeTown"></title>
			
 
				+    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
			
 
				+    <style>
			
 
				+      body {
			
 
				+        margin: 0;
			
 
				+        padding: 0;
			
 
				+      }
			
 
				+
			
 
				+      #map {
			
 
				+        position: absolute;
			
 
				+        top: 0;
			
 
				+        bottom: 0;
			
 
				+        width: 100%;
			
 
				+      }
			
 
				+    </style>
			
 
				+  </head>
			
 
				+  <body>
			
 
				+    <div id="map"></div>
			
 
				+
			
 
				+    <script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script>
			
 
				+    <script
			
 
				+      type="text/javascript"
			
 
				+      include="echarts,echarts-gl,shapefile"
			
 
				+      src="../../dist/mapboxgl/include-mapboxgl.js"
			
 
				+    ></script>
			
 
				+    <script type="text/javascript">
			
 
				+      var data;
			
 
				+      var attribution =
			
 
				+        "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+        "| Image <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a> | </span>" +
			
 
				+        "<a href='https://echarts.baidu.com' target='_blank'>© 2018 " +
			
 
				+        resources.title_3baidu +
			
 
				+        ' ECharts Echarts-gl</a>';
			
 
				+      var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
			
 
				+      var tileURL = host + '/iserver/services/map-china400/rest/maps/ChinaDark/zxyTileImage.png?z={z}&x={x}&y={y}';
			
 
				+
			
 
				+      var myChart = echarts.init(document.getElementById('map'));
			
 
				+
			
 
				+      var ENCODE_SCALE = 1e6;
			
 
				+
			
 
				+      //解码数据格式
			
 
				+      function decodeLine(line) {
			
 
				+        var result = [];
			
 
				+        var prevX = line[0];
			
 
				+        var prevY = line[1];
			
 
				+
			
 
				+        for (var i = 0; i < line[2].length; i += 2) {
			
 
				+          var x = line[2].charCodeAt(i) - 64;
			
 
				+          var y = line[2].charCodeAt(i + 1) - 64;
			
 
				+          // ZigZag decoding
			
 
				+          x = (x >> 1) ^ -(x & 1);
			
 
				+          y = (y >> 1) ^ -(y & 1);
			
 
				+          // Delta deocding
			
 
				+          x += prevX;
			
 
				+          y += prevY;
			
 
				+
			
 
				+          prevX = x;
			
 
				+          prevY = y;
			
 
				+          // Dequantize
			
 
				+          result.push([x / ENCODE_SCALE, y / ENCODE_SCALE, 10]);
			
 
				+        }
			
 
				+        return result;
			
 
				+      }
			
 
				+
			
 
				+      var geoJSON = {
			
 
				+        type: 'FeatureCollection',
			
 
				+        features: []
			
 
				+      };
			
 
				+      var regions = [];
			
 
				+
			
 
				+      shapefile.open('../data/taxiRoutesOfCapeTown.shp', '../data/taxiRoutesOfCapeTown.dbf').then(function(source) {
			
 
				+        return source.read().then(function append(result) {
			
 
				+          if (result.done) {
			
 
				+            cbk(geoJSON);
			
 
				+            return;
			
 
				+          }
			
 
				+
			
 
				+          var feature = result.value;
			
 
				+          feature.properties.name = geoJSON.features.length + '';
			
 
				+          regions.push({
			
 
				+            name: geoJSON.features.length + '',
			
 
				+            value: 1,
			
 
				+            height: feature.properties.SHAPE_leng * 10000
			
 
				+          });
			
 
				+          geoJSON.features.push(feature);
			
 
				+
			
 
				+          return source.read().then(append);
			
 
				+        });
			
 
				+      });
			
 
				+
			
 
				+      function cbk(geoJSON) {
			
 
				+        $.get('../data/taxiRoutesOfCapeTown.json', function(data) {
			
 
				+          var lines = data.map(function(track) {
			
 
				+            return {
			
 
				+              coords: decodeLine(track)
			
 
				+            };
			
 
				+          });
			
 
				+
			
 
				+          //修改v3.8.5 echarts.js文件的BUG
			
 
				+          //            echarts.parseGeoJSON = echarts.parseGeoJson;
			
 
				+
			
 
				+          echarts.registerMap('buildings', geoJSON);
			
 
				+
			
 
				+          myChart.setOption({
			
 
				+            mapbox: {
			
 
				+              center: [18.424552361777955, -33.92188144682616],
			
 
				+              zoom: 14,
			
 
				+              pitch: 50,
			
 
				+              bearing: -10,
			
 
				+              altitudeScale: 2,
			
 
				+              style: {
			
 
				+                version: 8,
			
 
				+                sources: {
			
 
				+                  'raster-tiles': {
			
 
				+                    attribution: attribution,
			
 
				+                    type: 'raster',
			
 
				+                    tiles: [tileURL],
			
 
				+                    tileSize: 256
			
 
				+                  }
			
 
				+                },
			
 
				+                layers: [
			
 
				+                  {
			
 
				+                    id: 'simple-tiles',
			
 
				+                    type: 'raster',
			
 
				+                    source: 'raster-tiles',
			
 
				+                    minzoom: 0,
			
 
				+                    maxzoom: 22
			
 
				+                  }
			
 
				+                ]
			
 
				+              },
			
 
				+              postEffect: {
			
 
				+                enable: true,
			
 
				+                screenSpaceAmbientOcclusion: {
			
 
				+                  enable: true,
			
 
				+                  intensity: 1.2,
			
 
				+                  radius: 6,
			
 
				+                  quality: 'low'
			
 
				+                },
			
 
				+                screenSpaceReflection: {
			
 
				+                  enable: true
			
 
				+                }
			
 
				+              },
			
 
				+              light: {
			
 
				+                main: {
			
 
				+                  intensity: 1,
			
 
				+                  shadow: true,
			
 
				+                  shadowQuality: 'high'
			
 
				+                },
			
 
				+                ambient: {
			
 
				+                  intensity: 0
			
 
				+                },
			
 
				+                ambientCubemap: {
			
 
				+                  texture: '../data/taxiRoutesOfCapeTown.hdr',
			
 
				+                  exposure: 2,
			
 
				+                  diffuseIntensity: 1,
			
 
				+                  specularIntensity: 2
			
 
				+                }
			
 
				+              }
			
 
				+            },
			
 
				+
			
 
				+            series: [
			
 
				+              {
			
 
				+                type: 'lines3D',
			
 
				+                coordinateSystem: 'mapbox',
			
 
				+                effect: {
			
 
				+                  show: true,
			
 
				+                  constantSpeed: 5,
			
 
				+                  trailWidth: 2,
			
 
				+                  trailLength: 0.8,
			
 
				+                  trailOpacity: 1,
			
 
				+                  spotIntensity: 10
			
 
				+                },
			
 
				+
			
 
				+                blendMode: 'lighter',
			
 
				+
			
 
				+                polyline: true,
			
 
				+
			
 
				+                lineStyle: {
			
 
				+                  width: 0.1,
			
 
				+                  color: 'rgb(200, 40, 0)',
			
 
				+                  opacity: 0
			
 
				+                },
			
 
				+
			
 
				+                data: lines
			
 
				+              },
			
 
				+              {
			
 
				+                type: 'map3D',
			
 
				+                map: 'buildings',
			
 
				+                coordinateSystem: 'mapbox',
			
 
				+                shading: 'realistic',
			
 
				+                silent: true,
			
 
				+                instancing: true,
			
 
				+                data: regions,
			
 
				+                itemStyle: {
			
 
				+                  color: '#444'
			
 
				+                },
			
 
				+                realisticMaterial: {
			
 
				+                  metalness: 1,
			
 
				+                  roughness: 0.2
			
 
				+                }
			
 
				+              }
			
 
				+            ]
			
 
				+          });
			
 
				+          //获取mapbox对象
			
 
				+          var mapbox = myChart
			
 
				+            .getModel()
			
 
				+            .getComponent('mapbox3D')
			
 
				+            .getMapbox();
			
 
				+          mapbox.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+        });
			
 
				+      }
			
 
				+
			
 
				+      window.addEventListener('keydown', function() {
			
 
				+        myChart.dispatchAction({
			
 
				+          type: 'lines3DToggleEffect',
			
 
				+          seriesIndex: 0
			
 
				+        });
			
 
				+      });
			
 
				+    </script>
			
 
				+  </body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/echartsGL_taxiTrajectoryMap.html
+++ b/public/supermap/examples/mapboxgl/echartsGL_taxiTrajectoryMap.html
--- a/public/supermap/examples/mapboxgl/echarts_ChangchunPublicTransportNetwork.html
+++ b/public/supermap/examples/mapboxgl/echarts_ChangchunPublicTransportNetwork.html
@@ -0,0 +1,111 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<html>
			
 
				+<head>
			
 
				+    <meta charset='utf-8'/>
			
 
				+    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
			
 
				+    <title data-i18n="resources.title_ChangchunPublicTransportNetwork"></title>
			
 
				+    <style>
			
 
				+        body {
			
 
				+            margin: 0;
			
 
				+            padding: 0;
			
 
				+        }
			
 
				+
			
 
				+        #map {
			
 
				+            position: absolute;
			
 
				+            top: 0;
			
 
				+            bottom: 0;
			
 
				+            width: 100%;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+<div id='map'></div>
			
 
				+<script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script>
			
 
				+<script type="text/javascript" include="echarts" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+<script type="text/javascript">
			
 
				+    var data;
			
 
				+    var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+            " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+            " Image <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a> | </span>" +
			
 
				+            " <a href='https://echarts.baidu.com' target='_blank'>© 2018 " + resources.title_3baidu + " ECharts</a>";
			
 
				+    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+    var tileURL = host + "/iserver/services/map-china400/rest/maps/ChinaDark/zxyTileImage.png?z={z}&x={x}&y={y}";
			
 
				+
			
 
				+    var map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [tileURL],
			
 
				+                    "tileSize": 256,
			
 
				+                },
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+                "minzoom": 0,
			
 
				+                "maxzoom": 22
			
 
				+            }]
			
 
				+        },
			
 
				+        center: [125.35, 43.86],
			
 
				+        zoom: 10
			
 
				+    });
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+    var uploadedDataURL = "../data/changchunBus.json";
			
 
				+
			
 
				+    $.get(uploadedDataURL, function (data) {
			
 
				+        option = {
			
 
				+            animation: false,
			
 
				+            GLMap: {
			
 
				+                roam: true
			
 
				+            },
			
 
				+            coordinateSystem: 'GLMap',
			
 
				+            geo: {
			
 
				+                map: 'GLMap',
			
 
				+            },
			
 
				+
			
 
				+            series: [{
			
 
				+                type: 'lines',
			
 
				+                polyline: true,
			
 
				+                data: data,
			
 
				+                silent: true,
			
 
				+                lineStyle: {
			
 
				+                    normal: {
			
 
				+                        opacity: 0.2,
			
 
				+                        width: 1
			
 
				+                    }
			
 
				+                },
			
 
				+                progressiveThreshold: 500,
			
 
				+                progressive: 100,
			
 
				+            }, {
			
 
				+
			
 
				+                type: 'lines',
			
 
				+                coordinateSystem: 'GLMap',
			
 
				+                polyline: true,
			
 
				+                data: data,
			
 
				+                lineStyle: {
			
 
				+                    normal: {
			
 
				+                        width: 0.2
			
 
				+                    }
			
 
				+                },
			
 
				+                effect: {
			
 
				+                    constantSpeed: 40,
			
 
				+                    show: true,
			
 
				+                    trailLength: 0.02,
			
 
				+                    symbolSize: 2
			
 
				+                },
			
 
				+            }]
			
 
				+        };
			
 
				+        var echartslayer = new EchartsLayer(map);
			
 
				+        echartslayer.chart.setOption(option);
			
 
				+
			
 
				+    });
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/echarts_bar.html
+++ b/public/supermap/examples/mapboxgl/echarts_bar.html
@@ -0,0 +1,183 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<html>
			
 
				+<head>
			
 
				+    <meta charset='utf-8'/>
			
 
				+    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
			
 
				+    <title data-i18n="resources.title_GraphBar"></title>
			
 
				+    <style>
			
 
				+        body {
			
 
				+            margin: 0;
			
 
				+            padding: 0;
			
 
				+        }
			
 
				+
			
 
				+        #map {
			
 
				+            position: absolute;
			
 
				+            top: 0;
			
 
				+            bottom: 0;
			
 
				+            width: 100%;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+<div id='map'></div>
			
 
				+<script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script>
			
 
				+<script type="text/javascript" include="echarts" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+<script type="text/javascript">
			
 
				+    var data;
			
 
				+    var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+            " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+            " Image <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a> | </span>" +
			
 
				+            " <a href='https://echarts.baidu.com' target='_blank'>© 2018 " + resources.title_3baidu + " ECharts</a>";
			
 
				+    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+    var tileURL = host + '/iserver/services/map-world/rest/maps/世界地图_Gray/zxyTileImage.png?prjCoordSys='+encodeURIComponent('{"epsgCode":3857}')+'&z={z}&x={x}&y={y}';
			
 
				+    var url = host + "/iserver/services/map-china400/rest/maps/China_4326";
			
 
				+    var chart, div, popup = '';
			
 
				+    var map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [tileURL],
			
 
				+                    "tileSize": 256,
			
 
				+                },
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+                "minzoom": 0,
			
 
				+                "maxzoom": 18
			
 
				+            }]
			
 
				+        },
			
 
				+        center: [120.14322240845, 30.236064370321],
			
 
				+        zoom: 5
			
 
				+    });
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+    map.loadImage('../img/marker-icon.png', function (error, image) {
			
 
				+        if (error) throw error;
			
 
				+        map.addImage('positionPoint', image);
			
 
				+    });
			
 
				+
			
 
				+    option = {
			
 
				+        legend: {
			
 
				+            data: [resources.text_rainfall, resources.text_runoff],
			
 
				+            align: 'left'
			
 
				+        },
			
 
				+        toolbox: {
			
 
				+            feature: {
			
 
				+                magicType: {
			
 
				+                    type: ['stack', 'tiled']
			
 
				+                },
			
 
				+                saveAsImage: {
			
 
				+                    pixelRatio: 2
			
 
				+                }
			
 
				+            }
			
 
				+        },
			
 
				+        tooltip: {},
			
 
				+        xAxis: {
			
 
				+            data: [resources.text_monday, resources.text_tuesday, resources.text_wednesday, resources.text_thursday, resources.text_friday, resources.text_saturday, resources.text_sunday],
			
 
				+            silent: false,
			
 
				+            splitLine: {
			
 
				+                show: false
			
 
				+            }
			
 
				+        },
			
 
				+        yAxis: {},
			
 
				+        series: [{
			
 
				+            name: 'bar',
			
 
				+            type: 'bar',
			
 
				+            animationDelay: function (idx) {
			
 
				+                return idx * 10;
			
 
				+            }
			
 
				+        }, {
			
 
				+            name: 'bar2',
			
 
				+            type: 'bar',
			
 
				+            animationDelay: function (idx) {
			
 
				+                return idx * 10 + 100;
			
 
				+            }
			
 
				+        }],
			
 
				+        animationEasing: 'elasticOut',
			
 
				+        animationDelayUpdate: function (idx) {
			
 
				+            return idx * 5;
			
 
				+        }
			
 
				+    };
			
 
				+
			
 
				+    div = document.createElement('div');
			
 
				+    chart = echarts.init(div, '', {
			
 
				+        width: 500,
			
 
				+        height: 300
			
 
				+    });
			
 
				+    chart.setOption(option);
			
 
				+    query();
			
 
				+
			
 
				+    function query() {
			
 
				+        var sqlParam = new SuperMap.QueryBySQLParameters({
			
 
				+            queryParams: [{
			
 
				+                name: "China_ProCenCity_pt@China",
			
 
				+                attributeFilter: "1 = 1"
			
 
				+            }, {
			
 
				+                name: "China_Capital_pt@China",
			
 
				+                attributeFilter: "1 = 1"
			
 
				+            }]
			
 
				+        });
			
 
				+
			
 
				+        queryService = new mapboxgl.supermap.QueryService(url).queryBySQL(sqlParam, function (serviceResult) {
			
 
				+
			
 
				+            var recordsets = serviceResult && serviceResult.result && serviceResult.result.recordsets;
			
 
				+            features = recordsets && recordsets[0] && recordsets[0].features;
			
 
				+            map.addLayer({
			
 
				+                "id": "points",
			
 
				+                "type": "symbol",
			
 
				+                "layout": {
			
 
				+                    "icon-image": "positionPoint",
			
 
				+                    "icon-size": 0.8,
			
 
				+                    "icon-offset": [0, -15] //设置偏移量
			
 
				+                },
			
 
				+                "source": {
			
 
				+                    "type": "geojson",
			
 
				+                    "data": features
			
 
				+                }
			
 
				+            });
			
 
				+
			
 
				+            map.on('click', 'points', function (e) {
			
 
				+                popup = new mapboxgl.Popup({maxWidth: 'none'});
			
 
				+                popup.setLngLat(e.lngLat.toArray())
			
 
				+                    .setDOMContent(div) // sets a popup on this marker
			
 
				+                    .addTo(map);
			
 
				+
			
 
				+                var data1 = [];
			
 
				+                var data2 = [];
			
 
				+                for (var i = 0; i < 7; i++) {
			
 
				+                    var data = Math.random().toFixed(2);
			
 
				+                    data1.push(data);
			
 
				+                    data2.push(data * (Math.random() + 1.5));
			
 
				+                }
			
 
				+
			
 
				+                chart.setOption({
			
 
				+                    title: {
			
 
				+                        text: e.features[0].properties.NAME,
			
 
				+                        subtext: resources.text_fictitiouData
			
 
				+                    },
			
 
				+                    series: [
			
 
				+                        {
			
 
				+                            name: resources.text_rainfall,
			
 
				+                            data: data1
			
 
				+                        },
			
 
				+                        {
			
 
				+                            name: resources.text_runoff,
			
 
				+                            data: data2
			
 
				+                        }
			
 
				+                    ]
			
 
				+                });
			
 
				+
			
 
				+            });
			
 
				+        });
			
 
				+    }
			
 
				+
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/echarts_cellMap.html
+++ b/public/supermap/examples/mapboxgl/echarts_cellMap.html
--- a/public/supermap/examples/mapboxgl/echarts_effectScatter.html
+++ b/public/supermap/examples/mapboxgl/echarts_effectScatter.html
@@ -0,0 +1,925 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<html>
			
 
				+<head>
			
 
				+    <meta charset='utf-8'/>
			
 
				+    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
			
 
				+    <title data-i18n="resources.title_effectScatter"></title>
			
 
				+    <script type="text/javascript" src="../js/include-web.js"></script>
			
 
				+    <style>
			
 
				+        body {
			
 
				+            margin: 0;
			
 
				+            padding: 0;
			
 
				+        }
			
 
				+
			
 
				+        #map {
			
 
				+            position: absolute;
			
 
				+            top: 0;
			
 
				+            bottom: 0;
			
 
				+            width: 100%;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+<div id='map'></div>
			
 
				+<script type="text/javascript" exclude='iclient-mapboxgl' include="echarts"
			
 
				+        src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+<script type="text/javascript">
			
 
				+    var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+        " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+        " Image <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a> | </span>" +
			
 
				+        "<a href='https://echarts.baidu.com' target='_blank'>© 2018 " + resources.title_3baidu + " ECharts</a>";
			
 
				+    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+    var tileURL = host + "/iserver/services/map-china400/rest/maps/ChinaDark/zxyTileImage.png?z={z}&x={x}&y={y}";
			
 
				+    var map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [tileURL],
			
 
				+                    "tileSize": 256,
			
 
				+                },
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+                "minzoom": 0,
			
 
				+                "maxzoom": 22
			
 
				+            }]
			
 
				+        },
			
 
				+        center: [112, 37.94],
			
 
				+        zoom: 3
			
 
				+    });
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+
			
 
				+    var data = [
			
 
				+        {
			
 
				+            name: '海门',
			
 
				+            value: 9
			
 
				+        }, {
			
 
				+            name: '鄂尔多斯',
			
 
				+            value: 12
			
 
				+        }, {
			
 
				+            name: '招远',
			
 
				+            value: 12
			
 
				+        }, {
			
 
				+            name: '舟山',
			
 
				+            value: 12
			
 
				+        }, {
			
 
				+            name: '齐齐哈尔',
			
 
				+            value: 14
			
 
				+        }, {
			
 
				+            name: '盐城',
			
 
				+            value: 15
			
 
				+        }, {
			
 
				+            name: '赤峰',
			
 
				+            value: 16
			
 
				+        }, {
			
 
				+            name: '青岛',
			
 
				+            value: 18
			
 
				+        }, {
			
 
				+            name: '乳山',
			
 
				+            value: 18
			
 
				+        }, {
			
 
				+            name: '金昌',
			
 
				+            value: 19
			
 
				+        }, {
			
 
				+            name: '泉州',
			
 
				+            value: 21
			
 
				+        }, {
			
 
				+            name: '莱西',
			
 
				+            value: 21
			
 
				+        }, {
			
 
				+            name: '日照',
			
 
				+            value: 21
			
 
				+        }, {
			
 
				+            name: '胶南',
			
 
				+            value: 22
			
 
				+        }, {
			
 
				+            name: '南通',
			
 
				+            value: 23
			
 
				+        }, {
			
 
				+            name: '拉萨',
			
 
				+            value: 24
			
 
				+        }, {
			
 
				+            name: '云浮',
			
 
				+            value: 24
			
 
				+        }, {
			
 
				+            name: '梅州',
			
 
				+            value: 25
			
 
				+        }, {
			
 
				+            name: '文登',
			
 
				+            value: 25
			
 
				+        }, {
			
 
				+            name: '上海',
			
 
				+            value: 25
			
 
				+        }, {
			
 
				+            name: '攀枝花',
			
 
				+            value: 25
			
 
				+        }, {
			
 
				+            name: '威海',
			
 
				+            value: 25
			
 
				+        }, {
			
 
				+            name: '承德',
			
 
				+            value: 25
			
 
				+        }, {
			
 
				+            name: '厦门',
			
 
				+            value: 26
			
 
				+        }, {
			
 
				+            name: '汕尾',
			
 
				+            value: 26
			
 
				+        }, {
			
 
				+            name: '潮州',
			
 
				+            value: 26
			
 
				+        }, {
			
 
				+            name: '丹东',
			
 
				+            value: 27
			
 
				+        }, {
			
 
				+            name: '太仓',
			
 
				+            value: 27
			
 
				+        }, {
			
 
				+            name: '曲靖',
			
 
				+            value: 27
			
 
				+        }, {
			
 
				+            name: '烟台',
			
 
				+            value: 28
			
 
				+        }, {
			
 
				+            name: '福州',
			
 
				+            value: 29
			
 
				+        }, {
			
 
				+            name: '瓦房店',
			
 
				+            value: 30
			
 
				+        }, {
			
 
				+            name: '即墨',
			
 
				+            value: 30
			
 
				+        }, {
			
 
				+            name: '抚顺',
			
 
				+            value: 31
			
 
				+        }, {
			
 
				+            name: '玉溪',
			
 
				+            value: 31
			
 
				+        }, {
			
 
				+            name: '张家口',
			
 
				+            value: 31
			
 
				+        }, {
			
 
				+            name: '阳泉',
			
 
				+            value: 31
			
 
				+        }, {
			
 
				+            name: '莱州',
			
 
				+            value: 32
			
 
				+        }, {
			
 
				+            name: '湖州',
			
 
				+            value: 32
			
 
				+        }, {
			
 
				+            name: '汕头',
			
 
				+            value: 32
			
 
				+        }, {
			
 
				+            name: '昆山',
			
 
				+            value: 33
			
 
				+        }, {
			
 
				+            name: '宁波',
			
 
				+            value: 33
			
 
				+        }, {
			
 
				+            name: '湛江',
			
 
				+            value: 33
			
 
				+        }, {
			
 
				+            name: '揭阳',
			
 
				+            value: 34
			
 
				+        }, {
			
 
				+            name: '荣成',
			
 
				+            value: 34
			
 
				+        }, {
			
 
				+            name: '连云港',
			
 
				+            value: 35
			
 
				+        }, {
			
 
				+            name: '葫芦岛',
			
 
				+            value: 35
			
 
				+        }, {
			
 
				+            name: '常熟',
			
 
				+            value: 36
			
 
				+        }, {
			
 
				+            name: '东莞',
			
 
				+            value: 36
			
 
				+        }, {
			
 
				+            name: '河源',
			
 
				+            value: 36
			
 
				+        }, {
			
 
				+            name: '淮安',
			
 
				+            value: 36
			
 
				+        }, {
			
 
				+            name: '泰州',
			
 
				+            value: 36
			
 
				+        }, {
			
 
				+            name: '南宁',
			
 
				+            value: 37
			
 
				+        }, {
			
 
				+            name: '营口',
			
 
				+            value: 37
			
 
				+        }, {
			
 
				+            name: '惠州',
			
 
				+            value: 37
			
 
				+        }, {
			
 
				+            name: '江阴',
			
 
				+            value: 37
			
 
				+        }, {
			
 
				+            name: '蓬莱',
			
 
				+            value: 37
			
 
				+        }, {
			
 
				+            name: '韶关',
			
 
				+            value: 38
			
 
				+        }, {
			
 
				+            name: '嘉峪关',
			
 
				+            value: 38
			
 
				+        }, {
			
 
				+            name: '广州',
			
 
				+            value: 38
			
 
				+        }, {
			
 
				+            name: '延安',
			
 
				+            value: 38
			
 
				+        }, {
			
 
				+            name: '太原',
			
 
				+            value: 39
			
 
				+        }, {
			
 
				+            name: '清远',
			
 
				+            value: 39
			
 
				+        }, {
			
 
				+            name: '中山',
			
 
				+            value: 39
			
 
				+        }, {
			
 
				+            name: '昆明',
			
 
				+            value: 39
			
 
				+        }, {
			
 
				+            name: '寿光',
			
 
				+            value: 40
			
 
				+        }, {
			
 
				+            name: '盘锦',
			
 
				+            value: 40
			
 
				+        }, {
			
 
				+            name: '长治',
			
 
				+            value: 41
			
 
				+        }, {
			
 
				+            name: '深圳',
			
 
				+            value: 41
			
 
				+        }, {
			
 
				+            name: '珠海',
			
 
				+            value: 42
			
 
				+        }, {
			
 
				+            name: '宿迁',
			
 
				+            value: 43
			
 
				+        }, {
			
 
				+            name: '咸阳',
			
 
				+            value: 43
			
 
				+        }, {
			
 
				+            name: '铜川',
			
 
				+            value: 44
			
 
				+        }, {
			
 
				+            name: '平度',
			
 
				+            value: 44
			
 
				+        }, {
			
 
				+            name: '佛山',
			
 
				+            value: 44
			
 
				+        }, {
			
 
				+            name: '海口',
			
 
				+            value: 44
			
 
				+        }, {
			
 
				+            name: '江门',
			
 
				+            value: 45
			
 
				+        }, {
			
 
				+            name: '章丘',
			
 
				+            value: 45
			
 
				+        }, {
			
 
				+            name: '肇庆',
			
 
				+            value: 46
			
 
				+        }, {
			
 
				+            name: '大连',
			
 
				+            value: 47
			
 
				+        }, {
			
 
				+            name: '临汾',
			
 
				+            value: 47
			
 
				+        }, {
			
 
				+            name: '吴江',
			
 
				+            value: 47
			
 
				+        }, {
			
 
				+            name: '石嘴山',
			
 
				+            value: 49
			
 
				+        }, {
			
 
				+            name: '沈阳',
			
 
				+            value: 50
			
 
				+        }, {
			
 
				+            name: '苏州',
			
 
				+            value: 50
			
 
				+        }, {
			
 
				+            name: '茂名',
			
 
				+            value: 50
			
 
				+        }, {
			
 
				+            name: '嘉兴',
			
 
				+            value: 51
			
 
				+        }, {
			
 
				+            name: '长春',
			
 
				+            value: 51
			
 
				+        }, {
			
 
				+            name: '胶州',
			
 
				+            value: 52
			
 
				+        }, {
			
 
				+            name: '银川',
			
 
				+            value: 52
			
 
				+        }, {
			
 
				+            name: '张家港',
			
 
				+            value: 52
			
 
				+        }, {
			
 
				+            name: '三门峡',
			
 
				+            value: 53
			
 
				+        }, {
			
 
				+            name: '锦州',
			
 
				+            value: 54
			
 
				+        }, {
			
 
				+            name: '南昌',
			
 
				+            value: 54
			
 
				+        }, {
			
 
				+            name: '柳州',
			
 
				+            value: 54
			
 
				+        }, {
			
 
				+            name: '三亚',
			
 
				+            value: 54
			
 
				+        }, {
			
 
				+            name: '自贡',
			
 
				+            value: 56
			
 
				+        }, {
			
 
				+            name: '吉林',
			
 
				+            value: 56
			
 
				+        }, {
			
 
				+            name: '阳江',
			
 
				+            value: 57
			
 
				+        }, {
			
 
				+            name: '泸州',
			
 
				+            value: 57
			
 
				+        }, {
			
 
				+            name: '西宁',
			
 
				+            value: 57
			
 
				+        }, {
			
 
				+            name: '宜宾',
			
 
				+            value: 58
			
 
				+        }, {
			
 
				+            name: '呼和浩特',
			
 
				+            value: 58
			
 
				+        }, {
			
 
				+            name: '成都',
			
 
				+            value: 58
			
 
				+        }, {
			
 
				+            name: '大同',
			
 
				+            value: 58
			
 
				+        }, {
			
 
				+            name: '镇江',
			
 
				+            value: 59
			
 
				+        }, {
			
 
				+            name: '桂林',
			
 
				+            value: 59
			
 
				+        }, {
			
 
				+            name: '张家界',
			
 
				+            value: 59
			
 
				+        }, {
			
 
				+            name: '宜兴',
			
 
				+            value: 59
			
 
				+        }, {
			
 
				+            name: '北海',
			
 
				+            value: 60
			
 
				+        }, {
			
 
				+            name: '西安',
			
 
				+            value: 61
			
 
				+        }, {
			
 
				+            name: '金坛',
			
 
				+            value: 62
			
 
				+        }, {
			
 
				+            name: '东营',
			
 
				+            value: 62
			
 
				+        }, {
			
 
				+            name: '牡丹江',
			
 
				+            value: 63
			
 
				+        }, {
			
 
				+            name: '遵义',
			
 
				+            value: 63
			
 
				+        }, {
			
 
				+            name: '绍兴',
			
 
				+            value: 63
			
 
				+        }, {
			
 
				+            name: '扬州',
			
 
				+            value: 64
			
 
				+        }, {
			
 
				+            name: '常州',
			
 
				+            value: 64
			
 
				+        }, {
			
 
				+            name: '潍坊',
			
 
				+            value: 65
			
 
				+        }, {
			
 
				+            name: '重庆',
			
 
				+            value: 66
			
 
				+        }, {
			
 
				+            name: '台州',
			
 
				+            value: 67
			
 
				+        }, {
			
 
				+            name: '南京',
			
 
				+            value: 67
			
 
				+        }, {
			
 
				+            name: '滨州',
			
 
				+            value: 70
			
 
				+        }, {
			
 
				+            name: '贵阳',
			
 
				+            value: 71
			
 
				+        }, {
			
 
				+            name: '无锡',
			
 
				+            value: 71
			
 
				+        }, {
			
 
				+            name: '本溪',
			
 
				+            value: 71
			
 
				+        }, {
			
 
				+            name: '克拉玛依',
			
 
				+            value: 72
			
 
				+        }, {
			
 
				+            name: '渭南',
			
 
				+            value: 72
			
 
				+        }, {
			
 
				+            name: '马鞍山',
			
 
				+            value: 72
			
 
				+        }, {
			
 
				+            name: '宝鸡',
			
 
				+            value: 72
			
 
				+        }, {
			
 
				+            name: '焦作',
			
 
				+            value: 75
			
 
				+        }, {
			
 
				+            name: '句容',
			
 
				+            value: 75
			
 
				+        }, {
			
 
				+            name: '北京',
			
 
				+            value: 79
			
 
				+        }, {
			
 
				+            name: '徐州',
			
 
				+            value: 79
			
 
				+        }, {
			
 
				+            name: '衡水',
			
 
				+            value: 80
			
 
				+        }, {
			
 
				+            name: '包头',
			
 
				+            value: 80
			
 
				+        }, {
			
 
				+            name: '绵阳',
			
 
				+            value: 80
			
 
				+        }, {
			
 
				+            name: '乌鲁木齐',
			
 
				+            value: 84
			
 
				+        }, {
			
 
				+            name: '枣庄',
			
 
				+            value: 84
			
 
				+        }, {
			
 
				+            name: '杭州',
			
 
				+            value: 84
			
 
				+        }, {
			
 
				+            name: '淄博',
			
 
				+            value: 85
			
 
				+        }, {
			
 
				+            name: '鞍山',
			
 
				+            value: 86
			
 
				+        }, {
			
 
				+            name: '溧阳',
			
 
				+            value: 86
			
 
				+        }, {
			
 
				+            name: '库尔勒',
			
 
				+            value: 86
			
 
				+        }, {
			
 
				+            name: '安阳',
			
 
				+            value: 90
			
 
				+        }, {
			
 
				+            name: '开封',
			
 
				+            value: 90
			
 
				+        }, {
			
 
				+            name: '济南',
			
 
				+            value: 92
			
 
				+        }, {
			
 
				+            name: '德阳',
			
 
				+            value: 93
			
 
				+        }, {
			
 
				+            name: '温州',
			
 
				+            value: 95
			
 
				+        }, {
			
 
				+            name: '九江',
			
 
				+            value: 96
			
 
				+        }, {
			
 
				+            name: '邯郸',
			
 
				+            value: 98
			
 
				+        }, {
			
 
				+            name: '临安',
			
 
				+            value: 99
			
 
				+        }, {
			
 
				+            name: '兰州',
			
 
				+            value: 99
			
 
				+        }, {
			
 
				+            name: '沧州',
			
 
				+            value: 100
			
 
				+        }, {
			
 
				+            name: '临沂',
			
 
				+            value: 103
			
 
				+        }, {
			
 
				+            name: '南充',
			
 
				+            value: 104
			
 
				+        }, {
			
 
				+            name: '天津',
			
 
				+            value: 105
			
 
				+        }, {
			
 
				+            name: '富阳',
			
 
				+            value: 106
			
 
				+        }, {
			
 
				+            name: '泰安',
			
 
				+            value: 112
			
 
				+        }, {
			
 
				+            name: '诸暨',
			
 
				+            value: 112
			
 
				+        }, {
			
 
				+            name: '郑州',
			
 
				+            value: 113
			
 
				+        }, {
			
 
				+            name: '哈尔滨',
			
 
				+            value: 114
			
 
				+        }, {
			
 
				+            name: '聊城',
			
 
				+            value: 116
			
 
				+        }, {
			
 
				+            name: '芜湖',
			
 
				+            value: 117
			
 
				+        }, {
			
 
				+            name: '唐山',
			
 
				+            value: 119
			
 
				+        }, {
			
 
				+            name: '平顶山',
			
 
				+            value: 119
			
 
				+        }, {
			
 
				+            name: '邢台',
			
 
				+            value: 119
			
 
				+        }, {
			
 
				+            name: '德州',
			
 
				+            value: 120
			
 
				+        }, {
			
 
				+            name: '济宁',
			
 
				+            value: 120
			
 
				+        }, {
			
 
				+            name: '荆州',
			
 
				+            value: 127
			
 
				+        }, {
			
 
				+            name: '宜昌',
			
 
				+            value: 130
			
 
				+        }, {
			
 
				+            name: '义乌',
			
 
				+            value: 132
			
 
				+        }, {
			
 
				+            name: '丽水',
			
 
				+            value: 133
			
 
				+        }, {
			
 
				+            name: '洛阳',
			
 
				+            value: 134
			
 
				+        }, {
			
 
				+            name: '秦皇岛',
			
 
				+            value: 136
			
 
				+        }, {
			
 
				+            name: '株洲',
			
 
				+            value: 143
			
 
				+        }, {
			
 
				+            name: '石家庄',
			
 
				+            value: 147
			
 
				+        }, {
			
 
				+            name: '莱芜',
			
 
				+            value: 148
			
 
				+        }, {
			
 
				+            name: '常德',
			
 
				+            value: 152
			
 
				+        }, {
			
 
				+            name: '保定',
			
 
				+            value: 153
			
 
				+        }, {
			
 
				+            name: '湘潭',
			
 
				+            value: 154
			
 
				+        }, {
			
 
				+            name: '金华',
			
 
				+            value: 157
			
 
				+        }, {
			
 
				+            name: '岳阳',
			
 
				+            value: 169
			
 
				+        }, {
			
 
				+            name: '长沙',
			
 
				+            value: 175
			
 
				+        }, {
			
 
				+            name: '衢州',
			
 
				+            value: 177
			
 
				+        }, {
			
 
				+            name: '廊坊',
			
 
				+            value: 193
			
 
				+        }, {
			
 
				+            name: '菏泽',
			
 
				+            value: 194
			
 
				+        }, {
			
 
				+            name: '合肥',
			
 
				+            value: 229
			
 
				+        }, {
			
 
				+            name: '武汉',
			
 
				+            value: 273
			
 
				+        }, {
			
 
				+            name: '大庆',
			
 
				+            value: 279
			
 
				+        }];
			
 
				+    var geoCoordMap = {
			
 
				+        '海门': [121.15, 31.89],
			
 
				+        '鄂尔多斯': [109.781327, 39.608266],
			
 
				+        '招远': [120.38, 37.35],
			
 
				+        '舟山': [122.207216, 29.985295],
			
 
				+        '齐齐哈尔': [123.97, 47.33],
			
 
				+        '盐城': [120.13, 33.38],
			
 
				+        '赤峰': [118.87, 42.28],
			
 
				+        '青岛': [120.33, 36.07],
			
 
				+        '乳山': [121.52, 36.89],
			
 
				+        '金昌': [102.188043, 38.520089],
			
 
				+        '泉州': [118.58, 24.93],
			
 
				+        '莱西': [120.53, 36.86],
			
 
				+        '日照': [119.46, 35.42],
			
 
				+        '胶南': [119.97, 35.88],
			
 
				+        '南通': [121.05, 32.08],
			
 
				+        '拉萨': [91.11, 29.97],
			
 
				+        '云浮': [112.02, 22.93],
			
 
				+        '梅州': [116.1, 24.55],
			
 
				+        '文登': [122.05, 37.2],
			
 
				+        '上海': [121.48, 31.22],
			
 
				+        '攀枝花': [101.718637, 26.582347],
			
 
				+        '威海': [122.1, 37.5],
			
 
				+        '承德': [117.93, 40.97],
			
 
				+        '厦门': [118.1, 24.46],
			
 
				+        '汕尾': [115.375279, 22.786211],
			
 
				+        '潮州': [116.63, 23.68],
			
 
				+        '丹东': [124.37, 40.13],
			
 
				+        '太仓': [121.1, 31.45],
			
 
				+        '曲靖': [103.79, 25.51],
			
 
				+        '烟台': [121.39, 37.52],
			
 
				+        '福州': [119.3, 26.08],
			
 
				+        '瓦房店': [121.979603, 39.627114],
			
 
				+        '即墨': [120.45, 36.38],
			
 
				+        '抚顺': [123.97, 41.97],
			
 
				+        '玉溪': [102.52, 24.35],
			
 
				+        '张家口': [114.87, 40.82],
			
 
				+        '阳泉': [113.57, 37.85],
			
 
				+        '莱州': [119.942327, 37.177017],
			
 
				+        '湖州': [120.1, 30.86],
			
 
				+        '汕头': [116.69, 23.39],
			
 
				+        '昆山': [120.95, 31.39],
			
 
				+        '宁波': [121.56, 29.86],
			
 
				+        '湛江': [110.359377, 21.270708],
			
 
				+        '揭阳': [116.35, 23.55],
			
 
				+        '荣成': [122.41, 37.16],
			
 
				+        '连云港': [119.16, 34.59],
			
 
				+        '葫芦岛': [120.836932, 40.711052],
			
 
				+        '常熟': [120.74, 31.64],
			
 
				+        '东莞': [113.75, 23.04],
			
 
				+        '河源': [114.68, 23.73],
			
 
				+        '淮安': [119.15, 33.5],
			
 
				+        '泰州': [119.9, 32.49],
			
 
				+        '南宁': [108.33, 22.84],
			
 
				+        '营口': [122.18, 40.65],
			
 
				+        '惠州': [114.4, 23.09],
			
 
				+        '江阴': [120.26, 31.91],
			
 
				+        '蓬莱': [120.75, 37.8],
			
 
				+        '韶关': [113.62, 24.84],
			
 
				+        '嘉峪关': [98.289152, 39.77313],
			
 
				+        '广州': [113.23, 23.16],
			
 
				+        '延安': [109.47, 36.6],
			
 
				+        '太原': [112.53, 37.87],
			
 
				+        '清远': [113.01, 23.7],
			
 
				+        '中山': [113.38, 22.52],
			
 
				+        '昆明': [102.73, 25.04],
			
 
				+        '寿光': [118.73, 36.86],
			
 
				+        '盘锦': [122.070714, 41.119997],
			
 
				+        '长治': [113.08, 36.18],
			
 
				+        '深圳': [114.07, 22.62],
			
 
				+        '珠海': [113.52, 22.3],
			
 
				+        '宿迁': [118.3, 33.96],
			
 
				+        '咸阳': [108.72, 34.36],
			
 
				+        '铜川': [109.11, 35.09],
			
 
				+        '平度': [119.97, 36.77],
			
 
				+        '佛山': [113.11, 23.05],
			
 
				+        '海口': [110.35, 20.02],
			
 
				+        '江门': [113.06, 22.61],
			
 
				+        '章丘': [117.53, 36.72],
			
 
				+        '肇庆': [112.44, 23.05],
			
 
				+        '大连': [121.62, 38.92],
			
 
				+        '临汾': [111.5, 36.08],
			
 
				+        '吴江': [120.63, 31.16],
			
 
				+        '石嘴山': [106.39, 39.04],
			
 
				+        '沈阳': [123.38, 41.8],
			
 
				+        '苏州': [120.62, 31.32],
			
 
				+        '茂名': [110.88, 21.68],
			
 
				+        '嘉兴': [120.76, 30.77],
			
 
				+        '长春': [125.35, 43.88],
			
 
				+        '胶州': [120.03336, 36.264622],
			
 
				+        '银川': [106.27, 38.47],
			
 
				+        '张家港': [120.555821, 31.875428],
			
 
				+        '三门峡': [111.19, 34.76],
			
 
				+        '锦州': [121.15, 41.13],
			
 
				+        '南昌': [115.89, 28.68],
			
 
				+        '柳州': [109.4, 24.33],
			
 
				+        '三亚': [109.511909, 18.252847],
			
 
				+        '自贡': [104.778442, 29.33903],
			
 
				+        '吉林': [126.57, 43.87],
			
 
				+        '阳江': [111.95, 21.85],
			
 
				+        '泸州': [105.39, 28.91],
			
 
				+        '西宁': [101.74, 36.56],
			
 
				+        '宜宾': [104.56, 29.77],
			
 
				+        '呼和浩特': [111.65, 40.82],
			
 
				+        '成都': [104.06, 30.67],
			
 
				+        '大同': [113.3, 40.12],
			
 
				+        '镇江': [119.44, 32.2],
			
 
				+        '桂林': [110.28, 25.29],
			
 
				+        '张家界': [110.479191, 29.117096],
			
 
				+        '宜兴': [119.82, 31.36],
			
 
				+        '北海': [109.12, 21.49],
			
 
				+        '西安': [108.95, 34.27],
			
 
				+        '金坛': [119.56, 31.74],
			
 
				+        '东营': [118.49, 37.46],
			
 
				+        '牡丹江': [129.58, 44.6],
			
 
				+        '遵义': [106.9, 27.7],
			
 
				+        '绍兴': [120.58, 30.01],
			
 
				+        '扬州': [119.42, 32.39],
			
 
				+        '常州': [119.95, 31.79],
			
 
				+        '潍坊': [119.1, 36.62],
			
 
				+        '重庆': [106.54, 29.59],
			
 
				+        '台州': [121.420757, 28.656386],
			
 
				+        '南京': [118.78, 32.04],
			
 
				+        '滨州': [118.03, 37.36],
			
 
				+        '贵阳': [106.71, 26.57],
			
 
				+        '无锡': [120.29, 31.59],
			
 
				+        '本溪': [123.73, 41.3],
			
 
				+        '克拉玛依': [84.77, 45.59],
			
 
				+        '渭南': [109.5, 34.52],
			
 
				+        '马鞍山': [118.48, 31.56],
			
 
				+        '宝鸡': [107.15, 34.38],
			
 
				+        '焦作': [113.21, 35.24],
			
 
				+        '句容': [119.16, 31.95],
			
 
				+        '北京': [116.46, 39.92],
			
 
				+        '徐州': [117.2, 34.26],
			
 
				+        '衡水': [115.72, 37.72],
			
 
				+        '包头': [110, 40.58],
			
 
				+        '绵阳': [104.73, 31.48],
			
 
				+        '乌鲁木齐': [87.68, 43.77],
			
 
				+        '枣庄': [117.57, 34.86],
			
 
				+        '杭州': [120.19, 30.26],
			
 
				+        '淄博': [118.05, 36.78],
			
 
				+        '鞍山': [122.85, 41.12],
			
 
				+        '溧阳': [119.48, 31.43],
			
 
				+        '库尔勒': [86.06, 41.68],
			
 
				+        '安阳': [114.35, 36.1],
			
 
				+        '开封': [114.35, 34.79],
			
 
				+        '济南': [117, 36.65],
			
 
				+        '德阳': [104.37, 31.13],
			
 
				+        '温州': [120.65, 28.01],
			
 
				+        '九江': [115.97, 29.71],
			
 
				+        '邯郸': [114.47, 36.6],
			
 
				+        '临安': [119.72, 30.23],
			
 
				+        '兰州': [103.73, 36.03],
			
 
				+        '沧州': [116.83, 38.33],
			
 
				+        '临沂': [118.35, 35.05],
			
 
				+        '南充': [106.110698, 30.837793],
			
 
				+        '天津': [117.2, 39.13],
			
 
				+        '富阳': [119.95, 30.07],
			
 
				+        '泰安': [117.13, 36.18],
			
 
				+        '诸暨': [120.23, 29.71],
			
 
				+        '郑州': [113.65, 34.76],
			
 
				+        '哈尔滨': [126.63, 45.75],
			
 
				+        '聊城': [115.97, 36.45],
			
 
				+        '芜湖': [118.38, 31.33],
			
 
				+        '唐山': [118.02, 39.63],
			
 
				+        '平顶山': [113.29, 33.75],
			
 
				+        '邢台': [114.48, 37.05],
			
 
				+        '德州': [116.29, 37.45],
			
 
				+        '济宁': [116.59, 35.38],
			
 
				+        '荆州': [112.239741, 30.335165],
			
 
				+        '宜昌': [111.3, 30.7],
			
 
				+        '义乌': [120.06, 29.32],
			
 
				+        '丽水': [119.92, 28.45],
			
 
				+        '洛阳': [112.44, 34.7],
			
 
				+        '秦皇岛': [119.57, 39.95],
			
 
				+        '株洲': [113.16, 27.83],
			
 
				+        '石家庄': [114.48, 38.03],
			
 
				+        '莱芜': [117.67, 36.19],
			
 
				+        '常德': [111.69, 29.05],
			
 
				+        '保定': [115.48, 38.85],
			
 
				+        '湘潭': [112.91, 27.87],
			
 
				+        '金华': [119.64, 29.12],
			
 
				+        '岳阳': [113.09, 29.37],
			
 
				+        '长沙': [113, 28.21],
			
 
				+        '衢州': [118.88, 28.97],
			
 
				+        '廊坊': [116.7, 39.53],
			
 
				+        '菏泽': [115.480656, 35.23375],
			
 
				+        '合肥': [117.27, 31.86],
			
 
				+        '武汉': [114.31, 30.52],
			
 
				+        '大庆': [125.03, 46.58]
			
 
				+    };
			
 
				+
			
 
				+    var convertData = function (data) {
			
 
				+        var res = [];
			
 
				+        for (var i = 0; i < data.length; i++) {
			
 
				+            var geoCoord = geoCoordMap[data[i].name];
			
 
				+            if (geoCoord) {
			
 
				+                res.push({
			
 
				+                    name: data[i].name,
			
 
				+                    value: geoCoord.concat(data[i].value)
			
 
				+                });
			
 
				+            }
			
 
				+        }
			
 
				+        return res;
			
 
				+    };
			
 
				+
			
 
				+    option = {
			
 
				+        animation: false,
			
 
				+        title: {
			
 
				+            text: resources.text_effectScatter,
			
 
				+            subtext: 'data from PM25.in',
			
 
				+            sublink: 'http://www.pm25.in',
			
 
				+            left: 'center',
			
 
				+            textStyle: {
			
 
				+                color: '#fff'
			
 
				+            }
			
 
				+        },
			
 
				+        tooltip: {
			
 
				+            trigger: 'item'
			
 
				+        },
			
 
				+        legend: {
			
 
				+            orient: 'vertical',
			
 
				+            y: 'bottom',
			
 
				+            x: 'right',
			
 
				+            data: ['pm2.5'],
			
 
				+            textStyle: {
			
 
				+                color: '#fff'
			
 
				+            }
			
 
				+        },
			
 
				+        GLMap: {},
			
 
				+
			
 
				+        series: [{
			
 
				+            name: 'pm2.5',
			
 
				+            type: 'scatter',
			
 
				+            coordinateSystem: 'GLMap',
			
 
				+            data: convertData(data),
			
 
				+            symbolSize: function (val) {
			
 
				+                return val[2] / 10;
			
 
				+            },
			
 
				+            label: {
			
 
				+                normal: {
			
 
				+                    formatter: '{b}',
			
 
				+                    position: 'right',
			
 
				+                    show: false
			
 
				+                },
			
 
				+                emphasis: {
			
 
				+                    show: true
			
 
				+                }
			
 
				+            },
			
 
				+            itemStyle: {
			
 
				+                normal: {
			
 
				+                    color: '#ddb926'
			
 
				+                }
			
 
				+            }
			
 
				+        }, {
			
 
				+            name: 'Top 5',
			
 
				+            type: 'effectScatter',
			
 
				+            coordinateSystem: 'GLMap',
			
 
				+            data: convertData(data.sort(function (a, b) {
			
 
				+                return b.value - a.value;
			
 
				+            }).slice(0, 6)),
			
 
				+            symbolSize: function (val) {
			
 
				+                return val[2] / 10;
			
 
				+            },
			
 
				+            showEffectOn: 'render',
			
 
				+            rippleEffect: {
			
 
				+                brushType: 'stroke'
			
 
				+            },
			
 
				+            hoverAnimation: true,
			
 
				+            label: {
			
 
				+                normal: {
			
 
				+                    formatter: '{b}',
			
 
				+                    position: 'right',
			
 
				+                    show: true
			
 
				+                }
			
 
				+            },
			
 
				+            itemStyle: {
			
 
				+                normal: {
			
 
				+                    color: '#f4e925',
			
 
				+                    shadowBlur: 10,
			
 
				+                    shadowColor: '#333'
			
 
				+                }
			
 
				+            },
			
 
				+            zlevel: 1
			
 
				+        }]
			
 
				+    };
			
 
				+
			
 
				+    var echartslayer = new EchartsLayer(map);
			
 
				+    echartslayer.chart.setOption(option);
			
 
				+</script>
			
 
				+
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/echarts_geoline.html
+++ b/public/supermap/examples/mapboxgl/echarts_geoline.html
@@ -0,0 +1,521 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<html>
			
 
				+<head>
			
 
				+    <meta charset='utf-8'/>
			
 
				+    <title data-i18n="resources.title_geoline"></title>
			
 
				+    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
			
 
				+    <script type="text/javascript" src="../js/include-web.js"></script>
			
 
				+    <style>
			
 
				+        body {
			
 
				+            margin: 0;
			
 
				+            padding: 0;
			
 
				+        }
			
 
				+
			
 
				+        #map {
			
 
				+            position: absolute;
			
 
				+            top: 0;
			
 
				+            bottom: 0;
			
 
				+            width: 100%;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+<div id='map'></div>
			
 
				+<script type="text/javascript" exclude='iclient-mapboxgl' include="echarts"
			
 
				+        src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+<script type="text/javascript">
			
 
				+    var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+            " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+            " Image <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer </a> | </span>" +
			
 
				+            " <a href='https://echarts.baidu.com' target='_blank'>© 2018 " + resources.title_3baidu + " ECharts</a>";
			
 
				+    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+    var tileURL = host + "/iserver/services/map-china400/rest/maps/ChinaDark/zxyTileImage.png?z={z}&x={x}&y={y}";
			
 
				+    var map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [tileURL],
			
 
				+                    "tileSize": 256,
			
 
				+                },
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+                "minzoom": 0,
			
 
				+                "maxzoom": 22
			
 
				+            }]
			
 
				+        },
			
 
				+        center: [112, 37.94],
			
 
				+        zoom: 3
			
 
				+    });
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+
			
 
				+    var geoCoordMap = {
			
 
				+        '上海': [121.4648, 31.2891],
			
 
				+        '东莞': [113.8953, 22.901],
			
 
				+        '东营': [118.7073, 37.5513],
			
 
				+        '中山': [113.4229, 22.478],
			
 
				+        '临汾': [111.4783, 36.1615],
			
 
				+        '临沂': [118.3118, 35.2936],
			
 
				+        '丹东': [124.541, 40.4242],
			
 
				+        '丽水': [119.5642, 28.1854],
			
 
				+        '乌鲁木齐': [87.9236, 43.5883],
			
 
				+        '佛山': [112.8955, 23.1097],
			
 
				+        '保定': [115.0488, 39.0948],
			
 
				+        '兰州': [103.5901, 36.3043],
			
 
				+        '包头': [110.3467, 41.4899],
			
 
				+        '北京': [116.4551, 40.2539],
			
 
				+        '北海': [109.314, 21.6211],
			
 
				+        '南京': [118.8062, 31.9208],
			
 
				+        '南宁': [108.479, 23.1152],
			
 
				+        '南昌': [116.0046, 28.6633],
			
 
				+        '南通': [121.1023, 32.1625],
			
 
				+        '厦门': [118.1689, 24.6478],
			
 
				+        '台州': [121.1353, 28.6688],
			
 
				+        '合肥': [117.29, 32.0581],
			
 
				+        '呼和浩特': [111.4124, 40.4901],
			
 
				+        '咸阳': [108.4131, 34.8706],
			
 
				+        '哈尔滨': [127.9688, 45.368],
			
 
				+        '唐山': [118.4766, 39.6826],
			
 
				+        '嘉兴': [120.9155, 30.6354],
			
 
				+        '大同': [113.7854, 39.8035],
			
 
				+        '大连': [122.2229, 39.4409],
			
 
				+        '天津': [117.4219, 39.4189],
			
 
				+        '太原': [112.3352, 37.9413],
			
 
				+        '威海': [121.9482, 37.1393],
			
 
				+        '宁波': [121.5967, 29.6466],
			
 
				+        '宝鸡': [107.1826, 34.3433],
			
 
				+        '宿迁': [118.5535, 33.7775],
			
 
				+        '常州': [119.4543, 31.5582],
			
 
				+        '广州': [113.5107, 23.2196],
			
 
				+        '廊坊': [116.521, 39.0509],
			
 
				+        '延安': [109.1052, 36.4252],
			
 
				+        '张家口': [115.1477, 40.8527],
			
 
				+        '徐州': [117.5208, 34.3268],
			
 
				+        '德州': [116.6858, 37.2107],
			
 
				+        '惠州': [114.6204, 23.1647],
			
 
				+        '成都': [103.9526, 30.7617],
			
 
				+        '扬州': [119.4653, 32.8162],
			
 
				+        '承德': [117.5757, 41.4075],
			
 
				+        '拉萨': [91.1865, 30.1465],
			
 
				+        '无锡': [120.3442, 31.5527],
			
 
				+        '日照': [119.2786, 35.5023],
			
 
				+        '昆明': [102.9199, 25.4663],
			
 
				+        '杭州': [119.5313, 29.8773],
			
 
				+        '枣庄': [117.323, 34.8926],
			
 
				+        '柳州': [109.3799, 24.9774],
			
 
				+        '株洲': [113.5327, 27.0319],
			
 
				+        '武汉': [114.3896, 30.6628],
			
 
				+        '汕头': [117.1692, 23.3405],
			
 
				+        '江门': [112.6318, 22.1484],
			
 
				+        '沈阳': [123.1238, 42.1216],
			
 
				+        '沧州': [116.8286, 38.2104],
			
 
				+        '河源': [114.917, 23.9722],
			
 
				+        '泉州': [118.3228, 25.1147],
			
 
				+        '泰安': [117.0264, 36.0516],
			
 
				+        '泰州': [120.0586, 32.5525],
			
 
				+        '济南': [117.1582, 36.8701],
			
 
				+        '济宁': [116.8286, 35.3375],
			
 
				+        '海口': [110.3893, 19.8516],
			
 
				+        '淄博': [118.0371, 36.6064],
			
 
				+        '淮安': [118.927, 33.4039],
			
 
				+        '深圳': [114.5435, 22.5439],
			
 
				+        '清远': [112.9175, 24.3292],
			
 
				+        '温州': [120.498, 27.8119],
			
 
				+        '渭南': [109.7864, 35.0299],
			
 
				+        '湖州': [119.8608, 30.7782],
			
 
				+        '湘潭': [112.5439, 27.7075],
			
 
				+        '滨州': [117.8174, 37.4963],
			
 
				+        '潍坊': [119.0918, 36.524],
			
 
				+        '烟台': [120.7397, 37.5128],
			
 
				+        '玉溪': [101.9312, 23.8898],
			
 
				+        '珠海': [113.7305, 22.1155],
			
 
				+        '盐城': [120.2234, 33.5577],
			
 
				+        '盘锦': [121.9482, 41.0449],
			
 
				+        '石家庄': [114.4995, 38.1006],
			
 
				+        '福州': [119.4543, 25.9222],
			
 
				+        '秦皇岛': [119.2126, 40.0232],
			
 
				+        '绍兴': [120.564, 29.7565],
			
 
				+        '聊城': [115.9167, 36.4032],
			
 
				+        '肇庆': [112.1265, 23.5822],
			
 
				+        '舟山': [122.2559, 30.2234],
			
 
				+        '苏州': [120.6519, 31.3989],
			
 
				+        '莱芜': [117.6526, 36.2714],
			
 
				+        '菏泽': [115.6201, 35.2057],
			
 
				+        '营口': [122.4316, 40.4297],
			
 
				+        '葫芦岛': [120.1575, 40.578],
			
 
				+        '衡水': [115.8838, 37.7161],
			
 
				+        '衢州': [118.6853, 28.8666],
			
 
				+        '西宁': [101.4038, 36.8207],
			
 
				+        '西安': [109.1162, 34.2004],
			
 
				+        '贵阳': [106.6992, 26.7682],
			
 
				+        '连云港': [119.1248, 34.552],
			
 
				+        '邢台': [114.8071, 37.2821],
			
 
				+        '邯郸': [114.4775, 36.535],
			
 
				+        '郑州': [113.4668, 34.6234],
			
 
				+        '鄂尔多斯': [108.9734, 39.2487],
			
 
				+        '重庆': [107.7539, 30.1904],
			
 
				+        '金华': [120.0037, 29.1028],
			
 
				+        '铜川': [109.0393, 35.1947],
			
 
				+        '银川': [106.3586, 38.1775],
			
 
				+        '镇江': [119.4763, 31.9702],
			
 
				+        '长春': [125.8154, 44.2584],
			
 
				+        '长沙': [113.0823, 28.2568],
			
 
				+        '长治': [112.8625, 36.4746],
			
 
				+        '阳泉': [113.4778, 38.0951],
			
 
				+        '青岛': [120.4651, 36.3373],
			
 
				+        '韶关': [113.7964, 24.7028]
			
 
				+    };
			
 
				+
			
 
				+    var BJData = [
			
 
				+        [{
			
 
				+            name: '北京'
			
 
				+        }, {
			
 
				+            name: '上海',
			
 
				+            value: 95
			
 
				+        }],
			
 
				+        [{
			
 
				+            name: '北京'
			
 
				+        }, {
			
 
				+            name: '广州',
			
 
				+            value: 90
			
 
				+        }],
			
 
				+        [{
			
 
				+            name: '北京'
			
 
				+        }, {
			
 
				+            name: '大连',
			
 
				+            value: 80
			
 
				+        }],
			
 
				+        [{
			
 
				+            name: '北京'
			
 
				+        }, {
			
 
				+            name: '南宁',
			
 
				+            value: 70
			
 
				+        }],
			
 
				+        [{
			
 
				+            name: '北京'
			
 
				+        }, {
			
 
				+            name: '南昌',
			
 
				+            value: 60
			
 
				+        }],
			
 
				+        [{
			
 
				+            name: '北京'
			
 
				+        }, {
			
 
				+            name: '拉萨',
			
 
				+            value: 50
			
 
				+        }],
			
 
				+        [{
			
 
				+            name: '北京'
			
 
				+        }, {
			
 
				+            name: '长春',
			
 
				+            value: 40
			
 
				+        }],
			
 
				+        [{
			
 
				+            name: '北京'
			
 
				+        }, {
			
 
				+            name: '包头',
			
 
				+            value: 30
			
 
				+        }],
			
 
				+        [{
			
 
				+            name: '北京'
			
 
				+        }, {
			
 
				+            name: '重庆',
			
 
				+            value: 20
			
 
				+        }],
			
 
				+        [{
			
 
				+            name: '北京'
			
 
				+        }, {
			
 
				+            name: '常州',
			
 
				+            value: 10
			
 
				+        }]
			
 
				+    ];
			
 
				+
			
 
				+    var SHData = [
			
 
				+        [{
			
 
				+            name: '上海'
			
 
				+        }, {
			
 
				+            name: '包头',
			
 
				+            value: 95
			
 
				+        }],
			
 
				+        [{
			
 
				+            name: '上海'
			
 
				+        }, {
			
 
				+            name: '昆明',
			
 
				+            value: 90
			
 
				+        }],
			
 
				+        [{
			
 
				+            name: '上海'
			
 
				+        }, {
			
 
				+            name: '广州',
			
 
				+            value: 80
			
 
				+        }],
			
 
				+        [{
			
 
				+            name: '上海'
			
 
				+        }, {
			
 
				+            name: '郑州',
			
 
				+            value: 70
			
 
				+        }],
			
 
				+        [{
			
 
				+            name: '上海'
			
 
				+        }, {
			
 
				+            name: '长春',
			
 
				+            value: 60
			
 
				+        }],
			
 
				+        [{
			
 
				+            name: '上海'
			
 
				+        }, {
			
 
				+            name: '重庆',
			
 
				+            value: 50
			
 
				+        }],
			
 
				+        [{
			
 
				+            name: '上海'
			
 
				+        }, {
			
 
				+            name: '长沙',
			
 
				+            value: 40
			
 
				+        }],
			
 
				+        [{
			
 
				+            name: '上海'
			
 
				+        }, {
			
 
				+            name: '北京',
			
 
				+            value: 30
			
 
				+        }],
			
 
				+        [{
			
 
				+            name: '上海'
			
 
				+        }, {
			
 
				+            name: '丹东',
			
 
				+            value: 20
			
 
				+        }],
			
 
				+        [{
			
 
				+            name: '上海'
			
 
				+        }, {
			
 
				+            name: '大连',
			
 
				+            value: 10
			
 
				+        }]
			
 
				+    ];
			
 
				+
			
 
				+    var GZData = [
			
 
				+        [{
			
 
				+            name: '广州'
			
 
				+        }, {
			
 
				+            name: '福州',
			
 
				+            value: 95
			
 
				+        }],
			
 
				+        [{
			
 
				+            name: '广州'
			
 
				+        }, {
			
 
				+            name: '太原',
			
 
				+            value: 90
			
 
				+        }],
			
 
				+        [{
			
 
				+            name: '广州'
			
 
				+        }, {
			
 
				+            name: '长春',
			
 
				+            value: 80
			
 
				+        }],
			
 
				+        [{
			
 
				+            name: '广州'
			
 
				+        }, {
			
 
				+            name: '重庆',
			
 
				+            value: 70
			
 
				+        }],
			
 
				+        [{
			
 
				+            name: '广州'
			
 
				+        }, {
			
 
				+            name: '西安',
			
 
				+            value: 60
			
 
				+        }],
			
 
				+        [{
			
 
				+            name: '广州'
			
 
				+        }, {
			
 
				+            name: '成都',
			
 
				+            value: 50
			
 
				+        }],
			
 
				+        [{
			
 
				+            name: '广州'
			
 
				+        }, {
			
 
				+            name: '常州',
			
 
				+            value: 40
			
 
				+        }],
			
 
				+        [{
			
 
				+            name: '广州'
			
 
				+        }, {
			
 
				+            name: '北京',
			
 
				+            value: 30
			
 
				+        }],
			
 
				+        [{
			
 
				+            name: '广州'
			
 
				+        }, {
			
 
				+            name: '北海',
			
 
				+            value: 20
			
 
				+        }],
			
 
				+        [{
			
 
				+            name: '广州'
			
 
				+        }, {
			
 
				+            name: '海口',
			
 
				+            value: 10
			
 
				+        }]
			
 
				+    ];
			
 
				+
			
 
				+    var planePath =
			
 
				+        'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
			
 
				+
			
 
				+    var convertData = function (data) {
			
 
				+        var res = [];
			
 
				+        for (var i = 0; i < data.length; i++) {
			
 
				+            var dataItem = data[i];
			
 
				+            var fromCoord = geoCoordMap[dataItem[0].name];
			
 
				+            var toCoord = geoCoordMap[dataItem[1].name];
			
 
				+            if (fromCoord && toCoord) {
			
 
				+                res.push({
			
 
				+                    fromName: dataItem[0].name,
			
 
				+                    toName: dataItem[1].name,
			
 
				+                    coords: [fromCoord, toCoord]
			
 
				+                });
			
 
				+            }
			
 
				+        }
			
 
				+        return res;
			
 
				+    };
			
 
				+
			
 
				+    var color = ['#a6c84c', '#ffa022', '#46bee9'];
			
 
				+    var series = [];
			
 
				+    [
			
 
				+        ['北京', BJData],
			
 
				+        ['上海', SHData],
			
 
				+        ['广州', GZData]
			
 
				+    ].forEach(function (item, i) {
			
 
				+        series.push({
			
 
				+            name: item[0] + ' Top10',
			
 
				+            coordinateSystem: 'GLMap',
			
 
				+            type: 'lines',
			
 
				+            zlevel: 1,
			
 
				+            effect: {
			
 
				+                show: true,
			
 
				+                period: 6,
			
 
				+                trailLength: 0.7,
			
 
				+                color: '#fff',
			
 
				+                symbolSize: 3
			
 
				+            },
			
 
				+            lineStyle: {
			
 
				+                normal: {
			
 
				+                    color: color[i],
			
 
				+                    width: 0,
			
 
				+                    curveness: 0.2
			
 
				+                }
			
 
				+            },
			
 
				+            data: convertData(item[1])
			
 
				+        }, {
			
 
				+            name: item[0] + ' Top10',
			
 
				+            coordinateSystem: 'GLMap',
			
 
				+            type: 'lines',
			
 
				+            zlevel: 2,
			
 
				+            effect: {
			
 
				+                show: true,
			
 
				+                period: 6,
			
 
				+                trailLength: 0,
			
 
				+                symbol: planePath,
			
 
				+                symbolSize: 15
			
 
				+            },
			
 
				+            lineStyle: {
			
 
				+                normal: {
			
 
				+                    color: color[i],
			
 
				+                    width: 1,
			
 
				+                    opacity: 0.4,
			
 
				+                    curveness: 0.2
			
 
				+                }
			
 
				+            },
			
 
				+            data: convertData(item[1])
			
 
				+        }, {
			
 
				+            name: item[0] + ' Top10',
			
 
				+            type: 'effectScatter',
			
 
				+            coordinateSystem: 'GLMap',
			
 
				+            zlevel: 2,
			
 
				+            rippleEffect: {
			
 
				+                brushType: 'stroke'
			
 
				+            },
			
 
				+            label: {
			
 
				+                normal: {
			
 
				+                    show: true,
			
 
				+                    position: 'right',
			
 
				+                    formatter: '{b}'
			
 
				+                }
			
 
				+            },
			
 
				+            symbolSize: function (val) {
			
 
				+                return val[2] / 8;
			
 
				+            },
			
 
				+            itemStyle: {
			
 
				+                normal: {
			
 
				+                    color: color[i]
			
 
				+                }
			
 
				+            },
			
 
				+            data: item[1].map(function (dataItem) {
			
 
				+                return {
			
 
				+                    name: dataItem[1].name,
			
 
				+                    value: geoCoordMap[dataItem[1].name].concat([
			
 
				+                        dataItem[1].value
			
 
				+                    ])
			
 
				+                };
			
 
				+            })
			
 
				+        });
			
 
				+    });
			
 
				+
			
 
				+    option = {
			
 
				+        animation: false,
			
 
				+        GLMap: {
			
 
				+            roam: true
			
 
				+        },
			
 
				+        coordinateSystem: 'GLMap',
			
 
				+        title: {
			
 
				+            text: resources.title_geoline,
			
 
				+            subtext: resources.text_fictitiouData,
			
 
				+            left: 'center',
			
 
				+            textStyle: {
			
 
				+                color: '#fff'
			
 
				+            }
			
 
				+        },
			
 
				+        tooltip: {
			
 
				+            trigger: 'item'
			
 
				+        },
			
 
				+        legend: {
			
 
				+            orient: 'vertical',
			
 
				+            top: 'bottom',
			
 
				+            left: 'right',
			
 
				+            data: ['北京 Top10', '上海 Top10', '广州 Top10'],
			
 
				+            textStyle: {
			
 
				+                color: '#fff'
			
 
				+            },
			
 
				+            selectedMode: 'single'
			
 
				+        },
			
 
				+        geo: {
			
 
				+            map: 'GLMap',
			
 
				+            label: {
			
 
				+                emphasis: {
			
 
				+                    show: false
			
 
				+                }
			
 
				+            },
			
 
				+            roam: true,
			
 
				+            itemStyle: {
			
 
				+                normal: {
			
 
				+                    areaColor: '#323c48',
			
 
				+                    borderColor: '#404a59'
			
 
				+                },
			
 
				+                emphasis: {
			
 
				+                    areaColor: '#2a333d'
			
 
				+                }
			
 
				+            }
			
 
				+        },
			
 
				+        series: series
			
 
				+    };
			
 
				+
			
 
				+    var echartslayer = new EchartsLayer(map);
			
 
				+    echartslayer.chart.setOption(option);
			
 
				+</script>
			
 
				+
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/echarts_geoline_4326.html
+++ b/public/supermap/examples/mapboxgl/echarts_geoline_4326.html
@@ -0,0 +1,518 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<html>
			
 
				+
			
 
				+<head>
			
 
				+    <meta charset='utf-8' />
			
 
				+    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
			
 
				+    <title data-i18n="resources.title_geolineWGS84"></title>
			
 
				+    <script type="text/javascript" include="jquery" src="../js/include-web.js"></script>
			
 
				+    <style>
			
 
				+        body {
			
 
				+            margin: 0;
			
 
				+            padding: 0;
			
 
				+        }
			
 
				+
			
 
				+        #map {
			
 
				+            position: absolute;
			
 
				+            top: 0;
			
 
				+            bottom: 0;
			
 
				+            width: 100%;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+    <div id='map'></div>
			
 
				+    <script type="text/javascript" include='mapbox-gl-enhance,echarts' src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+    <script type="text/javascript">
			
 
				+        var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+        var map = new mapboxgl.Map({
			
 
				+            container: 'map',
			
 
				+            style: {
			
 
				+                "version": 8,
			
 
				+                "sources": {
			
 
				+                    "raster-tiles": {
			
 
				+                        "type": "raster",
			
 
				+                        "tiles": [host + '/iserver/services/map-world/rest/maps/World'],
			
 
				+                        "rasterSource":"iserver",
			
 
				+                        "tileSize": 256,
			
 
				+                    },
			
 
				+                },
			
 
				+                "layers": [{
			
 
				+                    "id": "simple-tiles",
			
 
				+                    "type": "raster",
			
 
				+                    "source": "raster-tiles",
			
 
				+                    "minzoom": 0,
			
 
				+                    "maxzoom": 22
			
 
				+                }]
			
 
				+            },
			
 
				+            crs: 'EPSG:4326',
			
 
				+            center: [112, 37.94],
			
 
				+            zoom: 3
			
 
				+        });
			
 
				+        map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+
			
 
				+        var geoCoordMap = {
			
 
				+            '上海': [121.4648, 31.2891],
			
 
				+            '东莞': [113.8953, 22.901],
			
 
				+            '东营': [118.7073, 37.5513],
			
 
				+            '中山': [113.4229, 22.478],
			
 
				+            '临汾': [111.4783, 36.1615],
			
 
				+            '临沂': [118.3118, 35.2936],
			
 
				+            '丹东': [124.541, 40.4242],
			
 
				+            '丽水': [119.5642, 28.1854],
			
 
				+            '乌鲁木齐': [87.9236, 43.5883],
			
 
				+            '佛山': [112.8955, 23.1097],
			
 
				+            '保定': [115.0488, 39.0948],
			
 
				+            '兰州': [103.5901, 36.3043],
			
 
				+            '包头': [110.3467, 41.4899],
			
 
				+            '北京': [116.4551, 40.2539],
			
 
				+            '北海': [109.314, 21.6211],
			
 
				+            '南京': [118.8062, 31.9208],
			
 
				+            '南宁': [108.479, 23.1152],
			
 
				+            '南昌': [116.0046, 28.6633],
			
 
				+            '南通': [121.1023, 32.1625],
			
 
				+            '厦门': [118.1689, 24.6478],
			
 
				+            '台州': [121.1353, 28.6688],
			
 
				+            '合肥': [117.29, 32.0581],
			
 
				+            '呼和浩特': [111.4124, 40.4901],
			
 
				+            '咸阳': [108.4131, 34.8706],
			
 
				+            '哈尔滨': [127.9688, 45.368],
			
 
				+            '唐山': [118.4766, 39.6826],
			
 
				+            '嘉兴': [120.9155, 30.6354],
			
 
				+            '大同': [113.7854, 39.8035],
			
 
				+            '大连': [122.2229, 39.4409],
			
 
				+            '天津': [117.4219, 39.4189],
			
 
				+            '太原': [112.3352, 37.9413],
			
 
				+            '威海': [121.9482, 37.1393],
			
 
				+            '宁波': [121.5967, 29.6466],
			
 
				+            '宝鸡': [107.1826, 34.3433],
			
 
				+            '宿迁': [118.5535, 33.7775],
			
 
				+            '常州': [119.4543, 31.5582],
			
 
				+            '广州': [113.5107, 23.2196],
			
 
				+            '廊坊': [116.521, 39.0509],
			
 
				+            '延安': [109.1052, 36.4252],
			
 
				+            '张家口': [115.1477, 40.8527],
			
 
				+            '徐州': [117.5208, 34.3268],
			
 
				+            '德州': [116.6858, 37.2107],
			
 
				+            '惠州': [114.6204, 23.1647],
			
 
				+            '成都': [103.9526, 30.7617],
			
 
				+            '扬州': [119.4653, 32.8162],
			
 
				+            '承德': [117.5757, 41.4075],
			
 
				+            '拉萨': [91.1865, 30.1465],
			
 
				+            '无锡': [120.3442, 31.5527],
			
 
				+            '日照': [119.2786, 35.5023],
			
 
				+            '昆明': [102.9199, 25.4663],
			
 
				+            '杭州': [119.5313, 29.8773],
			
 
				+            '枣庄': [117.323, 34.8926],
			
 
				+            '柳州': [109.3799, 24.9774],
			
 
				+            '株洲': [113.5327, 27.0319],
			
 
				+            '武汉': [114.3896, 30.6628],
			
 
				+            '汕头': [117.1692, 23.3405],
			
 
				+            '江门': [112.6318, 22.1484],
			
 
				+            '沈阳': [123.1238, 42.1216],
			
 
				+            '沧州': [116.8286, 38.2104],
			
 
				+            '河源': [114.917, 23.9722],
			
 
				+            '泉州': [118.3228, 25.1147],
			
 
				+            '泰安': [117.0264, 36.0516],
			
 
				+            '泰州': [120.0586, 32.5525],
			
 
				+            '济南': [117.1582, 36.8701],
			
 
				+            '济宁': [116.8286, 35.3375],
			
 
				+            '海口': [110.3893, 19.8516],
			
 
				+            '淄博': [118.0371, 36.6064],
			
 
				+            '淮安': [118.927, 33.4039],
			
 
				+            '深圳': [114.5435, 22.5439],
			
 
				+            '清远': [112.9175, 24.3292],
			
 
				+            '温州': [120.498, 27.8119],
			
 
				+            '渭南': [109.7864, 35.0299],
			
 
				+            '湖州': [119.8608, 30.7782],
			
 
				+            '湘潭': [112.5439, 27.7075],
			
 
				+            '滨州': [117.8174, 37.4963],
			
 
				+            '潍坊': [119.0918, 36.524],
			
 
				+            '烟台': [120.7397, 37.5128],
			
 
				+            '玉溪': [101.9312, 23.8898],
			
 
				+            '珠海': [113.7305, 22.1155],
			
 
				+            '盐城': [120.2234, 33.5577],
			
 
				+            '盘锦': [121.9482, 41.0449],
			
 
				+            '石家庄': [114.4995, 38.1006],
			
 
				+            '福州': [119.4543, 25.9222],
			
 
				+            '秦皇岛': [119.2126, 40.0232],
			
 
				+            '绍兴': [120.564, 29.7565],
			
 
				+            '聊城': [115.9167, 36.4032],
			
 
				+            '肇庆': [112.1265, 23.5822],
			
 
				+            '舟山': [122.2559, 30.2234],
			
 
				+            '苏州': [120.6519, 31.3989],
			
 
				+            '莱芜': [117.6526, 36.2714],
			
 
				+            '菏泽': [115.6201, 35.2057],
			
 
				+            '营口': [122.4316, 40.4297],
			
 
				+            '葫芦岛': [120.1575, 40.578],
			
 
				+            '衡水': [115.8838, 37.7161],
			
 
				+            '衢州': [118.6853, 28.8666],
			
 
				+            '西宁': [101.4038, 36.8207],
			
 
				+            '西安': [109.1162, 34.2004],
			
 
				+            '贵阳': [106.6992, 26.7682],
			
 
				+            '连云港': [119.1248, 34.552],
			
 
				+            '邢台': [114.8071, 37.2821],
			
 
				+            '邯郸': [114.4775, 36.535],
			
 
				+            '郑州': [113.4668, 34.6234],
			
 
				+            '鄂尔多斯': [108.9734, 39.2487],
			
 
				+            '重庆': [107.7539, 30.1904],
			
 
				+            '金华': [120.0037, 29.1028],
			
 
				+            '铜川': [109.0393, 35.1947],
			
 
				+            '银川': [106.3586, 38.1775],
			
 
				+            '镇江': [119.4763, 31.9702],
			
 
				+            '长春': [125.8154, 44.2584],
			
 
				+            '长沙': [113.0823, 28.2568],
			
 
				+            '长治': [112.8625, 36.4746],
			
 
				+            '阳泉': [113.4778, 38.0951],
			
 
				+            '青岛': [120.4651, 36.3373],
			
 
				+            '韶关': [113.7964, 24.7028]
			
 
				+        };
			
 
				+
			
 
				+        var BJData = [
			
 
				+            [{
			
 
				+                name: '北京'
			
 
				+            }, {
			
 
				+                name: '上海',
			
 
				+                value: 95
			
 
				+            }],
			
 
				+            [{
			
 
				+                name: '北京'
			
 
				+            }, {
			
 
				+                name: '广州',
			
 
				+                value: 90
			
 
				+            }],
			
 
				+            [{
			
 
				+                name: '北京'
			
 
				+            }, {
			
 
				+                name: '大连',
			
 
				+                value: 80
			
 
				+            }],
			
 
				+            [{
			
 
				+                name: '北京'
			
 
				+            }, {
			
 
				+                name: '南宁',
			
 
				+                value: 70
			
 
				+            }],
			
 
				+            [{
			
 
				+                name: '北京'
			
 
				+            }, {
			
 
				+                name: '南昌',
			
 
				+                value: 60
			
 
				+            }],
			
 
				+            [{
			
 
				+                name: '北京'
			
 
				+            }, {
			
 
				+                name: '拉萨',
			
 
				+                value: 50
			
 
				+            }],
			
 
				+            [{
			
 
				+                name: '北京'
			
 
				+            }, {
			
 
				+                name: '长春',
			
 
				+                value: 40
			
 
				+            }],
			
 
				+            [{
			
 
				+                name: '北京'
			
 
				+            }, {
			
 
				+                name: '包头',
			
 
				+                value: 30
			
 
				+            }],
			
 
				+            [{
			
 
				+                name: '北京'
			
 
				+            }, {
			
 
				+                name: '重庆',
			
 
				+                value: 20
			
 
				+            }],
			
 
				+            [{
			
 
				+                name: '北京'
			
 
				+            }, {
			
 
				+                name: '常州',
			
 
				+                value: 10
			
 
				+            }]
			
 
				+        ];
			
 
				+
			
 
				+        var SHData = [
			
 
				+            [{
			
 
				+                name: '上海'
			
 
				+            }, {
			
 
				+                name: '包头',
			
 
				+                value: 95
			
 
				+            }],
			
 
				+            [{
			
 
				+                name: '上海'
			
 
				+            }, {
			
 
				+                name: '昆明',
			
 
				+                value: 90
			
 
				+            }],
			
 
				+            [{
			
 
				+                name: '上海'
			
 
				+            }, {
			
 
				+                name: '广州',
			
 
				+                value: 80
			
 
				+            }],
			
 
				+            [{
			
 
				+                name: '上海'
			
 
				+            }, {
			
 
				+                name: '郑州',
			
 
				+                value: 70
			
 
				+            }],
			
 
				+            [{
			
 
				+                name: '上海'
			
 
				+            }, {
			
 
				+                name: '长春',
			
 
				+                value: 60
			
 
				+            }],
			
 
				+            [{
			
 
				+                name: '上海'
			
 
				+            }, {
			
 
				+                name: '重庆',
			
 
				+                value: 50
			
 
				+            }],
			
 
				+            [{
			
 
				+                name: '上海'
			
 
				+            }, {
			
 
				+                name: '长沙',
			
 
				+                value: 40
			
 
				+            }],
			
 
				+            [{
			
 
				+                name: '上海'
			
 
				+            }, {
			
 
				+                name: '北京',
			
 
				+                value: 30
			
 
				+            }],
			
 
				+            [{
			
 
				+                name: '上海'
			
 
				+            }, {
			
 
				+                name: '丹东',
			
 
				+                value: 20
			
 
				+            }],
			
 
				+            [{
			
 
				+                name: '上海'
			
 
				+            }, {
			
 
				+                name: '大连',
			
 
				+                value: 10
			
 
				+            }]
			
 
				+        ];
			
 
				+
			
 
				+        var GZData = [
			
 
				+            [{
			
 
				+                name: '广州'
			
 
				+            }, {
			
 
				+                name: '福州',
			
 
				+                value: 95
			
 
				+            }],
			
 
				+            [{
			
 
				+                name: '广州'
			
 
				+            }, {
			
 
				+                name: '太原',
			
 
				+                value: 90
			
 
				+            }],
			
 
				+            [{
			
 
				+                name: '广州'
			
 
				+            }, {
			
 
				+                name: '长春',
			
 
				+                value: 80
			
 
				+            }],
			
 
				+            [{
			
 
				+                name: '广州'
			
 
				+            }, {
			
 
				+                name: '重庆',
			
 
				+                value: 70
			
 
				+            }],
			
 
				+            [{
			
 
				+                name: '广州'
			
 
				+            }, {
			
 
				+                name: '西安',
			
 
				+                value: 60
			
 
				+            }],
			
 
				+            [{
			
 
				+                name: '广州'
			
 
				+            }, {
			
 
				+                name: '成都',
			
 
				+                value: 50
			
 
				+            }],
			
 
				+            [{
			
 
				+                name: '广州'
			
 
				+            }, {
			
 
				+                name: '常州',
			
 
				+                value: 40
			
 
				+            }],
			
 
				+            [{
			
 
				+                name: '广州'
			
 
				+            }, {
			
 
				+                name: '北京',
			
 
				+                value: 30
			
 
				+            }],
			
 
				+            [{
			
 
				+                name: '广州'
			
 
				+            }, {
			
 
				+                name: '北海',
			
 
				+                value: 20
			
 
				+            }],
			
 
				+            [{
			
 
				+                name: '广州'
			
 
				+            }, {
			
 
				+                name: '海口',
			
 
				+                value: 10
			
 
				+            }]
			
 
				+        ];
			
 
				+
			
 
				+        var planePath =
			
 
				+            'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
			
 
				+
			
 
				+        var convertData = function (data) {
			
 
				+            var res = [];
			
 
				+            for (var i = 0; i < data.length; i++) {
			
 
				+                var dataItem = data[i];
			
 
				+                var fromCoord = geoCoordMap[dataItem[0].name];
			
 
				+                var toCoord = geoCoordMap[dataItem[1].name];
			
 
				+                if (fromCoord && toCoord) {
			
 
				+                    res.push({
			
 
				+                        fromName: dataItem[0].name,
			
 
				+                        toName: dataItem[1].name,
			
 
				+                        coords: [fromCoord, toCoord]
			
 
				+                    });
			
 
				+                }
			
 
				+            }
			
 
				+            return res;
			
 
				+        };
			
 
				+
			
 
				+        var color = ['#C70022', '#ffa022', '#46bee9'];
			
 
				+        var series = [];
			
 
				+        [
			
 
				+            ['北京', BJData],
			
 
				+            ['上海', SHData],
			
 
				+            ['广州', GZData]
			
 
				+        ].forEach(function (item, i) {
			
 
				+            series.push({
			
 
				+                name: item[0] + ' Top10',
			
 
				+                coordinateSystem: 'GLMap',
			
 
				+                type: 'lines',
			
 
				+                zlevel: 1,
			
 
				+                effect: {
			
 
				+                    show: true,
			
 
				+                    period: 6,
			
 
				+                    trailLength: 0.7,
			
 
				+                    color: '#fff',
			
 
				+                    symbolSize: 3
			
 
				+                },
			
 
				+                lineStyle: {
			
 
				+                    normal: {
			
 
				+                        color: color[i],
			
 
				+                        width: 0,
			
 
				+                        curveness: 0.2
			
 
				+                    }
			
 
				+                },
			
 
				+                data: convertData(item[1])
			
 
				+            }, {
			
 
				+                name: item[0] + ' Top10',
			
 
				+                coordinateSystem: 'GLMap',
			
 
				+                type: 'lines',
			
 
				+                zlevel: 2,
			
 
				+                effect: {
			
 
				+                    show: true,
			
 
				+                    period: 6,
			
 
				+                    trailLength: 0,
			
 
				+                    symbol: planePath,
			
 
				+                    symbolSize: 15
			
 
				+                },
			
 
				+                lineStyle: {
			
 
				+                    normal: {
			
 
				+                        color: color[i],
			
 
				+                        width: 1,
			
 
				+                        opacity: 0.4,
			
 
				+                        curveness: 0.2
			
 
				+                    }
			
 
				+                },
			
 
				+                data: convertData(item[1])
			
 
				+            }, {
			
 
				+                name: item[0] + ' Top10',
			
 
				+                type: 'effectScatter',
			
 
				+                coordinateSystem: 'GLMap',
			
 
				+                zlevel: 2,
			
 
				+                rippleEffect: {
			
 
				+                    brushType: 'stroke'
			
 
				+                },
			
 
				+                label: {
			
 
				+                    normal: {
			
 
				+                        show: true,
			
 
				+                        position: 'right',
			
 
				+                        formatter: '{b}'
			
 
				+                    }
			
 
				+                },
			
 
				+                symbolSize: function (val) {
			
 
				+                    return val[2] / 8;
			
 
				+                },
			
 
				+                itemStyle: {
			
 
				+                    normal: {
			
 
				+                        color: color[i]
			
 
				+                    }
			
 
				+                },
			
 
				+                data: item[1].map(function (dataItem) {
			
 
				+                    return {
			
 
				+                        name: dataItem[1].name,
			
 
				+                        value: geoCoordMap[dataItem[1].name].concat([
			
 
				+                            dataItem[1].value
			
 
				+                        ])
			
 
				+                    };
			
 
				+                })
			
 
				+            });
			
 
				+        });
			
 
				+
			
 
				+        option = {
			
 
				+            animation: false,
			
 
				+            GLMap: {
			
 
				+                roam: true
			
 
				+            },
			
 
				+            coordinateSystem: 'GLMap',
			
 
				+            title: {
			
 
				+                left: 'center',
			
 
				+                textStyle: {
			
 
				+                    color: '#fff'
			
 
				+                }
			
 
				+            },
			
 
				+            tooltip: {
			
 
				+                trigger: 'item'
			
 
				+            },
			
 
				+            legend: {
			
 
				+                orient: 'vertical',
			
 
				+                top: 'bottom',
			
 
				+                left: 'right',
			
 
				+                data: ['北京 Top10', '上海 Top10', '广州 Top10'],
			
 
				+                textStyle: {
			
 
				+                    color: '#fff'
			
 
				+                },
			
 
				+                selectedMode: 'single'
			
 
				+            },
			
 
				+            geo: {
			
 
				+                map: 'GLMap',
			
 
				+                label: {
			
 
				+                    emphasis: {
			
 
				+                        show: false
			
 
				+                    }
			
 
				+                },
			
 
				+                roam: true,
			
 
				+                itemStyle: {
			
 
				+                    normal: {
			
 
				+                        areaColor: '#323c48',
			
 
				+                        borderColor: '#404a59'
			
 
				+                    },
			
 
				+                    emphasis: {
			
 
				+                        areaColor: '#2a333d'
			
 
				+                    }
			
 
				+                }
			
 
				+            },
			
 
				+            series: series
			
 
				+        };
			
 
				+
			
 
				+        var echartslayer = new EchartsLayer(map);
			
 
				+        echartslayer.chart.setOption(option);
			
 
				+
			
 
				+    </script>
			
 
				+
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/echarts_heatmap.html
+++ b/public/supermap/examples/mapboxgl/echarts_heatmap.html
@@ -0,0 +1,101 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<html>
			
 
				+<head>
			
 
				+    <meta charset='utf-8'/>
			
 
				+    <title data-i18n="resources.title_heatMap"></title>
			
 
				+    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
			
 
				+    <style>
			
 
				+        body {
			
 
				+            margin: 0;
			
 
				+            padding: 0;
			
 
				+        }
			
 
				+
			
 
				+        #map {
			
 
				+            position: absolute;
			
 
				+            top: 0;
			
 
				+            bottom: 0;
			
 
				+            width: 100%;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+<div id='map'></div>
			
 
				+<script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script>
			
 
				+<script type="text/javascript" include="echarts" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+<script type="text/javascript">
			
 
				+    var data;
			
 
				+    var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+            " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+            " Image <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a> | </span>" +
			
 
				+            " <a href='https://echarts.baidu.com' target='_blank'>© 2018 " + resources.title_3baidu + " ECharts</a>";
			
 
				+    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+    var tileURL = host + "/iserver/services/map-china400/rest/maps/ChinaDark/zxyTileImage.png?z={z}&x={x}&y={y}";
			
 
				+
			
 
				+    var map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [tileURL],
			
 
				+                    "tileSize": 256,
			
 
				+                },
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+                "minzoom": 0,
			
 
				+                "maxzoom": 18
			
 
				+            }]
			
 
				+        },
			
 
				+        center: [120.15, 30.24],
			
 
				+        zoom: 12
			
 
				+    });
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+    var uploadedDataURL = "../data/hangzhou-tracks.json";
			
 
				+
			
 
				+    $.get(uploadedDataURL, function (data) {
			
 
				+        var points = [].concat.apply([], data.map(function (track) {
			
 
				+            return track.map(function (seg) {
			
 
				+                return seg.coord.concat([1]);
			
 
				+            });
			
 
				+        }));
			
 
				+
			
 
				+        option = {
			
 
				+            GLMap: {
			
 
				+                roam: true
			
 
				+            },
			
 
				+            coordinateSystem: 'GLMap',
			
 
				+            visualMap: {
			
 
				+                show: false,
			
 
				+                top: 'top',
			
 
				+                min: 0,
			
 
				+                max: 5,
			
 
				+                seriesIndex: 0,
			
 
				+                calculable: true,
			
 
				+                inRange: {
			
 
				+                    color: ['blue', 'blue', 'green', 'yellow', 'red']
			
 
				+                }
			
 
				+            },
			
 
				+
			
 
				+            series: [{
			
 
				+                type: 'heatmap',
			
 
				+                coordinateSystem: 'GLMap',
			
 
				+                data: points,
			
 
				+                pointSize: 5,
			
 
				+                blurSize: 6
			
 
				+            }]
			
 
				+        };
			
 
				+
			
 
				+        var echartslayer = new EchartsLayer(map);
			
 
				+        echartslayer.chart.setOption(option);
			
 
				+
			
 
				+    });
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/echarts_lineMarker.html
+++ b/public/supermap/examples/mapboxgl/echarts_lineMarker.html
@@ -0,0 +1,231 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<html>
			
 
				+<head>
			
 
				+    <meta charset='utf-8'/>
			
 
				+    <title data-i18n="resources.title_GraphLine"></title>
			
 
				+    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
			
 
				+    <style>
			
 
				+        body {
			
 
				+            margin: 0;
			
 
				+            padding: 0;
			
 
				+        }
			
 
				+
			
 
				+        #map {
			
 
				+            position: absolute;
			
 
				+            top: 0;
			
 
				+            bottom: 0;
			
 
				+            width: 100%;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+<div id='map'></div>
			
 
				+<script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script>
			
 
				+<script type="text/javascript" include="echarts" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+<script type="text/javascript">
			
 
				+    var data;
			
 
				+    var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+            " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+            " Image <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a> | </span>" +
			
 
				+            " <a href='https://echarts.baidu.com' target='_blank'>© 2018 " + resources.title_3baidu + " ECharts</a>";
			
 
				+    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+    var tileURL = host + '/iserver/services/map-world/rest/maps/世界地图_Gray/zxyTileImage.png?prjCoordSys='+encodeURIComponent('{"epsgCode":3857}')+'&z={z}&x={x}&y={y}';
			
 
				+    var url = host + "/iserver/services/map-china400/rest/maps/China_4326";
			
 
				+    var chart, div, popup = '';
			
 
				+    var map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [tileURL],
			
 
				+                    "tileSize": 256,
			
 
				+                },
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+                "minzoom": 0,
			
 
				+                "maxzoom": 18
			
 
				+            }]
			
 
				+        },
			
 
				+        center: [105.2, 31.6],
			
 
				+        zoom: 5
			
 
				+    });
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+    map.loadImage('../img/marker-icon.png', function (error, image) {
			
 
				+        if (error) throw error;
			
 
				+        map.addImage('positionPoint', image);
			
 
				+    });
			
 
				+
			
 
				+    var option = {
			
 
				+        title: {
			
 
				+            subtext: resources.text_fictitiouData
			
 
				+        },
			
 
				+        tooltip: {
			
 
				+            trigger: 'axis'
			
 
				+        },
			
 
				+        legend: {
			
 
				+            data: [resources.text_maxTemperature, resources.text_minTemperature]
			
 
				+        },
			
 
				+        toolbox: {
			
 
				+            show: true,
			
 
				+            feature: {
			
 
				+                dataZoom: {
			
 
				+                    yAxisIndex: 'none'
			
 
				+                },
			
 
				+                magicType: {type: ['line', 'bar']},
			
 
				+                restore: {},
			
 
				+                saveAsImage: {}
			
 
				+            }
			
 
				+        },
			
 
				+        xAxis: {
			
 
				+            type: 'category',
			
 
				+            boundaryGap: false,
			
 
				+            data: [resources.text_monday, resources.text_tuesday, resources.text_wednesday, resources.text_thursday, resources.text_friday, resources.text_saturday, resources.text_sunday]
			
 
				+        },
			
 
				+        yAxis: {
			
 
				+            type: 'value',
			
 
				+            axisLabel: {
			
 
				+                formatter: '{value} °C'
			
 
				+            }
			
 
				+        },
			
 
				+        series: [
			
 
				+            {
			
 
				+                name: resources.text_maxTemperature,
			
 
				+                type: 'line',
			
 
				+                data: [11, 11, 15, 13, 12, 13, 10],
			
 
				+                markPoint: {
			
 
				+                    data: [
			
 
				+                        {type: 'max', name: resources.text_maxValue},
			
 
				+                        {type: 'min', name: resources.text_minValue}
			
 
				+                    ]
			
 
				+                },
			
 
				+                markLine: {
			
 
				+                    data: [
			
 
				+                        {type: 'average', name: resources.text_averageValue},
			
 
				+                        [{
			
 
				+                            symbol: 'none',
			
 
				+                            x: '90%',
			
 
				+                            yAxis: 'max'
			
 
				+                        }, {
			
 
				+                            symbol: 'circle',
			
 
				+                            label: {
			
 
				+                                normal: {
			
 
				+                                    position: 'start',
			
 
				+                                    formatter: resources.text_maxValue
			
 
				+                                }
			
 
				+                            },
			
 
				+                            type: 'max',
			
 
				+                            name: '最高点'
			
 
				+                        }]
			
 
				+                    ]
			
 
				+                }
			
 
				+            },
			
 
				+            {
			
 
				+                name: resources.text_minTemperature,
			
 
				+                type: 'line',
			
 
				+                data: [1, -2, 2, 5, 3, 2, 0],
			
 
				+                markPoint: {
			
 
				+                    data: [
			
 
				+                        {type: 'max', name: resources.text_maxValue},
			
 
				+                        {type: 'min', name: resources.text_minValue}
			
 
				+                    ]
			
 
				+                },
			
 
				+                markLine: {
			
 
				+                    data: [
			
 
				+                        {type: 'average', name: resources.text_averageValue},
			
 
				+                        [{
			
 
				+                            symbol: 'none',
			
 
				+                            x: '90%',
			
 
				+                            yAxis: 'min'
			
 
				+                        }, {
			
 
				+                            symbol: 'circle',
			
 
				+                            label: {
			
 
				+                                normal: {
			
 
				+                                    position: 'start',
			
 
				+                                    formatter: resources.text_minValue
			
 
				+                                }
			
 
				+                            },
			
 
				+                            type: 'min',
			
 
				+                            name: '最低点'
			
 
				+                        }]
			
 
				+                    ]
			
 
				+                }
			
 
				+            }
			
 
				+        ]
			
 
				+    };
			
 
				+
			
 
				+    div = document.createElement('div');
			
 
				+    chart = echarts.init(div, '', {
			
 
				+        width: 600,
			
 
				+        height: 400
			
 
				+    });
			
 
				+    chart.setOption(option);
			
 
				+    query();
			
 
				+
			
 
				+    function query() {
			
 
				+        var sqlParam = new SuperMap.QueryBySQLParameters({
			
 
				+            queryParams: [{
			
 
				+                name: "China_ProCenCity_pt@China",
			
 
				+                attributeFilter: "1 = 1"
			
 
				+            }, {
			
 
				+                name: "China_Capital_pt@China",
			
 
				+                attributeFilter: "1 = 1"
			
 
				+            }]
			
 
				+        });
			
 
				+
			
 
				+        queryService = new mapboxgl.supermap.QueryService(url).queryBySQL(sqlParam, function (serviceResult) {
			
 
				+
			
 
				+            var recordsets = serviceResult && serviceResult.result && serviceResult.result.recordsets;
			
 
				+            features = recordsets && recordsets[0] && recordsets[0].features;
			
 
				+            map.addLayer({
			
 
				+                "id": "points",
			
 
				+                "type": "symbol",
			
 
				+                "layout": {
			
 
				+                    "icon-image": "positionPoint",
			
 
				+                    "icon-size": 0.8,
			
 
				+                    "icon-offset": [0, -15] //设置偏移量
			
 
				+                },
			
 
				+                "source": {
			
 
				+                    "type": "geojson",
			
 
				+                    "data": features
			
 
				+                }
			
 
				+            });
			
 
				+
			
 
				+            map.on('click', 'points', function (e) {
			
 
				+
			
 
				+                popup = new mapboxgl.Popup({maxWidth: 'none'});
			
 
				+                popup.setLngLat(e.lngLat.toArray())
			
 
				+                    .setDOMContent(div) // sets a popup on this marker
			
 
				+                    .addTo(map);
			
 
				+
			
 
				+                chart.setOption({
			
 
				+                    title: {
			
 
				+                        text: e.features[0].properties.NAME + resources.text_nextWeekTemperature
			
 
				+                    },
			
 
				+                    series: [
			
 
				+                        {
			
 
				+                            name: resources.text_maxTemperature,
			
 
				+                            data: [10 + Math.ceil(Math.random() * 10), 10 + Math.ceil(Math.random() * 10), 10 + Math.ceil(Math.random() * 10), 10 + Math.ceil(Math.random() * 10), 10 + Math.ceil(Math.random() * 10), 10 + Math.ceil(Math.random() * 10), 10 + Math.ceil(Math.random() * 10)],
			
 
				+                        },
			
 
				+                        {
			
 
				+                            name: resources.text_minTemperature,
			
 
				+                            data: [8 - Math.ceil(Math.random() * 10), 8 - Math.ceil(Math.random() * 10), 8 - Math.ceil(Math.random() * 10), 8 - Math.ceil(Math.random() * 10), 8 - Math.ceil(Math.random() * 10), 8 - Math.ceil(Math.random() * 10), 8 - Math.ceil(Math.random() * 10)],
			
 
				+
			
 
				+                        }
			
 
				+                    ]
			
 
				+                });
			
 
				+
			
 
				+            });
			
 
				+        });
			
 
				+    }
			
 
				+
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/echarts_linesAirline.html
+++ b/public/supermap/examples/mapboxgl/echarts_linesAirline.html
@@ -0,0 +1,114 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<html>
			
 
				+<head>
			
 
				+    <meta charset='utf-8'/>
			
 
				+    <title data-i18n="resources.title_linesAirline"></title>
			
 
				+    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
			
 
				+    <script type="text/javascript" include="jquery" src="../js/include-web.js"></script>
			
 
				+    <style>
			
 
				+        body {
			
 
				+            margin: 0;
			
 
				+            padding: 0;
			
 
				+        }
			
 
				+
			
 
				+        #map {
			
 
				+            position: absolute;
			
 
				+            top: 0;
			
 
				+            bottom: 0;
			
 
				+            width: 100%;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+<div id='map'></div>
			
 
				+<script type="text/javascript" exclude='iclient-mapboxgl' include="echarts"
			
 
				+        src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+<script type="text/javascript">
			
 
				+    var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+            " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+            " Image <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a> | </span>" +
			
 
				+            " <a href='https://echarts.baidu.com' target='_blank'>© 2018 " + resources.title_3baidu + " ECharts</a>";
			
 
				+    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+    var tileURL = host + "/iserver/services/map-china400/rest/maps/ChinaDark/zxyTileImage.png?z={z}&x={x}&y={y}";
			
 
				+    var map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [tileURL],
			
 
				+                    "tileSize": 256,
			
 
				+                },
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+                "minzoom": 0,
			
 
				+                "maxzoom": 22
			
 
				+            }]
			
 
				+        },
			
 
				+        center: [0, 0],
			
 
				+        zoom: 2
			
 
				+    });
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+
			
 
				+    $.get('../data/flights.json', function (data) {
			
 
				+        function getAirportCoord(idx) {
			
 
				+            return [data.airports[idx][3], data.airports[idx][4]];
			
 
				+        }
			
 
				+
			
 
				+        var routes = data.routes.map(function (airline) {
			
 
				+            return [
			
 
				+                getAirportCoord(airline[1]),
			
 
				+                getAirportCoord(airline[2])
			
 
				+            ];
			
 
				+        });
			
 
				+
			
 
				+        var echartslayer = new EchartsLayer(map);
			
 
				+        echartslayer.chart.setOption(option = {
			
 
				+            title: {
			
 
				+                text: 'World Flights',
			
 
				+                left: 'center',
			
 
				+                textStyle: {
			
 
				+                    color: '#eee'
			
 
				+                }
			
 
				+            },
			
 
				+
			
 
				+            tooltip: {
			
 
				+                formatter: function (param) {
			
 
				+                    var route = data.routes[param.dataIndex];
			
 
				+                    return data.airports[route[1]][1] + ' > ' + data.airports[route[
			
 
				+                            2]][1];
			
 
				+                }
			
 
				+            },
			
 
				+            GLMap: {
			
 
				+                roam: true
			
 
				+            },
			
 
				+            series: [{
			
 
				+                type: 'lines',
			
 
				+                coordinateSystem: 'GLMap',
			
 
				+                data: routes,
			
 
				+                large: true,
			
 
				+                largeThreshold: 100,
			
 
				+                lineStyle: {
			
 
				+                    normal: {
			
 
				+                        opacity: 0.05,
			
 
				+                        width: 0.5,
			
 
				+                        curveness: 0.3
			
 
				+                    }
			
 
				+                },
			
 
				+                // 设置混合模式为叠加
			
 
				+                blendMode: 'lighter'
			
 
				+            }]
			
 
				+        });
			
 
				+    });
			
 
				+
			
 
				+</script>
			
 
				+
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/echarts_linesBus.html
+++ b/public/supermap/examples/mapboxgl/echarts_linesBus.html
@@ -0,0 +1,112 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<html>
			
 
				+<head>
			
 
				+    <meta charset='utf-8'/>
			
 
				+    <title data-i18n="resources.title_linesBus"></title>
			
 
				+    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
			
 
				+    <style>
			
 
				+        body {
			
 
				+            margin: 0;
			
 
				+            padding: 0;
			
 
				+        }
			
 
				+
			
 
				+        #map {
			
 
				+            position: absolute;
			
 
				+            top: 0;
			
 
				+            bottom: 0;
			
 
				+            width: 100%;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+<div id='map'></div>
			
 
				+<script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script>
			
 
				+<script type="text/javascript" include="echarts" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+<script type="text/javascript">
			
 
				+    var data;
			
 
				+    var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+            " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+            " Image <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a> | </span>" +
			
 
				+            " <a href='https://echarts.baidu.com' target='_blank'>© 2018 " + resources.title_3baidu + " ECharts</a>";
			
 
				+    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+    var tileURL = host + "/iserver/services/maps/rest/maps/世界地图_Gray/zxyTileImage.png?z={z}&x={x}&y={y}";
			
 
				+
			
 
				+    var map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [tileURL],
			
 
				+                    "tileSize": 256,
			
 
				+                },
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+                "minzoom": 0,
			
 
				+                "maxzoom": 18
			
 
				+            }]
			
 
				+        },
			
 
				+        center: [116.5, 39.8],
			
 
				+        zoom: 8
			
 
				+    });
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+    var uploadedDataURL = "../data/lines-bus.json";
			
 
				+
			
 
				+    $.get(uploadedDataURL, function (data) {
			
 
				+        var busLines = [].concat.apply([], data.map(function (busLine, idx) {
			
 
				+            var prevPt;
			
 
				+            var points = [];
			
 
				+            for (var i = 0; i < busLine.length; i += 2) {
			
 
				+                var pt = [busLine[i], busLine[i + 1]];
			
 
				+                if (i > 0) {
			
 
				+                    pt = [
			
 
				+                        prevPt[0] + pt[0],
			
 
				+                        prevPt[1] + pt[1]
			
 
				+                    ];
			
 
				+                }
			
 
				+                prevPt = pt;
			
 
				+
			
 
				+                points.push([pt[0] / 1e4, pt[1] / 1e4]);
			
 
				+            }
			
 
				+            return {
			
 
				+                coords: points
			
 
				+            };
			
 
				+        }));
			
 
				+
			
 
				+        option = {
			
 
				+            GLMap: {
			
 
				+                roam: true
			
 
				+            },
			
 
				+            coordinateSystem: 'GLMap',
			
 
				+
			
 
				+            series: [{
			
 
				+                type: 'lines',
			
 
				+                coordinateSystem: 'GLMap',
			
 
				+                polyline: true,
			
 
				+                data: busLines,
			
 
				+                silent: true,
			
 
				+                lineStyle: {
			
 
				+                    normal: {
			
 
				+                        color: 'rgb(200, 35, 45)',
			
 
				+                        opacity: 0.2,
			
 
				+                        width: 1
			
 
				+                    }
			
 
				+                },
			
 
				+                progressiveThreshold: 500,
			
 
				+                progressive: 200
			
 
				+            }]
			
 
				+        };
			
 
				+
			
 
				+        var echartslayer = new EchartsLayer(map);
			
 
				+        echartslayer.chart.setOption(option);
			
 
				+    });
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/echarts_linesDrawMillionsBeijingRoadsNetwork.html
+++ b/public/supermap/examples/mapboxgl/echarts_linesDrawMillionsBeijingRoadsNetwork.html
@@ -0,0 +1,136 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<html>
			
 
				+<head>
			
 
				+    <meta charset='utf-8'/>
			
 
				+    <title data-i18n="resources.title_echartsLinesMillions_bjRoads"></title>
			
 
				+    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
			
 
				+    <script type="text/javascript" include="jquery" src="../js/include-web.js"></script>
			
 
				+    <style>
			
 
				+        body {
			
 
				+            margin: 0;
			
 
				+            padding: 0;
			
 
				+        }
			
 
				+
			
 
				+        #map {
			
 
				+            position: absolute;
			
 
				+            top: 0;
			
 
				+            bottom: 0;
			
 
				+            width: 100%;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+<div id='map'></div>
			
 
				+<script type="text/javascript" include="echarts" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+<script type="text/javascript">
			
 
				+    var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+        " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+        " Image <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a> | </span>" +
			
 
				+        " <a href='https://echarts.baidu.com' target='_blank'>© 2018 " + resources.title_3baidu + " ECharts</a>";
			
 
				+    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+    var tileURL = host + "/iserver/services/map-china400/rest/maps/ChinaDark/zxyTileImage.png?z={z}&x={x}&y={y}";
			
 
				+
			
 
				+    var map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [tileURL],
			
 
				+                    "tileSize": 256,
			
 
				+                },
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+                "minzoom": 0,
			
 
				+                "maxzoom": 18
			
 
				+            }]
			
 
				+        },
			
 
				+        center: [116.36, 40.0],
			
 
				+        zoom: 9,
			
 
				+        itemStyle: {
			
 
				+            normal: {
			
 
				+                color: 'transparent',
			
 
				+                borderColor: 'rgba(255,255,255,0.1)',
			
 
				+                borderWidth: 1
			
 
				+            }
			
 
				+        },
			
 
				+        roam: true,
			
 
				+        silent: true
			
 
				+    });
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+
			
 
				+    var echartslayer = new EchartsLayer(map);
			
 
				+
			
 
				+    var CHUNK_COUNT = 19;
			
 
				+
			
 
				+    function fetchData(idx) {
			
 
				+        if (idx > CHUNK_COUNT) {
			
 
				+            return;
			
 
				+        }
			
 
				+        var dataURL = "https://iclient.supermap.io/web/data/bigdata_beijingroads/data_" + idx + ".bin";
			
 
				+        var xhr = new XMLHttpRequest();
			
 
				+        xhr.open('GET', dataURL, true);
			
 
				+        xhr.responseType = 'arraybuffer';
			
 
				+
			
 
				+        xhr.onload = function (e) {
			
 
				+            var rawData = new Float32Array(this.response);
			
 
				+            echartslayer.chart.appendData({
			
 
				+                seriesIndex: 0,
			
 
				+                data: rawData
			
 
				+            });
			
 
				+
			
 
				+            fetchData(idx + 1);
			
 
				+        };
			
 
				+
			
 
				+        xhr.send();
			
 
				+    }
			
 
				+
			
 
				+    option = {
			
 
				+        animation: false,
			
 
				+        progressive: 20000,
			
 
				+        GLMap: {
			
 
				+            roam: true
			
 
				+        },
			
 
				+        title: {
			
 
				+            top: '10px',
			
 
				+            text: resources.text_echartsLinesMillions_bjRoads,
			
 
				+            subtext: resources.text_echartsLinesMillions_bjRoads_subtext,
			
 
				+            left: 'center',
			
 
				+            textStyle: {
			
 
				+                color: '#fff'
			
 
				+            },
			
 
				+            subtextStyle: {
			
 
				+                color: '#fff'
			
 
				+            }
			
 
				+        },
			
 
				+        coordinateSystem: 'GLMap',
			
 
				+        series: [{
			
 
				+            name: 'beijingRoads',
			
 
				+            type: 'lines',
			
 
				+            blendMode: 'lighter',
			
 
				+            coordinateSystem: 'GLMap',
			
 
				+            dimensions: ['value'],
			
 
				+            data: new Float64Array(),
			
 
				+            polyline: true,
			
 
				+            large: true,
			
 
				+            lineStyle: {
			
 
				+                color: 'orange',
			
 
				+                width: 1,
			
 
				+                opacity: 0.3
			
 
				+            }
			
 
				+        }]
			
 
				+    };
			
 
				+
			
 
				+    fetchData(0);
			
 
				+    echartslayer.chart.setOption(option);
			
 
				+
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/echarts_linesDrawMillionsRailwaysNetwork.html
+++ b/public/supermap/examples/mapboxgl/echarts_linesDrawMillionsRailwaysNetwork.html
@@ -0,0 +1,133 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<html>
			
 
				+<head>
			
 
				+    <meta charset='utf-8'/>
			
 
				+    <title data-i18n="resources.title_echartsLinesMillions_railways"></title>
			
 
				+    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
			
 
				+    <script type="text/javascript" include="jquery" src="../js/include-web.js"></script>
			
 
				+    <style>
			
 
				+        body {
			
 
				+            margin: 0;
			
 
				+            padding: 0;
			
 
				+        }
			
 
				+
			
 
				+        #map {
			
 
				+            position: absolute;
			
 
				+            top: 0;
			
 
				+            bottom: 0;
			
 
				+            width: 100%;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+<div id='map'></div>
			
 
				+<script type="text/javascript" include="echarts" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+<script type="text/javascript">
			
 
				+    var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+        " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+        " Image <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a> | </span>" +
			
 
				+        " <a href='https://echarts.baidu.com' target='_blank'>© 2018 " + resources.title_3baidu + " ECharts</a>";
			
 
				+    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+    var tileURL = host + "/iserver/services/map-china400/rest/maps/ChinaDark/zxyTileImage.png?z={z}&x={x}&y={y}";
			
 
				+
			
 
				+    var map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [tileURL],
			
 
				+                    "tileSize": 256,
			
 
				+                },
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+                "minzoom": 0,
			
 
				+                "maxzoom": 18
			
 
				+            }]
			
 
				+        },
			
 
				+        center: [106, 37.94],
			
 
				+        zoom: 4,
			
 
				+        itemStyle: {
			
 
				+            normal: {
			
 
				+                color: 'transparent',
			
 
				+                borderColor: 'rgba(255,255,255,0.1)',
			
 
				+                borderWidth: 1
			
 
				+            }
			
 
				+        },
			
 
				+        roam: true,
			
 
				+        silent: true
			
 
				+    });
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+    var echartslayer = new EchartsLayer(map);
			
 
				+
			
 
				+    var CHUNK_COUNT = 19;
			
 
				+
			
 
				+    function fetchData(idx) {
			
 
				+        if (idx > CHUNK_COUNT) {
			
 
				+            return;
			
 
				+        }
			
 
				+        var dataURL = "https://iclient.supermap.io/web/data/bigdata_railway_10w/data_" + idx + ".bin";
			
 
				+        var xhr = new XMLHttpRequest();
			
 
				+        xhr.open('GET', dataURL, true);
			
 
				+        xhr.responseType = 'arraybuffer';
			
 
				+
			
 
				+        xhr.onload = function (e) {
			
 
				+            var rawData = new Float32Array(this.response);
			
 
				+            echartslayer.chart.appendData({
			
 
				+                seriesIndex: 0,
			
 
				+                data: rawData
			
 
				+            });
			
 
				+
			
 
				+            fetchData(idx + 1);
			
 
				+        };
			
 
				+
			
 
				+        xhr.send();
			
 
				+    }
			
 
				+
			
 
				+    option = {
			
 
				+        progressive: 20000,
			
 
				+        GLMap: {
			
 
				+            roam: true
			
 
				+        },
			
 
				+        title: {
			
 
				+            top: '10px',
			
 
				+            text: resources.text_echartsLinesMillions_railways,
			
 
				+            subtext: resources.text_echartsLinesMillions_railways_subtext,
			
 
				+            left: 'center',
			
 
				+            textStyle: {
			
 
				+                color: '#fff'
			
 
				+            },
			
 
				+            subtextStyle: {
			
 
				+                color: '#fff'
			
 
				+            }
			
 
				+        },
			
 
				+        coordinateSystem: 'GLMap',
			
 
				+        series: [{
			
 
				+            type: 'lines',
			
 
				+            blendMode: 'lighter',
			
 
				+            coordinateSystem: 'GLMap',
			
 
				+            dimensions: ['value'],
			
 
				+            data: new Float64Array(),
			
 
				+            polyline: true,
			
 
				+            large: true,
			
 
				+            lineStyle: {
			
 
				+                color: 'orange',
			
 
				+                width: 2,
			
 
				+                opacity: 0.3
			
 
				+            }
			
 
				+        }]
			
 
				+    };
			
 
				+
			
 
				+    fetchData(0);
			
 
				+    echartslayer.chart.setOption(option);
			
 
				+
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/echarts_linesDrawMillionsRailwaysNetwork_4326.html
+++ b/public/supermap/examples/mapboxgl/echarts_linesDrawMillionsRailwaysNetwork_4326.html
@@ -0,0 +1,131 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<html>
			
 
				+
			
 
				+<head>
			
 
				+    <meta charset='utf-8' />
			
 
				+    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
			
 
				+    <title data-i18n="resources.title_echartsLinesMillions_railwaysWGS84"></title>
			
 
				+    <script type="text/javascript" include="jquery" src="../js/include-web.js"></script>
			
 
				+    <style>
			
 
				+        body {
			
 
				+            margin: 0;
			
 
				+            padding: 0;
			
 
				+        }
			
 
				+
			
 
				+        #map {
			
 
				+            position: absolute;
			
 
				+            top: 0;
			
 
				+            bottom: 0;
			
 
				+            width: 100%;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+    <div id='map'></div>
			
 
				+    <script type="text/javascript" include='mapbox-gl-enhance,echarts' src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+    <script type="text/javascript">
			
 
				+        var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+        var map = new mapboxgl.Map({
			
 
				+            container: 'map',
			
 
				+            style: {
			
 
				+                "version": 8,
			
 
				+                "sources": {
			
 
				+                    "raster-tiles": {
			
 
				+                        "type": "raster",
			
 
				+                        "tiles": [host + '/iserver/services/map-world/rest/maps/World'],
			
 
				+                        "rasterSource":"iserver",
			
 
				+                        "tileSize": 256,
			
 
				+                    },
			
 
				+                },
			
 
				+                "layers": [{
			
 
				+                    "id": "simple-tiles",
			
 
				+                    "type": "raster",
			
 
				+                    "source": "raster-tiles",
			
 
				+                    "minzoom": 0,
			
 
				+                    "maxzoom": 18
			
 
				+                }]
			
 
				+            },
			
 
				+            crs: mapboxgl.CRS.EPSG4326,
			
 
				+            center: [106, 37.94],
			
 
				+            zoom: 4,
			
 
				+            itemStyle: {
			
 
				+                normal: {
			
 
				+                    color: 'transparent',
			
 
				+                    borderColor: 'rgba(255,255,255,0.1)',
			
 
				+                    borderWidth: 1
			
 
				+                }
			
 
				+            },
			
 
				+            roam: true,
			
 
				+            silent: true
			
 
				+        });
			
 
				+        map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+        var echartslayer = new EchartsLayer(map);
			
 
				+
			
 
				+        var CHUNK_COUNT = 19;
			
 
				+
			
 
				+        function fetchData(idx) {
			
 
				+            if (idx > CHUNK_COUNT) {
			
 
				+                return;
			
 
				+            }
			
 
				+            var dataURL = "https://iclient.supermap.io/web/data/bigdata_railway_10w/data_" + idx + ".bin";
			
 
				+            var xhr = new XMLHttpRequest();
			
 
				+            xhr.open('GET', dataURL, true);
			
 
				+            xhr.responseType = 'arraybuffer';
			
 
				+
			
 
				+            xhr.onload = function (e) {
			
 
				+                var rawData = new Float32Array(this.response);
			
 
				+                echartslayer.chart.appendData({
			
 
				+                    seriesIndex: 0,
			
 
				+                    data: rawData
			
 
				+                });
			
 
				+
			
 
				+                fetchData(idx + 1);
			
 
				+            };
			
 
				+
			
 
				+            xhr.send();
			
 
				+        }
			
 
				+
			
 
				+        option = {
			
 
				+            progressive: 20000,
			
 
				+            GLMap: {
			
 
				+                roam: true
			
 
				+            },
			
 
				+            title: {
			
 
				+                top: '10px',
			
 
				+                text: '全国铁路网',
			
 
				+                subtext: '四百万点',
			
 
				+                left: 'center',
			
 
				+                textStyle: {
			
 
				+                    color: '#fff'
			
 
				+                },
			
 
				+                subtextStyle: {
			
 
				+                    color: '#fff'
			
 
				+                }
			
 
				+            },
			
 
				+            coordinateSystem: 'GLMap',
			
 
				+            series: [{
			
 
				+                type: 'lines',
			
 
				+                blendMode: 'lighter',
			
 
				+                coordinateSystem: 'GLMap',
			
 
				+                dimensions: ['value'],
			
 
				+                data: new Float64Array(),
			
 
				+                polyline: true,
			
 
				+                large: true,
			
 
				+                lineStyle: {
			
 
				+                    color: 'orange',
			
 
				+                    width: 2,
			
 
				+                    opacity: 0.3
			
 
				+                }
			
 
				+            }]
			
 
				+        };
			
 
				+
			
 
				+        fetchData(0);
			
 
				+        echartslayer.chart.setOption(option);
			
 
				+
			
 
				+    </script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/echarts_linesDrawMillionsRoadsNetwork_50WFeatures.html
+++ b/public/supermap/examples/mapboxgl/echarts_linesDrawMillionsRoadsNetwork_50WFeatures.html
@@ -0,0 +1,133 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<html>
			
 
				+<head>
			
 
				+    <meta charset='utf-8'/>
			
 
				+    <title data-i18n="resources.title_echartsLinesMillions_roads"></title>
			
 
				+    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
			
 
				+    <script type="text/javascript" include="jquery" src="../js/include-web.js"></script>
			
 
				+    <style>
			
 
				+        body {
			
 
				+            margin: 0;
			
 
				+            padding: 0;
			
 
				+        }
			
 
				+
			
 
				+        #map {
			
 
				+            position: absolute;
			
 
				+            top: 0;
			
 
				+            bottom: 0;
			
 
				+            width: 100%;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+<div id='map'></div>
			
 
				+<script type="text/javascript" include="echarts" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+<script type="text/javascript">
			
 
				+    var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+        " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+        " Image <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a> | </span>" +
			
 
				+        " <a href='https://echarts.baidu.com' target='_blank'>© 2018 " + resources.title_3baidu + " ECharts</a>";
			
 
				+    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+    var tileURL = host + "/iserver/services/map-china400/rest/maps/ChinaDark/zxyTileImage.png?z={z}&x={x}&y={y}";
			
 
				+
			
 
				+    var map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [tileURL],
			
 
				+                    "tileSize": 256,
			
 
				+                },
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+                "minzoom": 0,
			
 
				+                "maxzoom": 18
			
 
				+            }]
			
 
				+        },
			
 
				+        center: [106, 37.94],
			
 
				+        zoom: 4,
			
 
				+        itemStyle: {
			
 
				+            normal: {
			
 
				+                color: 'transparent',
			
 
				+                borderColor: 'rgba(255,255,255,0.1)',
			
 
				+                borderWidth: 1
			
 
				+            }
			
 
				+        },
			
 
				+        roam: true,
			
 
				+        silent: true
			
 
				+    });
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+    var echartslayer = new EchartsLayer(map);
			
 
				+
			
 
				+    var CHUNK_COUNT = 27;
			
 
				+
			
 
				+    function fetchData(idx) {
			
 
				+        if (idx > CHUNK_COUNT) {
			
 
				+            return;
			
 
				+        }
			
 
				+        var dataURL = "https://iclient.supermap.io/web/data/bigdata_roads_50w/data_" + idx + ".bin";
			
 
				+        var xhr = new XMLHttpRequest();
			
 
				+        xhr.open('GET', dataURL, true);
			
 
				+        xhr.responseType = 'arraybuffer';
			
 
				+
			
 
				+        xhr.onload = function (e) {
			
 
				+            var rawData = new Float32Array(this.response);
			
 
				+            echartslayer.chart.appendData({
			
 
				+                seriesIndex: 0,
			
 
				+                data: rawData
			
 
				+            });
			
 
				+
			
 
				+            fetchData(idx + 1);
			
 
				+        };
			
 
				+
			
 
				+        xhr.send();
			
 
				+    }
			
 
				+
			
 
				+    option = {
			
 
				+        progressive: 20000,
			
 
				+        GLMap: {
			
 
				+            roam: true
			
 
				+        },
			
 
				+        title: {
			
 
				+            top: '10px',
			
 
				+            text: resources.text_echartsLinesMillions_roads,
			
 
				+            subtext: resources.text_echartsLinesMillions_roads_subtext,
			
 
				+            left: 'center',
			
 
				+            textStyle: {
			
 
				+                color: '#fff'
			
 
				+            },
			
 
				+            subtextStyle: {
			
 
				+                color: '#fff'
			
 
				+            }
			
 
				+        },
			
 
				+        coordinateSystem: 'GLMap',
			
 
				+        series: [{
			
 
				+            type: 'lines',
			
 
				+            blendMode: 'lighter',
			
 
				+            coordinateSystem: 'GLMap',
			
 
				+            dimensions: ['value'],
			
 
				+            data: new Float64Array(),
			
 
				+            polyline: true,
			
 
				+            large: true,
			
 
				+            lineStyle: {
			
 
				+                color: 'orange',
			
 
				+                width: 1,
			
 
				+                opacity: 0.3
			
 
				+            }
			
 
				+        }]
			
 
				+    };
			
 
				+
			
 
				+    fetchData(0);
			
 
				+    echartslayer.chart.setOption(option);
			
 
				+
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/echarts_linesDrawMillionsWaterSystem.html
+++ b/public/supermap/examples/mapboxgl/echarts_linesDrawMillionsWaterSystem.html
@@ -0,0 +1,134 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<html>
			
 
				+<head>
			
 
				+    <meta charset='utf-8'/>
			
 
				+    <title data-i18n="resources.title_echartsLinesMillions_waterSystem"></title>
			
 
				+    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
			
 
				+    <script type="text/javascript" include="jquery" src="../js/include-web.js"></script>
			
 
				+    <style>
			
 
				+        body {
			
 
				+            margin: 0;
			
 
				+            padding: 0;
			
 
				+        }
			
 
				+
			
 
				+        #map {
			
 
				+            position: absolute;
			
 
				+            top: 0;
			
 
				+            bottom: 0;
			
 
				+            width: 100%;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+<div id='map'></div>
			
 
				+<script type="text/javascript" include="echarts" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+<script type="text/javascript">
			
 
				+    var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+        " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+        " Image <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a> | </span>" +
			
 
				+        " <a href='https://echarts.baidu.com' target='_blank'>© 2018 " + resources.title_3baidu + " ECharts</a>";
			
 
				+    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+    var tileURL = host + "/iserver/services/map-china400/rest/maps/ChinaDark/zxyTileImage.png?z={z}&x={x}&y={y}";
			
 
				+
			
 
				+    var map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [tileURL],
			
 
				+                    "tileSize": 256,
			
 
				+                },
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+                "minzoom": 0,
			
 
				+                "maxzoom": 18
			
 
				+            }]
			
 
				+        },
			
 
				+        center: [106, 37.94],
			
 
				+        zoom: 4,
			
 
				+        itemStyle: {
			
 
				+            normal: {
			
 
				+                color: 'transparent',
			
 
				+                borderColor: 'rgba(255,255,255,0.1)',
			
 
				+                borderWidth: 1
			
 
				+            }
			
 
				+        },
			
 
				+        roam: true,
			
 
				+        silent: true
			
 
				+    });
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+    var echartslayer = new EchartsLayer(map);
			
 
				+
			
 
				+    var CHUNK_COUNT = 19;
			
 
				+
			
 
				+    function fetchData(idx) {
			
 
				+        if (idx > CHUNK_COUNT) {
			
 
				+            return;
			
 
				+        }
			
 
				+        var dataURL = "https://iclient.supermap.io/web/data/bigdata_water_10w/data_" + idx + ".bin";
			
 
				+        var xhr = new XMLHttpRequest();
			
 
				+        xhr.open('GET', dataURL, true);
			
 
				+        xhr.responseType = 'arraybuffer';
			
 
				+
			
 
				+        xhr.onload = function (e) {
			
 
				+            var rawData = new Float32Array(this.response);
			
 
				+            echartslayer.chart.appendData({
			
 
				+                seriesIndex: 0,
			
 
				+                data: rawData
			
 
				+            });
			
 
				+
			
 
				+            fetchData(idx + 1);
			
 
				+        };
			
 
				+
			
 
				+        xhr.send();
			
 
				+    }
			
 
				+
			
 
				+    option = {
			
 
				+        progressive: 20000,
			
 
				+        GLMap: {
			
 
				+            roam: true
			
 
				+        },
			
 
				+        title: {
			
 
				+            top: '10px',
			
 
				+            text: resources.text_echartsLinesMillions_waterSystem,
			
 
				+            subtext: resources.text_echartsLinesMillions_waterSystem_subtext,
			
 
				+            left: 'center',
			
 
				+            textStyle: {
			
 
				+                color: '#fff'
			
 
				+            },
			
 
				+            subtextStyle: {
			
 
				+                color: '#fff'
			
 
				+            }
			
 
				+        },
			
 
				+        coordinateSystem: 'GLMap',
			
 
				+        series:
			
 
				+            [{
			
 
				+                type: 'lines',
			
 
				+                blendMode: 'lighter',
			
 
				+                coordinateSystem: 'GLMap',
			
 
				+                dimensions: ['value'],
			
 
				+                data: new Float64Array(),
			
 
				+                polyline: true,
			
 
				+                large: true,
			
 
				+                lineStyle: {
			
 
				+                    color: '#0099FF',
			
 
				+                    width: 1,
			
 
				+                    opacity: 0.3
			
 
				+                }
			
 
				+            }]
			
 
				+    };
			
 
				+
			
 
				+    fetchData(0);
			
 
				+    echartslayer.chart.setOption(option);
			
 
				+
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/echarts_pie.html
+++ b/public/supermap/examples/mapboxgl/echarts_pie.html
@@ -0,0 +1,238 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<html>
			
 
				+<head>
			
 
				+    <meta charset='utf-8'/>
			
 
				+    <title data-i18n="resources.title_GraphPie"></title>
			
 
				+    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
			
 
				+    <style>
			
 
				+        body {
			
 
				+            margin: 0;
			
 
				+            padding: 0;
			
 
				+        }
			
 
				+
			
 
				+        #map {
			
 
				+            position: absolute;
			
 
				+            top: 0;
			
 
				+            bottom: 0;
			
 
				+            width: 100%;
			
 
				+        }
			
 
				+        #map .mapboxgl-popup-content {
			
 
				+          padding: 10px 16px 15px;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+<div id='map'></div>
			
 
				+<script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script>
			
 
				+<script type="text/javascript" include="echarts" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+<script type="text/javascript">
			
 
				+    var data;
			
 
				+    var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+            " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+            " Image <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a> | </span>" +
			
 
				+            " <a href='https://echarts.baidu.com' target='_blank'>© 2018 " + resources.title_3baidu + " ECharts</a>";
			
 
				+    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+    var tileURL = host + '/iserver/services/map-world/rest/maps/世界地图_Gray/zxyTileImage.png?prjCoordSys='+encodeURIComponent('{"epsgCode":3857}')+'&z={z}&x={x}&y={y}';
			
 
				+    var url = host + "/iserver/services/map-china400/rest/maps/China_4326";
			
 
				+    var chart, div, popup = '';
			
 
				+    var map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [tileURL],
			
 
				+                    "tileSize": 256,
			
 
				+                },
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+                "minzoom": 0,
			
 
				+                "maxzoom": 18
			
 
				+            }]
			
 
				+        },
			
 
				+        center: [116.402, 39.905],
			
 
				+        zoom: 3.5
			
 
				+    });
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+    map.loadImage('../img/marker-icon.png', function (error, image) {
			
 
				+        if (error) throw error;
			
 
				+        map.addImage('positionPoint', image);
			
 
				+    });
			
 
				+
			
 
				+    var categoryDataMap = {
			
 
				+        "北京市": [
			
 
				+            {value: 335, name: resources.text_class + 'A'},
			
 
				+            {value: 679, name: resources.text_class + 'B'},
			
 
				+            {value: 1299, name: resources.text_class + 'C'}
			
 
				+        ],
			
 
				+        "广州市": [
			
 
				+            {value: 117, name: resources.text_class + 'A'},
			
 
				+            {value: 1267, name: resources.text_class + 'B'},
			
 
				+            {value: 1048, name: resources.text_class + 'C'}
			
 
				+        ], "上海市": [
			
 
				+            {value: 475, name: resources.text_class + 'A'},
			
 
				+            {value: 1450, name: resources.text_class + 'B'},
			
 
				+            {value: 875, name: resources.text_class + 'C'}
			
 
				+        ]
			
 
				+    };
			
 
				+    var dataMap = {
			
 
				+        "北京市": [
			
 
				+            {value: 335, name: resources.text_commodity + 'A'},
			
 
				+            {value: 310, name: resources.text_commodity + 'B'},
			
 
				+            {value: 234, name: resources.text_commodity + 'C'},
			
 
				+            {value: 135, name: resources.text_commodity + 'D'},
			
 
				+            {value: 1048, name: resources.text_commodity + 'E'},
			
 
				+            {value: 251, name: resources.text_commodity + 'F'}
			
 
				+        ],
			
 
				+        "广州市": [
			
 
				+            {value: 117, name: resources.text_commodity + 'A'},
			
 
				+            {value: 284, name: resources.text_commodity + 'B'},
			
 
				+            {value: 768, name: resources.text_commodity + 'C'},
			
 
				+            {value: 215, name: resources.text_commodity + 'D'},
			
 
				+            {value: 901, name: resources.text_commodity + 'E'},
			
 
				+            {value: 148, name: resources.text_commodity + 'F'}
			
 
				+        ], "上海市": [
			
 
				+            {value: 475, name: resources.text_commodity + 'A'},
			
 
				+            {value: 29, name: resources.text_commodity + 'B'},
			
 
				+            {value: 430, name: resources.text_commodity + 'C'},
			
 
				+            {value: 981, name: resources.text_commodity + 'D'},
			
 
				+            {value: 732, name: resources.text_commodity + 'E'},
			
 
				+            {value: 143, name: resources.text_commodity + 'F'}
			
 
				+        ]
			
 
				+    };
			
 
				+
			
 
				+    var option = {
			
 
				+        title: {
			
 
				+            text: resources.text_beijingCommoditySales,
			
 
				+            subtext: resources.text_fictitiouData,
			
 
				+            textStyle: {
			
 
				+                color: '#fff',
			
 
				+                fontSize: 16
			
 
				+            }
			
 
				+        },
			
 
				+        backgroundColor: '#404a59',
			
 
				+        tooltip: {
			
 
				+            trigger: 'item',
			
 
				+            formatter: "{a} <br/>{b}: {c} ({d}%)"
			
 
				+        },
			
 
				+        legend: {
			
 
				+            orient: 'vertical',
			
 
				+            x: 'right',
			
 
				+            y: 'bottom',
			
 
				+            textStyle: {
			
 
				+                color: '#fff',
			
 
				+                fontSize: 12
			
 
				+            },
			
 
				+            data: [resources.text_commodity + 'A', resources.text_commodity + 'B', resources.text_commodity + 'C', resources.text_commodity + 'D', resources.text_commodity + 'E', resources.text_commodity + 'F']
			
 
				+        },
			
 
				+        series: [
			
 
				+            {
			
 
				+                name: resources.text_commodityClass,
			
 
				+                type: 'pie',
			
 
				+                selectedMode: 'single',
			
 
				+                radius: [0, '30%'],
			
 
				+
			
 
				+                label: {
			
 
				+                    normal: {
			
 
				+                        position: 'inner'
			
 
				+                    }
			
 
				+                },
			
 
				+                labelLine: {
			
 
				+                    normal: {
			
 
				+                        show: false
			
 
				+                    }
			
 
				+                },
			
 
				+                data: categoryDataMap['北京市']
			
 
				+            },
			
 
				+            {
			
 
				+                name: resources.text_commodity,
			
 
				+                type: 'pie',
			
 
				+                radius: ['40%', '55%'],
			
 
				+                data: dataMap['北京市']
			
 
				+            }
			
 
				+        ]
			
 
				+    };
			
 
				+
			
 
				+    div = document.createElement('div');
			
 
				+
			
 
				+    chart = echarts.init(div, '', {
			
 
				+        width: 650,
			
 
				+        height: 400
			
 
				+    });
			
 
				+    chart.setOption(option);
			
 
				+    query();
			
 
				+
			
 
				+
			
 
				+    function query() {
			
 
				+        var sqlParam = new SuperMap.QueryBySQLParameters({
			
 
				+            queryParams: [{
			
 
				+                name: "China_ProCenCity_pt@China",
			
 
				+                attributeFilter: "NAME = '广州市' or NAME = '上海市'"
			
 
				+            }, {
			
 
				+                name: "China_Capital_pt@China",
			
 
				+                attributeFilter: "NAME = '北京市'"
			
 
				+            }]
			
 
				+        });
			
 
				+
			
 
				+        queryService = new mapboxgl.supermap.QueryService(url).queryBySQL(sqlParam, function (serviceResult) {
			
 
				+
			
 
				+            var recordsets = serviceResult && serviceResult.result && serviceResult.result.recordsets;
			
 
				+            features = recordsets && recordsets[0] && recordsets[0].features;
			
 
				+            var featureCollection = features.features;
			
 
				+            var feature = recordsets[1].features.features;
			
 
				+            featureCollection.push(feature[0]);
			
 
				+
			
 
				+            var fs = {
			
 
				+                features: featureCollection,
			
 
				+                type: "FeatureCollection"
			
 
				+            };
			
 
				+            map.addLayer({
			
 
				+                "id": "points",
			
 
				+                "type": "symbol",
			
 
				+                "layout": {
			
 
				+                    "icon-image": "positionPoint",
			
 
				+                    "icon-size": 0.8,
			
 
				+                    "icon-offset": [0, -15] //设置偏移量
			
 
				+                },
			
 
				+                "source": {
			
 
				+                    "type": "geojson",
			
 
				+                    "data": fs
			
 
				+                }
			
 
				+            });
			
 
				+
			
 
				+            map.on('click', 'points', function (e) {
			
 
				+                popup = new mapboxgl.Popup({maxWidth: 'none'});
			
 
				+                popup.setLngLat(e.lngLat.toArray())
			
 
				+                    .setDOMContent(div) // sets a popup on this marker
			
 
				+                    .addTo(map);
			
 
				+
			
 
				+                var city = e.features[0].properties.NAME;
			
 
				+                chart.setOption({
			
 
				+                    title: {
			
 
				+                        text: city + resources.text_commoditySales
			
 
				+                    },
			
 
				+                    series: [
			
 
				+                        {
			
 
				+                            name: resources.text_commodityClass,
			
 
				+                            data: categoryDataMap[city]
			
 
				+                        },
			
 
				+                        {
			
 
				+                            name: resources.text_commodity,
			
 
				+                            data: dataMap[city]
			
 
				+                        }
			
 
				+                    ]
			
 
				+                });
			
 
				+            });
			
 
				+        });
			
 
				+    }
			
 
				+
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/echarts_scatter.html
+++ b/public/supermap/examples/mapboxgl/echarts_scatter.html
@@ -0,0 +1,416 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<html>
			
 
				+<head>
			
 
				+    <meta charset='utf-8'/>
			
 
				+    <title data-i18n="resources.title_Scatter"></title>
			
 
				+    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
			
 
				+    <style>
			
 
				+        body {
			
 
				+            margin: 0;
			
 
				+            padding: 0;
			
 
				+        }
			
 
				+
			
 
				+        #map {
			
 
				+            position: absolute;
			
 
				+            top: 0;
			
 
				+            bottom: 0;
			
 
				+            width: 100%;
			
 
				+        }
			
 
				+        #map .mapboxgl-popup-content {
			
 
				+          padding: 10px 16px 15px;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+<div id='map'></div>
			
 
				+<script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script>
			
 
				+<script type="text/javascript" include="echarts" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+<script type="text/javascript">
			
 
				+    var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
			
 
				+            " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
			
 
				+            " Image <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a> | </span>" +
			
 
				+            " <a href='https://echarts.baidu.com' target='_blank'>© 2018 " + resources.title_3baidu + " ECharts</a>";
			
 
				+    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+    var tileURL = host + '/iserver/services/map-world/rest/maps/世界地图_Gray/zxyTileImage.png?prjCoordSys='+encodeURIComponent('{"epsgCode":3857}')+'&z={z}&x={x}&y={y}';
			
 
				+    var url = host + "/iserver/services/map-china400/rest/maps/China_4326";
			
 
				+    var chart, div, popup = '', features = [];
			
 
				+    var map = new mapboxgl.Map({
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+            "version": 8,
			
 
				+            "sources": {
			
 
				+                "raster-tiles": {
			
 
				+                    "attribution": attribution,
			
 
				+                    "type": "raster",
			
 
				+                    "tiles": [tileURL],
			
 
				+                    "tileSize": 256,
			
 
				+                },
			
 
				+            },
			
 
				+            "layers": [{
			
 
				+                "id": "simple-tiles",
			
 
				+                "type": "raster",
			
 
				+                "source": "raster-tiles",
			
 
				+                "minzoom": 0,
			
 
				+                "maxzoom": 18
			
 
				+            }]
			
 
				+        },
			
 
				+        center: [116.402, 39.905],
			
 
				+        zoom: 3.5
			
 
				+    });
			
 
				+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
			
 
				+    map.loadImage('../img/marker-icon.png', function (error, image) {
			
 
				+        if (error) throw error;
			
 
				+        map.addImage('positionPoint', image);
			
 
				+    });
			
 
				+
			
 
				+    var dataBJ = [
			
 
				+        [1, 55, 9, 56, 0.46, 18, 6, resources.text_good],
			
 
				+        [2, 25, 11, 21, 0.65, 34, 9, resources.text_great],
			
 
				+        [3, 56, 7, 63, 0.3, 14, 5, resources.text_good],
			
 
				+        [4, 33, 7, 29, 0.33, 16, 6, resources.text_great],
			
 
				+        [5, 42, 24, 44, 0.76, 40, 16, resources.text_great],
			
 
				+        [6, 82, 58, 90, 1.77, 68, 33, resources.text_good],
			
 
				+        [7, 74, 49, 77, 1.46, 48, 27, resources.text_good],
			
 
				+        [8, 78, 55, 80, 1.29, 59, 29, resources.text_good],
			
 
				+        [9, 267, 216, 280, 4.8, 108, 64, resources.text_heavyPollution],
			
 
				+        [10, 185, 127, 216, 2.52, 61, 27, resources.text_moderatePollution],
			
 
				+        [11, 39, 19, 38, 0.57, 31, 15, resources.text_great],
			
 
				+        [12, 41, 11, 40, 0.43, 21, 7, resources.text_great],
			
 
				+        [13, 64, 38, 74, 1.04, 46, 22, resources.text_good],
			
 
				+        [14, 108, 79, 120, 1.7, 75, 41, resources.text_mildPollution],
			
 
				+        [15, 108, 63, 116, 1.48, 44, 26, resources.text_mildPollution],
			
 
				+        [16, 33, 6, 29, 0.34, 13, 5, resources.text_great],
			
 
				+        [17, 94, 66, 110, 1.54, 62, 31, resources.text_good],
			
 
				+        [18, 186, 142, 192, 3.88, 93, 79, resources.text_moderatePollution],
			
 
				+        [19, 57, 31, 54, 0.96, 32, 14, resources.text_good],
			
 
				+        [20, 22, 8, 17, 0.48, 23, 10, resources.text_great],
			
 
				+        [21, 39, 15, 36, 0.61, 29, 13, resources.text_great],
			
 
				+        [22, 94, 69, 114, 2.08, 73, 39, resources.text_good],
			
 
				+        [23, 99, 73, 110, 2.43, 76, 48, resources.text_good],
			
 
				+        [24, 31, 12, 30, 0.5, 32, 16, resources.text_great],
			
 
				+        [25, 42, 27, 43, 1, 53, 22, resources.text_great],
			
 
				+        [26, 154, 117, 157, 3.05, 92, 58, resources.text_moderatePollution],
			
 
				+        [27, 234, 185, 230, 4.09, 123, 69, resources.text_heavyPollution],
			
 
				+        [28, 160, 120, 186, 2.77, 91, 50, resources.text_moderatePollution],
			
 
				+        [29, 134, 96, 165, 2.76, 83, 41, resources.text_mildPollution],
			
 
				+        [30, 52, 24, 60, 1.03, 50, 21, resources.text_good],
			
 
				+        [31, 46, 5, 49, 0.28, 10, 6, resources.text_great]
			
 
				+    ];
			
 
				+
			
 
				+    var dataGZ = [
			
 
				+        [1, 26, 37, 27, 1.163, 27, 13, resources.text_great],
			
 
				+        [2, 85, 62, 71, 1.195, 60, 8, resources.text_good],
			
 
				+        [3, 78, 38, 74, 1.363, 37, 7, resources.text_good],
			
 
				+        [4, 21, 21, 36, 0.634, 40, 9, resources.text_great],
			
 
				+        [5, 41, 42, 46, 0.915, 81, 13, resources.text_great],
			
 
				+        [6, 56, 52, 69, 1.067, 92, 16, resources.text_good],
			
 
				+        [7, 64, 30, 28, 0.924, 51, 2, resources.text_good],
			
 
				+        [8, 55, 48, 74, 1.236, 75, 26, resources.text_good],
			
 
				+        [9, 76, 85, 113, 1.237, 114, 27, resources.text_good],
			
 
				+        [10, 91, 81, 104, 1.041, 56, 40, resources.text_good],
			
 
				+        [11, 84, 39, 60, 0.964, 25, 11, resources.text_good],
			
 
				+        [12, 64, 51, 101, 0.862, 58, 23, resources.text_good],
			
 
				+        [13, 70, 69, 120, 1.198, 65, 36, resources.text_good],
			
 
				+        [14, 77, 105, 178, 2.549, 64, 16, resources.text_good],
			
 
				+        [15, 109, 68, 87, 0.996, 74, 29, resources.text_mildPollution],
			
 
				+        [16, 73, 68, 97, 0.905, 51, 34, resources.text_good],
			
 
				+        [17, 54, 27, 47, 0.592, 53, 12, resources.text_good],
			
 
				+        [18, 51, 61, 97, 0.811, 65, 19, resources.text_good],
			
 
				+        [19, 91, 71, 121, 1.374, 43, 18, resources.text_good],
			
 
				+        [20, 73, 102, 182, 2.787, 44, 19, resources.text_good],
			
 
				+        [21, 73, 50, 76, 0.717, 31, 20, resources.text_good],
			
 
				+        [22, 84, 94, 140, 2.238, 68, 18, resources.text_good],
			
 
				+        [23, 93, 77, 104, 1.165, 53, 7, resources.text_good],
			
 
				+        [24, 99, 130, 227, 3.97, 55, 15, resources.text_good],
			
 
				+        [25, 146, 84, 139, 1.094, 40, 17, resources.text_mildPollution],
			
 
				+        [26, 113, 108, 137, 1.481, 48, 15, resources.text_mildPollution],
			
 
				+        [27, 81, 48, 62, 1.619, 26, 3, resources.text_good],
			
 
				+        [28, 56, 48, 68, 1.336, 37, 9, resources.text_good],
			
 
				+        [29, 82, 92, 174, 3.29, 0, 13, resources.text_good],
			
 
				+        [30, 106, 116, 188, 3.628, 101, 16, resources.text_mildPollution],
			
 
				+        [31, 118, 50, 0, 1.383, 76, 11, resources.text_mildPollution]
			
 
				+    ];
			
 
				+
			
 
				+    var dataSH = [
			
 
				+        [1, 91, 45, 125, 0.82, 34, 23, resources.text_good],
			
 
				+        [2, 65, 27, 78, 0.86, 45, 29, resources.text_good],
			
 
				+        [3, 83, 60, 84, 1.09, 73, 27, resources.text_good],
			
 
				+        [4, 109, 81, 121, 1.28, 68, 51, resources.text_mildPollution],
			
 
				+        [5, 106, 77, 114, 1.07, 55, 51, resources.text_mildPollution],
			
 
				+        [6, 109, 81, 121, 1.28, 68, 51, resources.text_mildPollution],
			
 
				+        [7, 106, 77, 114, 1.07, 55, 51, resources.text_mildPollution],
			
 
				+        [8, 89, 65, 78, 0.86, 51, 26, resources.text_good],
			
 
				+        [9, 53, 33, 47, 0.64, 50, 17, resources.text_good],
			
 
				+        [10, 80, 55, 80, 1.01, 75, 24, resources.text_good],
			
 
				+        [11, 117, 81, 124, 1.03, 45, 24, resources.text_mildPollution],
			
 
				+        [12, 99, 71, 142, 1.1, 62, 42, resources.text_good],
			
 
				+        [13, 95, 69, 130, 1.28, 74, 50, resources.text_good],
			
 
				+        [14, 116, 87, 131, 1.47, 84, 40, resources.text_mildPollution],
			
 
				+        [15, 108, 80, 121, 1.3, 85, 37, resources.text_mildPollution],
			
 
				+        [16, 134, 83, 167, 1.16, 57, 43, resources.text_mildPollution],
			
 
				+        [17, 79, 43, 107, 1.05, 59, 37, resources.text_good],
			
 
				+        [18, 71, 46, 89, 0.86, 64, 25, resources.text_good],
			
 
				+        [19, 97, 71, 113, 1.17, 88, 31, resources.text_good],
			
 
				+        [20, 84, 57, 91, 0.85, 55, 31, resources.text_good],
			
 
				+        [21, 87, 63, 101, 0.9, 56, 41, resources.text_good],
			
 
				+        [22, 104, 77, 119, 1.09, 73, 48, resources.text_mildPollution],
			
 
				+        [23, 87, 62, 100, 1, 72, 28, resources.text_good],
			
 
				+        [24, 168, 128, 172, 1.49, 97, 56, resources.text_moderatePollution],
			
 
				+        [25, 65, 45, 51, 0.74, 39, 17, resources.text_good],
			
 
				+        [26, 39, 24, 38, 0.61, 47, 17, resources.text_great],
			
 
				+        [27, 39, 24, 39, 0.59, 50, 19, resources.text_great],
			
 
				+        [28, 93, 68, 96, 1.05, 79, 29, resources.text_good],
			
 
				+        [29, 188, 143, 197, 1.66, 99, 51, resources.text_moderatePollution],
			
 
				+        [30, 174, 131, 174, 1.55, 108, 50, resources.text_moderatePollution],
			
 
				+        [31, 187, 143, 201, 1.39, 89, 53, resources.text_moderatePollution]
			
 
				+    ];
			
 
				+
			
 
				+    var schema = [
			
 
				+        {name: 'date', index: 0, text: "日"},
			
 
				+        {name: 'AQIindex', index: 1, text: resources.text_AQIindex},
			
 
				+        {name: 'PM25', index: 2, text: 'PM2.5'},
			
 
				+        {name: 'PM10', index: 3, text: 'PM10'},
			
 
				+        {name: 'CO', index: 4, text: resources.text_CO},
			
 
				+        {name: 'NO2', index: 5, text: resources.text_NO2},
			
 
				+        {name: 'SO2', index: 6, text: resources.text_SO2}
			
 
				+    ];
			
 
				+
			
 
				+    var dataMap = {"北京市": dataBJ, "广州市": dataGZ, "上海市": dataSH};
			
 
				+
			
 
				+    var colorMap = {"北京市": '#dd4444', "广州市": '#fec42c', "上海市": '#80F1BE'};
			
 
				+    var itemStyle = {
			
 
				+        normal: {
			
 
				+            opacity: 0.8,
			
 
				+            shadowBlur: 10,
			
 
				+            shadowOffsetX: 0,
			
 
				+            shadowOffsetY: 0,
			
 
				+            shadowColor: 'rgba(0, 0, 0, 0.5)'
			
 
				+        }
			
 
				+    };
			
 
				+
			
 
				+    option = {
			
 
				+        backgroundColor: '#404a59',
			
 
				+        color: [
			
 
				+            '#dd4444'
			
 
				+        ],
			
 
				+        legend: {
			
 
				+            y: 'top',
			
 
				+            data: ['北京市'],
			
 
				+            textStyle: {
			
 
				+                color: '#fff',
			
 
				+                fontSize: 16
			
 
				+            },
			
 
				+            selectedMode: 'single'
			
 
				+        },
			
 
				+        grid: {
			
 
				+            x: '10%',
			
 
				+            x2: 150,
			
 
				+            y: '18%',
			
 
				+            y2: '10%'
			
 
				+        },
			
 
				+        tooltip: {
			
 
				+            padding: 10,
			
 
				+            backgroundColor: '#222',
			
 
				+            borderColor: '#777',
			
 
				+            borderWidth: 1,
			
 
				+            formatter: function (obj) {
			
 
				+                var value = obj.value;
			
 
				+                return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
			
 
				+                    + obj.seriesName + ' ' + resources.text_day1 + value[0] + resources.text_day2
			
 
				+                    + value[7]
			
 
				+                    + '</div>'
			
 
				+                    + schema[1].text + '：' + value[1] + '<br>'
			
 
				+                    + schema[2].text + '：' + value[2] + '<br>'
			
 
				+                    + schema[3].text + '：' + value[3] + '<br>'
			
 
				+                    + schema[4].text + '：' + value[4] + '<br>'
			
 
				+                    + schema[5].text + '：' + value[5] + '<br>'
			
 
				+                    + schema[6].text + '：' + value[6] + '<br>';
			
 
				+            }
			
 
				+        },
			
 
				+        xAxis: {
			
 
				+            type: 'value',
			
 
				+            name: resources.text_data,
			
 
				+            nameGap: 16,
			
 
				+            nameTextStyle: {
			
 
				+                color: '#fff',
			
 
				+                fontSize: 14
			
 
				+            },
			
 
				+            max: 31,
			
 
				+            splitLine: {
			
 
				+                show: false
			
 
				+            },
			
 
				+            axisLine: {
			
 
				+                lineStyle: {
			
 
				+                    color: '#eee'
			
 
				+                }
			
 
				+            }
			
 
				+        },
			
 
				+        yAxis: {
			
 
				+            type: 'value',
			
 
				+            name: resources.text_AQIindex,
			
 
				+            nameLocation: 'end',
			
 
				+            nameGap: 20,
			
 
				+            nameTextStyle: {
			
 
				+                color: '#fff',
			
 
				+                fontSize: 16
			
 
				+            },
			
 
				+            axisLine: {
			
 
				+                lineStyle: {
			
 
				+                    color: '#eee'
			
 
				+                }
			
 
				+            },
			
 
				+            splitLine: {
			
 
				+                show: false
			
 
				+            }
			
 
				+        },
			
 
				+        visualMap: [
			
 
				+            {
			
 
				+                left: 'right',
			
 
				+                top: '5%',
			
 
				+                dimension: 2,
			
 
				+                min: 0,
			
 
				+                max: 250,
			
 
				+                itemWidth: 20,
			
 
				+                itemHeight: 80,
			
 
				+                calculable: true,
			
 
				+                precision: 0.1,
			
 
				+                text: [resources.text_roundSize],
			
 
				+                textGap: 20,
			
 
				+                textStyle: {
			
 
				+                    color: '#fff'
			
 
				+                },
			
 
				+                inRange: {
			
 
				+                    symbolSize: [10, 70]
			
 
				+                },
			
 
				+                outOfRange: {
			
 
				+                    symbolSize: [10, 70],
			
 
				+                    color: ['rgba(255,255,255,.2)']
			
 
				+                },
			
 
				+                controller: {
			
 
				+                    inRange: {
			
 
				+                        color: ['#c23531']
			
 
				+                    },
			
 
				+                    outOfRange: {
			
 
				+                        color: ['#444']
			
 
				+                    }
			
 
				+                }
			
 
				+            },
			
 
				+            {
			
 
				+                left: 'right',
			
 
				+                bottom: '5%',
			
 
				+                dimension: 6,
			
 
				+                min: 0,
			
 
				+                max: 50,
			
 
				+                itemHeight: 80,
			
 
				+                itemWidth: 20,
			
 
				+                calculable: true,
			
 
				+                precision: 0.1,
			
 
				+                text: [resources.text_SO2text],
			
 
				+                textGap: 20,
			
 
				+                textStyle: {
			
 
				+                    color: '#fff'
			
 
				+                },
			
 
				+                inRange: {
			
 
				+                    colorLightness: [1, 0.5]
			
 
				+                },
			
 
				+                outOfRange: {
			
 
				+                    color: ['rgba(255,255,255,.2)']
			
 
				+                },
			
 
				+                controller: {
			
 
				+                    inRange: {
			
 
				+                        color: ['#c23531']
			
 
				+                    },
			
 
				+                    outOfRange: {
			
 
				+                        color: ['#444']
			
 
				+                    }
			
 
				+                }
			
 
				+            }
			
 
				+        ],
			
 
				+        series: [
			
 
				+            {
			
 
				+                name: '北京市',
			
 
				+                type: 'scatter',
			
 
				+                itemStyle: itemStyle,
			
 
				+                data: dataBJ
			
 
				+            }
			
 
				+        ]
			
 
				+    };
			
 
				+    div = document.createElement('div');
			
 
				+    chart = echarts.init(div, '', {
			
 
				+        width: 450,
			
 
				+        height: 350
			
 
				+    });
			
 
				+
			
 
				+    chart.setOption(option);
			
 
				+    query();
			
 
				+
			
 
				+    function query() {
			
 
				+        var sqlParam = new SuperMap.QueryBySQLParameters({
			
 
				+            queryParams: [{
			
 
				+                name: "China_ProCenCity_pt@China",
			
 
				+                attributeFilter: "NAME = '广州市' or NAME = '上海市'"
			
 
				+            }, {
			
 
				+                name: "China_Capital_pt@China",
			
 
				+                attributeFilter: "NAME = '北京市'"
			
 
				+            }]
			
 
				+        });
			
 
				+
			
 
				+        queryService = new mapboxgl.supermap.QueryService(url).queryBySQL(sqlParam, function (serviceResult) {
			
 
				+            var recordsets = serviceResult && serviceResult.result && serviceResult.result.recordsets;
			
 
				+            features = recordsets && recordsets[0] && recordsets[0].features;
			
 
				+            var featureCollection = features.features;
			
 
				+            var feature = recordsets[1].features.features;
			
 
				+            featureCollection.push(feature[0]);
			
 
				+
			
 
				+            var fs = {
			
 
				+                features: featureCollection,
			
 
				+                type: "FeatureCollection"
			
 
				+            };
			
 
				+
			
 
				+            map.addLayer({
			
 
				+                "id": "points",
			
 
				+                "type": "symbol",
			
 
				+                "layout": {
			
 
				+                    "icon-image": "positionPoint",
			
 
				+                    "icon-size": 0.8,
			
 
				+                    "icon-offset": [0, -15] //设置偏移量
			
 
				+                },
			
 
				+                "source": {
			
 
				+                    "type": "geojson",
			
 
				+                    "data": fs
			
 
				+                }
			
 
				+            });
			
 
				+
			
 
				+            map.on('click', 'points', function (e) {
			
 
				+                popup = new mapboxgl.Popup({maxWidth: 'none'});
			
 
				+                popup.setLngLat(e.lngLat.toArray())
			
 
				+                    .setDOMContent(div) // sets a popup on this marker
			
 
				+                    .addTo(map);
			
 
				+
			
 
				+                var city = e.features[0].properties.NAME;
			
 
				+                chart.setOption({
			
 
				+                    color: [
			
 
				+                        colorMap[city]
			
 
				+                    ],
			
 
				+                    legend: {
			
 
				+                        data: [city]
			
 
				+                    },
			
 
				+                    series: [
			
 
				+                        {
			
 
				+                            name: city,
			
 
				+                            type: 'scatter',
			
 
				+                            itemStyle: itemStyle,
			
 
				+                            data: dataMap[city]
			
 
				+                        }
			
 
				+                    ]
			
 
				+                });
			
 
				+
			
 
				+            });
			
 
				+        });
			
 
				+    }
			
 
				+
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/mapboxgl/echarts_scatterDrawMillionsNewYorkTaxiPoints.html
+++ b/public/supermap/examples/mapboxgl/echarts_scatterDrawMillionsNewYorkTaxiPoints.html