2 年之前 · 8831f2b02b
--- a/public/index.html
+++ b/public/index.html
@@ -196,24 +196,31 @@
 
				   </style>
			
 
				   </head>
			
 
				   <body>
			
 
				-<!--  <link rel="stylesheet" href="./supermap/libs/plotting/leaflet/10.2.1/iclient-plot-leaflet.css">-->
			
 
				-<script type="text/javascript" include="leaflet,leaflet.sidebyside,iclient-leaflet,iclient-plot-leaflet,leaflet.draw,leaflet.markercluster,leaflet.heat" src="./supermap/dist/leaflet/include-leaflet.js"></script>
			
 
				-<!--  <script type="text/javascript" include="iclient-classic" src="./supermap/dist/classic/include-classic.js"></script>-->
			
 
				-<!--  <script type="text/javascript" src="./supermap/libs/plotting/leaflet/10.2.1/iclient-plot-leaflet-es6.min.js"></script>-->
			
 
				-  <script type="text/javascript" include="PlotPanel,StylePanel,SMLInfosPanel,iPortalStylePanel" src="./supermap/examples/js/plottingPanel/PlottingPanel.Include.js"></script>
			
 
				-
			
 
				-<!--三个必要的js文件引入-->
			
 
				-<script src="./hk/jquery-1.12.4.min.js"></script>
			
 
				-<script src="./hk/jsencrypt.min.js"></script>            <!-- 用于RSA加密 -->
			
 
				-<script src="./hk/jsWebControl-1.0.0.min.js"></script>   <!-- 用于前端与插件交互 -->
			
 
				-
			
 
				-    <div id="app">
			
 
				-	    <div id="loader-wrapper">
			
 
				-		    <div id="loader"></div>
			
 
				-		    <div class="loader-section section-left"></div>
			
 
				-		    <div class="loader-section section-right"></div>
			
 
				-		    <div class="load_title">正在加载系统资源，请耐心等待</div>
			
 
				-        </div>
			
 
				-	</div>
			
 
				+  <!--三个必要的js文件引入-->
			
 
				+  <!--<script src="./hk/jquery-1.12.4.min.js"></script>-->
			
 
				+  <script src="hk/jsencrypt.min.js"></script>            <!-- 用于RSA加密 -->
			
 
				+  <script src="hk/jsWebControl-1.0.0.min.js"></script>   <!-- 用于前端与插件交互 -->
			
 
				+  <!--<script src="h5player/h5player.min.js"></script>-->
			
 
				+
			
 
				+
			
 
				+
			
 
				+  <!--  <link rel="stylesheet" href="./supermap/libs/plotting/leaflet/10.2.1/iclient-plot-leaflet.css">-->
			
 
				+  <script type="text/javascript"
			
 
				+          include="leaflet,leaflet.sidebyside,iclient-leaflet,iclient-plot-leaflet,leaflet.draw,leaflet.markercluster,leaflet.heat"
			
 
				+          src="./supermap/dist/leaflet/include-leaflet.js"></script>
			
 
				+  <script type="text/javascript" include="bootstrap,plottingPanel,fileupLoad,widgets.alert"
			
 
				+          src="./supermap/examples/js/include-web.js"></script>
			
 
				+  <!--  <script type="text/javascript" include="iclient-classic" src="./supermap/dist/classic/include-classic.js"></script>-->
			
 
				+  <!--  <script type="text/javascript" src="./supermap/libs/plotting/leaflet/10.2.1/iclient-plot-leaflet-es6.min.js"></script>-->
			
 
				+  <script type="text/javascript" include="PlotPanel,StylePanel,SMLInfosPanel,iPortalStylePanel"
			
 
				+          src="./supermap/examples/js/plottingPanel/PlottingPanel.Include.js"></script>
			
 
				+  <div id="app">
			
 
				+    <div id="loader-wrapper">
			
 
				+      <div id="loader"></div>
			
 
				+      <div class="loader-section section-left"></div>
			
 
				+      <div class="loader-section section-right"></div>
			
 
				+      <div class="load_title">正在加载系统资源，请耐心等待</div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				   </body>
			
 
				 </html>
			
--- a/public/supermap/examples/component/components_animate_marker_layer_react.html
+++ b/public/supermap/examples/component/components_animate_marker_layer_react.html
@@ -0,0 +1,256 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+  <head>
			
 
				+    <meta charset="UTF-8" />
			
 
				+    <title data-i18n="resources.title_componentsAnimateMarkerLayer_React"></title>
			
 
				+    <script type="text/javascript" include="react,jquery" src="../js/include-web.js"></script>
			
 
				+    <script
			
 
				+      type="text/javascript"
			
 
				+      include="antd,mapbox-gl-enhance,iclient-mapboxgl-react"
			
 
				+      src="../../dist/mapboxgl/include-mapboxgl.js"
			
 
				+    ></script>
			
 
				+    <style>
			
 
				+      #main {
			
 
				+        margin: 0 auto;
			
 
				+        width: 100%;
			
 
				+        height: 100%;
			
 
				+      }
			
 
				+      .radio-group {
			
 
				+        position: absolute;
			
 
				+        left: 10px;
			
 
				+        top: 10px;
			
 
				+        text-align: center;
			
 
				+        background: transparent;
			
 
				+        z-index: 1000;
			
 
				+      }
			
 
				+      .radio-btn-wrap {
			
 
				+        margin: 0;
			
 
				+        padding: 0;
			
 
				+        list-style: none;
			
 
				+        color: rgb(255, 255, 255);
			
 
				+        font-size: 14px;
			
 
				+      }
			
 
				+      .radio-btn-item {
			
 
				+        display: inline-block;
			
 
				+        height: 32px;
			
 
				+        line-height: 30px;
			
 
				+        padding: 1px 15px;
			
 
				+        background: rgb(0, 0, 0);
			
 
				+        border: 1px solid rgb(73, 73, 73);
			
 
				+        color: rgb(255, 255, 255);
			
 
				+        font-weight: bold;
			
 
				+      }
			
 
				+      .radio-btn-item:hover {
			
 
				+        cursor: pointer;
			
 
				+      }
			
 
				+      .active-btn-item {
			
 
				+        color: #1890ff;
			
 
				+        border: 1px solid #1890ff;
			
 
				+        border-radius: 4px 0 0 4px;
			
 
				+        border-left: 1px solid #1890ff !important;
			
 
				+      }
			
 
				+    </style>
			
 
				+  </head>
			
 
				+
			
 
				+  <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
			
 
				+    <div id="main"></div>
			
 
				+    <script type="text/babel">
			
 
				+      var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
			
 
				+      var url = host + '/iserver/services/map-china400/rest/maps/China';
			
 
				+      var param = new SuperMap.QueryBySQLParameters({
			
 
				+        queryParams: {
			
 
				+          name: 'China_provincename_A_txt@China',
			
 
				+          attributeFilter: 'SMID > 0'
			
 
				+        }
			
 
				+      });
			
 
				+      var mapUrl = host + '/iserver/services/map-china400/rest/maps/ChinaDark';
			
 
				+      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 mapOptions = {
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+          version: 8,
			
 
				+          sources: {
			
 
				+            'raster-tiles': {
			
 
				+              attribution: attribution,
			
 
				+              type: 'raster',
			
 
				+              tiles: [mapUrl + '/zxyTileImage.png?z={z}&x={x}&y={y}'],
			
 
				+              tileSize: 256
			
 
				+            }
			
 
				+          },
			
 
				+          layers: [
			
 
				+            {
			
 
				+              id: 'simple-tiles',
			
 
				+              type: 'raster',
			
 
				+              source: 'raster-tiles',
			
 
				+              minzoom: 0,
			
 
				+              maxzoom: 22
			
 
				+            }
			
 
				+          ]
			
 
				+        },
			
 
				+        center: [105.98046235680022, 28.528014198723596],
			
 
				+        zoom: 5.151412188068154,
			
 
				+        bearing: 0.8568,
			
 
				+        pitch: 60
			
 
				+      };
			
 
				+
			
 
				+      var SmWebMap = SuperMap.Components.SmWebMap;
			
 
				+      var SmAnimateMarkerLayer = SuperMap.Components.SmAnimateMarkerLayer;
			
 
				+      // 类型选择
			
 
				+      class RadioButton extends React.Component {
			
 
				+        constructor(props) {
			
 
				+          super(props);
			
 
				+          this.state = { type: 'breathingAperture' };
			
 
				+          this.clickHandler = this.clickHandler.bind(this);
			
 
				+        }
			
 
				+        clickHandler(type) {
			
 
				+          this.setState({ type });
			
 
				+          this.props.onTypeChange(type);
			
 
				+        }
			
 
				+        render() {
			
 
				+          return (
			
 
				+            <div class="radio-group">
			
 
				+              <ul class="radio-btn-wrap">
			
 
				+                <li
			
 
				+                  class={this.state.type === 'breathingAperture' ? 'radio-btn-item active-btn-item' : 'radio-btn-item'}
			
 
				+                  value="breathingAperture"
			
 
				+                  onClick={e => {
			
 
				+                    this.clickHandler('breathingAperture');
			
 
				+                  }}
			
 
				+                >
			
 
				+                  {resources.btn_breathingAperture}
			
 
				+                </li>
			
 
				+                <li
			
 
				+                  class={this.state.type === 'haloRing' ? 'radio-btn-item active-btn-item' : 'radio-btn-item'}
			
 
				+                  value="haloRing"
			
 
				+                  onClick={e => {
			
 
				+                    this.clickHandler('haloRing');
			
 
				+                  }}
			
 
				+                >
			
 
				+                  {resources.btn_haloRing}
			
 
				+                </li>
			
 
				+                <li
			
 
				+                  class={this.state.type === 'rotatingAperture' ? 'radio-btn-item active-btn-item' : 'radio-btn-item'}
			
 
				+                  value="rotatingAperture"
			
 
				+                  onClick={e => {
			
 
				+                    this.clickHandler('rotatingAperture');
			
 
				+                  }}
			
 
				+                >
			
 
				+                  {resources.btn_rotatingAperture}
			
 
				+                </li>
			
 
				+                <li
			
 
				+                  class={this.state.type === 'diffusedAperture' ? 'radio-btn-item active-btn-item' : 'radio-btn-item'}
			
 
				+                  value="diffusedAperture"
			
 
				+                  onClick={e => {
			
 
				+                    this.clickHandler('diffusedAperture');
			
 
				+                  }}
			
 
				+                >
			
 
				+                  {resources.btn_diffusedAperture}
			
 
				+                </li>
			
 
				+                <li
			
 
				+                  class={this.state.type === 'rotatingTextBorder' ? 'radio-btn-item active-btn-item' : 'radio-btn-item'}
			
 
				+                  value="rotatingTextBorder"
			
 
				+                  onClick={e => {
			
 
				+                    this.clickHandler('rotatingTextBorder');
			
 
				+                  }}
			
 
				+                >
			
 
				+                  {resources.btn_rotatingTextBorder}
			
 
				+                </li>
			
 
				+                <li
			
 
				+                  class={this.state.type === 'fluorescence' ? 'radio-btn-item active-btn-item' : 'radio-btn-item'}
			
 
				+                  value="fluorescence"
			
 
				+                  onClick={e => {
			
 
				+                    this.clickHandler('fluorescence');
			
 
				+                  }}
			
 
				+                >
			
 
				+                  {resources.btn_fluorescence}
			
 
				+                </li>
			
 
				+              </ul>
			
 
				+            </div>
			
 
				+          );
			
 
				+        }
			
 
				+      }
			
 
				+      class App extends React.Component {
			
 
				+        constructor(props) {
			
 
				+          super(props);
			
 
				+          this.state = {
			
 
				+            type: 'breathingAperture',
			
 
				+            breathingApertureParam: {
			
 
				+              width: 80
			
 
				+            },
			
 
				+            haloRingParam: {
			
 
				+              width: 44
			
 
				+            },
			
 
				+            rotatingTextBorderParam: {
			
 
				+              width: 120
			
 
				+            },
			
 
				+            param: null
			
 
				+          };
			
 
				+          this.onTypeChange = this.onTypeChange.bind(this);
			
 
				+          this.changeParam = this.changeParam.bind(this);
			
 
				+        }
			
 
				+        onTypeChange(type) {
			
 
				+          this.setState({ type });
			
 
				+          this.changeParam(type);
			
 
				+        }
			
 
				+        changeParam(type) {
			
 
				+          let param;
			
 
				+          if (this.state[type + 'Param']) {
			
 
				+            param = this.state[type + 'Param'];
			
 
				+          } else {
			
 
				+            param = null;
			
 
				+          }
			
 
				+          this.setState({
			
 
				+            param
			
 
				+          });
			
 
				+        }
			
 
				+        componentDidMount() {
			
 
				+          this.setState({
			
 
				+            param: this.state.breathingApertureParam
			
 
				+          });
			
 
				+        }
			
 
				+        render() {
			
 
				+          return (
			
 
				+            <SmWebMap mapOptions={this.props.mapOptions}>
			
 
				+              <RadioButton onTypeChange={this.onTypeChange} />
			
 
				+              <SmAnimateMarkerLayer
			
 
				+                features={this.props.features}
			
 
				+                type={this.state.type}
			
 
				+                width={this.state.param && this.state.param.width}
			
 
				+                textField="name"
			
 
				+                fitBounds={false}
			
 
				+              />
			
 
				+            </SmWebMap>
			
 
				+          );
			
 
				+        }
			
 
				+      }
			
 
				+      var 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;
			
 
				+        features.features.forEach(function(feature) {
			
 
				+          feature.geometry.coordinates = _unproject(feature.geometry.coordinates);
			
 
				+          feature.properties.name = feature.properties.texts[0];
			
 
				+        });
			
 
				+        // 渲染App组件
			
 
				+        ReactDOM.render(<App mapOptions={mapOptions} features={features} />, document.getElementById('main'));
			
 
				+      });
			
 
				+      function _unproject(point) {
			
 
				+        var d = 180 / Math.PI,
			
 
				+          r = 6378137,
			
 
				+          ts = Math.exp(-point[1] / r),
			
 
				+          phi = Math.PI / 2 - 2 * Math.atan(ts);
			
 
				+        for (var i = 0, dphi = 0.1, con; i < 15 && Math.abs(dphi) > 1e-7; i++) {
			
 
				+          con = 1;
			
 
				+          dphi = Math.PI / 2 - 2 * Math.atan(ts * con) - phi;
			
 
				+          phi += dphi;
			
 
				+        }
			
 
				+        return [(point[0] * d) / r, phi * d];
			
 
				+      }
			
 
				+    </script>
			
 
				+  </body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_animate_marker_layer_vue.html
+++ b/public/supermap/examples/component/components_animate_marker_layer_vue.html
@@ -0,0 +1,160 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+    <head>
			
 
				+        <meta charset="UTF-8" />
			
 
				+        <title data-i18n="resources.title_componentsAnimateMarkerLayer_Vue"></title>
			
 
				+        <script type="text/javascript" include="vue,jquery" src="../js/include-web.js"></script>
			
 
				+        <script
			
 
				+            type="text/javascript"
			
 
				+            include="mapbox-gl-enhance,iclient-mapboxgl-vue"
			
 
				+            src="../../dist/mapboxgl/include-mapboxgl.js"
			
 
				+        ></script>
			
 
				+        <style>
			
 
				+            #main {
			
 
				+                margin: 0 auto;
			
 
				+                width: 100%;
			
 
				+                height: 100%;
			
 
				+            }
			
 
				+            .radio-group {
			
 
				+                position: absolute;
			
 
				+                left: 10px;
			
 
				+                top: 10px;
			
 
				+                text-align: center;
			
 
				+                background: transparent;
			
 
				+                z-index: 1000;
			
 
				+            }
			
 
				+            .sm-component-radio-button-wrapper {
			
 
				+                background: rgb(0, 0, 0) !important;
			
 
				+                border: 1px solid rgb(73, 73, 73);
			
 
				+                color: rgb(255, 255, 255);
			
 
				+                font-weight: bold;
			
 
				+            }
			
 
				+            .sm-component-radio-button-wrapper:first-child {
			
 
				+                border-left: 1px solid rgb(73, 73, 73);
			
 
				+            }
			
 
				+            .sm-component-radio-button-wrapper:not(:first-child):before {
			
 
				+                background-color: transparent;
			
 
				+            }
			
 
				+        </style>
			
 
				+    </head>
			
 
				+
			
 
				+    <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
			
 
				+        <div id="main">
			
 
				+            <sm-web-map :map-options="mapOptions" style="background:black">
			
 
				+                <sm-animate-marker-layer
			
 
				+                    :features="features"
			
 
				+                    :type="type"
			
 
				+                    text-field="name"
			
 
				+                    :fit-bounds="false"
			
 
				+                    v-bind="param"
			
 
				+                ></sm-animate-marker-layer>
			
 
				+            </sm-web-map>
			
 
				+            <sm-radio-group class="radio-group" v-model="type" @change="changeType">
			
 
				+                <sm-radio-button value="breathingAperture">{{ resources.btn_breathingAperture }}</sm-radio-button>
			
 
				+                <sm-radio-button value="haloRing">{{ resources.btn_haloRing }}</sm-radio-button>
			
 
				+                <sm-radio-button value="rotatingAperture">{{ resources.btn_rotatingAperture }}</sm-radio-button>
			
 
				+                <sm-radio-button value="diffusedAperture">{{ resources.btn_diffusedAperture }}</sm-radio-button>
			
 
				+                <sm-radio-button value="rotatingTextBorder">{{ resources.btn_rotatingTextBorder }}</sm-radio-button>
			
 
				+                <sm-radio-button value="fluorescence">{{ resources.btn_fluorescence }}</sm-radio-button>
			
 
				+            </sm-radio-group>
			
 
				+        </div>
			
 
				+        <script>
			
 
				+            var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
			
 
				+            var url = host + '/iserver/services/map-china400/rest/maps/China';
			
 
				+            var param = new SuperMap.QueryBySQLParameters({
			
 
				+                queryParams: {
			
 
				+                    name: 'China_provincename_A_txt@China',
			
 
				+                    attributeFilter: 'SMID > 0'
			
 
				+                }
			
 
				+            });
			
 
				+
			
 
				+            var 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;
			
 
				+                features.features.forEach(function(feature){
			
 
				+                    feature.geometry.coordinates = _unproject(feature.geometry.coordinates);
			
 
				+                    feature.properties.name = feature.properties.texts[0];
			
 
				+                });
			
 
				+                new Vue({
			
 
				+                    el: '#main',
			
 
				+                    data() {
			
 
				+                        var mapUrl = host + '/iserver/services/map-china400/rest/maps/ChinaDark';
			
 
				+                        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> ";
			
 
				+                        return {
			
 
				+                            features: features,
			
 
				+                            type: 'breathingAperture',
			
 
				+                            breathingApertureParam: {
			
 
				+                                width: 80
			
 
				+                            },
			
 
				+                            haloRingParam: {
			
 
				+                                width: 44
			
 
				+                            },
			
 
				+                            rotatingTextBorderParam: {
			
 
				+                                width: 120
			
 
				+                            },
			
 
				+                            param: null,
			
 
				+                            mapOptions: {
			
 
				+                                container: 'map',
			
 
				+                                style: {
			
 
				+                                    version: 8,
			
 
				+                                    sources: {
			
 
				+                                        'raster-tiles': {
			
 
				+                                            attribution: attribution,
			
 
				+                                            type: 'raster',
			
 
				+                                            tiles: [mapUrl + '/zxyTileImage.png?z={z}&x={x}&y={y}'],
			
 
				+                                            tileSize: 256
			
 
				+                                        }
			
 
				+                                    },
			
 
				+                                    layers: [
			
 
				+                                        {
			
 
				+                                            id: 'simple-tiles',
			
 
				+                                            type: 'raster',
			
 
				+                                            source: 'raster-tiles',
			
 
				+                                            minzoom: 0,
			
 
				+                                            maxzoom: 22
			
 
				+                                        }
			
 
				+                                    ]
			
 
				+                                },
			
 
				+                                center: [105.98046235680022, 28.528014198723596],
			
 
				+                                zoom: 5.151412188068154,
			
 
				+                                bearing: 0.8568,
			
 
				+                                pitch: 60
			
 
				+                            }
			
 
				+                        };
			
 
				+                    },
			
 
				+                    mounted() {
			
 
				+                        this.param = this.breathingApertureParam;
			
 
				+                    },
			
 
				+                    methods: {
			
 
				+                        changeType() {
			
 
				+                            if (this[this.type + 'Param']) {
			
 
				+                                this.param = this[this.type + 'Param'];
			
 
				+                            } else {
			
 
				+                                this.param = null;
			
 
				+                            }
			
 
				+                        }
			
 
				+                    }
			
 
				+                });
			
 
				+            });
			
 
				+
			
 
				+            function _unproject(point) {
			
 
				+                var d = 180 / Math.PI,
			
 
				+                    r = 6378137,
			
 
				+                    ts = Math.exp(-point[1] / r),
			
 
				+                    phi = Math.PI / 2 - 2 * Math.atan(ts);
			
 
				+                for (var i = 0, dphi = 0.1, con; i < 15 && Math.abs(dphi) > 1e-7; i++) {
			
 
				+                    con = 1;
			
 
				+                    dphi = Math.PI / 2 - 2 * Math.atan(ts * con) - phi;
			
 
				+                    phi += dphi;
			
 
				+                }
			
 
				+                return [(point[0] * d) / r, phi * d];
			
 
				+            }
			
 
				+        </script>
			
 
				+    </body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_attributes_vue.html
+++ b/public/supermap/examples/component/components_attributes_vue.html
@@ -0,0 +1,72 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+    <head>
			
 
				+        <meta charset="UTF-8" />
			
 
				+        <title data-i18n="resources.title_attributes_Vue"></title>
			
 
				+        <script type="text/javascript" include="vue" src="../js/include-web.js"></script>
			
 
				+        <script include="iclient-mapboxgl-vue,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+        <style>
			
 
				+            #main {
			
 
				+                margin: 0 auto;
			
 
				+                width: 100%;
			
 
				+                height: 100%;
			
 
				+            }
			
 
				+        </style>
			
 
				+    </head>
			
 
				+
			
 
				+    <body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
			
 
				+        <div id="main">
			
 
				+            <sm-web-map style="height: 500px" server-url="https://www.supermapol.com/" map-id="505367620"></sm-web-map>
			
 
				+            <div style="position: relative; height: 400px; width: 100%">
			
 
				+                <sm-attributes layer-name="全国671个气象站观测数据" :field-configs="fieldConfigs"></sm-attributes>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+
			
 
				+        <script>
			
 
				+            new Vue({
			
 
				+                el: '#main',
			
 
				+                data() {
			
 
				+                    return {
			
 
				+                        fieldConfigs: [
			
 
				+                            { value: '平均最低气温_Num', visible: false },
			
 
				+                            { value: 'SmID', visible: false },
			
 
				+                            {
			
 
				+                                value: '站台',
			
 
				+                                visible: true,
			
 
				+                                filters: [
			
 
				+                                    { text: '塔城', value: '塔城' },
			
 
				+                                    { text: '大同', value: '大同' },
			
 
				+                                    { text: '石家庄', value: '石家庄' }
			
 
				+                                ],
			
 
				+                                onFilter: (value, record) => record['站台'].indexOf(value) === 0
			
 
				+                            },
			
 
				+                            {
			
 
				+                                value: '省份',
			
 
				+                                visible: true,
			
 
				+                                onFilter: (value, record) => record['省份'].indexOf(value) === 0,
			
 
				+                                scopedSlots: {
			
 
				+                                    filterDropdown: 'filterDropdown',
			
 
				+                                    filterIcon: 'filterIcon',
			
 
				+                                    customRender: 'customRender'
			
 
				+                                }
			
 
				+                            },
			
 
				+                            { value: '海拔', visible: false },
			
 
				+                            { value: '最高气温_Num', visible: false },
			
 
				+                            { value: '最高气温', visible: false },
			
 
				+                            { value: '最高七天气温_Num', visible: false },
			
 
				+                            { value: '最热七天气温', visible: true, defaultSortOrder: 'descend' },
			
 
				+                            { value: '最低气温_Num', visible: false },
			
 
				+                            { value: '最低气温', visible: false },
			
 
				+                            { value: '年均降雨_Num', visible: false },
			
 
				+                            { value: 'lon', visible: true, title: '经度', width: 250 },
			
 
				+                            { value: 'lat', visible: true, title: '纬度', width: 250 }
			
 
				+                        ]
			
 
				+                    };
			
 
				+                }
			
 
				+            });
			
 
				+        </script>
			
 
				+    </body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_basic_vue.html
+++ b/public/supermap/examples/component/components_basic_vue.html
@@ -0,0 +1,125 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+
			
 
				+<head>
			
 
				+  <meta charset="UTF-8">
			
 
				+  <title data-i18n='resources.title_componentsBasic_Vue'></title>
			
 
				+  <script type="text/javascript" include="vue" src="../js/include-web.js"></script>
			
 
				+  <script include="echarts,iclient-mapboxgl-vue,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+  <style>
			
 
				+    body {
			
 
				+      margin: 0;
			
 
				+      overflow: hidden;
			
 
				+      background: #fff;
			
 
				+      width: 100%;
			
 
				+      height: 100%;
			
 
				+      position: absolute;
			
 
				+      top: 0;
			
 
				+    }
			
 
				+
			
 
				+    #main {
			
 
				+      margin: 0 auto;
			
 
				+      width: 100%;
			
 
				+      height: 100%;
			
 
				+    }
			
 
				+
			
 
				+    .box-card {
			
 
				+      width: 280px;
			
 
				+      position: absolute;
			
 
				+      top: 10px;
			
 
				+      left: 10px;
			
 
				+      z-index: 1000;
			
 
				+      overflow: hidden;
			
 
				+    }
			
 
				+    .sm-progress-wrap {
			
 
				+      height: 100px;
			
 
				+    }
			
 
				+    .sm-progress-wrap, .sm-component-liquidFill {
			
 
				+      width: 110px;
			
 
				+      height: 110px;
			
 
				+      display: inline-block;
			
 
				+      vertical-align: middle;
			
 
				+    }
			
 
				+    .sm-component-indicator {
			
 
				+      padding-left: 0px;
			
 
				+    }
			
 
				+    .sm-component-indicator .sm-component-indicator__head{
			
 
				+      padding-left: 0px;
			
 
				+    }
			
 
				+  </style>
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+
			
 
				+  <div id="main">
			
 
				+    <sm-web-map server-url="https://iportal.supermap.io/iportal" map-id="801571284" ref="map" @load.once='load'></sm-web-map>
			
 
				+    <sm-card class="box-card">
			
 
				+      <!-- 图标组件 -->
			
 
				+      <sm-icon icon-class="marker-layer" size="18px" text-color='rgb(63, 177, 227)' :style="{float: 'left'}">
			
 
				+      </sm-icon>
			
 
				+      <!-- 文本组件 -->
			
 
				+      <sm-text title="点击图上点切换显示机场数据" :font-style='{ fontSize: "14px"}' text-color="#333">
			
 
				+      </sm-text>
			
 
				+      <sm-text title="机场" :font-style='{ fontSize: "12px",fontWeight: "bolder",display: "block"}' text-color="rgb(51,51,51)">
			
 
				+      </sm-text>
			
 
				+      <sm-text :title="name" :font-style='{ fontSize: "18px", fontWeight: "700" ,display: "block"}' text-color="#333">
			
 
				+      </sm-text>
			
 
				+      <!-- 指标组件 -->
			
 
				+      <sm-indicator title="2017旅客吞吐量" unit="人次" :num="passengerNumber" text-color="#333"></sm-indicator>
			
 
				+      <sm-indicator title="2017货邮吞吐量" unit="吨" :num="goodsNumber" text-color="#333"></sm-indicator>
			
 
				+      <sm-text title="同比增速" :font-style='{ fontSize: "12px",fontWeight: "bolder",display: "block"}' text-color="rgb(51,51,51)"></sm-text>
			
 
				+      <!-- 水球组件 -->
			
 
				+      <sm-liquid-fill :value="speedIncreaseValue" :wave-count="3" :wave-animation="true">
			
 
				+      </sm-liquid-fill>
			
 
				+      <!-- 进度条组件 -->
			
 
				+      <div class="sm-progress-wrap">
			
 
				+        <sm-progress type="circle" :percent="speedIncrease">
			
 
				+        </sm-progress>
			
 
				+      </div>
			
 
				+      <!-- 时间组件 -->
			
 
				+      <sm-time-text :font-style='{ fontSize: "12px"}' text-color="#333" time-type="date+second" style="float:right">
			
 
				+      </sm-time-text>
			
 
				+    </sm-card>
			
 
				+  </div>
			
 
				+
			
 
				+  <script>
			
 
				+    new Vue({
			
 
				+      el: '#main',
			
 
				+      data() {
			
 
				+        return {
			
 
				+          name: "北京/首都",
			
 
				+          passengerNumber: 95786296,
			
 
				+          goodsNumber: 94393454,
			
 
				+          speedIncrease: 5
			
 
				+        }
			
 
				+      },
			
 
				+      computed: {
			
 
				+        speedIncreaseValue() {
			
 
				+          return this.speedIncrease / 100.0;
			
 
				+        }
			
 
				+      },
			
 
				+      methods: {
			
 
				+        load(obj) {
			
 
				+          var vm = this;
			
 
				+          map = obj.map;
			
 
				+          map.on('click', function(e) {
			
 
				+            var bbox = [[e.point.x - 2, e.point.y - 2], [e.point.x + 2, e.point.y + 2]];
			
 
				+            var features = map.queryRenderedFeatures(bbox);
			
 
				+            if (features.length > 0) {
			
 
				+              var properties = features[0].properties;
			
 
				+              vm.name = properties['机场'];
			
 
				+              vm.passengerNumber = properties['2017旅客吞吐量（人次）'] || 0;
			
 
				+              vm.goodsNumber = properties['2017货邮吞吐量（吨）'] || 0;
			
 
				+              vm.speedIncrease = properties['同比增速%'] || 0;
			
 
				+            }
			
 
				+          });
			
 
				+        }
			
 
				+      }
			
 
				+    })
			
 
				+  </script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_border_vue.html
+++ b/public/supermap/examples/component/components_border_vue.html
@@ -0,0 +1,484 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+  <head>
			
 
				+    <meta charset="UTF-8" />
			
 
				+    <title data-i18n="resources.title_componentsBorder_Vue"></title>
			
 
				+    <script type="text/javascript" include="vue" src="../js/include-web.js"></script>
			
 
				+    <script
			
 
				+      include="echarts-vue,iclient-mapboxgl-vue,mapbox-gl-enhance"
			
 
				+      src="../../dist/mapboxgl/include-mapboxgl.js"
			
 
				+    ></script>
			
 
				+    <style>
			
 
				+      body {
			
 
				+        margin: 0;
			
 
				+        width: 100%;
			
 
				+        height: 100%;
			
 
				+        position: relative;
			
 
				+        top: 0;
			
 
				+      }
			
 
				+
			
 
				+      #main {
			
 
				+        margin: 0 auto;
			
 
				+        width: 100%;
			
 
				+        height: 100%;
			
 
				+      }
			
 
				+      .all-borders {
			
 
				+        width: 98%;
			
 
				+        margin: 0 auto;
			
 
				+        position: absolute;
			
 
				+        left: 1%;
			
 
				+        bottom: 0px;
			
 
				+        display: flex;
			
 
				+        justify-content: space-between;
			
 
				+        flex-wrap: wrap-reverse;
			
 
				+        align-content: flex-start;
			
 
				+      }
			
 
				+      .common-border {
			
 
				+        margin-bottom: 10px;
			
 
				+        width: 300px;
			
 
				+        height: 230px;
			
 
				+        z-index: 1000;
			
 
				+      }
			
 
				+
			
 
				+      .select-group {
			
 
				+        display: flex;
			
 
				+        align-items: center;
			
 
				+        position: absolute;
			
 
				+        width: 240px;
			
 
				+        left: 40px;
			
 
				+        top: 40px;
			
 
				+      }
			
 
				+      .select-group span {
			
 
				+        color: #fff;
			
 
				+        font-size: 15px;
			
 
				+        margin-right: 10px;
			
 
				+      }
			
 
				+      .select-border {
			
 
				+        width: 110px;
			
 
				+      }
			
 
				+      .sm-component-select-selection {
			
 
				+        background: #262626;
			
 
				+        color: #fff;
			
 
				+      }
			
 
				+      .sm-component-select-dropdown-content ul::-webkit-scrollbar {
			
 
				+        width: 4px;
			
 
				+        height: 4px;
			
 
				+        background-color: rgba(245, 245, 245, 0);
			
 
				+      }
			
 
				+      .sm-component-select-dropdown-content ul::-webkit-scrollbar-thumb {
			
 
				+        border-radius: 10px;
			
 
				+        background-color: gray;
			
 
				+      }
			
 
				+      .sm-component-select-dropdown {
			
 
				+        background: #262626;
			
 
				+      }
			
 
				+      .sm-component-select-dropdown-menu-item {
			
 
				+        color: #909399;
			
 
				+      }
			
 
				+      .sm-component-select-dropdown-menu-item-active {
			
 
				+        background: #dddcdc !important;
			
 
				+        color: #4f4f4f !important;
			
 
				+      }
			
 
				+      .sm-component-select-dropdown-menu-item-selected,
			
 
				+      .sm-component-select-dropdown-menu-item-selected:hover {
			
 
				+        background: #dddcdc !important;
			
 
				+        color: #4f4f4f !important;
			
 
				+      }
			
 
				+    </style>
			
 
				+  </head>
			
 
				+
			
 
				+  <body>
			
 
				+    <div id="main">
			
 
				+      <!-- WebMap组件 -->
			
 
				+      <sm-web-map server-url="https://iportal.supermap.io/iportal" map-id="801571284" ref="map"></sm-web-map>
			
 
				+      <div class="all-borders">
			
 
				+        <!-- Border组件 -->
			
 
				+        <sm-border :type="borderType" class="common-border">
			
 
				+          <sm-chart icon-class="" :options="barChartOptions"></sm-chart>
			
 
				+        </sm-border>
			
 
				+        <!-- Border组件 -->
			
 
				+        <sm-border :type="borderType" class="common-border">
			
 
				+          <sm-chart icon-class="" :options="lineChartOptions"></sm-chart>
			
 
				+        </sm-border>
			
 
				+        <!-- Border组件 -->
			
 
				+        <sm-border :type="borderType" class="common-border">
			
 
				+          <sm-chart icon-class="" :options="scatterChartOptions"></sm-chart>
			
 
				+        </sm-border>
			
 
				+        <!-- Border组件 -->
			
 
				+        <sm-border :type="borderType" class="common-border">
			
 
				+          <sm-chart icon-class="" :options="radarChartOptions"></sm-chart>
			
 
				+        </sm-border>
			
 
				+        <!-- Border组件 -->
			
 
				+        <sm-border :type="borderType" class="common-border">
			
 
				+          <sm-chart icon-class="" :options="pieChartOptions"></sm-chart>
			
 
				+        </sm-border>
			
 
				+        <!-- Border组件 -->
			
 
				+        <sm-border :type="borderType" class="common-border">
			
 
				+          <sm-chart icon-class="" :options="gaugeChartOptions"></sm-chart>
			
 
				+        </sm-border>
			
 
				+      </div>
			
 
				+
			
 
				+      <!-- 切换{{resources.text_opt_border}}类型 -->
			
 
				+      <div class="select-group">
			
 
				+        <span>{{ resources.text_sel_border }}:</span>
			
 
				+        <sm-select class="select-border" v-model="borderType">
			
 
				+          <sm-select-option value="border1">{{ resources.text_opt_border }}1</sm-select-option>
			
 
				+          <sm-select-option value="border2">{{ resources.text_opt_border }}2</sm-select-option>
			
 
				+          <sm-select-option value="border3">{{ resources.text_opt_border }}3</sm-select-option>
			
 
				+          <sm-select-option value="border4">{{ resources.text_opt_border }}4</sm-select-option>
			
 
				+          <sm-select-option value="border5">{{ resources.text_opt_border }}5</sm-select-option>
			
 
				+          <sm-select-option value="border6">{{ resources.text_opt_border }}6</sm-select-option>
			
 
				+          <sm-select-option value="border7">{{ resources.text_opt_border }}7</sm-select-option>
			
 
				+          <sm-select-option value="border8">{{ resources.text_opt_border }}8</sm-select-option>
			
 
				+          <sm-select-option value="border9">{{ resources.text_opt_border }}9</sm-select-option>
			
 
				+          <sm-select-option value="border10">{{ resources.text_opt_border }}10</sm-select-option>
			
 
				+          <sm-select-option value="border11">{{ resources.text_opt_border }}11</sm-select-option>
			
 
				+          <sm-select-option value="border12">{{ resources.text_opt_border }}12</sm-select-option>
			
 
				+          <sm-select-option value="border13">{{ resources.text_opt_border }}13</sm-select-option>
			
 
				+        </sm-select>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+
			
 
				+    <script>
			
 
				+      new Vue({
			
 
				+        el: '#main',
			
 
				+        data() {
			
 
				+          var chartXAxis = {
			
 
				+            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
			
 
				+            axisLabel: {
			
 
				+              rotate: 0,
			
 
				+              fontFamily: 'MicrosoftYaHei'
			
 
				+            },
			
 
				+            show: true,
			
 
				+            name: '',
			
 
				+            nameGap: 2,
			
 
				+            nameLocation: 'end',
			
 
				+            type: 'category'
			
 
				+          };
			
 
				+          var chartYAxis = {
			
 
				+            name: '',
			
 
				+            axisLine: {
			
 
				+              lineStyle: {}
			
 
				+            },
			
 
				+            axisLabel: {
			
 
				+              rotate: 0,
			
 
				+              fontFamily: 'MicrosoftYaHei'
			
 
				+            },
			
 
				+            show: true,
			
 
				+            splitArea: {
			
 
				+              show: false
			
 
				+            },
			
 
				+            nameGap: 5,
			
 
				+            nameLocation: 'end',
			
 
				+            type: 'value',
			
 
				+            nameTextStyle: {
			
 
				+              padding: [0, 0, 5, 0]
			
 
				+            }
			
 
				+          };
			
 
				+          var chartGrid = {
			
 
				+            left: 50,
			
 
				+            right: 50,
			
 
				+            top: 35,
			
 
				+            bottom: 35
			
 
				+          };
			
 
				+          return {
			
 
				+            borderType: 'border7',
			
 
				+            // 和echarts一样的配置
			
 
				+            barChartOptions: {
			
 
				+              xAxis: chartXAxis,
			
 
				+              yAxis: chartYAxis,
			
 
				+              grid: chartGrid,
			
 
				+              series: [
			
 
				+                {
			
 
				+                  data: ['500', '800', '3000', '3617', '3400', '4200', '1842'],
			
 
				+                  name: 'Y2',
			
 
				+                  type: 'bar'
			
 
				+                },
			
 
				+                {
			
 
				+                  data: ['100', '520', '2000', '3340', '3900', '3300', '2500'],
			
 
				+                  name: 'Y1',
			
 
				+                  type: 'bar'
			
 
				+                },
			
 
				+                {
			
 
				+                  data: ['1', '1', '0', '0', '0', '1', '0'],
			
 
				+                  name: 'Y3',
			
 
				+                  emphasis: {
			
 
				+                    itemStyle: {}
			
 
				+                  },
			
 
				+                  type: 'bar'
			
 
				+                }
			
 
				+              ]
			
 
				+            },
			
 
				+            lineChartOptions: {
			
 
				+              xAxis: chartXAxis,
			
 
				+              yAxis: chartYAxis,
			
 
				+              grid: chartGrid,
			
 
				+              series: [
			
 
				+                {
			
 
				+                  data: ['3900', '3340', '3300', '2500', '2000', '520', '100'],
			
 
				+                  name: 'Y1',
			
 
				+                  emphasis: {
			
 
				+                    itemStyle: {}
			
 
				+                  },
			
 
				+                  type: 'line',
			
 
				+                  smooth: false
			
 
				+                },
			
 
				+                {
			
 
				+                  data: ['3400', '3617', '4200', '1842', '3000', '800', '500'],
			
 
				+                  name: 'Y2',
			
 
				+                  emphasis: {
			
 
				+                    itemStyle: {}
			
 
				+                  },
			
 
				+                  type: 'line',
			
 
				+                  smooth: false
			
 
				+                }
			
 
				+              ],
			
 
				+            },
			
 
				+            scatterChartOptions: {
			
 
				+              xAxis: chartXAxis,
			
 
				+              yAxis: chartYAxis,
			
 
				+              grid: chartGrid,
			
 
				+              series: [
			
 
				+                {
			
 
				+                  data: ['3900', '3340', '3300', '2500', '2000', '520', '100'],
			
 
				+                  name: 'Y1',
			
 
				+                  emphasis: {
			
 
				+                    itemStyle: {}
			
 
				+                  },
			
 
				+                  type: 'scatter'
			
 
				+                },
			
 
				+                {
			
 
				+                  data: ['3400', '3617', '4200', '1842', '3000', '800', '500'],
			
 
				+                  name: 'Y2',
			
 
				+                  emphasis: {
			
 
				+                    itemStyle: {}
			
 
				+                  },
			
 
				+                  type: 'scatter'
			
 
				+                }
			
 
				+              ]
			
 
				+            },
			
 
				+            radarChartOptions: {
			
 
				+              radar: {
			
 
				+                indicator: [
			
 
				+                  {
			
 
				+                    max: '500',
			
 
				+                    name: 'Mon'
			
 
				+                  },
			
 
				+                  {
			
 
				+                    max: '800',
			
 
				+                    name: 'Tue'
			
 
				+                  },
			
 
				+                  {
			
 
				+                    max: '3000',
			
 
				+                    name: 'Wed'
			
 
				+                  },
			
 
				+                  {
			
 
				+                    max: '3617',
			
 
				+                    name: 'Thu'
			
 
				+                  },
			
 
				+                  {
			
 
				+                    max: '3400',
			
 
				+                    name: 'Fri'
			
 
				+                  },
			
 
				+                  {
			
 
				+                    max: '4200',
			
 
				+                    name: 'Sat'
			
 
				+                  },
			
 
				+                  {
			
 
				+                    max: '1842',
			
 
				+                    name: 'Sun'
			
 
				+                  }
			
 
				+                ],
			
 
				+                shape: 'circle',
			
 
				+                splitArea: {
			
 
				+                  show: false
			
 
				+                },
			
 
				+                axisLine: {
			
 
				+                  lineStyle: {}
			
 
				+                },
			
 
				+                name: {
			
 
				+                  textStyle: {}
			
 
				+                },
			
 
				+                splitLine: {
			
 
				+                  lineStyle: {}
			
 
				+                },
			
 
				+                splitNumber: 5,
			
 
				+                radius: '70%'
			
 
				+              },
			
 
				+              grid: {
			
 
				+                top: 35,
			
 
				+                left: 50,
			
 
				+                bottom: 25
			
 
				+              },
			
 
				+              legend: {
			
 
				+                data: ['Y1'],
			
 
				+                textStyle: {},
			
 
				+                show: false,
			
 
				+                top: 'auto',
			
 
				+                bottom: 'auto'
			
 
				+              },
			
 
				+              series: [
			
 
				+                {
			
 
				+                  barWidth: '80%',
			
 
				+                  data: [
			
 
				+                    {
			
 
				+                      name: 'Y1',
			
 
				+                      value: ['100', '520', '2000', '3340', '3900', '3300', '2500']
			
 
				+                    }
			
 
				+                  ],
			
 
				+                  name: '示范数据',
			
 
				+                  emphasis: {
			
 
				+                    itemStyle: {}
			
 
				+                  },
			
 
				+                  type: 'radar'
			
 
				+                }
			
 
				+              ],
			
 
				+              tooltip: {
			
 
				+                axisPointer: {
			
 
				+                  shadowStyle: {},
			
 
				+                  type: 'shadow'
			
 
				+                },
			
 
				+                trigger: 'axis',
			
 
				+                textStyle: {
			
 
				+                  align: 'left'
			
 
				+                }
			
 
				+              },
			
 
				+              textStyle: {
			
 
				+                fontFamily: 'Microsoft YaHei Light'
			
 
				+              },
			
 
				+              title: {
			
 
				+                padding: [5, 0, 0, 20],
			
 
				+                x: 'left',
			
 
				+                text: '',
			
 
				+                textStyle: {
			
 
				+                  fontFamily: 'Microsoft YaHei Light',
			
 
				+                  fontWeight: '100'
			
 
				+                }
			
 
				+              }
			
 
				+            },
			
 
				+            pieChartOptions: {
			
 
				+              tooltip: {
			
 
				+                trigger: 'item',
			
 
				+                formatter: '{a} <br/>{b}: {c} ({d}%)'
			
 
				+              },
			
 
				+              legend: {
			
 
				+                orient: 'vertical',
			
 
				+                x: 'left',
			
 
				+                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
			
 
				+                show: true,
			
 
				+                top: 'auto',
			
 
				+                bottom: 'auto'
			
 
				+              },
			
 
				+              series: [
			
 
				+                {
			
 
				+                  name: '示范数据',
			
 
				+                  type: 'pie',
			
 
				+                  radius: '80%',
			
 
				+                  avoidLabelOverlap: false,
			
 
				+                  label: {
			
 
				+                    normal: {
			
 
				+                      show: false,
			
 
				+                      position: 'center'
			
 
				+                    },
			
 
				+                    emphasis: {
			
 
				+                      show: true,
			
 
				+                      textStyle: {
			
 
				+                        fontSize: '30',
			
 
				+                        fontWeight: 'bold'
			
 
				+                      }
			
 
				+                    }
			
 
				+                  },
			
 
				+                  labelLine: {
			
 
				+                    normal: {
			
 
				+                      show: false
			
 
				+                    }
			
 
				+                  },
			
 
				+                  data: [
			
 
				+                    {
			
 
				+                      value: 500,
			
 
				+                      name: 'Mon'
			
 
				+                    },
			
 
				+                    {
			
 
				+                      value: 800,
			
 
				+                      name: 'Tue'
			
 
				+                    },
			
 
				+                    {
			
 
				+                      value: 3000,
			
 
				+                      name: 'Wed'
			
 
				+                    },
			
 
				+                    {
			
 
				+                      value: 3617,
			
 
				+                      name: 'Thu'
			
 
				+                    },
			
 
				+                    {
			
 
				+                      value: 3400,
			
 
				+                      name: 'Fri'
			
 
				+                    },
			
 
				+                    {
			
 
				+                      value: 4200,
			
 
				+                      name: 'Sat'
			
 
				+                    },
			
 
				+                    {
			
 
				+                      value: 1842,
			
 
				+                      name: 'Sun'
			
 
				+                    }
			
 
				+                  ]
			
 
				+                }
			
 
				+              ]
			
 
				+            },
			
 
				+            gaugeChartOptions: {
			
 
				+              tooltip: {
			
 
				+                formatter: '{a} <br/>{b} : {c}%'
			
 
				+              },
			
 
				+              series: [
			
 
				+                {
			
 
				+                  name: '业务指标',
			
 
				+                  type: 'gauge',
			
 
				+                  radius: '100%',
			
 
				+                  pointer: {
			
 
				+                    width: 5
			
 
				+                  },
			
 
				+                  axisLine: {
			
 
				+                    lineStyle: {
			
 
				+                      // 属性lineStyle控制线条样式
			
 
				+                      width: 12
			
 
				+                    }
			
 
				+                  },
			
 
				+                  splitLine: {
			
 
				+                    // 分隔线
			
 
				+                    length: 6 // 属性length控制线长
			
 
				+                  },
			
 
				+                  axisTick: {
			
 
				+                    // 坐标轴小标记
			
 
				+                    length: 12, // 属性length控制线长
			
 
				+                    lineStyle: {
			
 
				+                      // 属性lineStyle控制线条样式
			
 
				+                      color: 'auto'
			
 
				+                    }
			
 
				+                  },
			
 
				+                  detail: {
			
 
				+                    formatter: '{value}%',
			
 
				+                    fontSize: 20
			
 
				+                  },
			
 
				+                  data: [{ value: 50 }]
			
 
				+                }
			
 
				+              ]
			
 
				+            }
			
 
				+          };
			
 
				+        },
			
 
				+        mounted() {
			
 
				+          //{{resources.text_opt_border}}最好配上透明主题， body设置一个底色
			
 
				+          SuperMap.Components.setTheme({
			
 
				+            textColor: '#eee',
			
 
				+            background: 'rgba(0,0,0,0)',
			
 
				+            colorGroup: ['#3fb1e3', '#6be6c1', '#626c91', '#a0a7e6', '#c4ebad', '#96dee8']
			
 
				+          });
			
 
				+          document.getElementsByTagName('body')[0].style.background = 'rgba(0, 0, 0, 0.9)';
			
 
				+        }
			
 
				+      });
			
 
				+    </script>
			
 
				+  </body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_chart.html
+++ b/public/supermap/examples/component/components_chart.html
@@ -0,0 +1,200 @@
 
				+<!--********************************************************************
			
 
				+* 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'></title>
			
 
				+    <script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script>
			
 
				+    <script type="text/javascript" include="iclient-leaflet-css,echarts" src="../../dist/leaflet/include-leaflet.js"></script>
			
 
				+
			
 
				+    <style>
			
 
				+        .chart-setting {
			
 
				+            position: absolute;
			
 
				+            top: 10px;
			
 
				+            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: 60px;
			
 
				+            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>iServer(Landuse_R@Jingjin)</option>" +
			
 
				+                "<option value='https://iportal.supermap.io/iportal/web/datas/676516522'>iPortal(民航数据)</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";
			
 
				+        //加载底图
			
 
				+        map = L.map('map', {
			
 
				+            crs: L.CRS.EPSG4326,
			
 
				+            center: [40, 118],
			
 
				+            maxZoom: 18,
			
 
				+            zoom: 6
			
 
				+        });
			
 
				+
			
 
				+        L.supermap.tiledMapLayer(url).addTo(map);
			
 
				+        //图表组件
			
 
				+        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);
			
 
				+        //加载图表之后，将要素添加到地图上
			
 
				+        barChart.onAdd(addDataToMap);
			
 
				+
			
 
				+        function addDataToMap() {
			
 
				+            var features = barChart.getFeatures();
			
 
				+            resultLayer = L.geoJSON(features).addTo(map);
			
 
				+        }
			
 
				+
			
 
				+        //为图表类型按钮绑定事件
			
 
				+        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.removeLayer(resultLayer);
			
 
				+            if (selectedIndex === 0) {
			
 
				+                chartOption = [{
			
 
				+                    xAxis: {
			
 
				+                        field: "LANDTYPE",
			
 
				+                        name: "type"
			
 
				+                    },
			
 
				+                    yAxis: {
			
 
				+                        field: "AREA",
			
 
				+                        name: "Area"
			
 
				+                    }
			
 
				+                }];
			
 
				+                serviceType = 'iServer';
			
 
				+            } else {
			
 
				+                chartOption = [{
			
 
				+                    xAxis: {
			
 
				+                        field: "机场",
			
 
				+                        name: "机场"
			
 
				+                    },
			
 
				+                    yAxis: {
			
 
				+                        field: "同比增速%",
			
 
				+                        name: "同比增速%"
			
 
				+                    }
			
 
				+                }];
			
 
				+                serviceType = 'iPortal';
			
 
				+            } 
			
 
				+            barChart.updateData(serviceType, url, withCredentials, null, chartOption);
			
 
				+        });
			
 
				+    </script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_chart_vue.html
+++ b/public/supermap/examples/component/components_chart_vue.html
@@ -0,0 +1,149 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+    <head>
			
 
				+        <meta charset="UTF-8" />
			
 
				+        <title data-i18n="resources.title_componentsChart_Vue"></title>
			
 
				+        <script type="text/javascript" include="vue" src="../js/include-web.js"></script>
			
 
				+        <script include="echarts-vue,iclient-mapboxgl-vue,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+        <style>
			
 
				+            #main {
			
 
				+                margin: 0 auto;
			
 
				+                width: 100%;
			
 
				+                height: 100%;
			
 
				+            }
			
 
				+            .sm-component-chart .sm-component-collapse-card__content {
			
 
				+                height: 300px;
			
 
				+            }
			
 
				+        </style>
			
 
				+    </head>
			
 
				+
			
 
				+    <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
			
 
				+        <div id="main">
			
 
				+            <sm-web-map server-url="https://iportal.supermap.io/iportal" map-id="801571284"></sm-web-map>
			
 
				+            <sm-chart
			
 
				+                icon-class=""
			
 
				+                :style="chartStyle"
			
 
				+                :options="echartOptions"
			
 
				+                :dataset="dataset"
			
 
				+                :dataset-options="datasetOptions"
			
 
				+                background="rgba(255, 255, 255, 0.5)"
			
 
				+            ></sm-chart>
			
 
				+            <sm-chart
			
 
				+                icon-class=""
			
 
				+                :style="chartStyle1"
			
 
				+                :options="echartOptions1"
			
 
				+                :dataset="dataset"
			
 
				+                :dataset-options="datasetOptions1"
			
 
				+                background="rgba(255, 255, 255, 0.5)"
			
 
				+            ></sm-chart>
			
 
				+            <sm-chart
			
 
				+                icon-class=""
			
 
				+                :style="chartStyle2"
			
 
				+                :options="echartOptions2"
			
 
				+                :dataset="dataset"
			
 
				+                :dataset-options="datasetOptions2"
			
 
				+                background="rgba(255, 255, 255, 0.5)"
			
 
				+            ></sm-chart>
			
 
				+        </div>
			
 
				+
			
 
				+        <script>
			
 
				+            new Vue({
			
 
				+              el: '#main',
			
 
				+              data() {
			
 
				+                return {
			
 
				+                  chartStyle: {
			
 
				+                    position: "absolute",
			
 
				+                    bottom: "10px",
			
 
				+                    right: "10px"
			
 
				+                  },
			
 
				+                  chartStyle1: {
			
 
				+                    position: "absolute",
			
 
				+                    bottom: "10px",
			
 
				+                    right: "420px"
			
 
				+                  },
			
 
				+                  chartStyle2: {
			
 
				+                    position: "absolute",
			
 
				+                    bottom: "10px",
			
 
				+                    right: "830px"
			
 
				+                  },
			
 
				+                  dataset: new SuperMap.Components.commontypes.iPortalDataParameter({
			
 
				+                      url: "https://iportal.supermap.io/iportal/web/datas/676516522",
			
 
				+                      maxFeatures: 20
			
 
				+                  }),
			
 
				+                  // echarts中涉及到超图数据series和坐标轴的字段的配置
			
 
				+                  datasetOptions: [
			
 
				+                    {
			
 
				+                      seriesType: "bar", //图表类型
			
 
				+                      isStastic: true, //是否统计, 默认不统计
			
 
				+                      isStack: true, //是否堆叠, 默认不堆叠
			
 
				+                      xField: "机场", //x坐标轴数据字段
			
 
				+                      yField: "2016起降架次（架次）" //统计的数据，legned默认名字
			
 
				+                    },
			
 
				+                    {
			
 
				+                      seriesType: "bar",
			
 
				+                      isStastic: true,
			
 
				+                      isStack: true,
			
 
				+                      xField: "机场",
			
 
				+                      yField: "2017起降架次（架次）",
			
 
				+                    }
			
 
				+                  ],
			
 
				+                  datasetOptions1: [
			
 
				+                    {
			
 
				+                      seriesType: "line", //图表类型
			
 
				+                      isStastic: true, //是否统计, 默认不统计
			
 
				+                      isStack: true, //是否堆叠, 默认不堆叠
			
 
				+                      xField: "机场", //x坐标轴数据字段
			
 
				+                      yField: "2016旅客吞吐量（人次）" //统计的数据，legned默认名字
			
 
				+                    },
			
 
				+                    {
			
 
				+                      seriesType: "line",
			
 
				+                      isStastic: true,
			
 
				+                      isStack: true,
			
 
				+                      xField: "机场",
			
 
				+                      yField: "2017旅客吞吐量（人次）"
			
 
				+                    }
			
 
				+                  ],
			
 
				+                  datasetOptions2: [
			
 
				+                    {
			
 
				+                      seriesType: "scatter", //图表类型
			
 
				+                      isStastic: true, //是否统计, 默认不统计
			
 
				+                      isStack: false, //是否堆叠, 默认不堆叠
			
 
				+                      xField: "机场", //x坐标轴数据字段
			
 
				+                      yField: "同比增速%" //统计的数据，legned默认名字
			
 
				+                    }
			
 
				+                  ],
			
 
				+                  // 和echarts一样的配置
			
 
				+                  echartOptions: {
			
 
				+                    legend: {data: ['2016起降架次（架次）', '2017起降架次（架次）']}, //与yField数据一致
			
 
				+                    tooltip: {formatter: "{b0}: {c0}"},
			
 
				+                    grid:{
			
 
				+                      top: 30,
			
 
				+                      bottom: 60,
			
 
				+                      left: 60,
			
 
				+                      right: 30
			
 
				+                    }
			
 
				+                  },
			
 
				+                  echartOptions1: {
			
 
				+                    legend: {data: ['2016旅客吞吐量（人次）', '2017旅客吞吐量（人次）']}, //与yField数据一致
			
 
				+                    tooltip: {formatter: "{b0}: {c0}"},
			
 
				+                    grid:{
			
 
				+                      top: 30,
			
 
				+                      bottom: 60,
			
 
				+                      left: 60,
			
 
				+                      right: 30
			
 
				+                    }
			
 
				+                  },
			
 
				+                  echartOptions2: {
			
 
				+                    legend: {data: ['同比增速%']},//与yField数据一致
			
 
				+                    tooltip: {formatter: "{b0}: {c0}"},
			
 
				+                  }
			
 
				+
			
 
				+                };
			
 
				+              }
			
 
				+            })
			
 
				+        </script>
			
 
				+    </body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_cluster_react.html
+++ b/public/supermap/examples/component/components_cluster_react.html
@@ -0,0 +1,73 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+  <head>
			
 
				+    <meta charset="UTF-8" />
			
 
				+    <title data-i18n="resources.title_componentsCluster_React"></title>
			
 
				+    <script type="text/javascript" include="react,jquery,papaparse" src="../js/include-web.js"></script>
			
 
				+    <script include="antd,iclient-mapboxgl-react,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+    <style>
			
 
				+      html,
			
 
				+      body {
			
 
				+        height: 100%;
			
 
				+        margin: 0;
			
 
				+        padding: 0;
			
 
				+      }
			
 
				+      #main {
			
 
				+        height: 100%;
			
 
				+      }
			
 
				+    </style>
			
 
				+  </head>
			
 
				+  <body>
			
 
				+    <div id="main"></div>
			
 
				+    <script type="text/babel">
			
 
				+      // import {SmClusterLayer} from '@supermap/react-iclient'
			
 
				+      var SmWebMap = SuperMap.Components.SmWebMap;
			
 
				+      var SmClusterLayer = SuperMap.Components.SmClusterLayer;
			
 
				+
			
 
				+      $.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);
			
 
				+          }
			
 
				+        }
			
 
				+
			
 
				+        ReactDOM.render(
			
 
				+          <SmWebMap mapId='1329428269' serverUrl='https://iportal.supermap.io/iportal'>
			
 
				+            <SmClusterLayer data={geojson} radius={100} />
			
 
				+          </SmWebMap>,
			
 
				+          document.getElementById('main')
			
 
				+        );
			
 
				+      });
			
 
				+    </script>
			
 
				+  </body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_cluster_vue.html
+++ b/public/supermap/examples/component/components_cluster_vue.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_componentsCluster_Vue"></title>
			
 
				+        <script type="text/javascript" include="vue,jquery,papaparse" src="../js/include-web.js"></script>
			
 
				+        <script
			
 
				+            include="iclient-mapboxgl-vue,mapbox-gl-enhance"
			
 
				+            src="../../dist/mapboxgl/include-mapboxgl.js"
			
 
				+        ></script>
			
 
				+        <style>
			
 
				+            #main {
			
 
				+                margin: 0 auto;
			
 
				+                width: 100%;
			
 
				+                height: 100%;
			
 
				+            }
			
 
				+        </style>
			
 
				+    </head>
			
 
				+
			
 
				+    <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
			
 
				+        <div id="main">
			
 
				+            <sm-web-map server-url="https://iportal.supermap.io/iportal" map-id="1329428269">
			
 
				+                <sm-cluster-layer :data="culsterLayerData" :radius="100"></sm-cluster-layer>
			
 
				+            </sm-web-map>
			
 
				+        </div>
			
 
				+        <script>
			
 
				+            $.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);
			
 
				+                    }
			
 
				+                }
			
 
				+
			
 
				+                new Vue({
			
 
				+                    el: "#main",
			
 
				+                    data() {
			
 
				+                        return {
			
 
				+                            culsterLayerData: geojson
			
 
				+                        };
			
 
				+                    }
			
 
				+                });
			
 
				+            });
			
 
				+        </script>
			
 
				+    </body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_compare_vue.html
+++ b/public/supermap/examples/component/components_compare_vue.html
@@ -0,0 +1,121 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title data-i18n='resources.title_componentsCompare_Vue'></title>
			
 
				+    <script type="text/javascript" include="vue" src="../js/include-web.js"></script>
			
 
				+    <script include="iclient-mapboxgl-vue,mapbox-gl-enhance"
			
 
				+        src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+    <style>
			
 
				+        #main {
			
 
				+            margin: 0 auto;
			
 
				+            width: 100%;
			
 
				+            height: 100%;
			
 
				+        }
			
 
				+
			
 
				+        .compare-title {
			
 
				+            position: absolute;
			
 
				+            top: 20px;
			
 
				+            left: 12%;
			
 
				+            display: flex;
			
 
				+            align-items: center;
			
 
				+            justify-content: space-between;
			
 
				+            width: 74%;
			
 
				+            z-index: 100;
			
 
				+        }
			
 
				+
			
 
				+        .compare-title .sm-component-border {
			
 
				+            width: 334px;
			
 
				+            height: 48px;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+
			
 
				+<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
			
 
				+    <div id="main">
			
 
				+        <div class="compare-title">
			
 
				+            <sm-border type="border6">
			
 
				+                <sm-text v-bind="textProps" title="全球疫情累积确诊">
			
 
				+                </sm-text>
			
 
				+            </sm-border>
			
 
				+            <sm-border type="border6">
			
 
				+                <sm-text v-bind="textProps" title="全球疫情累积发病率">
			
 
				+                </sm-text>
			
 
				+            </sm-border>
			
 
				+        </div>
			
 
				+        <sm-compare :before-map-options="beforeMapOptions" :after-map-options="afterMapOptions"></sm-compare>
			
 
				+        <!-- <sm-compare>
			
 
				+            <sm-web-map slot="beforeMap" target="beforeMap" server-url="https://www.supermapol.com/" @load="load"
			
 
				+                :map-id="2134374143">
			
 
				+            </sm-web-map>
			
 
				+            <sm-web-map slot="afterMap" target="afterMap" server-url="https://www.supermapol.com/"
			
 
				+                :map-id="1127786844">
			
 
				+            </sm-web-map>
			
 
				+        </sm-compare> -->
			
 
				+    </div>
			
 
				+
			
 
				+    <script>
			
 
				+        new Vue({
			
 
				+            el: '#main',
			
 
				+            data() {
			
 
				+                return {
			
 
				+                    beforeMapOptions: {
			
 
				+                        target: 'beforeMap',
			
 
				+                        serverUrl: 'https://www.supermapol.com',
			
 
				+                        mapId: 2134374143,
			
 
				+                        mapOptions: {
			
 
				+                            center: [-39.9535, 38.0542],
			
 
				+                            zoom: 2.44
			
 
				+
			
 
				+                        },
			
 
				+                        legendControl: {
			
 
				+                            background: "rgba(0,0,0,0.3)",
			
 
				+                            textColor: "#fff",
			
 
				+                            show: true,
			
 
				+                            position: "bottom-left",
			
 
				+                            layerNames: ["0315countrycenternpc"],
			
 
				+                            mode: "simple"
			
 
				+                        }
			
 
				+                    },
			
 
				+                    afterMapOptions: {
			
 
				+                        target: 'afterMap',
			
 
				+                        serverUrl: 'https://www.supermapol.com/',
			
 
				+                        mapId: 1127786844,
			
 
				+                        mapOptions: {
			
 
				+                            center: [-39.9535, 38.0542],
			
 
				+                            zoom: 2.44
			
 
				+
			
 
				+                        },
			
 
				+                        legendControl: {
			
 
				+                            background: "rgba(0,0,0,0.3)",
			
 
				+                            textColor: "#fff",
			
 
				+                            show: true,
			
 
				+                            position: "bottom-right",
			
 
				+                            layerNames: ["0315contryregion"],
			
 
				+                            mode: "simple"
			
 
				+                        }
			
 
				+                    },
			
 
				+                    textProps: {
			
 
				+                        textColor: "#fff",
			
 
				+                        background: "rgba(0,0,0,0)",
			
 
				+                        fontStyle: {
			
 
				+                            fontSize: '27px',
			
 
				+                            lineHeight: 1.5,
			
 
				+                            fontWeight: "normal",
			
 
				+                            justifyContent: "center",
			
 
				+                            textIndent: 0,
			
 
				+                            fontFamily: "微软雅黑",
			
 
				+                        }
			
 
				+                    }
			
 
				+                };
			
 
				+            }
			
 
				+        })
			
 
				+
			
 
				+    </script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_compass_vue.html
+++ b/public/supermap/examples/component/components_compass_vue.html
@@ -0,0 +1,36 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+
			
 
				+<head>
			
 
				+  <meta charset="UTF-8">
			
 
				+  <title data-i18n='resources.title_componentsCompass_Vue'></title>
			
 
				+  <script type="text/javascript" include="vue" src="../js/include-web.js"></script>
			
 
				+  <script include="iclient-mapboxgl-vue,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+  <style>
			
 
				+     #main{
			
 
				+        margin: 0 auto;
			
 
				+        width: 100%;
			
 
				+        height: 100%;
			
 
				+    }
			
 
				+  </style>
			
 
				+</head>
			
 
				+
			
 
				+<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
			
 
				+  <div id="main">
			
 
				+    <sm-web-map server-url='https://iportal.supermap.io/iportal' map-id="801571284">
			
 
				+      <sm-compass></sm-compass>
			
 
				+    </sm-web-map>
			
 
				+  </div>
			
 
				+
			
 
				+  <script>
			
 
				+    new Vue({
			
 
				+      el: '#main'
			
 
				+    })
			
 
				+
			
 
				+  </script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_coordinate_conversion_vue.html
+++ b/public/supermap/examples/component/components_coordinate_conversion_vue.html
@@ -0,0 +1,36 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+    <head>
			
 
				+        <meta charset="UTF-8" />
			
 
				+        <title data-i18n="resources.title_componentsCoordinateConversion_Vue"></title>
			
 
				+        <script type="text/javascript" include="vue" src="../js/include-web.js"></script>
			
 
				+        <script
			
 
				+            include="iclient-mapboxgl-vue,mapbox-gl-enhance,draw"
			
 
				+            src="../../dist/mapboxgl/include-mapboxgl.js"
			
 
				+        ></script>
			
 
				+        <style>
			
 
				+            #main {
			
 
				+                margin: 0 auto;
			
 
				+                width: 100%;
			
 
				+                height: 100%;
			
 
				+            }
			
 
				+        </style>
			
 
				+    </head>
			
 
				+
			
 
				+    <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
			
 
				+        <div id="main">
			
 
				+            <sm-web-map server-url="https://iportal.supermap.io/iportal" map-id="801571284">
			
 
				+                <sm-coordinate-conversion></sm-coordinate-conversion>
			
 
				+            </sm-web-map>
			
 
				+        </div>
			
 
				+
			
 
				+        <script>
			
 
				+            new Vue({
			
 
				+                el: '#main'
			
 
				+            });
			
 
				+        </script>
			
 
				+    </body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_dataflow_react.html
+++ b/public/supermap/examples/component/components_dataflow_react.html
@@ -0,0 +1,116 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+  <head>
			
 
				+    <meta charset="UTF-8" />
			
 
				+    <title data-i18n="resources.title_componentsDataFlow_React"></title>
			
 
				+    <script type="text/javascript" include="react" src="../js/include-web.js"></script>
			
 
				+    <script include="antd,iclient-mapboxgl-react,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+    <style>
			
 
				+      html,
			
 
				+      body {
			
 
				+        height: 100%;
			
 
				+        margin: 0;
			
 
				+        padding: 0;
			
 
				+      }
			
 
				+
			
 
				+      #main {
			
 
				+        height: 100%;
			
 
				+      }
			
 
				+    </style>
			
 
				+  </head>
			
 
				+
			
 
				+  <body>
			
 
				+    <div id="main"></div>
			
 
				+    <script type="text/babel">
			
 
				+      var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
			
 
				+      var wsHost = 'wss:\//' + (window.isLocal ? document.location.hostname + ':8800' : 'iclsvrws.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 SmWebMap = SuperMap.Components.SmWebMap;
			
 
				+      var SmDataFlowLayer = SuperMap.Components.SmDataFlowLayer;
			
 
				+      var mapOptions = {
			
 
				+        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: [120.143, 30.236],
			
 
				+        zoom: 0
			
 
				+      };
			
 
				+      var serviceUrl = wsHost + '/iserver/services/dataflowTest/dataflow';
			
 
				+      var layerStyle = {
			
 
				+        circle: new SuperMap.Components.commontypes.CircleStyle({
			
 
				+          'circle-color': '#3fb1e3',
			
 
				+          'circle-radius': 6
			
 
				+        })
			
 
				+      };
			
 
				+
			
 
				+      SuperMap.SecurityManager.registerToken(
			
 
				+        'wss://iclsvrws.supermap.io/iserver/services/dataflowTest/dataflow',
			
 
				+        window.exampleToken
			
 
				+      );
			
 
				+      // 模拟 dataflow 实时数据
			
 
				+      var featureResult, dataFlowBroadcast, timer;
			
 
				+      function broadcast() {
			
 
				+        var features = [];
			
 
				+        for (var index = 0; index < featureResult.length; index++) {
			
 
				+          var count = parseInt(Math.random() * featureResult.length);
			
 
				+          var geometry = featureResult[count].geometry;
			
 
				+          var feature = {
			
 
				+            geometry: geometry,
			
 
				+            type: 'Feature',
			
 
				+            properties: { id: index + 1, time: new Date() }
			
 
				+          };
			
 
				+          features.push(feature);
			
 
				+        }
			
 
				+        dataFlowBroadcast.broadcast(features);
			
 
				+      }
			
 
				+
			
 
				+      function query() {
			
 
				+        var param = new SuperMap.QueryBySQLParameters({
			
 
				+          queryParams: { name: 'Capitals@World#3', attributeFilter: 'SMID > 0' }
			
 
				+        });
			
 
				+        var queryService = new mapboxgl.supermap.QueryService(
			
 
				+          host + '/iserver/services/map-world/rest/maps/World'
			
 
				+        ).queryBySQL(param, function(serviceResult) {
			
 
				+          featureResult = serviceResult.result && serviceResult.result.recordsets[0].features.features;
			
 
				+          dataFlowBroadcast = new mapboxgl.supermap.DataFlowService(
			
 
				+            wsHost + '/iserver/services/dataflowTest/dataflow'
			
 
				+          ).initBroadcast();
			
 
				+          dataFlowBroadcast.on('broadcastSocketConnected', function(e) {
			
 
				+            timer = window.setInterval(broadcast, 2000);
			
 
				+          });
			
 
				+        });
			
 
				+      }
			
 
				+      query();
			
 
				+
			
 
				+      ReactDOM.render(
			
 
				+        <SmWebMap mapOptions={mapOptions}>
			
 
				+          <SmDataFlowLayer serviceUrl={serviceUrl} layerStyle={layerStyle} />
			
 
				+        </SmWebMap>,
			
 
				+        document.getElementById('main')
			
 
				+      );
			
 
				+    </script>
			
 
				+  </body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_dataflow_vue.html
+++ b/public/supermap/examples/component/components_dataflow_vue.html
@@ -0,0 +1,122 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+    <head>
			
 
				+        <meta charset="UTF-8" />
			
 
				+        <title data-i18n="resources.title_componentsDataFlow_Vue"></title>
			
 
				+        <script type="text/javascript" include="vue" src="../js/include-web.js"></script>
			
 
				+        <script
			
 
				+            include="iclient-mapboxgl-vue,mapbox-gl-enhance"
			
 
				+            src="../../dist/mapboxgl/include-mapboxgl.js"
			
 
				+        ></script>
			
 
				+        <style>
			
 
				+            #main {
			
 
				+                margin: 0 auto;
			
 
				+                width: 100%;
			
 
				+                height: 100%;
			
 
				+            }
			
 
				+        </style>
			
 
				+    </head>
			
 
				+
			
 
				+    <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
			
 
				+        <div id="main">
			
 
				+            <sm-web-map :map-options="mapOptions">
			
 
				+                <sm-data-flow-layer
			
 
				+                    :service-url="dataFlowUrl"
			
 
				+                    :layer-style="layerStyle"
			
 
				+                ></sm-data-flow-layer>
			
 
				+            </sm-web-map>
			
 
				+        </div>
			
 
				+        <script>
			
 
				+            var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+            var wsHost = "wss:\//" + (window.isLocal ? document.location.hostname + ":8800" : "iclsvrws.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> ";
			
 
				+            SuperMap.SecurityManager.registerToken(
			
 
				+                "wss://iclsvrws.supermap.io/iserver/services/dataflowTest/dataflow",
			
 
				+                window.exampleToken
			
 
				+            );
			
 
				+            // 模拟 dataflow 实时数据
			
 
				+            var featureResult, dataFlowBroadcast, timer;
			
 
				+            function broadcast() {
			
 
				+                var features = [];
			
 
				+                for (var index = 0; index < featureResult.length; index++) {
			
 
				+                    var count = parseInt(Math.random() * featureResult.length);
			
 
				+                    var geometry = featureResult[count].geometry;
			
 
				+                    var feature = {
			
 
				+                        geometry: geometry,
			
 
				+                        type: "Feature",
			
 
				+                        properties: { id: index + 1, time: new Date() }
			
 
				+                    };
			
 
				+                    features.push(feature);
			
 
				+                }
			
 
				+                dataFlowBroadcast.broadcast(features);
			
 
				+            }
			
 
				+
			
 
				+            function query() {
			
 
				+                var param = new SuperMap.QueryBySQLParameters({
			
 
				+                    queryParams: { name: "Capitals@World#3", attributeFilter: "SMID > 0" }
			
 
				+                });
			
 
				+                var queryService = new mapboxgl.supermap.QueryService(
			
 
				+                    host + "/iserver/services/map-world/rest/maps/World"
			
 
				+                ).queryBySQL(param, function(serviceResult) {
			
 
				+                    featureResult = serviceResult.result && serviceResult.result.recordsets[0].features.features;
			
 
				+                    dataFlowBroadcast = new mapboxgl.supermap.DataFlowService(
			
 
				+                        wsHost + "/iserver/services/dataflowTest/dataflow"
			
 
				+                    ).initBroadcast();
			
 
				+                    dataFlowBroadcast.on("broadcastSocketConnected", function(e) {
			
 
				+                        timer = window.setInterval(broadcast, 2000);
			
 
				+                    });
			
 
				+                });
			
 
				+            }
			
 
				+            query();
			
 
				+
			
 
				+            new Vue({
			
 
				+                el: "#main",
			
 
				+                data() {
			
 
				+                    return {
			
 
				+                        dataFlowUrl: wsHost + "/iserver/services/dataflowTest/dataflow",
			
 
				+                        layerStyle: {
			
 
				+                            circle: new SuperMap.Components.commontypes.CircleStyle({
			
 
				+                                "circle-color": "#3fb1e3",
			
 
				+                                "circle-radius": 6
			
 
				+                            })
			
 
				+                        },
			
 
				+                        mapOptions: {
			
 
				+                            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: [120.143, 30.236],
			
 
				+                            zoom: 0
			
 
				+                        }
			
 
				+                    };
			
 
				+                }
			
 
				+            });
			
 
				+        </script>
			
 
				+    </body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_deckgl_react.html
+++ b/public/supermap/examples/component/components_deckgl_react.html
@@ -0,0 +1,139 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+  <head>
			
 
				+    <meta charset="UTF-8" />
			
 
				+    <title data-i18n="resources.title_componentsDeckGL_React"></title>
			
 
				+    <script type="text/javascript" include="react,jquery,papaparse,widgets" src="../js/include-web.js"></script>
			
 
				+    <script
			
 
				+      include="antd,deck,iclient-mapboxgl-react,mapbox-gl-enhance"
			
 
				+      src="../../dist/mapboxgl/include-mapboxgl.js"
			
 
				+    ></script>
			
 
				+    <style>
			
 
				+      html,
			
 
				+      body {
			
 
				+        height: 100%;
			
 
				+        margin: 0;
			
 
				+        padding: 0;
			
 
				+      }
			
 
				+      #main {
			
 
				+        height: 100%;
			
 
				+      }
			
 
				+    </style>
			
 
				+  </head>
			
 
				+  <body>
			
 
				+    <div id="main"></div>
			
 
				+    <script type="text/babel">
			
 
				+      // import {SmDeckglLayer} from '@supermap/react-iclient'
			
 
				+      var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
			
 
				+      var SmWebMap = SuperMap.Components.SmWebMap;
			
 
				+      var SmDeckglLayer = SuperMap.Components.SmDeckglLayer;
			
 
				+      var mapOptions = {
			
 
				+        container: 'map', // container id
			
 
				+        style: {
			
 
				+          version: 8,
			
 
				+          sources: {
			
 
				+            'raster-tiles': {
			
 
				+              type: 'raster',
			
 
				+              tiles: [host + '/iserver/services/map-china400/rest/maps/ChinaDark/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
			
 
				+      };
			
 
				+
			
 
				+      widgets.loader.showLoader('data loading...');
			
 
				+      var popup, map;
			
 
				+
			
 
				+      function mapIsLoaded(e) {
			
 
				+        map = e.map;
			
 
				+      }
			
 
				+
			
 
				+      $.get('../data/deck.gl/strees_data.csv', function(csvstr) {
			
 
				+        widgets.loader.removeLoader();
			
 
				+        // 构造数据
			
 
				+        var features = Papa.parse(csvstr, { skipEmptyLines: true, header: true });
			
 
				+        var deckglOptions = {
			
 
				+          data: features.data,
			
 
				+          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)];
			
 
				+            }
			
 
				+          }
			
 
				+        };
			
 
				+        ReactDOM.render(
			
 
				+          <SmWebMap mapOptions={mapOptions} onLoad={mapIsLoaded}>
			
 
				+            <SmDeckglLayer layerType={'hexagon-layer'} options={deckglOptions} />
			
 
				+          </SmWebMap>,
			
 
				+          document.getElementById('main')
			
 
				+        );
			
 
				+      });
			
 
				+    </script>
			
 
				+  </body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_deckgl_vue.html
+++ b/public/supermap/examples/component/components_deckgl_vue.html
@@ -0,0 +1,144 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+	<head>
			
 
				+		<meta charset="UTF-8" />
			
 
				+		<title data-i18n="resources.title_componentsDeckGL_Vue"></title>
			
 
				+		<script type="text/javascript" include="vue,jquery,papaparse,widgets" src="../js/include-web.js"></script>
			
 
				+		<script include="deck,iclient-mapboxgl-vue,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+		<style>
			
 
				+			#main {
			
 
				+				margin: 0 auto;
			
 
				+				width: 100%;
			
 
				+				height: 100%;
			
 
				+			}
			
 
				+		</style>
			
 
				+	</head>
			
 
				+
			
 
				+	<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
			
 
				+		<div id="main">
			
 
				+			<sm-web-map :map-options="mapOptions" @load="mapIsLoaded">
			
 
				+				<sm-deckgl-layer layer-type="hexagon-layer" :options="deckglOptions"></sm-deckgl-layer>
			
 
				+			</sm-web-map>
			
 
				+		</div>
			
 
				+		<script>
			
 
				+			widgets.loader.showLoader('data loading...');
			
 
				+			var _this = this,
			
 
				+				popup;
			
 
				+			$.get('../data/deck.gl/strees_data.csv', function(csvstr) {
			
 
				+				widgets.loader.removeLoader();
			
 
				+				// 构造数据
			
 
				+				var features = Papa.parse(csvstr, { skipEmptyLines: true, header: true });
			
 
				+				var deckglOptions = {
			
 
				+					data: features.data,
			
 
				+					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(_this.map.unproject([feature.x, feature.y]));
			
 
				+							popup.addTo(_this.map);
			
 
				+						},
			
 
				+					},
			
 
				+					callback: {
			
 
				+						getPosition: function(feature) {
			
 
				+							if (!feature.latitude || !feature.longitude) {
			
 
				+								return [0, 0];
			
 
				+							}
			
 
				+							return [Number(feature.longitude), Number(feature.latitude)];
			
 
				+						},
			
 
				+					},
			
 
				+				};
			
 
				+				new Vue({
			
 
				+					el: '#main',
			
 
				+					data() {
			
 
				+						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> ";
			
 
				+						return {
			
 
				+							deckglOptions: deckglOptions,
			
 
				+							mapOptions: {
			
 
				+								container: 'map', // container id
			
 
				+								style: {
			
 
				+									version: 8,
			
 
				+									sources: {
			
 
				+										'raster-tiles': {
			
 
				+											attribution: attribution,
			
 
				+											type: 'raster',
			
 
				+											tiles: [
			
 
				+												host +
			
 
				+													'/iserver/services/map-china400/rest/maps/ChinaDark/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,
			
 
				+							},
			
 
				+						};
			
 
				+					},
			
 
				+					methods: {
			
 
				+						mapIsLoaded(e) {
			
 
				+							_this.map = e.map;
			
 
				+						},
			
 
				+					},
			
 
				+				});
			
 
				+			});
			
 
				+		</script>
			
 
				+	</body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_demo_vue.html
+++ b/public/supermap/examples/component/components_demo_vue.html
@@ -0,0 +1,532 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+    <head>
			
 
				+        <meta charset="UTF-8" />
			
 
				+        <title data-i18n="resources.title_componentsDemo_Vue"></title>
			
 
				+        <script type="text/javascript" include="vue" src="../js/include-web.js"></script>
			
 
				+        <script
			
 
				+            include="echarts-vue,ant-design-vue,iclient-mapboxgl-vue,mapbox-gl-enhance"
			
 
				+            src="../../dist/mapboxgl/include-mapboxgl.js"
			
 
				+        ></script>
			
 
				+        <style>
			
 
				+            #main {
			
 
				+                margin: 0 auto;
			
 
				+                width: 100%;
			
 
				+                height: 100vh;
			
 
				+                overflow: hidden;
			
 
				+                padding-left: 2.08vw;
			
 
				+                box-sizing: border-box;
			
 
				+            }
			
 
				+
			
 
				+            @media screen and (max-width: 992px) {
			
 
				+                #main {
			
 
				+                    overflow: auto;
			
 
				+                }
			
 
				+            }
			
 
				+
			
 
				+            @media screen and (max-height: 640px) {
			
 
				+                #main {
			
 
				+                    overflow: auto;
			
 
				+                }
			
 
				+            }
			
 
				+
			
 
				+            /* #contentText {
			
 
				+      position: absolute;
			
 
				+      width: 490px;
			
 
				+      height: 130px;
			
 
				+      top: 180px;
			
 
				+      left: 60px;
			
 
				+    } */
			
 
				+        </style>
			
 
				+    </head>
			
 
				+
			
 
				+    <body style="margin: 0;background: #fff;">
			
 
				+        <div id="main">
			
 
				+            <a-row>
			
 
				+                <a-col :md="8" class="left-container">
			
 
				+                    <a-row v-if="!showMap">
			
 
				+                        <div class="map-wrap">
			
 
				+                            <sm-web-map server-url="https://www.supermapol.com" map-id="2068226677">
			
 
				+                                <sm-zoom></sm-zoom>
			
 
				+                                <sm-scale position="bottom-left"></sm-scale>
			
 
				+                            </sm-web-map>
			
 
				+                        </div>
			
 
				+                    </a-row>
			
 
				+                    <a-row class="title-text-wrap">
			
 
				+                        <sm-text
			
 
				+                            id="titleText"
			
 
				+                            :font-style="titleFontStyle"
			
 
				+                            text-color="#5AB1EF"
			
 
				+                            title="国土空间规划实时监测评估预警"
			
 
				+                        ></sm-text>
			
 
				+                    </a-row>
			
 
				+
			
 
				+                    <a-row class="time-text-wrap">
			
 
				+                        <sm-time-text
			
 
				+                            id="timeText"
			
 
				+                            :font-style='{"fontFamily": "微软雅黑"}'
			
 
				+                            text-color="#B7B2B2"
			
 
				+                            time-type="date+second+week"
			
 
				+                        ></sm-time-text>
			
 
				+                    </a-row>
			
 
				+
			
 
				+                    <a-row class="monitor-wrap">
			
 
				+                        <a-row class="block-title">
			
 
				+                            <sm-text id="monitoringText" :font-style="categoryFontStyle" title="监测情况"></sm-text>
			
 
				+                        </a-row>
			
 
				+                        <a-row class="monitor-text">
			
 
				+                            <sm-text
			
 
				+                                id="contentText"
			
 
				+                                :font-style='{"fontFamily": "微软雅黑","fontWeight": "bolder","textAlign": "left"}'
			
 
				+                                text-color="#807B7B"
			
 
				+                                title="截止2018年底，国土空间整体开发强度为2.5%，三类空间比例为50%:30%:20%。耕地保有量为300万亩，城镇建设用地规模为300km²，森林覆盖率达到64%，水功能水质达标率为80%，生态环境治理良好。"
			
 
				+                            >
			
 
				+                            </sm-text>
			
 
				+                        </a-row>
			
 
				+                    </a-row>
			
 
				+
			
 
				+                    <a-row class="control-wrap">
			
 
				+                        <a-row class="block-title">
			
 
				+                            <sm-text id="sanxianText" :font-style="categoryFontStyle" title="三线管控"></sm-text>
			
 
				+                        </a-row>
			
 
				+                        <a-row type="flex" justify="space-around">
			
 
				+                            <a-col :md="8" :sm="6" :xs="6" class="control-title">
			
 
				+                                <sm-text id="ecologyText" :font-style="textFontStyle" title="生态空间"></sm-text>
			
 
				+                                <sm-liquid-fill
			
 
				+                                    id="liquidFill1"
			
 
				+                                    :value="0.32"
			
 
				+                                    :font-size="18"
			
 
				+                                    :wave-count="2"
			
 
				+                                    :wave-animation="true"
			
 
				+                                    wave-color="#2EC7C9"
			
 
				+                                >
			
 
				+                                </sm-liquid-fill>
			
 
				+                            </a-col>
			
 
				+                            <a-col :md="8" :sm="6" :xs="6" class="control-title">
			
 
				+                                <sm-text id="townText" :font-style="textFontStyle" title="城镇空间"></sm-text>
			
 
				+                                <sm-liquid-fill
			
 
				+                                    id="liquidFill2"
			
 
				+                                    :value="0.48"
			
 
				+                                    :font-size="18"
			
 
				+                                    :wave-count="2"
			
 
				+                                    :wave-animation="true"
			
 
				+                                    wave-color="#ffb980"
			
 
				+                                >
			
 
				+                                </sm-liquid-fill>
			
 
				+                            </a-col>
			
 
				+                            <a-col :md="8" :sm="6" :xs="6" class="control-title">
			
 
				+                                <sm-text id="farmText" :font-style="textFontStyle" title="农业空间"></sm-text>
			
 
				+                                <sm-liquid-fill
			
 
				+                                    id="liquidFill3"
			
 
				+                                    :value="0.17"
			
 
				+                                    :font-size="18"
			
 
				+                                    :wave-count="3"
			
 
				+                                    :wave-animation="true"
			
 
				+                                    wave-color="#d87a80"
			
 
				+                                >
			
 
				+                                </sm-liquid-fill>
			
 
				+                            </a-col>
			
 
				+                        </a-row>
			
 
				+                    </a-row>
			
 
				+
			
 
				+                    <a-row class="resource-wrap">
			
 
				+                        <a-row class="block-title">
			
 
				+                            <sm-text id="naturalText" :font-style="categoryFontStyle" title="自然资源"></sm-text>
			
 
				+                        </a-row>
			
 
				+                        <a-row type="flex" justify="end" class="resource-year">
			
 
				+                            <a-col :md="9" :sm="8" :xs="8">
			
 
				+                                <sm-text id="yearText1" :font-style="textFontStyle" title="2017年"></sm-text>
			
 
				+                            </a-col>
			
 
				+                            <a-col :md="9" :sm="8" :xs="8">
			
 
				+                                <sm-text id="yearText2" :font-style="textFontStyle" title="2018年"></sm-text>
			
 
				+                            </a-col>
			
 
				+                        </a-row>
			
 
				+                        <a-row type="flex" align="middle" class="resource-item">
			
 
				+                            <a-col :md="6" :sm="8" :xs="8">
			
 
				+                                <sm-indicator
			
 
				+                                    id="woodlandIndicator"
			
 
				+                                    title="林地保有量"
			
 
				+                                    unit="km²"
			
 
				+                                    num="300"
			
 
				+                                    font-size="26"
			
 
				+                                ></sm-indicator>
			
 
				+                            </a-col>
			
 
				+                            <a-col :md="18" :sm="16" :xs="16" class="resource-chart">
			
 
				+                                <a-col :md="12" :sm="12" :xs="12">
			
 
				+                                    <div class="sm-progress-wrap">
			
 
				+                                        <sm-progress
			
 
				+                                            id="progress5"
			
 
				+                                            size="100"
			
 
				+                                            stroke-color="#b6a2de"
			
 
				+                                            percent="30"
			
 
				+                                            stroke-width="6"
			
 
				+                                            type="circle"
			
 
				+                                        >
			
 
				+                                        </sm-progress>
			
 
				+                                    </div>
			
 
				+                                </a-col>
			
 
				+                                <a-col :md="12" :sm="12" :xs="12">
			
 
				+                                    <div class="sm-progress-wrap">
			
 
				+                                        <sm-progress
			
 
				+                                            id="progress6"
			
 
				+                                            size="100"
			
 
				+                                            stroke-color="#5ab1ef"
			
 
				+                                            percent="50"
			
 
				+                                            stroke-width="6"
			
 
				+                                            type="circle"
			
 
				+                                        >
			
 
				+                                        </sm-progress>
			
 
				+                                    </div>
			
 
				+                                </a-col>
			
 
				+                            </a-col>
			
 
				+                        </a-row>
			
 
				+                        <a-row type="flex" align="middle" class="resource-item">
			
 
				+                            <a-col :md="6" :sm="8" :xs="8">
			
 
				+                                <sm-indicator
			
 
				+                                    id="farmlandIndicator"
			
 
				+                                    title="耕地保有量"
			
 
				+                                    unit="万亩"
			
 
				+                                    num="300"
			
 
				+                                    font-size="26"
			
 
				+                                ></sm-indicator>
			
 
				+                            </a-col>
			
 
				+                            <a-col :md="18" :sm="16" :xs="16" class="resource-chart">
			
 
				+                                <a-col :md="12" :sm="12" :xs="12">
			
 
				+                                    <div class="sm-progress-wrap">
			
 
				+                                        <sm-progress
			
 
				+                                            id="progress7"
			
 
				+                                            size="100"
			
 
				+                                            stroke-color="#2ec7c9"
			
 
				+                                            percent="60"
			
 
				+                                            stroke-width="6"
			
 
				+                                            type="circle"
			
 
				+                                        >
			
 
				+                                        </sm-progress>
			
 
				+                                    </div>
			
 
				+                                </a-col>
			
 
				+                                <a-col :md="12" :sm="12" :xs="12">
			
 
				+                                    <div class="sm-progress-wrap">
			
 
				+                                        <sm-progress
			
 
				+                                            id="progress8"
			
 
				+                                            size="100"
			
 
				+                                            stroke-color="#ffb980"
			
 
				+                                            percent="80"
			
 
				+                                            stroke-width="6"
			
 
				+                                            type="circle"
			
 
				+                                        >
			
 
				+                                        </sm-progress>
			
 
				+                                    </div>
			
 
				+                                </a-col>
			
 
				+                            </a-col>
			
 
				+                        </a-row>
			
 
				+                    </a-row>
			
 
				+                </a-col>
			
 
				+
			
 
				+                <a-col :md="16" :xs="24">
			
 
				+                    <a-row v-if="showMap">
			
 
				+                        <div class="map-wrap">
			
 
				+                            <sm-web-map server-url="https://www.supermapol.com" map-id="2068226677">
			
 
				+                                <sm-zoom></sm-zoom>
			
 
				+                                <sm-scale position="bottom-left"></sm-scale>
			
 
				+                            </sm-web-map>
			
 
				+                        </div>
			
 
				+                    </a-row>
			
 
				+
			
 
				+                    <a-row>
			
 
				+                        <a-col :md="12" :xs="24" class="environment-wrap">
			
 
				+                            <a-row class="environment-title block-title">
			
 
				+                                <sm-icon id="icon1" icon-class="marker-layer" size="18" color="red"></sm-icon>
			
 
				+                                <sm-text id="ecologicalText" :font-style="categoryFontStyle" title="生态环境"></sm-text>
			
 
				+                            </a-row>
			
 
				+                            <a-row class="environment-progress-holder">
			
 
				+                                <a-col class="progress-col" :md="24" :xs="24">
			
 
				+                                    <sm-progress
			
 
				+                                        id="progress1"
			
 
				+                                        stroke-color="#2ec7c9"
			
 
				+                                        percent="80"
			
 
				+                                        stroke-width="10"
			
 
				+                                        type="line"
			
 
				+                                    ></sm-progress>
			
 
				+                                </a-col>
			
 
				+                                <a-col class="progress-col" :md="24" :xs="24">
			
 
				+                                    <sm-progress
			
 
				+                                        id="progress2"
			
 
				+                                        stroke-color="#ffb980"
			
 
				+                                        percent="40"
			
 
				+                                        stroke-width="10"
			
 
				+                                        type="line"
			
 
				+                                    ></sm-progress>
			
 
				+                                </a-col>
			
 
				+                                <a-col class="progress-col" :md="24" :xs="24">
			
 
				+                                    <sm-progress
			
 
				+                                        id="progress3"
			
 
				+                                        stroke-color="#b6a2de"
			
 
				+                                        percent="60"
			
 
				+                                        stroke-width="10"
			
 
				+                                        type="line"
			
 
				+                                    ></sm-progress>
			
 
				+                                </a-col>
			
 
				+                                <a-col class="progress-col" :md="24" :xs="24">
			
 
				+                                    <sm-progress
			
 
				+                                        id="progress4"
			
 
				+                                        stroke-color="#5ab1ef"
			
 
				+                                        percent="20"
			
 
				+                                        stroke-width="10"
			
 
				+                                        type="line"
			
 
				+                                    ></sm-progress>
			
 
				+                                </a-col>
			
 
				+                            </a-row>
			
 
				+                        </a-col>
			
 
				+
			
 
				+                        <a-col :md="12" :xs="24" class="chart-wrap">
			
 
				+                            <a-row class="chart-title block-title">
			
 
				+                                <sm-icon id="icon2" icon-class="marker-layer" size="18" color="#2EC7C9"></sm-icon>
			
 
				+                                <sm-text
			
 
				+                                    id="developmentText"
			
 
				+                                    :font-style="categoryFontStyle"
			
 
				+                                    title="开发利用"
			
 
				+                                ></sm-text>
			
 
				+                            </a-row>
			
 
				+                            <a-row>
			
 
				+                                <a-col :md="24" :xs="24">
			
 
				+                                    <sm-chart
			
 
				+                                        icon-class=""
			
 
				+                                        :options="echartOption"
			
 
				+                                        :dataset="dataset"
			
 
				+                                        :dataset-options="datasetOptions"
			
 
				+                                    >
			
 
				+                                    </sm-chart>
			
 
				+                                </a-col>
			
 
				+                            </a-row>
			
 
				+                        </a-col>
			
 
				+                    </a-row>
			
 
				+                </a-col>
			
 
				+            </a-row>
			
 
				+        </div>
			
 
				+
			
 
				+        <script>
			
 
				+            //本示例数据纯属虚构
			
 
				+            new Vue({
			
 
				+                el: '#main',
			
 
				+                data() {
			
 
				+                    return {
			
 
				+                        dataset: {
			
 
				+                            type: 'iPortal', //iServer iPortal
			
 
				+                            url: 'https://iportal.supermap.io/iportal/web/datas/676516522',
			
 
				+                            queryInfo: {
			
 
				+                                maxFeatures: 20
			
 
				+                            }
			
 
				+                        },
			
 
				+                        datasetOptions: [
			
 
				+                            {
			
 
				+                                seriesType: 'bar', //图表类型
			
 
				+                                isStastic: true, //是否统计, 默认不统计
			
 
				+                                xField: '机场', //x坐标轴数据字段
			
 
				+                                yField: '2016起降架次（架次）' //统计的数据，legned默认名字
			
 
				+                            },
			
 
				+                            {
			
 
				+                                seriesType: 'bar', //图表类型
			
 
				+                                isStastic: true, //是否统计, 默认不统计
			
 
				+                                xField: '机场', //x坐标轴数据字段
			
 
				+                                yField: '2017起降架次（架次）' //统计的数据，legned默认名字
			
 
				+                            }
			
 
				+                        ],
			
 
				+                        echartOption: {
			
 
				+                            legend: { data: ['2017起降架次（架次）', '2016起降架次（架次）'] }, //与 yField数据一致
			
 
				+                            grid: {
			
 
				+                                top: 30,
			
 
				+                                bottom: 65,
			
 
				+                                left: 55,
			
 
				+                                right: 40
			
 
				+                            }
			
 
				+                        },
			
 
				+                        titleFontStyle: {
			
 
				+                            fontFamily: '微软雅黑',
			
 
				+                            fontWeight: 'bolder'
			
 
				+                        },
			
 
				+                        categoryFontStyle: {
			
 
				+                            fontFamily: '微软雅黑',
			
 
				+                            fontWeight: 'bolder',
			
 
				+                            textAlign: 'left'
			
 
				+                        },
			
 
				+                        textFontStyle: {
			
 
				+                            fontFamily: '微软雅黑',
			
 
				+                            fontWeight: 'bolder',
			
 
				+                            textAlign: 'center'
			
 
				+                        },
			
 
				+                        showMap: true
			
 
				+                    };
			
 
				+                },
			
 
				+                mounted() {
			
 
				+                    let screenWidth = document.body.clientWidth;
			
 
				+                    if (screenWidth <= 540) {
			
 
				+                        this.showMap = false;
			
 
				+                    }
			
 
				+                }
			
 
				+            });
			
 
				+        </script>
			
 
				+        <style>
			
 
				+            html {
			
 
				+                font-size: 10px;
			
 
				+            }
			
 
				+
			
 
				+            .left-container {
			
 
				+                padding-top: 2.2vh;
			
 
				+                padding-right: 1.2vw;
			
 
				+            }
			
 
				+
			
 
				+            .map-wrap {
			
 
				+                height: 63vh;
			
 
				+            }
			
 
				+            #titleText {
			
 
				+                font-size: 2rem;
			
 
				+            }
			
 
				+            .title-text-wrap .sm-component-text {
			
 
				+                width: 100%;
			
 
				+                font-size: 1.6rem;
			
 
				+                line-height: 1.5;
			
 
				+            }
			
 
				+
			
 
				+            .time-text-wrap .sm-component-time-text {
			
 
				+                text-align: center;
			
 
				+                display: block;
			
 
				+                margin: 0 auto;
			
 
				+                font-size: 1.2rem;
			
 
				+            }
			
 
				+
			
 
				+            .block-title .sm-component-text {
			
 
				+                width: 100%;
			
 
				+                font-size: 1.4rem;
			
 
				+                line-height: 1.5;
			
 
				+            }
			
 
				+
			
 
				+            .monitor-wrap {
			
 
				+                margin: 0.93vh 0;
			
 
				+            }
			
 
				+
			
 
				+            .monitor-wrap .block-title {
			
 
				+                margin-bottom: 1.85vh;
			
 
				+            }
			
 
				+
			
 
				+            .monitor-wrap .monitor-text .sm-component-text {
			
 
				+                width: 100%;
			
 
				+                font-size: 1.1rem;
			
 
				+                line-height: 1.5;
			
 
				+            }
			
 
				+
			
 
				+            .control-wrap .block-title,
			
 
				+            .resource-wrap .block-title {
			
 
				+                /* margin-bottom: 1.2vh; */
			
 
				+                padding-top: 2.78vh;
			
 
				+            }
			
 
				+
			
 
				+            .control-wrap .control-title .sm-component-liquidFill {
			
 
				+                height: 13.89vh;
			
 
				+            }
			
 
				+
			
 
				+            .control-wrap .control-title .sm-component-text,
			
 
				+            .resource-wrap .resource-year .sm-component-text {
			
 
				+                width: 100%;
			
 
				+                margin-bottom: 0.93vh;
			
 
				+                font-size: 1.1rem;
			
 
				+            }
			
 
				+
			
 
				+            .resource-wrap .resource-item {
			
 
				+                margin-bottom: 3.2vh;
			
 
				+            }
			
 
				+
			
 
				+            .resource-wrap .resource-item:last-of-type {
			
 
				+                margin-bottom: 0;
			
 
				+            }
			
 
				+
			
 
				+            .resource-wrap .resource-item .sm-component-indicator .sm-component-indicator__title,
			
 
				+            .resource-wrap .resource-item .sm-component-indicator .sm-component-indicator__unit {
			
 
				+                font-size: 1rem;
			
 
				+                line-height: 1.5;
			
 
				+            }
			
 
				+
			
 
				+            .resource-wrap .resource-item .sm-component-indicator .sm-component-indicator__num {
			
 
				+                font-size: 1.5rem;
			
 
				+            }
			
 
				+
			
 
				+            .resource-wrap .resource-item .sm-component-indicator .sm-component-indicator__content {
			
 
				+                margin-bottom: 0;
			
 
				+                margin-right: 0;
			
 
				+            }
			
 
				+
			
 
				+            .resource-wrap .resource-chart .sm-component-progress-wrap {
			
 
				+                height: 12.96vh;
			
 
				+            }
			
 
				+
			
 
				+            .resource-wrap .resource-chart .sm-component-progress {
			
 
				+                text-align: center;
			
 
				+            }
			
 
				+
			
 
				+            .environment-wrap {
			
 
				+                padding-right: 6.77vw;
			
 
				+            }
			
 
				+
			
 
				+            .environment-wrap .environment-title .sm-component-icon,
			
 
				+            .environment-wrap .environment-title .sm-component-text,
			
 
				+            .chart-wrap .chart-title .sm-component-icon,
			
 
				+            .chart-wrap .chart-title .sm-component-text {
			
 
				+                width: auto;
			
 
				+                display: inline-block;
			
 
				+                vertical-align: middle;
			
 
				+            }
			
 
				+
			
 
				+            .environment-wrap .environment-title,
			
 
				+            .chart-wrap .chart-title {
			
 
				+                padding-top: 0.93vh;
			
 
				+            }
			
 
				+
			
 
				+            .environment-wrap .environment-title {
			
 
				+                margin-bottom: 2.78vh;
			
 
				+            }
			
 
				+
			
 
				+            .environment-wrap,
			
 
				+            .environment-progress-holder .progress-col {
			
 
				+                margin-bottom: 3.7vh;
			
 
				+            }
			
 
				+
			
 
				+            .environment-wrap,
			
 
				+            .environment-progress-holder .progress-col:last-child {
			
 
				+                margin-bottom: 0;
			
 
				+            }
			
 
				+
			
 
				+            .chart-wrap .chart-title {
			
 
				+                margin-bottom: 1.39vh;
			
 
				+            }
			
 
				+
			
 
				+            .chart-wrap .sm-component-chart {
			
 
				+                height: 30vh;
			
 
				+            }
			
 
				+            .sm-component-chart .sm-component-collapse-card__content {
			
 
				+                box-shadow: 0 0 0 #fff;
			
 
				+                width: 100%;
			
 
				+                height: 28vh;
			
 
				+            }
			
 
				+            @media (max-width: 540px) {
			
 
				+                html {
			
 
				+                    font-size: 10px;
			
 
				+                }
			
 
				+                .left-container {
			
 
				+                    padding-top: 0;
			
 
				+                }
			
 
				+                .map-wrap {
			
 
				+                    margin-left: -2.08vw;
			
 
				+                    width: 100vw;
			
 
				+                    height: 90vh;
			
 
				+                }
			
 
				+            }
			
 
				+            @media (min-width: 1200px) {
			
 
				+                html {
			
 
				+                    font-size: 16px;
			
 
				+                }
			
 
				+            }
			
 
				+        </style>
			
 
				+    </body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_draw_vue.html
+++ b/public/supermap/examples/component/components_draw_vue.html
@@ -0,0 +1,36 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+
			
 
				+<head>
			
 
				+  <meta charset="UTF-8">
			
 
				+  <title data-i18n='resources.title_componentsDraw_Vue'></title>
			
 
				+  <script type="text/javascript" include="vue" src="../js/include-web.js"></script>
			
 
				+  <script include="iclient-mapboxgl-vue,mapbox-gl-enhance,draw" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+  <style>
			
 
				+     #main{
			
 
				+        margin: 0 auto;
			
 
				+        width: 100%;
			
 
				+        height: 100%;
			
 
				+    }
			
 
				+  </style>
			
 
				+</head>
			
 
				+
			
 
				+<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
			
 
				+  <div id="main">
			
 
				+    <sm-web-map server-url="https://iportal.supermap.io/iportal/" map-id="801571284">
			
 
				+        <sm-draw :collapsed="false"></sm-draw>
			
 
				+    </sm-web-map>
			
 
				+  </div>
			
 
				+
			
 
				+  <script>
			
 
				+    new Vue({
			
 
				+      el: '#main'
			
 
				+    })
			
 
				+
			
 
				+  </script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_echarts_react.html
+++ b/public/supermap/examples/component/components_echarts_react.html
@@ -0,0 +1,115 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+  <head>
			
 
				+    <meta charset="UTF-8" />
			
 
				+    <title data-i18n="resources.title_componentsEcharts_React"></title>
			
 
				+    <script type="text/javascript" include="react,jquery" src="../js/include-web.js"></script>
			
 
				+    <script include="antd,iclient-mapboxgl-react,mapbox-gl-enhance,echarts" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+    <style>
			
 
				+      html,
			
 
				+      body {
			
 
				+        height: 100%;
			
 
				+        margin: 0;
			
 
				+        padding: 0;
			
 
				+      }
			
 
				+
			
 
				+      #main {
			
 
				+        height: 100%;
			
 
				+      }
			
 
				+    </style>
			
 
				+  </head>
			
 
				+
			
 
				+  <body>
			
 
				+    <div id="main"></div>
			
 
				+    <script type="text/babel">
			
 
				+      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 SmWebMap = SuperMap.Components.SmWebMap;
			
 
				+      var SmEchartsLayer = SuperMap.Components.SmEchartsLayer;
			
 
				+      var mapOptions = {
			
 
				+        container: 'map', // container id
			
 
				+        style: {
			
 
				+          version: 8,
			
 
				+          sources: {
			
 
				+            'raster-tiles': {
			
 
				+              attribution: attribution,
			
 
				+              type: 'raster',
			
 
				+              tiles: [host + '/iserver/services/map-china400/rest/maps/ChinaDark/zxyTileImage.png?z={z}&x={x}&y={y}'],
			
 
				+              tileSize: 256
			
 
				+            }
			
 
				+          },
			
 
				+          layers: [
			
 
				+            {
			
 
				+              id: 'simple-tiles',
			
 
				+              type: 'raster',
			
 
				+              source: 'raster-tiles',
			
 
				+              minzoom: 0,
			
 
				+              maxzoom: 22
			
 
				+            }
			
 
				+          ]
			
 
				+        },
			
 
				+        center: [125.35, 43.86],
			
 
				+        zoom: 10
			
 
				+      };
			
 
				+
			
 
				+      $.get('../data/changchunBus.json', function(data) {
			
 
				+        var echartsOptions = {
			
 
				+          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
			
 
				+              }
			
 
				+            }
			
 
				+          ]
			
 
				+        };
			
 
				+
			
 
				+        ReactDOM.render(
			
 
				+          <SmWebMap mapOptions={mapOptions}>
			
 
				+            <SmEchartsLayer options={echartsOptions} />
			
 
				+          </SmWebMap>,
			
 
				+          document.getElementById('main')
			
 
				+        );
			
 
				+      });
			
 
				+    </script>
			
 
				+  </body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_echarts_vue.html
+++ b/public/supermap/examples/component/components_echarts_vue.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_componentsEcharts_Vue"></title>
			
 
				+        <script type="text/javascript" include="vue,jquery" src="../js/include-web.js"></script>
			
 
				+        <script
			
 
				+            include="iclient-mapboxgl-vue,mapbox-gl-enhance,echarts"
			
 
				+            src="../../dist/mapboxgl/include-mapboxgl.js"
			
 
				+        ></script>
			
 
				+        <style>
			
 
				+            #main {
			
 
				+                margin: 0 auto;
			
 
				+                width: 100%;
			
 
				+                height: 100%;
			
 
				+            }
			
 
				+            
			
 
				+        </style>
			
 
				+    </head>
			
 
				+
			
 
				+    <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
			
 
				+        <div id="main">
			
 
				+            <sm-web-map :map-options="mapOptions">
			
 
				+                <sm-echarts-layer :options="echartsOptions"></sm-echarts-layer>
			
 
				+            </sm-web-map>
			
 
				+        </div>
			
 
				+        <script>
			
 
				+            $.get('../data/changchunBus.json', function(data) {
			
 
				+                var echartsOptions = {
			
 
				+                    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
			
 
				+                            }
			
 
				+                        }
			
 
				+                    ]
			
 
				+                };
			
 
				+                new Vue({
			
 
				+                    el: '#main',
			
 
				+                    data() {
			
 
				+                        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> ";
			
 
				+                        return {
			
 
				+                            echartsOptions: echartsOptions,
			
 
				+                            mapOptions: {
			
 
				+                                container: 'map', // container id
			
 
				+                                style: {
			
 
				+                                    version: 8,
			
 
				+                                    sources: {
			
 
				+                                        'raster-tiles': {
			
 
				+                                            attribution: attribution,
			
 
				+                                            type: 'raster',
			
 
				+                                            tiles: [
			
 
				+                                                host +
			
 
				+                                                    '/iserver/services/map-china400/rest/maps/ChinaDark/zxyTileImage.png?z={z}&x={x}&y={y}'
			
 
				+                                            ],
			
 
				+                                            tileSize: 256
			
 
				+                                        }
			
 
				+                                    },
			
 
				+                                    layers: [
			
 
				+                                        {
			
 
				+                                            id: 'simple-tiles',
			
 
				+                                            type: 'raster',
			
 
				+                                            source: 'raster-tiles',
			
 
				+                                            minzoom: 0,
			
 
				+                                            maxzoom: 22
			
 
				+                                        }
			
 
				+                                    ]
			
 
				+                                },
			
 
				+                                center: [125.35, 43.86],
			
 
				+                                zoom: 10
			
 
				+                            }
			
 
				+                        };
			
 
				+                    }
			
 
				+                });
			
 
				+            });
			
 
				+        </script>
			
 
				+    </body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_ecologicalBigDataPlatform_vue.html
+++ b/public/supermap/examples/component/components_ecologicalBigDataPlatform_vue.html
--- a/public/supermap/examples/component/components_estateMonitoringPlatform_vue.html
+++ b/public/supermap/examples/component/components_estateMonitoringPlatform_vue.html
@@ -0,0 +1,370 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+    <head>
			
 
				+        <meta charset="UTF-8" />
			
 
				+        <title data-i18n="resources.title_componentsEstateMonitoringPlatform_Vue"></title>
			
 
				+        <script type="text/javascript" include="vue" src="../js/include-web.js"></script>
			
 
				+        <script
			
 
				+            include="echarts-vue,iclient-mapboxgl-vue,mapbox-gl-enhance,ant-design-vue"
			
 
				+            src="../../dist/mapboxgl/include-mapboxgl.js"
			
 
				+        ></script>
			
 
				+        <script type="text/javascript" src="../data/estateMonitoringPlatformData.js"></script>
			
 
				+        <style>
			
 
				+            body {
			
 
				+                margin: 0px;
			
 
				+                background: #fff;
			
 
				+            }
			
 
				+            #main {
			
 
				+                margin: 0 auto;
			
 
				+                width: 100%;
			
 
				+                height: 100vh;
			
 
				+                overflow: hidden;
			
 
				+                box-sizing: border-box;
			
 
				+                background: #000;
			
 
				+                position: relative;
			
 
				+            }
			
 
				+
			
 
				+            @media screen and (max-width: 992px) {
			
 
				+                #main {
			
 
				+                    overflow: auto;
			
 
				+                }
			
 
				+            }
			
 
				+        </style>
			
 
				+    </head>
			
 
				+
			
 
				+    <body>
			
 
				+        <div id="main">
			
 
				+            <a-row id="map-row">
			
 
				+                <a-col v-if="!showMap" :md="12" id="map-col">
			
 
				+                    <div class="map-holder">
			
 
				+                        <sm-web-map :map-options="mapOptions">
			
 
				+                            <sm-geojson-layer v-if="!showMap" :data="data" :layer-style="layerStyle"></sm-geojson-layer>
			
 
				+                        </sm-web-map>
			
 
				+                    </div>
			
 
				+                </a-col>
			
 
				+                <a-col :md="12" v-if="!showMap">
			
 
				+                    <sm-text
			
 
				+                        :font-style="{fontSize: '2.4rem', lineHeight: '2.6rem'}"
			
 
				+                        title="房产项目可视化监控平台"
			
 
				+                    ></sm-text>
			
 
				+                    <div class="indicator-holder">
			
 
				+                        <sm-indicator title="土地出让金" unit="亿元" num="12320"> </sm-indicator>
			
 
				+                        <sm-indicator title="回款金额" unit="元" num="12320"> </sm-indicator>
			
 
				+                        <sm-indicator title="净利润" unit="元" num="12320"> </sm-indicator>
			
 
				+                    </div>
			
 
				+                </a-col>
			
 
				+                <a-col :md="6">
			
 
				+                    <sm-time-text timeType="date"> </sm-time-text>
			
 
				+                    <div class="year-plan-wrap">
			
 
				+                        <sm-text :font-style="{lineHeight: '1.67vw'}" title="年度计划"></sm-text>
			
 
				+                        <div class="progress-holder">
			
 
				+                            <div class="progress-item">
			
 
				+                                <sm-progress type="circle" :percent="55" :stroke-width="8"> </sm-progress>
			
 
				+                                <sm-text title="销售金额"></sm-text>
			
 
				+                            </div>
			
 
				+                            <div class="progress-item">
			
 
				+                                <sm-progress type="circle" :stroke-width="8" :percent="35"> </sm-progress>
			
 
				+                                <sm-text title="销售回款"></sm-text>
			
 
				+                            </div>
			
 
				+                            <div class="progress-item">
			
 
				+                                <sm-progress type="circle" :stroke-width="8" :percent="60"> </sm-progress>
			
 
				+                                <sm-text title="营业收入"></sm-text>
			
 
				+                            </div>
			
 
				+                            <div class="progress-item">
			
 
				+                                <sm-progress type="circle" :stroke-width="8" :percent="40"></sm-progress>
			
 
				+                                <sm-text title="净利润"></sm-text>
			
 
				+                            </div>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                </a-col>
			
 
				+                <a-col :md="12" v-if="showMap">
			
 
				+                    <sm-text
			
 
				+                        :font-style="{fontSize: '2.4rem', lineHeight: '2.6rem'}"
			
 
				+                        title="房产项目可视化监控平台"
			
 
				+                    ></sm-text>
			
 
				+                    <div class="indicator-holder">
			
 
				+                        <sm-indicator title="土地出让金" unit="亿元" num="12320"> </sm-indicator>
			
 
				+                        <sm-indicator title="回款金额" unit="元" num="12320"> </sm-indicator>
			
 
				+                        <sm-indicator title="净利润" unit="元" num="12320"> </sm-indicator>
			
 
				+                    </div>
			
 
				+                </a-col>
			
 
				+                <a-col :md="6">
			
 
				+                    <sm-text title="常规项目指标"></sm-text>
			
 
				+                    <div class="normal-index-progress-holder">
			
 
				+                        <div class="progress-item">
			
 
				+                            <sm-progress type="circle" :percent="20" :stroke-width="10"> </sm-progress>
			
 
				+                            <sm-text title="施工类型"></sm-text>
			
 
				+                        </div>
			
 
				+                        <div class="progress-item">
			
 
				+                            <sm-progress type="circle" :percent="60" :stroke-width="10"> </sm-progress>
			
 
				+                            <sm-text title="施工总进度"></sm-text>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                </a-col>
			
 
				+            </a-row>
			
 
				+            <a-row>
			
 
				+                <a-col :md="6">
			
 
				+                    <div class="chart-item">
			
 
				+                        <sm-text title="销售金额统计"></sm-text>
			
 
				+                        <sm-chart icon-class="" :options="saleAmountOption"> </sm-chart>
			
 
				+                    </div>
			
 
				+                    <div class="chart-item">
			
 
				+                        <sm-text title="销售回款趋势"></sm-text>
			
 
				+                        <sm-chart icon-class="" :options="saleReturnOption"> </sm-chart>
			
 
				+                    </div>
			
 
				+                </a-col>
			
 
				+                <a-col v-if="showMap" :md="12" id="map-col">
			
 
				+                    <div class="map-holder">
			
 
				+                        <sm-web-map :map-options="mapOptions">
			
 
				+                            <sm-geojson-layer v-if="showMap" :data="data" :layer-style="layerStyle"></sm-geojson-layer>
			
 
				+                        </sm-web-map>
			
 
				+                    </div>
			
 
				+                </a-col>
			
 
				+                <a-col :md="6">
			
 
				+                    <div class="chart-item">
			
 
				+                        <sm-text title="库存指标"></sm-text>
			
 
				+                        <sm-chart icon-class="" :options="stockIndexOption"> </sm-chart>
			
 
				+                    </div>
			
 
				+                    <div class="chart-item">
			
 
				+                        <sm-text title="项目价值指标"></sm-text>
			
 
				+                        <sm-progress type="circle" :percent="80" :stroke-width="10"> </sm-progress>
			
 
				+                    </div>
			
 
				+                </a-col>
			
 
				+            </a-row>
			
 
				+            <a-row>
			
 
				+                <a-col :md="6">
			
 
				+                    <div class="chart-item">
			
 
				+                        <sm-text title="项目成本表"></sm-text>
			
 
				+                        <sm-chart icon-class="" :options="projectCostOption"> </sm-chart>
			
 
				+                    </div>
			
 
				+                </a-col>
			
 
				+                <a-col :md="12">
			
 
				+                    <div class="chart-holder">
			
 
				+                        <div class="chart-item">
			
 
				+                            <sm-text title="营业收入情况"></sm-text>
			
 
				+                            <sm-chart icon-class="" :options="revenueOption"> </sm-chart>
			
 
				+                        </div>
			
 
				+                        <div class="chart-item">
			
 
				+                            <sm-text title="投资盈利情况"></sm-text>
			
 
				+                            <sm-chart icon-class="" :options="investProfitOption"> </sm-chart>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                </a-col>
			
 
				+                <a-col :md="6">
			
 
				+                    <div class="chart-item">
			
 
				+                        <sm-text title="库存情况"></sm-text>
			
 
				+                        <sm-chart icon-class="" :options="stockSituationOption"> </sm-chart>
			
 
				+                    </div>
			
 
				+                </a-col>
			
 
				+            </a-row>
			
 
				+            <a-button @click="changeTheme" class="theme-btn">{{ resources.btn_switchTheme }}</a-button>
			
 
				+        </div>
			
 
				+
			
 
				+        <script>
			
 
				+            //本示例数据纯属虚构
			
 
				+            new Vue({
			
 
				+                el: '#main',
			
 
				+                data() {
			
 
				+                    var mergeData = Object.assign(
			
 
				+                        {
			
 
				+                            theme: 'custom',
			
 
				+                            mapOptions: {
			
 
				+                                pitch: 60,
			
 
				+                                container: 'map', // container id
			
 
				+                                style: {
			
 
				+                                    version: 8,
			
 
				+                                    sources: {},
			
 
				+                                    layers: []
			
 
				+                                },
			
 
				+                                center: [116.47, 39.92], // starting position
			
 
				+                                zoom: 16 // starting zoom
			
 
				+                            },
			
 
				+                            data: '../data/buildings.json',
			
 
				+                            layerStyle: {
			
 
				+                                paint: {
			
 
				+                                    'fill-extrusion-color': [
			
 
				+                                        'case',
			
 
				+                                        ['<', ['get', 'height'], 2],
			
 
				+                                        '#fbb03b',
			
 
				+                                        ['<', ['get', 'height'], 4],
			
 
				+                                        '#223b53',
			
 
				+                                        ['<', ['get', 'height'], 8],
			
 
				+                                        '#15D1F2',
			
 
				+                                        ['<', ['get', 'height'], 16],
			
 
				+                                        '#15D1F2',
			
 
				+                                        '#3bb2d0'
			
 
				+                                    ],
			
 
				+                                    'fill-extrusion-height': ['*', ['get', 'height'], 5],
			
 
				+                                    'fill-extrusion-opacity': 0.6
			
 
				+                                }
			
 
				+                            },
			
 
				+                            colorGroup: ['#15D1F2', '#499BFF', '#2C61FF', '#243BCC', '#67A9FF']
			
 
				+                        },
			
 
				+                        estatePlatformDatas
			
 
				+                    );
			
 
				+                    return { ...mergeData, showMap: false };
			
 
				+                },
			
 
				+                beforeMount() {
			
 
				+                    let screenWidth = document.body.clientWidth;
			
 
				+                    if (screenWidth <= 540) {
			
 
				+                        this.showMap = false;
			
 
				+                    } else {
			
 
				+                        this.showMap = true;
			
 
				+                    }
			
 
				+                    SuperMap.Components.setTheme({
			
 
				+                        background: 'transparent',
			
 
				+                        textColor: '#fff',
			
 
				+                        colorGroup: this.colorGroup
			
 
				+                    });
			
 
				+                },
			
 
				+                methods: {
			
 
				+                    changeTheme() {
			
 
				+                        this.theme = this.theme === 'custom' ? 'dark' : 'custom';
			
 
				+                        var themeInfo = {
			
 
				+                            dark: {
			
 
				+                                typeInfo: 'dark',
			
 
				+                                themeColor: ['#dd6b66', ['<', ['get', 'height'], 16], '#dd6b66', '#3bb2d0']
			
 
				+                            },
			
 
				+                            custom: {
			
 
				+                                typeInfo: {
			
 
				+                                    background: 'transparent',
			
 
				+                                    textColor: '#fff',
			
 
				+                                    colorGroup: this.colorGroup
			
 
				+                                },
			
 
				+                                themeColor: ['#15D1F2', ['<', ['get', 'height'], 16], '#15D1F2', '#3bb2d0']
			
 
				+                            }
			
 
				+                        };
			
 
				+                        this.layerStyle.paint['fill-extrusion-color'] = [
			
 
				+                            'case',
			
 
				+                            ['<', ['get', 'height'], 2],
			
 
				+                            '#fbb03b',
			
 
				+                            ['<', ['get', 'height'], 4],
			
 
				+                            '#223b53',
			
 
				+                            ['<', ['get', 'height'], 8]
			
 
				+                        ].concat(themeInfo[this.theme].themeColor);
			
 
				+                        SuperMap.Components.setTheme(themeInfo[this.theme].typeInfo);
			
 
				+                    }
			
 
				+                }
			
 
				+            });
			
 
				+        </script>
			
 
				+        <style>
			
 
				+            html {
			
 
				+                font-size: 10px;
			
 
				+            }
			
 
				+            #main .sm-component-text {
			
 
				+                display: block;
			
 
				+                font-weight: bold;
			
 
				+                text-align: center;
			
 
				+                font-size: 1.4rem;
			
 
				+                line-height: 1.4rem;
			
 
				+            }
			
 
				+
			
 
				+            .ant-row .sm-component-time-text {
			
 
				+                display: block;
			
 
				+            }
			
 
				+
			
 
				+            .progress-holder .progress-item {
			
 
				+                width: 23%;
			
 
				+                display: inline-block;
			
 
				+                vertical-align: top;
			
 
				+            }
			
 
				+
			
 
				+            .progress-holder .progress-item .sm-component-text,
			
 
				+            .normal-index-progress-holder .progress-item .sm-component-text {
			
 
				+                margin-top: 1.07vh;
			
 
				+            }
			
 
				+
			
 
				+            .progress-holder .progress-item .sm-component-progress {
			
 
				+                height: 11.34vh;
			
 
				+            }
			
 
				+
			
 
				+            .indicator-holder {
			
 
				+                padding: 0 1.2vw;
			
 
				+                margin-top: 2vh;
			
 
				+                display: flex;
			
 
				+                justify-content: space-around;
			
 
				+            }
			
 
				+            .sm-component-indicator__content {
			
 
				+                align-items: center;
			
 
				+            }
			
 
				+            .indicator-holder .sm-component-indicator {
			
 
				+                margin-right: 1.56vw;
			
 
				+            }
			
 
				+
			
 
				+            .indicator-holder .sm-component-indicator .sm-component-indicator__title {
			
 
				+                font-size: 1.6rem;
			
 
				+            }
			
 
				+
			
 
				+            .indicator-holder .sm-component-indicator .sm-component-indicator__num {
			
 
				+                font-size: 1.8rem;
			
 
				+                text-indent: 0.26vw;
			
 
				+            }
			
 
				+
			
 
				+            .indicator-holder .sm-component-indicator .sm-component-indicator__unit {
			
 
				+                font-size: 1.3rem;
			
 
				+            }
			
 
				+
			
 
				+            .normal-index-progress-holder {
			
 
				+                margin: 1.07vh auto 0;
			
 
				+            }
			
 
				+
			
 
				+            .normal-index-progress-holder .progress-item {
			
 
				+                width: 48%;
			
 
				+                display: inline-block;
			
 
				+            }
			
 
				+
			
 
				+            .normal-index-progress-holder .progress-item .sm-component-progress,
			
 
				+            .chart-item .sm-component-progress {
			
 
				+                height: 13.9vh;
			
 
				+            }
			
 
				+
			
 
				+            .chart-item .sm-component-text {
			
 
				+                margin: 0.6vh 0;
			
 
				+            }
			
 
				+
			
 
				+            .ant-row .chart-item .sm-component-chart {
			
 
				+                height: 20.86vh;
			
 
				+            }
			
 
				+
			
 
				+            .ant-row .chart-item .sm-component-collapse-card__content {
			
 
				+                width: 100%;
			
 
				+                height: 100%;
			
 
				+            }
			
 
				+
			
 
				+            .map-holder {
			
 
				+                height: 50vh;
			
 
				+                padding: 0 0.78vw;
			
 
				+            }
			
 
				+
			
 
				+            .chart-holder .chart-item {
			
 
				+                width: 49%;
			
 
				+                display: inline-block;
			
 
				+            }
			
 
				+
			
 
				+            .theme-btn {
			
 
				+                position: fixed;
			
 
				+                left: 15px;
			
 
				+                bottom: 15px;
			
 
				+            }
			
 
				+            @media (max-width: 540px) {
			
 
				+                html {
			
 
				+                    font-size: 10px;
			
 
				+                }
			
 
				+                .map-holder {
			
 
				+                    height: 90vh;
			
 
				+                }
			
 
				+                .ant-row .chart-item .sm-component-chart {
			
 
				+                    height: 25.86vh;
			
 
				+                }
			
 
				+            }
			
 
				+            @media (min-width: 1200px) {
			
 
				+                html {
			
 
				+                    font-size: 12px;
			
 
				+                }
			
 
				+            }
			
 
				+        </style>
			
 
				+    </body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_fire_layer_react.html
+++ b/public/supermap/examples/component/components_fire_layer_react.html
@@ -0,0 +1,100 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+  <head>
			
 
				+    <meta charset="UTF-8" />
			
 
				+    <title data-i18n="resources.title_componentsFireLayer_React"></title>
			
 
				+    <script type="text/javascript" include="react,jquery" src="../js/include-web.js"></script>
			
 
				+    <script include="antd,three,iclient-mapboxgl-react,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+    <style>
			
 
				+      html,
			
 
				+      body {
			
 
				+        height: 100%;
			
 
				+        margin: 0;
			
 
				+        padding: 0;
			
 
				+      }
			
 
				+
			
 
				+      #main {
			
 
				+        height: 100%;
			
 
				+      }
			
 
				+    </style>
			
 
				+  </head>
			
 
				+
			
 
				+  <body>
			
 
				+    <div id="main"></div>
			
 
				+    <script type="text/babel">
			
 
				+      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 SmWebMap = SuperMap.Components.SmWebMap;
			
 
				+      var SmFireLayer = SuperMap.Components.SmFireLayer;
			
 
				+      var mapOptions = {
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+          version: 8,
			
 
				+          sources: {
			
 
				+            'raster-tiles': {
			
 
				+              attribution: attribution,
			
 
				+              type: 'raster',
			
 
				+              tiles: [host + '/iserver/services/map-china400/rest/maps/ChinaDark/zxyTileImage.png?z={z}&x={x}&y={y}'],
			
 
				+              tileSize: 256
			
 
				+            },
			
 
				+            buildings: {
			
 
				+              type: 'geojson',
			
 
				+              data: 'https://iclient.supermap.io/examples/data/buildings.json'
			
 
				+            }
			
 
				+          },
			
 
				+          layers: [
			
 
				+            {
			
 
				+              id: 'simple-tiles',
			
 
				+              type: 'raster',
			
 
				+              source: 'raster-tiles',
			
 
				+              minzoom: 0,
			
 
				+              maxzoom: 22
			
 
				+            },
			
 
				+            {
			
 
				+              id: '3d-buildings',
			
 
				+              source: 'buildings',
			
 
				+              type: 'fill-extrusion',
			
 
				+              paint: {
			
 
				+                'fill-extrusion-color': [
			
 
				+                  'case',
			
 
				+                  ['<', ['get', 'height'], 2],
			
 
				+                  '#fbb03b',
			
 
				+                  ['<', ['get', 'height'], 4],
			
 
				+                  '#223b53',
			
 
				+                  ['<', ['get', 'height'], 8],
			
 
				+                  '#15D1F2',
			
 
				+                  ['<', ['get', 'height'], 16],
			
 
				+                  '#15D1F2',
			
 
				+                  '#3bb2d0'
			
 
				+                ],
			
 
				+                'fill-extrusion-height': ['*', ['get', 'height'], 5],
			
 
				+                'fill-extrusion-opacity': 0.6
			
 
				+              }
			
 
				+            }
			
 
				+          ]
			
 
				+        },
			
 
				+        center: [116.45423056455218, 39.91980158816503],
			
 
				+        zoom: 14.27415578362124,
			
 
				+        bearing: 0.8568,
			
 
				+        pitch: 60
			
 
				+      };
			
 
				+
			
 
				+      $.get('../data/fire.json', function(features) {
			
 
				+        var features = features;
			
 
				+
			
 
				+        ReactDOM.render(
			
 
				+          <SmWebMap mapOptions={mapOptions}>
			
 
				+            <SmFireLayer features={features} modelScale={5.41843220338983e-6} />
			
 
				+          </SmWebMap>,
			
 
				+          document.getElementById('main')
			
 
				+        );
			
 
				+      });
			
 
				+    </script>
			
 
				+  </body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_fire_layer_vue.html
+++ b/public/supermap/examples/component/components_fire_layer_vue.html
@@ -0,0 +1,102 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+    <head>
			
 
				+        <meta charset="UTF-8" />
			
 
				+        <title data-i18n="resources.title_componentsFireLayer_Vue"></title>
			
 
				+        <script type="text/javascript" include="vue,jquery" src="../js/include-web.js"></script>
			
 
				+        <script
			
 
				+            type="text/javascript"
			
 
				+            include="three,mapbox-gl-enhance,iclient-mapboxgl-vue,mapbox-gl-enhance"
			
 
				+            src="../../dist/mapboxgl/include-mapboxgl.js"
			
 
				+        ></script>
			
 
				+        <style>
			
 
				+            #main {
			
 
				+                margin: 0 auto;
			
 
				+                width: 100%;
			
 
				+                height: 100%;
			
 
				+            }
			
 
				+        </style>
			
 
				+    </head>
			
 
				+
			
 
				+    <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
			
 
				+        <div id="main">
			
 
				+            <sm-web-map :map-options="mapOptions" style="background:black">
			
 
				+                <sm-fire-layer :features="features" :model-scale="5.41843220338983e-6"></sm-fire-layer>
			
 
				+            </sm-web-map>
			
 
				+        </div>
			
 
				+        <script>
			
 
				+            var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+            $.get("../data/fire.json", function(features) {
			
 
				+                var features = features;
			
 
				+                new Vue({
			
 
				+                    el: "#main",
			
 
				+                    data() {
			
 
				+                        var mapUrl = host + "/iserver/services/map-china400/rest/maps/ChinaDark";
			
 
				+                        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> ";
			
 
				+                        return {
			
 
				+                            mapOptions: {
			
 
				+                                container: "map",
			
 
				+                                style: {
			
 
				+                                    version: 8,
			
 
				+                                    sources: {
			
 
				+                                        "raster-tiles": {
			
 
				+                                            attribution: attribution,
			
 
				+                                            type: "raster",
			
 
				+                                            tiles: [mapUrl + "/zxyTileImage.png?z={z}&x={x}&y={y}"],
			
 
				+                                            tileSize: 256
			
 
				+                                        },
			
 
				+                                        buildings: {
			
 
				+                                            type: "geojson",
			
 
				+                                            data: "https://iclient.supermap.io/examples/data/buildings.json"
			
 
				+                                        }
			
 
				+                                    },
			
 
				+                                    layers: [
			
 
				+                                        {
			
 
				+                                            id: "simple-tiles",
			
 
				+                                            type: "raster",
			
 
				+                                            source: "raster-tiles",
			
 
				+                                            minzoom: 0,
			
 
				+                                            maxzoom: 22
			
 
				+                                        },
			
 
				+                                        {
			
 
				+                                            id: "3d-buildings",
			
 
				+                                            source: "buildings",
			
 
				+                                            type: "fill-extrusion",
			
 
				+                                            paint: {
			
 
				+                                                "fill-extrusion-color": [
			
 
				+                                                    "case",
			
 
				+                                                    ["<", ["get", "height"], 2],
			
 
				+                                                    "#fbb03b",
			
 
				+                                                    ["<", ["get", "height"], 4],
			
 
				+                                                    "#223b53",
			
 
				+                                                    ["<", ["get", "height"], 8],
			
 
				+                                                    "#15D1F2",
			
 
				+                                                    ["<", ["get", "height"], 16],
			
 
				+                                                    "#15D1F2",
			
 
				+                                                    "#3bb2d0"
			
 
				+                                                ],
			
 
				+                                                "fill-extrusion-height": ["*", ["get", "height"], 5],
			
 
				+                                                "fill-extrusion-opacity": 0.6
			
 
				+                                            }
			
 
				+                                        }
			
 
				+                                    ]
			
 
				+                                },
			
 
				+                                center: [116.45423056455218, 39.91980158816503],
			
 
				+                                zoom: 14.27415578362124,
			
 
				+                                bearing: 0.8568,
			
 
				+                                pitch: 60
			
 
				+                            },
			
 
				+                            features: features
			
 
				+                        };
			
 
				+                    }
			
 
				+                });
			
 
				+            });
			
 
				+        </script>
			
 
				+    </body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_flyto_vue.html
+++ b/public/supermap/examples/component/components_flyto_vue.html
@@ -0,0 +1,168 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title data-i18n='resources.title_componentsFlyTo_Vue'></title>
			
 
				+    <script type="text/javascript" include="vue, jquery" src="../js/include-web.js"></script>
			
 
				+    <script include="iclient-mapboxgl-vue,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+    <style>
			
 
				+        #main {
			
 
				+            margin: 0 auto;
			
 
				+            width: 100%;
			
 
				+            height: 100%;
			
 
				+        }
			
 
				+
			
 
				+        #features {
			
 
				+            position: absolute;
			
 
				+            width: 26%;
			
 
				+            left: 73%;
			
 
				+            top: 90px;
			
 
				+            background-color: #fafafa;
			
 
				+            color: rgba(0, 0, 0, 0.65);
			
 
				+        }
			
 
				+
			
 
				+        section {
			
 
				+            padding: 25px 50px;
			
 
				+            line-height: 25px;
			
 
				+            opacity: 0.25;
			
 
				+            font-size: 13px;
			
 
				+        }
			
 
				+
			
 
				+        section.active {
			
 
				+            opacity: 1;
			
 
				+        }
			
 
				+
			
 
				+        .content-item img {
			
 
				+            width: 100%;
			
 
				+            height: 220px;
			
 
				+            margin-bottom: 10px;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+
			
 
				+<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
			
 
				+    <div id="main">
			
 
				+        <sm-web-map :map-id="567946816" server-url="https://www.supermapol.com"
			
 
				+            tianditu-key="1d109683f4d84198e37a38c442d68311" @load="mapLoaded">
			
 
				+            <sm-fly-to :data="data" :fly-options="flyOptions" :collapsed="false" :autoplay="false"
			
 
				+                @change="handleFlyChange"></sm-fly-to>
			
 
				+        </sm-web-map>
			
 
				+        <div id="features" class="sm-component-fly-controller">
			
 
				+            <section v-if="currentContent" :class="{ active: currentContent && currentContent.title === activeTitle }">
			
 
				+                <h3>{{ currentContent.title }}</h3>
			
 
				+                <h5>{{ currentContent.subtitle }}</h5>
			
 
				+                <div class="content-item">
			
 
				+                    <img :src="currentContent.image" />
			
 
				+                    <span>{{ currentContent.description }}</span>
			
 
				+                </div>
			
 
				+            </section>
			
 
				+        </div>
			
 
				+    </div>
			
 
				+
			
 
				+    <script>
			
 
				+        new Vue({
			
 
				+            el: '#main',
			
 
				+            data() {
			
 
				+                return {
			
 
				+                    data: null,
			
 
				+                    flyOptions: {
			
 
				+                        duration: 1500,
			
 
				+                        zoom: 15,
			
 
				+                        pitch: 60
			
 
				+                    },
			
 
				+                    activeTitle: null,
			
 
				+                    currentContent: null
			
 
				+                }
			
 
				+            },
			
 
				+            created() {
			
 
				+                this.setDataFn = this.setData.bind(this);
			
 
				+                this.getData(this.setDataFn);
			
 
				+            },
			
 
				+            methods: {
			
 
				+                getData(cb) {
			
 
				+                    var jsonName = /en/.test(SuperMap.Lang.getCode()) ? 'jiuzhai-en' : 'jiuzhai';
			
 
				+                    $.get(`../data/jiuzhai/${jsonName}.json`, function (res) {
			
 
				+                        cb && cb(res);
			
 
				+                    });
			
 
				+                },
			
 
				+                setData(res) {
			
 
				+                    if (res) {
			
 
				+                        this.data = res.map(item => {
			
 
				+                            const nextItem = {
			
 
				+                                location: item.coordinates
			
 
				+                            };
			
 
				+                            switch (item.title) {
			
 
				+                                case '上季节海':
			
 
				+                                case '五花海':
			
 
				+                                case 'Upper Seasonal Lakes':
			
 
				+                                case 'Wu Hua Hai':
			
 
				+                                    nextItem.flyOptions = Object.assign({}, this.flyOptions, {
			
 
				+                                        bearing: -8
			
 
				+                                    });
			
 
				+                                    break;
			
 
				+                                case '下季节海':
			
 
				+                                case 'Lower Seasonal Lake':
			
 
				+                                    nextItem.flyOptions = Object.assign({}, this.flyOptions, {
			
 
				+                                        bearing: -68
			
 
				+                                    });
			
 
				+                                    break;
			
 
				+                                case '五彩池':
			
 
				+                                case 'Five Coloured Pond':
			
 
				+                                    nextItem.flyOptions = Object.assign({}, this.flyOptions, {
			
 
				+                                        duration: 1000,
			
 
				+                                        bearing: 0
			
 
				+                                    });
			
 
				+                                    break;
			
 
				+                                case '珍珠滩瀑布':
			
 
				+                                case '"Pearl Shoals Waterfall':
			
 
				+                                    nextItem.flyOptions = Object.assign({}, this.flyOptions, {
			
 
				+                                        pitch: 17
			
 
				+                                    });
			
 
				+                                    break;
			
 
				+                                case '扎如寺':
			
 
				+                                case 'Zharu Temple':
			
 
				+                                    nextItem.flyOptions = Object.assign({}, this.flyOptions, {
			
 
				+                                        bearing: 16,
			
 
				+                                        pitch: 37
			
 
				+                                    });
			
 
				+                                    break;
			
 
				+                            }
			
 
				+                            return nextItem;
			
 
				+                        });
			
 
				+                        this.contentList = [].concat(res);
			
 
				+                        this.currentContent = this.contentList[0];
			
 
				+                    }
			
 
				+                },
			
 
				+                handleFlyChange(data) {
			
 
				+                    this.setActiveChapter(data.activeIndex);
			
 
				+                },
			
 
				+                setActiveChapter(activeIndex) {
			
 
				+                    var activeItem = this.contentList[activeIndex];
			
 
				+                    var chapterName = activeItem.title;
			
 
				+                    if (chapterName === this.activeTitle) {
			
 
				+                        return;
			
 
				+                    }
			
 
				+                    this.currentContent = activeItem;
			
 
				+                    this.activeTitle = chapterName;
			
 
				+                    if (!this.marker) {
			
 
				+                        this.marker = new mapboxgl.Marker()
			
 
				+                            .setLngLat(activeItem.coordinates)
			
 
				+                            .addTo(this.map);
			
 
				+                    } else {
			
 
				+                        this.marker.setLngLat(activeItem.coordinates)
			
 
				+                    }
			
 
				+                },
			
 
				+                mapLoaded(e) {
			
 
				+                    this.map = e.map;
			
 
				+                }
			
 
				+            },
			
 
				+        })
			
 
				+
			
 
				+    </script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_gauge_chart_vue.html
+++ b/public/supermap/examples/component/components_gauge_chart_vue.html
@@ -0,0 +1,58 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+    <head>
			
 
				+        <meta charset="UTF-8" />
			
 
				+        <title data-i18n="resources.title_componentsChart_Vue(gauge)"></title>
			
 
				+        <script type="text/javascript" include="vue" src="../js/include-web.js"></script>
			
 
				+        <script include="echarts-vue,iclient-mapboxgl-vue,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+        <style>
			
 
				+            #main {
			
 
				+                margin: 0 auto;
			
 
				+                width: 100%;
			
 
				+                height: 100%;
			
 
				+            }
			
 
				+            .sm-component-chart .sm-component-collapse-card__content {
			
 
				+                height: 300px;
			
 
				+            }
			
 
				+        </style>
			
 
				+    </head>
			
 
				+
			
 
				+    <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
			
 
				+        <div id="main">
			
 
				+            <sm-web-map server-url="https://iportal.supermap.io/iportal" map-id="801571284"> </sm-web-map>
			
 
				+            <sm-chart icon-class="" :style="chartStyle" :dataset="dataset" :dataset-options="datasetOptions"></sm-chart>
			
 
				+        </div>
			
 
				+
			
 
				+        <script>
			
 
				+            new Vue({
			
 
				+                el: "#main",
			
 
				+                data() {
			
 
				+                    return {
			
 
				+                        chartStyle: {
			
 
				+                            position: "absolute",
			
 
				+                            bottom: "10px",
			
 
				+                            right: "10px"
			
 
				+                        },
			
 
				+                        dataset: new SuperMap.Components.commontypes.RestDataParameter({
			
 
				+                            url: "https://iserver.supermap.io/iserver/services/data-jingjin/rest/data",
			
 
				+                            dataName: ["Jingjin:Landuse_R"],
			
 
				+                            maxFeatures: 20,
			
 
				+                            attributeFilter: "SmID = 2"
			
 
				+                        }),
			
 
				+                        datasetOptions: [
			
 
				+                            {
			
 
				+                                seriesType: "gauge", //图表类型
			
 
				+                                isStastic: true, //是否统计, 默认不统计
			
 
				+                                xField: "LANDTYPE", //x坐标轴数据字段
			
 
				+                                yField: "AREA" //统计的数据，legned默认名字
			
 
				+                            }
			
 
				+                        ]
			
 
				+                    };
			
 
				+                }
			
 
				+            });
			
 
				+        </script>
			
 
				+    </body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_geojson_react.html
+++ b/public/supermap/examples/component/components_geojson_react.html
@@ -0,0 +1,74 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+  <head>
			
 
				+    <meta charset="UTF-8" />
			
 
				+    <title data-i18n="resources.title_componentsGeoJSON_React"></title>
			
 
				+    <script type="text/javascript" include="react,jquery" src="../js/include-web.js"></script>
			
 
				+    <script include="antd,iclient-mapboxgl-react,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+    <style>
			
 
				+      html,
			
 
				+      body {
			
 
				+        height: 100%;
			
 
				+        margin: 0;
			
 
				+        padding: 0;
			
 
				+      }
			
 
				+
			
 
				+      #main {
			
 
				+        height: 100%;
			
 
				+      }
			
 
				+    </style>
			
 
				+  </head>
			
 
				+
			
 
				+  <body>
			
 
				+    <div id="main"></div>
			
 
				+    <script type="text/babel">
			
 
				+      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 SmWebMap = SuperMap.Components.SmWebMap;
			
 
				+      var SmGeojsonLayer = SuperMap.Components.SmGeojsonLayer;
			
 
				+      var mapOptions = {
			
 
				+        container: 'map', // container id
			
 
				+        style: {
			
 
				+          version: 8,
			
 
				+          sources: {
			
 
				+            'raster-tiles': {
			
 
				+              attribution: attribution,
			
 
				+              type: 'raster',
			
 
				+              tiles: [host + '/iserver/services/map-china400/rest/maps/ChinaDark/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],
			
 
				+        zoom: 3
			
 
				+      };
			
 
				+      var layerStyle = new SuperMap.Components.commontypes.CircleStyle();
			
 
				+
			
 
				+      $.get('../data/data671MeteorologicalStations.geojson', function(res) {
			
 
				+        var data = JSON.parse(res);
			
 
				+
			
 
				+        ReactDOM.render(
			
 
				+          <SmWebMap mapOptions={mapOptions}>
			
 
				+            <SmGeojsonLayer data={data} layerStyle={layerStyle} />
			
 
				+          </SmWebMap>,
			
 
				+          document.getElementById('main')
			
 
				+        );
			
 
				+      });
			
 
				+    </script>
			
 
				+  </body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_geojson_vue.html
+++ b/public/supermap/examples/component/components_geojson_vue.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_componentsGeoJSON_Vue"></title>
			
 
				+        <script type="text/javascript" include="vue,jquery,papaparse" src="../js/include-web.js"></script>
			
 
				+        <script
			
 
				+            include="iclient-mapboxgl-vue,mapbox-gl-enhance"
			
 
				+            src="../../dist/mapboxgl/include-mapboxgl.js"
			
 
				+        ></script>
			
 
				+        <style>
			
 
				+            #main {
			
 
				+                margin: 0 auto;
			
 
				+                width: 100%;
			
 
				+                height: 100%;
			
 
				+            }
			
 
				+        </style>
			
 
				+    </head>
			
 
				+
			
 
				+    <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
			
 
				+        <div id="main">
			
 
				+            <sm-web-map :map-options="mapOptions">
			
 
				+                <sm-geojson-layer :layer-style="layerStyle" :data="data"></sm-geojson-layer>
			
 
				+                <sm-layer-list position="top-left"></sm-layer-list>
			
 
				+            </sm-web-map>
			
 
				+        </div>
			
 
				+        <script>
			
 
				+            var data;
			
 
				+            $.get("../data/data671MeteorologicalStations.geojson", function(res) {
			
 
				+                data = JSON.parse(res);
			
 
				+                new Vue({
			
 
				+                    el: "#main",
			
 
				+                    data() {
			
 
				+                        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> ";
			
 
				+                        return {
			
 
				+                            data: data,
			
 
				+                            layerStyle: new SuperMap.Components.commontypes.CircleStyle(),
			
 
				+                            mapOptions: {
			
 
				+                                container: "map", // container id
			
 
				+                                style: {
			
 
				+                                    version: 8,
			
 
				+                                    sources: {
			
 
				+                                        "raster-tiles": {
			
 
				+                                            attribution: attribution,
			
 
				+                                            type: "raster",
			
 
				+                                            tiles: [
			
 
				+                                                host +
			
 
				+                                                    "/iserver/services/map-china400/rest/maps/ChinaDark/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],
			
 
				+                                zoom: 3
			
 
				+                            }
			
 
				+                        };
			
 
				+                    }
			
 
				+                });
			
 
				+            });
			
 
				+        </script>
			
 
				+    </body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_graph_theme_layer_react.html
+++ b/public/supermap/examples/component/components_graph_theme_layer_react.html
@@ -0,0 +1,198 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+  <head>
			
 
				+    <meta charset="UTF-8" />
			
 
				+    <title data-i18n="resources.title_componentsGraphThemeLayer_React"></title>
			
 
				+    <script type="text/javascript" include="react" src="../js/include-web.js"></script>
			
 
				+    <script include="antd,iclient-mapboxgl-react,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+    <script type="text/javascript" src="../data/chinaConsumptionLevel.js"></script>
			
 
				+    <style>
			
 
				+      html,
			
 
				+      body {
			
 
				+        height: 100%;
			
 
				+        margin: 0;
			
 
				+        padding: 0;
			
 
				+      }
			
 
				+
			
 
				+      #main,
			
 
				+      #map-container {
			
 
				+        height: 100%;
			
 
				+      }
			
 
				+    </style>
			
 
				+  </head>
			
 
				+
			
 
				+  <body>
			
 
				+    <div id="main">
			
 
				+      <div id="map-container"></div>
			
 
				+      <div class="info-container">
			
 
				+        <div id="infoBox" class="panel panel-primary infoPane" style="display: none;">
			
 
				+          <div class="panel-heading">
			
 
				+            <h5 class="panel-title text-center" data-i18n="resources.text_attributeTable"></h5>
			
 
				+          </div>
			
 
				+          <div id="infoContent" class="panel-body content"></div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <script type="text/babel">
			
 
				+      var SmWebMap = SuperMap.Components.SmWebMap;
			
 
				+      var SmGraphThemeLayer = SuperMap.Components.SmGraphThemeLayer;
			
 
				+      var features, chartsSettingForPie, themeOptions, popup;
			
 
				+      var feas = [];
			
 
				+      for (var i = 0, len = chinaConsumptionLevel.length; i < len; i++) {
			
 
				+        // 省居民消费水平（单位：元）信息
			
 
				+        var provinceInfo = chinaConsumptionLevel[i];
			
 
				+        var fea = {
			
 
				+          type: 'feature',
			
 
				+          geometry: {
			
 
				+            type: 'Point',
			
 
				+            coordinates: [provinceInfo[1], provinceInfo[2]]
			
 
				+          },
			
 
				+          properties: {
			
 
				+            NAME: provinceInfo[0],
			
 
				+            CON2009: provinceInfo[3],
			
 
				+            CON2010: provinceInfo[4],
			
 
				+            CON2011: provinceInfo[5],
			
 
				+            CON2012: provinceInfo[6],
			
 
				+            CON2013: provinceInfo[7]
			
 
				+          }
			
 
				+        };
			
 
				+
			
 
				+        feas.push(fea);
			
 
				+      }
			
 
				+
			
 
				+      features = {
			
 
				+        type: 'FeatureCollection',
			
 
				+        features: feas
			
 
				+      };
			
 
				+
			
 
				+      chartsSettingForPie = {
			
 
				+        width: 240,
			
 
				+        height: 100,
			
 
				+        codomain: [0, 40000], // 允许图表展示的值域范围，此范围外的数据将不制作图表
			
 
				+        sectorStyle: { fillOpacity: 0.8 }, // 柱状图中柱条的（表示字段值的图形）样式
			
 
				+        sectorStyleByFields: [
			
 
				+          { fillColor: '#FFB980' },
			
 
				+          { fillColor: '#5AB1EF' },
			
 
				+          { fillColor: '#B6A2DE' },
			
 
				+          { fillColor: '#2EC7C9' },
			
 
				+          { fillColor: '#D87A80' }
			
 
				+        ],
			
 
				+        sectorHoverStyle: { fillOpacity: 1 },
			
 
				+        xShapeBlank: [10, 10, 10], // 水平方向上的空白间距参数
			
 
				+        axisYLabels: ['4万', '3万', '2万', '1万', '0'], // y 轴标签内容
			
 
				+        axisXLabels: ['09年', '10年', '11年', '12年', '13年'], // x 轴标签内容
			
 
				+        backgroundStyle: { fillColor: '#CCE8CF' }, // 背景样式
			
 
				+        backgroundRadius: [5, 5, 5, 5] // 背景框圆角参数
			
 
				+      };
			
 
				+
			
 
				+      // 设置 graphThemeLayer option 参数
			
 
				+      themeOptions = {
			
 
				+        attributions: ' ',
			
 
				+        themeFields: ['CON2009', 'CON2010', 'CON2011', 'CON2012', 'CON2013'],
			
 
				+        opacity: 0.9,
			
 
				+        chartsSetting: chartsSettingForPie
			
 
				+      };
			
 
				+
			
 
				+      function handleLayerMousemove(params) {
			
 
				+        var e = params.mapboxEvent;
			
 
				+        var map = params.map;
			
 
				+        var themeLayer = map.getLayer(params.layerId);
			
 
				+
			
 
				+        if (popup) {
			
 
				+          popup.remove();
			
 
				+        }
			
 
				+        if (e.target && e.target.refDataID && e.target.dataInfo) {
			
 
				+          // 获取图形对应的数据 (feature)
			
 
				+          var fea = themeLayer.getFeatureById(e.target.refDataID);
			
 
				+          var info = e.target.dataInfo;
			
 
				+
			
 
				+          // 弹窗内容
			
 
				+          var contentHTML = "<div style='color: #000; background-color: #fff'>";
			
 
				+          contentHTML += resources.text_Name + '<br><strong>' + fea.attributes.NAME + '</strong>';
			
 
				+          contentHTML += "<hr style='margin: 3px'>";
			
 
				+
			
 
				+          switch (info.field) {
			
 
				+            case 'CON2009':
			
 
				+              contentHTML +=
			
 
				+                resources.text_consumptionLevel1 +
			
 
				+                '09' +
			
 
				+                resources.text_consumptionLevel2 +
			
 
				+                '<br/><strong>' +
			
 
				+                info.value +
			
 
				+                '</strong>（' +
			
 
				+                resources.text_yuan +
			
 
				+                '）';
			
 
				+              break;
			
 
				+            case 'CON2010':
			
 
				+              contentHTML +=
			
 
				+                resources.text_consumptionLevel1 +
			
 
				+                '10' +
			
 
				+                resources.text_consumptionLevel2 +
			
 
				+                '<br/><strong>' +
			
 
				+                info.value +
			
 
				+                '</strong>（' +
			
 
				+                resources.text_yuan +
			
 
				+                '）';
			
 
				+              break;
			
 
				+            case 'CON2011':
			
 
				+              contentHTML +=
			
 
				+                resources.text_consumptionLevel1 +
			
 
				+                '11' +
			
 
				+                resources.text_consumptionLevel2 +
			
 
				+                '<br/><strong>' +
			
 
				+                info.value +
			
 
				+                '</strong>（' +
			
 
				+                resources.text_yuan +
			
 
				+                '）';
			
 
				+              break;
			
 
				+            case 'CON2012':
			
 
				+              contentHTML +=
			
 
				+                resources.text_consumptionLevel1 +
			
 
				+                '12' +
			
 
				+                resources.text_consumptionLevel2 +
			
 
				+                ' <br/><strong>' +
			
 
				+                info.value +
			
 
				+                '</strong>（' +
			
 
				+                resources.text_yuan +
			
 
				+                '）';
			
 
				+              break;
			
 
				+            case 'CON2013':
			
 
				+              contentHTML +=
			
 
				+                resources.text_consumptionLevel1 +
			
 
				+                '13' +
			
 
				+                resources.text_consumptionLevel2 +
			
 
				+                ' <br/><strong>' +
			
 
				+                info.value +
			
 
				+                '</strong>（' +
			
 
				+                resources.text_yuan +
			
 
				+                '）';
			
 
				+              break;
			
 
				+            default:
			
 
				+              contentHTML += 'No Data';
			
 
				+          }
			
 
				+          contentHTML += '</div>';
			
 
				+
			
 
				+          var tempPoint = map.unproject({ x: e.event.x, y: e.event.y });
			
 
				+          popup = new mapboxgl.Popup({ closeOnClick: false })
			
 
				+            .setLngLat([tempPoint.lng, tempPoint.lat])
			
 
				+            .setHTML(contentHTML)
			
 
				+            .addTo(map);
			
 
				+          return;
			
 
				+        }
			
 
				+        if (popup) {
			
 
				+          popup.remove();
			
 
				+        }
			
 
				+      }
			
 
				+
			
 
				+      ReactDOM.render(
			
 
				+        <SmWebMap serverUrl="https://iportal.supermap.io/iportal" mapId="1329428269">
			
 
				+          <SmGraphThemeLayer chartsType="Pie" options={themeOptions} data={features} onMousemove={handleLayerMousemove} />
			
 
				+        </SmWebMap>,
			
 
				+        document.getElementById('map-container')
			
 
				+      );
			
 
				+    </script>
			
 
				+  </body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_graph_theme_layer_vue.html
+++ b/public/supermap/examples/component/components_graph_theme_layer_vue.html
@@ -0,0 +1,152 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+	<head>
			
 
				+		<meta charset="UTF-8" />
			
 
				+		<title data-i18n="resources.title_componentsGraphThemeLayer_Vue"></title>
			
 
				+		<script type="text/javascript" include="vue" src="../js/include-web.js"></script>
			
 
				+		<script include="iclient-mapboxgl-vue,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+		<script type="text/javascript" src="../data/chinaConsumptionLevel.js"></script>
			
 
				+		<style>
			
 
				+			#main {
			
 
				+				margin: 0 auto;
			
 
				+				width: 100%;
			
 
				+				height: 100%;
			
 
				+			}
			
 
				+		</style>
			
 
				+	</head>
			
 
				+
			
 
				+	<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
			
 
				+		<div id="main">
			
 
				+			<sm-web-map server-url='https://iportal.supermap.io/iportal' map-id="1329428269">
			
 
				+				<sm-graph-theme-layer
			
 
				+					:options="graphThemeLayerOptions"
			
 
				+					layer-name="pieThemeLayer"
			
 
				+					:data="graphFeatures"
			
 
				+					charts-type="Pie"
			
 
				+					@load="addLayerSucceeded"
			
 
				+				></sm-graph-theme-layer>
			
 
				+			</sm-web-map>
			
 
				+		</div>
			
 
				+		<script>
			
 
				+			var features, chartsSettingForPieOrRing, themeLayerOptions, popup;
			
 
				+			var feas = [];
			
 
				+			for (var i = 0, len = chinaConsumptionLevel.length; i < len; i++) {
			
 
				+				// 省居民消费水平（单位：元）信息
			
 
				+				var provinceInfo = chinaConsumptionLevel[i];
			
 
				+				var fea = {
			
 
				+					type: 'feature',
			
 
				+					geometry: {
			
 
				+						type: 'Point',
			
 
				+						coordinates: [provinceInfo[1], provinceInfo[2]],
			
 
				+					},
			
 
				+					properties: {
			
 
				+						NAME: provinceInfo[0],
			
 
				+						CON2009: provinceInfo[3],
			
 
				+						CON2010: provinceInfo[4],
			
 
				+						CON2011: provinceInfo[5],
			
 
				+						CON2012: provinceInfo[6],
			
 
				+						CON2013: provinceInfo[7],
			
 
				+					},
			
 
				+				};
			
 
				+
			
 
				+				feas.push(fea);
			
 
				+			}
			
 
				+
			
 
				+			features = {
			
 
				+				type: 'FeatureCollection',
			
 
				+				features: feas,
			
 
				+			};
			
 
				+
			
 
				+			chartsSettingForPie = {
			
 
				+				width: 240,
			
 
				+				height: 100,
			
 
				+				codomain: [0, 40000], // 允许图表展示的值域范围，此范围外的数据将不制作图表
			
 
				+				sectorStyle: { fillOpacity: 0.8 }, // 柱状图中柱条的（表示字段值的图形）样式
			
 
				+				sectorStyleByFields: [
			
 
				+					{ fillColor: '#FFB980' },
			
 
				+					{ fillColor: '#5AB1EF' },
			
 
				+					{ fillColor: '#B6A2DE' },
			
 
				+					{ fillColor: '#2EC7C9' },
			
 
				+					{ fillColor: '#D87A80' },
			
 
				+				],
			
 
				+				sectorHoverStyle: { fillOpacity: 1 },
			
 
				+				xShapeBlank: [10, 10, 10], // 水平方向上的空白间距参数
			
 
				+				axisYLabels: ['4万', '3万', '2万', '1万', '0'], // y 轴标签内容
			
 
				+				axisXLabels: ['09年', '10年', '11年', '12年', '13年'], // x 轴标签内容
			
 
				+				backgroundStyle: { fillColor: '#CCE8CF' }, // 背景样式
			
 
				+				backgroundRadius: [5, 5, 5, 5], // 背景框圆角参数
			
 
				+			};
			
 
				+
			
 
				+			// 设置 graphThemeLayer option 参数
			
 
				+			themeLayerOptions = {
			
 
				+				attributions: ' ',
			
 
				+				themeFields: ['CON2009', 'CON2010', 'CON2011', 'CON2012', 'CON2013'],
			
 
				+				opacity: 0.9,
			
 
				+				chartsSetting: chartsSettingForPie,
			
 
				+			};
			
 
				+
			
 
				+			// 添加弹窗
			
 
				+			function showInfo(themeLayer, map) {
			
 
				+				themeLayer.on('mousemove', function(e) {
			
 
				+					if (popup) {
			
 
				+						popup.remove();
			
 
				+					}
			
 
				+					if (e.target && e.target.refDataID && e.target.dataInfo) {
			
 
				+						// 获取图形对应的数据 (feature)
			
 
				+						var fea = themeLayer.getFeatureById(e.target.refDataID);
			
 
				+						var info = e.target.dataInfo;
			
 
				+
			
 
				+						// 弹窗内容
			
 
				+						var contentHTML = "<div style='color: #000; background-color: #fff'>";
			
 
				+						contentHTML += resources.text_Name + '<br><strong>' + fea.attributes.NAME + '</strong>';
			
 
				+						contentHTML += "<hr style='margin: 3px'>";
			
 
				+
			
 
				+						switch (info.field) {
			
 
				+							case 'CON2009':
			
 
				+								contentHTML += resources.text_consumptionLevel1 + '09' + resources.text_consumptionLevel2 + '<br/><strong>' + info.value + '</strong>（' + resources.text_yuan + '）';
			
 
				+								break;
			
 
				+							case 'CON2010':
			
 
				+								contentHTML += resources.text_consumptionLevel1 + '10' + resources.text_consumptionLevel2 + '<br/><strong>' + info.value + '</strong>（' + resources.text_yuan + '）';
			
 
				+								break;
			
 
				+							case 'CON2011':
			
 
				+								contentHTML += resources.text_consumptionLevel1 + '11' + resources.text_consumptionLevel2 + '<br/><strong>' + info.value + '</strong>（' + resources.text_yuan + '）';
			
 
				+								break;
			
 
				+							case 'CON2012':
			
 
				+								contentHTML += resources.text_consumptionLevel1 + '12' + resources.text_consumptionLevel2 + ' <br/><strong>' + info.value + '</strong>（' + resources.text_yuan + '）';
			
 
				+								break;
			
 
				+							case 'CON2013':
			
 
				+								contentHTML += resources.text_consumptionLevel1 + '13' + resources.text_consumptionLevel2 + ' <br/><strong>' + info.value + '</strong>（' + resources.text_yuan + '）';
			
 
				+								break;
			
 
				+							default:
			
 
				+								contentHTML += 'No Data';
			
 
				+						}
			
 
				+						contentHTML += '</div>';
			
 
				+
			
 
				+						var tempPoint = map.unproject({ x: e.event.x, y: e.event.y });
			
 
				+						popup = new mapboxgl.Popup({ closeOnClick: false })
			
 
				+							.setLngLat([tempPoint.lng, tempPoint.lat])
			
 
				+							.setHTML(contentHTML)
			
 
				+							.addTo(map);
			
 
				+						return;
			
 
				+					}
			
 
				+					if (popup) {
			
 
				+						popup.remove();
			
 
				+					}
			
 
				+				});
			
 
				+			}
			
 
				+			new Vue({
			
 
				+				el: '#main',
			
 
				+				data() {
			
 
				+					return {
			
 
				+						graphThemeLayerOptions: themeLayerOptions,
			
 
				+						graphFeatures: features,
			
 
				+						addLayerSucceeded: showInfo,
			
 
				+					};
			
 
				+				},
			
 
				+			});
			
 
				+		</script>
			
 
				+	</body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_heatmap_react.html
+++ b/public/supermap/examples/component/components_heatmap_react.html
@@ -0,0 +1,113 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+  <head>
			
 
				+    <meta charset="UTF-8" />
			
 
				+    <title data-i18n="resources.title_componentsHeatmap_React"></title>
			
 
				+    <script type="text/javascript" include="react,jquery,papaparse" src="../js/include-web.js"></script>
			
 
				+    <script include="antd,iclient-mapboxgl-react,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+    <style>
			
 
				+      html,
			
 
				+      body {
			
 
				+        height: 100%;
			
 
				+        margin: 0;
			
 
				+        padding: 0;
			
 
				+      }
			
 
				+
			
 
				+      #main {
			
 
				+        height: 100%;
			
 
				+      }
			
 
				+    </style>
			
 
				+  </head>
			
 
				+
			
 
				+  <body>
			
 
				+    <div id="main"></div>
			
 
				+    <script type="text/babel">
			
 
				+      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 SmWebMap = SuperMap.Components.SmWebMap;
			
 
				+      var SmHeatmapLayer = SuperMap.Components.SmHeatmapLayer;
			
 
				+      var mapOptions = {
			
 
				+        container: 'map', // container id
			
 
				+        style: {
			
 
				+          version: 8,
			
 
				+          sources: {
			
 
				+            'raster-tiles': {
			
 
				+              attribution: attribution,
			
 
				+              type: 'raster',
			
 
				+              tiles: [host + '/iserver/services/map-china400/rest/maps/ChinaDark/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],
			
 
				+        zoom: 3
			
 
				+      };
			
 
				+      var layerStyle = new SuperMap.Components.commontypes.HeatMapStyle({
			
 
				+        '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]
			
 
				+      });
			
 
				+
			
 
				+      $.get('../data/chinaEarthquake.csv', function(csvstr) {
			
 
				+        var data = Papa.parse(csvstr, { skipEmptyLines: true, header: true }).data,
			
 
				+          features,
			
 
				+          heatFeatures = [];
			
 
				+        for (var i = 0; i < data.length; i += 6) {
			
 
				+          if (data[i].Y <= 85) {
			
 
				+            heatFeatures.push({
			
 
				+              geometry: {
			
 
				+                coordinates: [parseFloat(data[i].X), parseFloat(data[i].Y)],
			
 
				+                type: 'Point'
			
 
				+              },
			
 
				+              properties: { value: data[i].level / 50, id: i },
			
 
				+              type: 'Feature'
			
 
				+            });
			
 
				+          }
			
 
				+        }
			
 
				+        features = {
			
 
				+          type: 'FeatureCollection',
			
 
				+          features: heatFeatures
			
 
				+        };
			
 
				+
			
 
				+        ReactDOM.render(
			
 
				+          <SmWebMap mapOptions={mapOptions}>
			
 
				+            <SmHeatmapLayer data={features} layerStyle={layerStyle} />
			
 
				+          </SmWebMap>,
			
 
				+          document.getElementById('main')
			
 
				+        );
			
 
				+      });
			
 
				+    </script>
			
 
				+  </body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_heatmap_vue.html
+++ b/public/supermap/examples/component/components_heatmap_vue.html
@@ -0,0 +1,114 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+    <head>
			
 
				+        <meta charset="UTF-8" />
			
 
				+        <title data-i18n="resources.title_componentsHeatmap_Vue"></title>
			
 
				+        <script type="text/javascript" include="vue,jquery,papaparse" src="../js/include-web.js"></script>
			
 
				+        <script include="iclient-mapboxgl-vue,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+        <style>
			
 
				+            #main {
			
 
				+                margin: 0 auto;
			
 
				+                width: 100%;
			
 
				+                height: 100%;
			
 
				+            }
			
 
				+        </style>
			
 
				+    </head>
			
 
				+
			
 
				+    <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
			
 
				+        <div id="main">
			
 
				+            <sm-web-map :map-options="mapOptions">
			
 
				+                <sm-heatmap-layer :data="data" :layer-style="heatMapStyle"></sm-heatmap-layer>
			
 
				+            </sm-web-map>
			
 
				+        </div>
			
 
				+        <script>
			
 
				+            var heatFeatures = [],
			
 
				+                heatMapSource,
			
 
				+                heatMapStyle;
			
 
				+            $.get("../data/chinaEarthquake.csv", function(csvstr) {
			
 
				+                var data = Papa.parse(csvstr, { skipEmptyLines: true, header: true }).data;
			
 
				+                for (var i = 0; i < data.length; i += 6) {
			
 
				+                    if (data[i].Y <= 85) {
			
 
				+                        heatFeatures.push({
			
 
				+                            geometry: {
			
 
				+                                coordinates: [parseFloat(data[i].X), parseFloat(data[i].Y)],
			
 
				+                                type: "Point"
			
 
				+                            },
			
 
				+                            properties: { value: data[i].level / 50, id: i },
			
 
				+                            type: "Feature"
			
 
				+                        });
			
 
				+                    }
			
 
				+                }
			
 
				+                heatMapStyle = new SuperMap.Components.commontypes.HeatMapStyle({
			
 
				+                    "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]
			
 
				+                });
			
 
				+                new Vue({
			
 
				+                    el: "#main",
			
 
				+                    data() {
			
 
				+                        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> ";
			
 
				+                        return {
			
 
				+                            data: {
			
 
				+                                type: "FeatureCollection",
			
 
				+                                features: heatFeatures
			
 
				+                            },
			
 
				+                            heatMapStyle: heatMapStyle,
			
 
				+                            mapOptions: {
			
 
				+                                container: "map", // container id
			
 
				+                                style: {
			
 
				+                                    version: 8,
			
 
				+                                    sources: {
			
 
				+                                        "raster-tiles": {
			
 
				+                                            attribution: attribution,
			
 
				+                                            type: "raster",
			
 
				+                                            tiles: [
			
 
				+                                                host +
			
 
				+                                                    "/iserver/services/map-china400/rest/maps/ChinaDark/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],
			
 
				+                                zoom: 3
			
 
				+                            }
			
 
				+                        };
			
 
				+                    }
			
 
				+                });
			
 
				+            });
			
 
				+        </script>
			
 
				+    </body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_identify_vue.html
+++ b/public/supermap/examples/component/components_identify_vue.html
@@ -0,0 +1,40 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+    <head>
			
 
				+        <meta charset="UTF-8" />
			
 
				+        <title data-i18n="resources.title_componentsIdentify_Vue"></title>
			
 
				+        <script type="text/javascript" include="vue" src="../js/include-web.js"></script>
			
 
				+        <script
			
 
				+            include="iclient-mapboxgl-vue,mapbox-gl-enhance"
			
 
				+            src="../../dist/mapboxgl/include-mapboxgl.js"
			
 
				+        ></script>
			
 
				+        <style>
			
 
				+            #main {
			
 
				+                margin: 0 auto;
			
 
				+                width: 100%;
			
 
				+                height: 100%;
			
 
				+            }
			
 
				+        </style>
			
 
				+    </head>
			
 
				+
			
 
				+    <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
			
 
				+        <div id="main">
			
 
				+            <sm-web-map server-url="https://iportal.supermap.io/iportal" map-id="801571284">
			
 
				+                <!-- 点选查询组件： sm-identify -->
			
 
				+                <sm-identify :layers="['民航数据']"></sm-identify>
			
 
				+            </sm-web-map>
			
 
				+        </div>
			
 
				+
			
 
				+        <script>
			
 
				+            new Vue({
			
 
				+                el: '#main',
			
 
				+                mounted() {
			
 
				+                    this.$message.info(resources.msg_clickLayerToPopup);
			
 
				+                }
			
 
				+            });
			
 
				+        </script>
			
 
				+    </body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_labeltheme_react.html
+++ b/public/supermap/examples/component/components_labeltheme_react.html
@@ -0,0 +1,322 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+  <head>
			
 
				+    <meta charset="UTF-8" />
			
 
				+    <title data-i18n="resources.title_componentsLabelTheme_React"></title>
			
 
				+    <script type="text/javascript" include="react" src="../js/include-web.js"></script>
			
 
				+    <script include="antd,iclient-mapboxgl-react,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+    <script type="text/javascript" src="../data/themeLableData.js"></script>
			
 
				+    <style>
			
 
				+      html,
			
 
				+      body {
			
 
				+        height: 100%;
			
 
				+        margin: 0;
			
 
				+        padding: 0;
			
 
				+      }
			
 
				+      #main {
			
 
				+        height: 100%;
			
 
				+      }
			
 
				+    </style>
			
 
				+  </head>
			
 
				+  <body>
			
 
				+    <div id="main"></div>
			
 
				+    <script type="text/babel">
			
 
				+      var SmWebMap = SuperMap.Components.SmWebMap;
			
 
				+      var SmLabelThemeLayer = SuperMap.Components.SmLabelThemeLayer;
			
 
				+      var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+      var features = [];
			
 
				+      var feat, popup, map;
			
 
				+      for (var i = 0; i < themeData.length; i++) {
			
 
				+        var lonlat = themeData[i].lonLat.split(',');
			
 
				+        var lng = parseFloat(lonlat[0]);
			
 
				+        var lat = parseFloat(lonlat[1]);
			
 
				+        var text = themeData[i].aqi;
			
 
				+        feat = new mapboxgl.supermap.ThemeFeature([lng, lat, text], themeData[i]);
			
 
				+        features.push(feat);
			
 
				+      }
			
 
				+
			
 
				+      var mapOptions = {
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+          version: 8,
			
 
				+          sources: {
			
 
				+            'raster-tiles': {
			
 
				+              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: [116.4, 39.79],
			
 
				+        zoom: 3
			
 
				+      };
			
 
				+
			
 
				+      var themeOptions = {
			
 
				+        //                map: map,//该可选参数将在下个版本遗弃
			
 
				+        style: new SuperMap.ThemeStyle({
			
 
				+          labelRect: true,
			
 
				+          fontColor: '#000000',
			
 
				+          fontWeight: 'bolder',
			
 
				+          fontSize: '18px',
			
 
				+          fill: true,
			
 
				+          fillColor: '#FFFFFF',
			
 
				+          fillOpacity: 1,
			
 
				+          stroke: false,
			
 
				+          strokeColor: '#8B7B8B'
			
 
				+        }),
			
 
				+        themeField: 'aqi',
			
 
				+        styleGroups: [
			
 
				+          {
			
 
				+            start: 0,
			
 
				+            end: 51,
			
 
				+            style: {
			
 
				+              fillColor: '#6ACD06',
			
 
				+              fontSize: '17px'
			
 
				+            }
			
 
				+          },
			
 
				+          {
			
 
				+            start: 51,
			
 
				+            end: 101,
			
 
				+            style: {
			
 
				+              fillColor: '#FBD12A',
			
 
				+              fontSize: '19px'
			
 
				+            }
			
 
				+          },
			
 
				+          {
			
 
				+            start: 101,
			
 
				+            end: 151,
			
 
				+            style: {
			
 
				+              fillColor: '#FE8800',
			
 
				+              fontSize: '22px'
			
 
				+            }
			
 
				+          },
			
 
				+          {
			
 
				+            start: 151,
			
 
				+            end: 201,
			
 
				+            style: {
			
 
				+              fillColor: '#FF0000',
			
 
				+              fontSize: '24px'
			
 
				+            }
			
 
				+          },
			
 
				+          {
			
 
				+            start: 201,
			
 
				+            end: 301,
			
 
				+            style: {
			
 
				+              fillColor: '#CC0000',
			
 
				+              fontSize: '26px'
			
 
				+            }
			
 
				+          },
			
 
				+          {
			
 
				+            start: 301,
			
 
				+            end: 601,
			
 
				+            style: {
			
 
				+              fillColor: '#960453',
			
 
				+              fontSize: '28px'
			
 
				+            }
			
 
				+          }
			
 
				+        ]
			
 
				+      };
			
 
				+      function updateInfoView(feature, themeLayer) {
			
 
				+        if (!feature && popup) {
			
 
				+          removePopup();
			
 
				+          return;
			
 
				+        }
			
 
				+
			
 
				+        if (!popup) {
			
 
				+          popup = new mapboxgl.Popup(({ maxWidth: 600 }));
			
 
				+        }
			
 
				+
			
 
				+        var statisticsData = getStatisticsData();
			
 
				+        var contentHTML =
			
 
				+          '<table><tbody><tr>' +
			
 
				+          '<td><div>' +
			
 
				+          '<table><tbody><tr>' +
			
 
				+          "<td><div id='contentID' style='margin-top: 2px;margin-bottom: 2px;width:65px;height:60px;line-height:60px;text-align: center;font-size:35px;color: #ffffff;'>" +
			
 
				+          feature.attributes.aqi +
			
 
				+          '</div></td>' +
			
 
				+          "<td style='padding-right: 20px;'></td>" +
			
 
				+          '<td>' +
			
 
				+          "<div id='textID' style='text-align: left;font-size: 19px;text-shadow: 1px 1px 0 #ffffff;'>" +
			
 
				+          feature.attributes.quality +
			
 
				+          '</div>' +
			
 
				+          "<div style='font-size:10px;width:150px;'>" +
			
 
				+          feature.attributes.time_point +
			
 
				+          '</div>' +
			
 
				+          "<div style=' font-weight:lighter; font-size:14px;'>" +
			
 
				+          resources.text_currentCity +
			
 
				+          '：' +
			
 
				+          feature.attributes.area +
			
 
				+          '</div>' +
			
 
				+          '</td>' +
			
 
				+          '</tr> </tbody></table>' +
			
 
				+          "<table style='width:100%;font-size: 10px;border: 0 solid black;padding: 0;margin: 0;border-spacing: 0;'>" +
			
 
				+          '<tbody>' +
			
 
				+          '<tr>' +
			
 
				+          "<td style='font-weight:bold;width:45px;'></td><td style='font-weight:bold;width:51px;' align='center' nowrap='true'>Current</td>" +
			
 
				+          "<td  style=' font-weight:bold;width:49px;' align='center' nowrap='true'>Min</td>" +
			
 
				+          "<td style='font-weight:bold;width:49px;' align='center' nowrap='true'>Max</td> " +
			
 
				+          '</tr>' +
			
 
				+          "<tr style='height: 23px;'><td style='padding-left: 0;padding-right: 0'><div style='width:46px;'><span style='font-weight:bold;'>PM2.5</span></div></td>" +
			
 
				+          "<td style='font-size:11px;' align='center'>" +
			
 
				+          feature.attributes.pm2_5 +
			
 
				+          '</td>' +
			
 
				+          "<td style='color:#0086c8;font-size:11px;' align='center'>" +
			
 
				+          statisticsData.minNum +
			
 
				+          '</td>' +
			
 
				+          "<td  style='color:#ce3c3a;font-size:11px;' align='center'>" +
			
 
				+          statisticsData.maxNum +
			
 
				+          '</td>' +
			
 
				+          '</tr>' +
			
 
				+          "<tr style='height: 23px;'><td style='padding-left: 0;padding-right: 0'><div style='width:46px;'><span style='font-weight:bold;'>PM10</span></div></td>" +
			
 
				+          "<td style='font-size:11px;' align='center'>" +
			
 
				+          feature.attributes.pm10 +
			
 
				+          '</td>' +
			
 
				+          "<td style='color:#0086c8;font-size:11px;' align='center'>" +
			
 
				+          statisticsData.minpm10 +
			
 
				+          '</td>' +
			
 
				+          "<td  style='color:#ce3c3a;font-size:11px;' align='center'>" +
			
 
				+          statisticsData.maxpm10 +
			
 
				+          '</td>' +
			
 
				+          '</tr>' +
			
 
				+          "<tr style='height:23px;'><td style='padding-left: 0;padding-right: 0'><div style='width:46px;'><span style='font-weight:bold;'>O3</span></div></td>" +
			
 
				+          "<td style='font-size:11px;' align='center'>" +
			
 
				+          feature.attributes.o3 +
			
 
				+          '</td>' +
			
 
				+          "<td style='color:#0086c8;font-size:11px;' align='center'>" +
			
 
				+          statisticsData.minO3 +
			
 
				+          '</td>' +
			
 
				+          "<td style='color:#ce3c3a;font-size:11px;' align='center'>" +
			
 
				+          statisticsData.maxO3 +
			
 
				+          '</td></td>' +
			
 
				+          '</tr>' +
			
 
				+          "<tr style='height: 23px;'><td style='padding-left: 0;padding-right: 0'><div style='width:46px;'><span style='font-weight:bold;'>SO2</span></div></td>" +
			
 
				+          "<td style='font-size:11px;' align='center'>" +
			
 
				+          feature.attributes.so2 +
			
 
				+          '</td>' +
			
 
				+          "<td style='color:#0086c8;font-size:11px;' align='center'>" +
			
 
				+          statisticsData.minSO2 +
			
 
				+          '</td>' +
			
 
				+          "<td  style='color:#ce3c3a;font-size:11px;' align='center'>" +
			
 
				+          statisticsData.maxSO2 +
			
 
				+          '</td></td>' +
			
 
				+          '</tr>' +
			
 
				+          "<tr style='height: 23px;'><td style='padding-left: 0;padding-right: 0'><div style='width:46px;'><span style='font-weight:bold;'>NO2</span></div></td>" +
			
 
				+          "<td style='font-size:11px;' align='center'>" +
			
 
				+          feature.attributes.no2 +
			
 
				+          '</td>' +
			
 
				+          "<td style='color:#0086c8;font-size:11px;' align='center'>" +
			
 
				+          statisticsData.minNO2 +
			
 
				+          '</td>' +
			
 
				+          "<td  style='color:#ce3c3a;font-size:11px;' align='center'>" +
			
 
				+          statisticsData.maxNO2 +
			
 
				+          '</td></td>' +
			
 
				+          '</tr></tbody> </table></div></td></tr></tbody> </table>';
			
 
				+
			
 
				+        var latLng = getLatLng(feature.attributes.lonLat);
			
 
				+        popup
			
 
				+          .setLngLat(latLng)
			
 
				+          .setHTML(contentHTML)
			
 
				+          .addTo(map);
			
 
				+
			
 
				+        //设置弹框内容颜色
			
 
				+        var groups = themeLayer.styleGroups;
			
 
				+        for (var i = 0; i < groups.length; i++) {
			
 
				+          if (feature.attributes.aqi >= groups[0].start && feature.attributes.aqi < groups[0].end) {
			
 
				+            setColor('#6ACD06');
			
 
				+          } else if (feature.attributes.aqi >= groups[1].start && feature.attributes.aqi < groups[1].end) {
			
 
				+            setColor('#FBD12A');
			
 
				+          } else if (feature.attributes.aqi >= groups[2].start && feature.attributes.aqi < groups[2].end) {
			
 
				+            setColor('#FE8800');
			
 
				+          } else if (feature.attributes.aqi >= groups[3].start && feature.attributes.aqi < groups[3].end) {
			
 
				+            setColor('#FF0000');
			
 
				+          } else if (feature.attributes.aqi >= groups[4].start && feature.attributes.aqi < groups[4].end) {
			
 
				+            setColor('#CC0000');
			
 
				+          } else if (feature.attributes.aqi >= groups[5].start && feature.attributes.aqi < groups[5].end) {
			
 
				+            setColor('#960453');
			
 
				+          }
			
 
				+        }
			
 
				+      }
			
 
				+      function getStatisticsData() {
			
 
				+        if (statisticsData) {
			
 
				+          return statisticsData;
			
 
				+        }
			
 
				+        //遍历数组，获取单个属性。组成新的数组
			
 
				+        var pm25 = [],
			
 
				+          pm10s = [],
			
 
				+          o3s = [],
			
 
				+          so2s = [],
			
 
				+          no2s = [];
			
 
				+        for (var i = 0; i < themeData.length; i++) {
			
 
				+          pm10s.push(themeData[i].pm2_5);
			
 
				+          pm25.push(themeData[i].pm10);
			
 
				+          o3s.push(themeData[i].o3);
			
 
				+          so2s.push(themeData[i].so2);
			
 
				+          no2s.push(themeData[i].no2);
			
 
				+        }
			
 
				+        //获取单个属性的最大最小值
			
 
				+        var statisticsData = {
			
 
				+          maxNum: Math.max.apply(Math, pm25),
			
 
				+          minNum: Math.min.apply(Math, pm25),
			
 
				+          maxpm10: Math.max.apply(Math, pm10s),
			
 
				+          minpm10: Math.min.apply(Math, pm10s),
			
 
				+          maxO3: Math.max.apply(Math, o3s),
			
 
				+          minO3: Math.min.apply(Math, o3s),
			
 
				+          maxSO2: Math.max.apply(Math, so2s),
			
 
				+          minSO2: Math.min.apply(Math, so2s),
			
 
				+          maxNO2: Math.max.apply(Math, no2s),
			
 
				+          minNO2: Math.min.apply(Math, no2s)
			
 
				+        };
			
 
				+        return statisticsData;
			
 
				+      }
			
 
				+      function setColor(color) {
			
 
				+        document.getElementById('contentID').style.backgroundColor = color;
			
 
				+        document.getElementById('textID').style.color = color;
			
 
				+      }
			
 
				+      function getLatLng(latLng) {
			
 
				+        var latLng = latLng.split(',');
			
 
				+        return [parseFloat(latLng[0]), parseFloat(latLng[1])];
			
 
				+      }
			
 
				+      function handleMouseOver(params) {
			
 
				+        var e = params.mapboxEvent;
			
 
				+        map = params.map;
			
 
				+        var themeLayer = map.getLayer(params.layerId);
			
 
				+        if (e.target && e.target.refDataID) {
			
 
				+          var fid = e.target.refDataID;
			
 
				+          var fea = themeLayer.getFeatureById(fid);
			
 
				+          if (fea) {
			
 
				+            updateInfoView(fea, themeLayer);
			
 
				+          }
			
 
				+        } else {
			
 
				+          removePopup();
			
 
				+        }
			
 
				+      }
			
 
				+      function removePopup() {
			
 
				+        popup && popup.remove(map);
			
 
				+      }
			
 
				+
			
 
				+      ReactDOM.render(
			
 
				+        <SmWebMap mapOptions={mapOptions}>
			
 
				+          <SmLabelThemeLayer
			
 
				+            options={themeOptions}
			
 
				+            layerName={'LabelThemeLayer'}
			
 
				+            data={features}
			
 
				+            onMousemove={handleMouseOver}
			
 
				+          />
			
 
				+        </SmWebMap>,
			
 
				+        document.getElementById('main')
			
 
				+      );
			
 
				+    </script>
			
 
				+  </body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_labeltheme_vue.html
+++ b/public/supermap/examples/component/components_labeltheme_vue.html
@@ -0,0 +1,339 @@
 
				+<!--********************************************************************
			
 
				+* 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_componentsLabelTheme_Vue"></title>
			
 
				+    <style>
			
 
				+      #main {
			
 
				+        margin: 0 auto;
			
 
				+        width: 100%;
			
 
				+        height: 100%;
			
 
				+      }
			
 
				+    </style>
			
 
				+  </head>
			
 
				+
			
 
				+  <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
			
 
				+    <div id="main">
			
 
				+      <sm-web-map :map-options="mapOptions" @load="mapIsLoaded">
			
 
				+        <sm-label-theme-layer
			
 
				+          :options="themeOptions"
			
 
				+          layer-name="LabelThemeLayer"
			
 
				+          :data="features"
			
 
				+          @load="layerLoaded"
			
 
				+          v-show="!!features.length"
			
 
				+        >
			
 
				+        </sm-label-theme-layer>
			
 
				+      </sm-web-map>
			
 
				+    </div>
			
 
				+    <script type="text/javascript" include="vue,bootstrap" src="../js/include-web.js"></script>
			
 
				+    <script
			
 
				+      include="iclient-mapboxgl-vue,mapbox-gl-enhance"
			
 
				+      src="../../dist/mapboxgl/include-mapboxgl.js"
			
 
				+    ></script>
			
 
				+    <script type="text/javascript" src="../data/themeLableData.js"></script>
			
 
				+    <script>
			
 
				+      new Vue({
			
 
				+        el: '#main',
			
 
				+        data() {
			
 
				+          var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+          var attribution =
			
 
				+            "<a href='https://www.mapbtyx.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 features = [];
			
 
				+          var feat;
			
 
				+          for (var i = 0; i < themeData.length; i++) {
			
 
				+            var lonlat = themeData[i].lonLat.split(',');
			
 
				+            var lng = parseFloat(lonlat[0]);
			
 
				+            var lat = parseFloat(lonlat[1]);
			
 
				+            var text = themeData[i].aqi;
			
 
				+            feat = new mapboxgl.supermap.ThemeFeature([lng, lat, text], themeData[i]);
			
 
				+            features.push(feat);
			
 
				+          }
			
 
				+          return {
			
 
				+            mapOptions: {
			
 
				+              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: [116.4, 39.79],
			
 
				+              zoom: 3
			
 
				+            },
			
 
				+            features,
			
 
				+            themeOptions: {
			
 
				+              //                map: map,//该可选参数将在下个版本遗弃
			
 
				+              attributions: ' ',
			
 
				+              style: new SuperMap.ThemeStyle({
			
 
				+                labelRect: true,
			
 
				+                fontColor: '#000000',
			
 
				+                fontWeight: 'bolder',
			
 
				+                fontSize: '18px',
			
 
				+                fill: true,
			
 
				+                fillColor: '#FFFFFF',
			
 
				+                fillOpacity: 1,
			
 
				+                stroke: false,
			
 
				+                strokeColor: '#8B7B8B'
			
 
				+              }),
			
 
				+              themeField: 'aqi',
			
 
				+              styleGroups: [
			
 
				+                {
			
 
				+                  start: 0,
			
 
				+                  end: 51,
			
 
				+                  style: {
			
 
				+                    fillColor: '#6ACD06',
			
 
				+                    fontSize: '17px'
			
 
				+                  }
			
 
				+                },
			
 
				+                {
			
 
				+                  start: 51,
			
 
				+                  end: 101,
			
 
				+                  style: {
			
 
				+                    fillColor: '#FBD12A',
			
 
				+                    fontSize: '19px'
			
 
				+                  }
			
 
				+                },
			
 
				+                {
			
 
				+                  start: 101,
			
 
				+                  end: 151,
			
 
				+                  style: {
			
 
				+                    fillColor: '#FE8800',
			
 
				+                    fontSize: '22px'
			
 
				+                  }
			
 
				+                },
			
 
				+                {
			
 
				+                  start: 151,
			
 
				+                  end: 201,
			
 
				+                  style: {
			
 
				+                    fillColor: '#FF0000',
			
 
				+                    fontSize: '24px'
			
 
				+                  }
			
 
				+                },
			
 
				+                {
			
 
				+                  start: 201,
			
 
				+                  end: 301,
			
 
				+                  style: {
			
 
				+                    fillColor: '#CC0000',
			
 
				+                    fontSize: '26px'
			
 
				+                  }
			
 
				+                },
			
 
				+                {
			
 
				+                  start: 301,
			
 
				+                  end: 601,
			
 
				+                  style: {
			
 
				+                    fillColor: '#960453',
			
 
				+                    fontSize: '28px'
			
 
				+                  }
			
 
				+                }
			
 
				+              ]
			
 
				+            }
			
 
				+          };
			
 
				+        },
			
 
				+        methods: {
			
 
				+          mapIsLoaded(e) {
			
 
				+            this.map = e.map;
			
 
				+          },
			
 
				+          updateInfoView(feature, themeLayer) {
			
 
				+            if (!feature && this.popup) {
			
 
				+              this.removePopup();
			
 
				+              return;
			
 
				+            }
			
 
				+
			
 
				+            if (!this.popup) {
			
 
				+              this.popup = new mapboxgl.Popup({ maxWidth: 600 });
			
 
				+            }
			
 
				+
			
 
				+            var statisticsData = this.getStatisticsData();
			
 
				+            var contentHTML =
			
 
				+              '<table><tbody><tr>' +
			
 
				+              "<td><div style='margin-left: 15px'>" +
			
 
				+              '<table><tbody><tr>' +
			
 
				+              "<td><div id='contentID' style='margin-top: 2px;margin-bottom: 2px;width:65px;height:60px;line-height:60px;text-align: center;font-size:35px;color: #ffffff;'>" +
			
 
				+              feature.attributes.aqi +
			
 
				+              '</div></td>' +
			
 
				+              "<td style='padding-right: 20px;'></td>" +
			
 
				+              '<td>' +
			
 
				+              "<div id='textID' style='text-align: left;font-size: 19px;text-shadow: 1px 1px 0 #ffffff;'>" +
			
 
				+              feature.attributes.quality +
			
 
				+              '</div>' +
			
 
				+              "<div style='font-size:10px;width:150px;'>" +
			
 
				+              feature.attributes.time_point +
			
 
				+              '</div>' +
			
 
				+              "<div style=' font-weight:lighter; font-size:14px;'>" +
			
 
				+              resources.text_currentCity +
			
 
				+              '：' +
			
 
				+              feature.attributes.area +
			
 
				+              '</div>' +
			
 
				+              '</td>' +
			
 
				+              '</tr> </tbody></table>' +
			
 
				+              "<table style='width:100%;font-size: 10px;border: 0 solid black;padding: 0;margin: 0;border-spacing: 0;'>" +
			
 
				+              '<tbody>' +
			
 
				+              '<tr>' +
			
 
				+              "<td style='font-weight:bold;width:45px;'></td><td style='font-weight:bold;width:51px;' align='center' nowrap='true'>Current</td>" +
			
 
				+              "<td  style=' font-weight:bold;width:49px;' align='center' nowrap='true'>Min</td>" +
			
 
				+              "<td style='font-weight:bold;width:49px;' align='center' nowrap='true'>Max</td> " +
			
 
				+              '</tr>' +
			
 
				+              "<tr style='height: 23px;'><td style='padding-left: 0;padding-right: 0'><div style='width:46px;'><span style='font-weight:bold;'>PM2.5</span></div></td>" +
			
 
				+              "<td style='font-size:11px;' align='center'>" +
			
 
				+              feature.attributes.pm2_5 +
			
 
				+              '</td>' +
			
 
				+              "<td style='color:#0086c8;font-size:11px;' align='center'>" +
			
 
				+              statisticsData.minNum +
			
 
				+              '</td>' +
			
 
				+              "<td  style='color:#ce3c3a;font-size:11px;' align='center'>" +
			
 
				+              statisticsData.maxNum +
			
 
				+              '</td>' +
			
 
				+              '</tr>' +
			
 
				+              "<tr style='height: 23px;'><td style='padding-left: 0;padding-right: 0'><div style='width:46px;'><span style='font-weight:bold;'>PM10</span></div></td>" +
			
 
				+              "<td style='font-size:11px;' align='center'>" +
			
 
				+              feature.attributes.pm10 +
			
 
				+              '</td>' +
			
 
				+              "<td style='color:#0086c8;font-size:11px;' align='center'>" +
			
 
				+              statisticsData.minpm10 +
			
 
				+              '</td>' +
			
 
				+              "<td  style='color:#ce3c3a;font-size:11px;' align='center'>" +
			
 
				+              statisticsData.maxpm10 +
			
 
				+              '</td>' +
			
 
				+              '</tr>' +
			
 
				+              "<tr style='height:23px;'><td style='padding-left: 0;padding-right: 0'><div style='width:46px;'><span style='font-weight:bold;'>O3</span></div></td>" +
			
 
				+              "<td style='font-size:11px;' align='center'>" +
			
 
				+              feature.attributes.o3 +
			
 
				+              '</td>' +
			
 
				+              "<td style='color:#0086c8;font-size:11px;' align='center'>" +
			
 
				+              statisticsData.minO3 +
			
 
				+              '</td>' +
			
 
				+              "<td style='color:#ce3c3a;font-size:11px;' align='center'>" +
			
 
				+              statisticsData.maxO3 +
			
 
				+              '</td></td>' +
			
 
				+              '</tr>' +
			
 
				+              "<tr style='height: 23px;'><td style='padding-left: 0;padding-right: 0'><div style='width:46px;'><span style='font-weight:bold;'>SO2</span></div></td>" +
			
 
				+              "<td style='font-size:11px;' align='center'>" +
			
 
				+              feature.attributes.so2 +
			
 
				+              '</td>' +
			
 
				+              "<td style='color:#0086c8;font-size:11px;' align='center'>" +
			
 
				+              statisticsData.minSO2 +
			
 
				+              '</td>' +
			
 
				+              "<td  style='color:#ce3c3a;font-size:11px;' align='center'>" +
			
 
				+              statisticsData.maxSO2 +
			
 
				+              '</td></td>' +
			
 
				+              '</tr>' +
			
 
				+              "<tr style='height: 23px;'><td style='padding-left: 0;padding-right: 0'><div style='width:46px;'><span style='font-weight:bold;'>NO2</span></div></td>" +
			
 
				+              "<td style='font-size:11px;' align='center'>" +
			
 
				+              feature.attributes.no2 +
			
 
				+              '</td>' +
			
 
				+              "<td style='color:#0086c8;font-size:11px;' align='center'>" +
			
 
				+              statisticsData.minNO2 +
			
 
				+              '</td>' +
			
 
				+              "<td  style='color:#ce3c3a;font-size:11px;' align='center'>" +
			
 
				+              statisticsData.maxNO2 +
			
 
				+              '</td></td>' +
			
 
				+              '</tr></tbody> </table></div></td></tr></tbody> </table>';
			
 
				+
			
 
				+            var latLng = this.getLatLng(feature.attributes.lonLat);
			
 
				+            this.popup
			
 
				+              .setLngLat(latLng)
			
 
				+              .setHTML(contentHTML)
			
 
				+              .addTo(this.map);
			
 
				+
			
 
				+            //设置弹框内容颜色
			
 
				+            var groups = themeLayer.styleGroups;
			
 
				+            for (var i = 0; i < groups.length; i++) {
			
 
				+              if (feature.attributes.aqi >= groups[0].start && feature.attributes.aqi < groups[0].end) {
			
 
				+                this.setColor('#6ACD06');
			
 
				+              } else if (feature.attributes.aqi >= groups[1].start && feature.attributes.aqi < groups[1].end) {
			
 
				+                this.setColor('#FBD12A');
			
 
				+              } else if (feature.attributes.aqi >= groups[2].start && feature.attributes.aqi < groups[2].end) {
			
 
				+                this.setColor('#FE8800');
			
 
				+              } else if (feature.attributes.aqi >= groups[3].start && feature.attributes.aqi < groups[3].end) {
			
 
				+                this.setColor('#FF0000');
			
 
				+              } else if (feature.attributes.aqi >= groups[4].start && feature.attributes.aqi < groups[4].end) {
			
 
				+                this.setColor('#CC0000');
			
 
				+              } else if (feature.attributes.aqi >= groups[5].start && feature.attributes.aqi < groups[5].end) {
			
 
				+                this.setColor('#960453');
			
 
				+              }
			
 
				+            }
			
 
				+          },
			
 
				+          getStatisticsData() {
			
 
				+            if (this.statisticsData) {
			
 
				+              return this.statisticsData;
			
 
				+            }
			
 
				+            //遍历数组，获取单个属性。组成新的数组
			
 
				+            var pm25 = [],
			
 
				+              pm10s = [],
			
 
				+              o3s = [],
			
 
				+              so2s = [],
			
 
				+              no2s = [];
			
 
				+            for (var i = 0; i < themeData.length; i++) {
			
 
				+              pm10s.push(themeData[i].pm2_5);
			
 
				+              pm25.push(themeData[i].pm10);
			
 
				+              o3s.push(themeData[i].o3);
			
 
				+              so2s.push(themeData[i].so2);
			
 
				+              no2s.push(themeData[i].no2);
			
 
				+            }
			
 
				+            //获取单个属性的最大最小值
			
 
				+            this.statisticsData = {
			
 
				+              maxNum: Math.max.apply(Math, pm25),
			
 
				+              minNum: Math.min.apply(Math, pm25),
			
 
				+              maxpm10: Math.max.apply(Math, pm10s),
			
 
				+              minpm10: Math.min.apply(Math, pm10s),
			
 
				+              maxO3: Math.max.apply(Math, o3s),
			
 
				+              minO3: Math.min.apply(Math, o3s),
			
 
				+              maxSO2: Math.max.apply(Math, so2s),
			
 
				+              minSO2: Math.min.apply(Math, so2s),
			
 
				+              maxNO2: Math.max.apply(Math, no2s),
			
 
				+              minNO2: Math.min.apply(Math, no2s)
			
 
				+            };
			
 
				+            return this.statisticsData;
			
 
				+          },
			
 
				+          setColor(color) {
			
 
				+            document.getElementById('contentID').style.backgroundColor = color;
			
 
				+            document.getElementById('textID').style.color = color;
			
 
				+          },
			
 
				+          getLatLng(latLng) {
			
 
				+            var latLng = latLng.split(',');
			
 
				+            return [parseFloat(latLng[0]), parseFloat(latLng[1])];
			
 
				+          },
			
 
				+          layerLoaded(themeLayer) {
			
 
				+            themeLayer.on('mousemove', function(e) {
			
 
				+              this.handleMouseOver(themeLayer, e);
			
 
				+            }.bind(this));
			
 
				+          },
			
 
				+          handleMouseOver(themeLayer, e) {
			
 
				+            if (e.target && e.target.refDataID) {
			
 
				+              var fid = e.target.refDataID;
			
 
				+              var fea = themeLayer.getFeatureById(fid);
			
 
				+              if (fea) {
			
 
				+                this.updateInfoView(fea, themeLayer);
			
 
				+              }
			
 
				+            } else {
			
 
				+              this.removePopup();
			
 
				+            }
			
 
				+          },
			
 
				+          removePopup() {
			
 
				+            this.popup && this.popup.remove(this.map);
			
 
				+          }
			
 
				+        }
			
 
				+      });
			
 
				+    </script>
			
 
				+  </body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_layerList_vue.html
+++ b/public/supermap/examples/component/components_layerList_vue.html
@@ -0,0 +1,36 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+
			
 
				+<head>
			
 
				+  <meta charset="UTF-8">
			
 
				+  <title data-i18n='resources.title_componentsLayerList_Vue'></title>
			
 
				+  <script type="text/javascript" include="vue" src="../js/include-web.js"></script>
			
 
				+  <script include="iclient-mapboxgl-vue,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+  <style>
			
 
				+     #main{
			
 
				+        margin: 0 auto;
			
 
				+        width: 100%;
			
 
				+        height: 100%;
			
 
				+    }
			
 
				+  </style>
			
 
				+</head>
			
 
				+
			
 
				+<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
			
 
				+  <div id="main">
			
 
				+    <sm-web-map server-url='https://iportal.supermap.io/iportal' map-id="801571284">
			
 
				+      <!-- 图层列表组件：sm-layer-list -->
			
 
				+      <sm-layer-list position="top-left" :collapsed="false"></sm-layer-list>
			
 
				+    </sm-web-map>
			
 
				+  </div>
			
 
				+  <script>
			
 
				+    new Vue({
			
 
				+      el: '#main'
			
 
				+    })
			
 
				+
			
 
				+  </script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_layerManager_vue.html
+++ b/public/supermap/examples/component/components_layerManager_vue.html
@@ -0,0 +1,138 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+    <head>
			
 
				+        <meta charset="UTF-8" />
			
 
				+        <title data-i18n="resources.title_componentsLayerManager_vue"></title>
			
 
				+        <script type="text/javascript" include="vue" src="../js/include-web.js"></script>
			
 
				+        <script
			
 
				+            include="iclient-mapboxgl-vue,mapbox-gl-enhance"
			
 
				+            src="../../dist/mapboxgl/include-mapboxgl.js"
			
 
				+        ></script>
			
 
				+        <style>
			
 
				+            #main {
			
 
				+                margin: 0 auto;
			
 
				+                width: 100%;
			
 
				+                height: 100%;
			
 
				+            }
			
 
				+            .sm-component-layer-manager .sm-component-tree {
			
 
				+                font-size: 12px;
			
 
				+            }
			
 
				+        </style>
			
 
				+    </head>
			
 
				+
			
 
				+    <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
			
 
				+        <div id="main">
			
 
				+            <sm-web-map :map-options="mapOptions">
			
 
				+                <!-- 图层管理组件：sm-layer-manager -->
			
 
				+                <sm-layer-manager
			
 
				+                    position="top-left"
			
 
				+                    :collapsed="false"
			
 
				+                    :layers="layers"
			
 
				+                    :default-expand-all="true"
			
 
				+                ></sm-layer-manager>
			
 
				+            </sm-web-map>
			
 
				+        </div>
			
 
				+        <script>
			
 
				+            new Vue({
			
 
				+                el: '#main',
			
 
				+                data() {
			
 
				+                    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> ";
			
 
				+                    return {
			
 
				+                        layers: [
			
 
				+                            {
			
 
				+                                title: '直辖市',
			
 
				+                                children: [
			
 
				+                                    {
			
 
				+                                        title: '上海',
			
 
				+                                        mapInfo: {
			
 
				+                                            serverUrl: 'https://www.supermapol.com/',
			
 
				+                                            mapId: 394538195,
			
 
				+                                            layerFilter: function(layer) {
			
 
				+                                                if (layer.name === '上海_县级行政区划图@公众数据') {
			
 
				+                                                    return true;
			
 
				+                                                }
			
 
				+                                                return false;
			
 
				+                                            }
			
 
				+                                        }
			
 
				+                                    },
			
 
				+                                    {
			
 
				+                                        title: '天津',
			
 
				+                                        mapInfo: {
			
 
				+                                            serverUrl: 'https://www.supermapol.com/',
			
 
				+                                            mapId: 849848633,
			
 
				+                                            layerFilter: function(layer) {
			
 
				+                                                if (layer.name === '天津_县级行政区划图@公众数据') {
			
 
				+                                                    return true;
			
 
				+                                                }
			
 
				+                                                return false;
			
 
				+                                            }
			
 
				+                                        }
			
 
				+                                    },
			
 
				+                                    {
			
 
				+                                        title: '北京',
			
 
				+                                        mapInfo: {
			
 
				+                                            serverUrl: 'https://www.supermapol.com/',
			
 
				+                                            mapId: 1837435007,
			
 
				+                                            layerFilter: function(layer) {
			
 
				+                                                if (layer.name === '北京_县级行政区划图@公众数据') {
			
 
				+                                                    return true;
			
 
				+                                                }
			
 
				+                                                return false;
			
 
				+                                            }
			
 
				+                                        }
			
 
				+                                    },
			
 
				+                                    {
			
 
				+                                        title: '重庆',
			
 
				+                                        mapInfo: {
			
 
				+                                            serverUrl: 'https://www.supermapol.com/',
			
 
				+                                            mapId: 1589273415,
			
 
				+                                            layerFilter: function(layer) {
			
 
				+                                                if (layer.name === '重庆_县级行政区划图@公众数据') {
			
 
				+                                                    return true;
			
 
				+                                                }
			
 
				+                                                return false;
			
 
				+                                            }
			
 
				+                                        }
			
 
				+                                    }
			
 
				+                                ]
			
 
				+                            }
			
 
				+                        ],
			
 
				+                        mapOptions: {
			
 
				+                            container: 'map', // container id
			
 
				+                            style: {
			
 
				+                                version: 8,
			
 
				+                                sources: {
			
 
				+                                    'raster-tiles': {
			
 
				+                                        attribution: attribution,
			
 
				+                                        type: 'raster',
			
 
				+                                        tiles: [host + '/iserver/services/map-china400/rest/maps/ChinaDark'],
			
 
				+                                        rasterSource: 'iserver',
			
 
				+                                        tileSize: 256
			
 
				+                                    }
			
 
				+                                },
			
 
				+                                layers: [
			
 
				+                                    {
			
 
				+                                        id: 'simple-tiles',
			
 
				+                                        type: 'raster',
			
 
				+                                        source: 'raster-tiles',
			
 
				+                                        minzoom: 0,
			
 
				+                                        maxzoom: 22
			
 
				+                                    }
			
 
				+                                ]
			
 
				+                            },
			
 
				+                            center: [113.91814841850453, 34.946821449424775], // starting position
			
 
				+                            zoom: 5.39 // starting zoom
			
 
				+                        }
			
 
				+                    };
			
 
				+                }
			
 
				+            });
			
 
				+        </script>
			
 
				+    </body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_layer_color_vue.html
+++ b/public/supermap/examples/component/components_layer_color_vue.html
@@ -0,0 +1,36 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+    <head>
			
 
				+        <meta charset="UTF-8" />
			
 
				+        <title data-i18n="resources.title_layerColor_Vue"></title>
			
 
				+        <script type="text/javascript" include="vue" src="../js/include-web.js"></script>
			
 
				+        <script
			
 
				+            include="iclient-mapboxgl-vue,mapbox-gl-enhance"
			
 
				+            src="../../dist/mapboxgl/include-mapboxgl.js"
			
 
				+        ></script>
			
 
				+        <style>
			
 
				+            #main {
			
 
				+                margin: 0 auto;
			
 
				+                width: 100%;
			
 
				+                height: 100%;
			
 
				+            }
			
 
				+        </style>
			
 
				+    </head>
			
 
				+
			
 
				+    <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
			
 
				+        <div id="main">
			
 
				+            <sm-web-map server-url="https://www.supermapol.com/" map-id="505367620">
			
 
				+              <sm-layer-color :collapsed="false"></sm-layer-color>
			
 
				+            </sm-web-map>
			
 
				+        </div>
			
 
				+
			
 
				+        <script>
			
 
				+            new Vue({
			
 
				+                el: '#main'
			
 
				+            });
			
 
				+        </script>
			
 
				+    </body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_legend_vue.html
+++ b/public/supermap/examples/component/components_legend_vue.html
@@ -0,0 +1,37 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+
			
 
				+<head>
			
 
				+  <meta charset="UTF-8">
			
 
				+  <title data-i18n='resources.title_componentsLegend_Vue'></title>
			
 
				+  <script type="text/javascript" include="vue" src="../js/include-web.js"></script>
			
 
				+  <script include="iclient-mapboxgl-vue,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+  <style>
			
 
				+     #main{
			
 
				+        margin: 0 auto;
			
 
				+        width: 100%;
			
 
				+        height: 100%;
			
 
				+    }
			
 
				+  </style>
			
 
				+</head>
			
 
				+
			
 
				+<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
			
 
				+  <div id="main">
			
 
				+    <sm-web-map server-url='https://iportal.supermap.io/iportal' map-id="491609698">
			
 
				+      <!-- 图例组件: sm-legend -->
			
 
				+      <sm-legend :layer-names="['民航数据']" position="bottom-left"></sm-legend>
			
 
				+    </sm-web-map>
			
 
				+  </div>
			
 
				+
			
 
				+  <script>
			
 
				+    new Vue({
			
 
				+      el: '#main'
			
 
				+    })
			
 
				+
			
 
				+  </script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_map_react.html
+++ b/public/supermap/examples/component/components_map_react.html
@@ -0,0 +1,65 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+
			
 
				+<head>
			
 
				+  <meta charset="UTF-8">
			
 
				+  <title data-i18n='resources.title_componentsMap_React'></title>
			
 
				+  <script type="text/javascript" include="react" src="../js/include-web.js"></script>
			
 
				+  <script include="antd,iclient-mapboxgl-react,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+  <style>
			
 
				+    html,
			
 
				+    body {
			
 
				+      height: 100%;
			
 
				+      margin: 0;
			
 
				+      padding: 0;
			
 
				+    }
			
 
				+    #main {
			
 
				+      height: 100%;
			
 
				+    }
			
 
				+  </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+  <div id="main">
			
 
				+
			
 
				+  </div>
			
 
				+  <script type="text/babel">
			
 
				+    // import {WebMap} from '@supermap/react-iclient'
			
 
				+    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 SmWebMap = SuperMap.Components.SmWebMap;
			
 
				+    var mapOptions = {
			
 
				+      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: [120.143, 30.236],
			
 
				+      zoom: 3
			
 
				+    };
			
 
				+    ReactDOM.render(<SmWebMap mapOptions={mapOptions} />, document.getElementById('main'));
			
 
				+  </script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_map_vue.html
+++ b/public/supermap/examples/component/components_map_vue.html
@@ -0,0 +1,71 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+
			
 
				+<head>
			
 
				+  <meta charset="UTF-8">
			
 
				+  <title data-i18n='resources.title_componentsMap_Vue'></title>
			
 
				+  <script type="text/javascript" include="vue" src="../js/include-web.js"></script>
			
 
				+  <script include="iclient-mapboxgl-vue,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+  <style>
			
 
				+    #main {
			
 
				+      margin: 0 auto;
			
 
				+      width: 100%;
			
 
				+      height: 100%;
			
 
				+    }
			
 
				+
			
 
				+  </style>
			
 
				+</head>
			
 
				+
			
 
				+<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
			
 
				+  <div id="main">
			
 
				+    <!-- 地图组件：sm-map  props: map-options, access-token-->
			
 
				+    <sm-web-map :map-options="mapOptions"></sm-web-map>
			
 
				+  </div>
			
 
				+
			
 
				+  <script>
			
 
				+    new Vue({
			
 
				+      el: '#main',
			
 
				+      data() {
			
 
				+        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> ";
			
 
				+
			
 
				+        return {
			
 
				+          // mapOptions是sm-map组件的props
			
 
				+          mapOptions: {
			
 
				+              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
			
 
				+            }
			
 
				+        };
			
 
				+      }
			
 
				+    })
			
 
				+
			
 
				+  </script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_mapv_react.html
+++ b/public/supermap/examples/component/components_mapv_react.html
@@ -0,0 +1,143 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+  <head>
			
 
				+    <meta charset="UTF-8" />
			
 
				+    <title data-i18n="resources.title_componentsMapV_React"></title>
			
 
				+    <script type="text/javascript" include="react,jquery" src="../js/include-web.js"></script>
			
 
				+    <script
			
 
				+      include="antd,iclient-mapboxgl-react,mapbox-gl-enhance,proj4,mapv"
			
 
				+      src="../../dist/mapboxgl/include-mapboxgl.js"
			
 
				+    ></script>
			
 
				+    <style>
			
 
				+      html,
			
 
				+      body {
			
 
				+        height: 100%;
			
 
				+        margin: 0;
			
 
				+        padding: 0;
			
 
				+      }
			
 
				+
			
 
				+      #main {
			
 
				+        height: 100%;
			
 
				+      }
			
 
				+    </style>
			
 
				+  </head>
			
 
				+
			
 
				+  <body>
			
 
				+    <div id="main"></div>
			
 
				+    <script type="text/babel">
			
 
				+      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 SmWebMap = SuperMap.Components.SmWebMap;
			
 
				+      var SmMapvLayer = SuperMap.Components.SmMapvLayer;
			
 
				+      var mapOptions = {
			
 
				+        container: 'map', // container id
			
 
				+        style: {
			
 
				+          version: 8,
			
 
				+          sources: {
			
 
				+            'raster-tiles': {
			
 
				+              attribution: attribution,
			
 
				+              type: 'raster',
			
 
				+              tiles: [host + '/iserver/services/map-china400/rest/maps/ChinaDark/zxyTileImage.png?z={z}&x={x}&y={y}'],
			
 
				+              tileSize: 256
			
 
				+            }
			
 
				+          },
			
 
				+          layers: [
			
 
				+            {
			
 
				+              id: 'simple-tiles',
			
 
				+              type: 'raster',
			
 
				+              source: 'raster-tiles',
			
 
				+              minzoom: 0,
			
 
				+              maxzoom: 22
			
 
				+            }
			
 
				+          ]
			
 
				+        },
			
 
				+        center: [114.321317, 30.398428],
			
 
				+        zoom: 10
			
 
				+      };
			
 
				+      var lineMapvOptions = {
			
 
				+        strokeStyle: 'rgba(53,57,255,0.5)',
			
 
				+        coordType: 'bd09mc',
			
 
				+        shadowColor: 'rgba(53,57,255,0.2)',
			
 
				+        shadowBlur: 3,
			
 
				+        lineWidth: 3.0,
			
 
				+        draw: 'simple'
			
 
				+      };
			
 
				+      var pointMapvOptions = {
			
 
				+        fillStyle: 'rgba(255, 250, 250, 0.2)',
			
 
				+        coordType: 'bd09mc',
			
 
				+        globalCompositeOperation: 'lighter',
			
 
				+        size: 1.5,
			
 
				+        animation: {
			
 
				+          stepsRange: {
			
 
				+            start: 0,
			
 
				+            end: 100
			
 
				+          },
			
 
				+          trails: 3,
			
 
				+          duration: 5
			
 
				+        },
			
 
				+        draw: 'simple'
			
 
				+      };
			
 
				+
			
 
				+      function addPopup(e) {
			
 
				+        var map = e.map;
			
 
				+        new mapboxgl.Popup({ closeOnClick: false })
			
 
				+          .setLngLat(map.getCenter())
			
 
				+          .setHTML(resources.text_iClient)
			
 
				+          .addTo(map);
			
 
				+      }
			
 
				+
			
 
				+      $.get('../data/wuhan-car', function(rs) {
			
 
				+        // 构造数据
			
 
				+        var data = [];
			
 
				+        var timeData = [];
			
 
				+        rs = rs.split('\n');
			
 
				+        var maxLength = 0;
			
 
				+        for (var i = 0; i < rs.length; i++) {
			
 
				+          var item = rs[i].split(',');
			
 
				+
			
 
				+          var coordinates = [];
			
 
				+          if (item.length > maxLength) {
			
 
				+            maxLength = item.length;
			
 
				+          }
			
 
				+          for (var j = 0; j < item.length; j += 2) {
			
 
				+            if (item.length === 1) {
			
 
				+              continue;
			
 
				+            }
			
 
				+            coordinates.push(proj4('EPSG:3857', 'EPSG:4326', [parseInt(item[j]), parseInt(item[j + 1])]));
			
 
				+            timeData.push({
			
 
				+              geometry: {
			
 
				+                type: 'Point',
			
 
				+                coordinates: proj4('EPSG:3857', 'EPSG:4326', [parseInt(item[j]), parseInt(item[j + 1])])
			
 
				+              },
			
 
				+              count: 1,
			
 
				+              time: j
			
 
				+            });
			
 
				+          }
			
 
				+
			
 
				+          data.push({
			
 
				+            geometry: {
			
 
				+              type: 'LineString',
			
 
				+              coordinates: coordinates
			
 
				+            }
			
 
				+          });
			
 
				+        }
			
 
				+        var lineDataSet = new mapv.DataSet(data);
			
 
				+        var ponitDataSet = new mapv.DataSet(timeData);
			
 
				+
			
 
				+        ReactDOM.render(
			
 
				+          <SmWebMap mapOptions={mapOptions} onLoad={addPopup}>
			
 
				+            <SmMapvLayer data={lineDataSet} options={lineMapvOptions} />
			
 
				+            <SmMapvLayer data={ponitDataSet} options={pointMapvOptions} />
			
 
				+          </SmWebMap>,
			
 
				+          document.getElementById('main')
			
 
				+        );
			
 
				+      });
			
 
				+    </script>
			
 
				+  </body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_mapv_vue.html
+++ b/public/supermap/examples/component/components_mapv_vue.html
@@ -0,0 +1,155 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+	<head>
			
 
				+		<meta charset="UTF-8" />
			
 
				+		<title data-i18n="resources.title_componentsMapV_Vue"></title>
			
 
				+		<script type="text/javascript" include="vue,jquery" src="../js/include-web.js"></script>
			
 
				+		<script
			
 
				+			include="iclient-mapboxgl-vue,mapbox-gl-enhance,proj4,mapv"
			
 
				+			src="../../dist/mapboxgl/include-mapboxgl.js"
			
 
				+		></script>
			
 
				+		<style>
			
 
				+			#main {
			
 
				+				margin: 0 auto;
			
 
				+				width: 100%;
			
 
				+				height: 100%;
			
 
				+			}
			
 
				+		</style>
			
 
				+	</head>
			
 
				+
			
 
				+	<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
			
 
				+		<div id="main">
			
 
				+			<sm-web-map :map-options="mapOptions" @load="addPopup">
			
 
				+				<sm-mapv-layer :data="lineDataSet" :options="lineMapvOptions"></sm-mapv-layer>
			
 
				+				<sm-mapv-layer :data="ponitDataSet" :options="pointMapvOptions"></sm-mapv-layer>
			
 
				+			</sm-web-map>
			
 
				+		</div>
			
 
				+		<script>
			
 
				+			$.get('../data/wuhan-car', function(rs) {
			
 
				+				// 构造数据
			
 
				+				var data = [];
			
 
				+				var timeData = [];
			
 
				+				rs = rs.split('\n');
			
 
				+				var maxLength = 0;
			
 
				+				for (var i = 0; i < rs.length; i++) {
			
 
				+					var item = rs[i].split(',');
			
 
				+
			
 
				+					var coordinates = [];
			
 
				+					if (item.length > maxLength) {
			
 
				+						maxLength = item.length;
			
 
				+					}
			
 
				+					for (j = 0; j < item.length; j += 2) {
			
 
				+						if (item.length === 1) {
			
 
				+							continue;
			
 
				+						}
			
 
				+						coordinates.push(proj4('EPSG:3857', 'EPSG:4326', [parseInt(item[j]), parseInt(item[j + 1])]));
			
 
				+						timeData.push({
			
 
				+							geometry: {
			
 
				+								type: 'Point',
			
 
				+								coordinates: proj4('EPSG:3857', 'EPSG:4326', [
			
 
				+									parseInt(item[j]),
			
 
				+									parseInt(item[j + 1]),
			
 
				+								]),
			
 
				+							},
			
 
				+							count: 1,
			
 
				+							time: j,
			
 
				+						});
			
 
				+					}
			
 
				+
			
 
				+					data.push({
			
 
				+						geometry: {
			
 
				+							type: 'LineString',
			
 
				+							coordinates: coordinates,
			
 
				+						},
			
 
				+					});
			
 
				+				}
			
 
				+				// 构造 dataset 和 mapvOptions
			
 
				+				var lineDataSet = new mapv.DataSet(data);
			
 
				+
			
 
				+				var lineMapvOptions = {
			
 
				+					strokeStyle: 'rgba(53,57,255,0.5)',
			
 
				+					coordType: 'bd09mc',
			
 
				+					shadowColor: 'rgba(53,57,255,0.2)',
			
 
				+					shadowBlur: 3,
			
 
				+					lineWidth: 3.0,
			
 
				+					draw: 'simple',
			
 
				+				};
			
 
				+
			
 
				+				var ponitDataSet = new mapv.DataSet(timeData);
			
 
				+
			
 
				+				var pointMapvOptions = {
			
 
				+					fillStyle: 'rgba(255, 250, 250, 0.2)',
			
 
				+					coordType: 'bd09mc',
			
 
				+					globalCompositeOperation: 'lighter',
			
 
				+					size: 1.5,
			
 
				+					animation: {
			
 
				+						stepsRange: {
			
 
				+							start: 0,
			
 
				+							end: 100,
			
 
				+						},
			
 
				+						trails: 3,
			
 
				+						duration: 5,
			
 
				+					},
			
 
				+					draw: 'simple',
			
 
				+				};
			
 
				+
			
 
				+				new Vue({
			
 
				+					el: '#main',
			
 
				+					data() {
			
 
				+						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> ";
			
 
				+						return {
			
 
				+							lineDataSet: lineDataSet,
			
 
				+							lineMapvOptions: lineMapvOptions,
			
 
				+							ponitDataSet: ponitDataSet,
			
 
				+							pointMapvOptions: pointMapvOptions,
			
 
				+							mapOptions: {
			
 
				+								container: 'map', // container id
			
 
				+								style: {
			
 
				+									version: 8,
			
 
				+									sources: {
			
 
				+										'raster-tiles': {
			
 
				+											attribution: attribution,
			
 
				+											type: 'raster',
			
 
				+											tiles: [
			
 
				+												host +
			
 
				+													'/iserver/services/map-china400/rest/maps/ChinaDark/zxyTileImage.png?z={z}&x={x}&y={y}',
			
 
				+											],
			
 
				+											tileSize: 256,
			
 
				+										},
			
 
				+									},
			
 
				+									layers: [
			
 
				+										{
			
 
				+											id: 'simple-tiles',
			
 
				+											type: 'raster',
			
 
				+											source: 'raster-tiles',
			
 
				+											minzoom: 0,
			
 
				+											maxzoom: 22,
			
 
				+										},
			
 
				+									],
			
 
				+								},
			
 
				+								center: [114.321317, 30.398428],
			
 
				+								zoom: 10,
			
 
				+							},
			
 
				+						};
			
 
				+					},
			
 
				+					methods: {
			
 
				+						addPopup(e) {
			
 
				+							var map = e.map;
			
 
				+							new mapboxgl.Popup({ closeOnClick: false })
			
 
				+								.setLngLat(map.getCenter())
			
 
				+								.setHTML(resources.text_iClient)
			
 
				+								.addTo(map);
			
 
				+						},
			
 
				+					},
			
 
				+				});
			
 
				+			});
			
 
				+		</script>
			
 
				+	</body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_measure_vue.html
+++ b/public/supermap/examples/component/components_measure_vue.html
@@ -0,0 +1,36 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+
			
 
				+<head>
			
 
				+  <meta charset="UTF-8">
			
 
				+  <title data-i18n='resources.title_componentsMeasure_Vue'></title>
			
 
				+  <script type="text/javascript" include="vue" src="../js/include-web.js"></script>
			
 
				+  <script include="iclient-mapboxgl-vue,mapbox-gl-enhance,draw" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+  <style>
			
 
				+     #main{
			
 
				+        margin: 0 auto;
			
 
				+        width: 100%;
			
 
				+        height: 100%;
			
 
				+    }
			
 
				+  </style>
			
 
				+</head>
			
 
				+
			
 
				+<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
			
 
				+  <div id="main">
			
 
				+    <sm-web-map server-url='https://iportal.supermap.io/iportal' map-id="801571284">
			
 
				+      <!-- 量算组件: sm-measure -->
			
 
				+      <sm-measure :collapsed="false"></sm-measure>
			
 
				+    </sm-web-map>
			
 
				+  </div>
			
 
				+
			
 
				+  <script>
			
 
				+    new Vue({
			
 
				+      el: '#main'
			
 
				+    })
			
 
				+  </script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_minimap_vue.html
+++ b/public/supermap/examples/component/components_minimap_vue.html
@@ -0,0 +1,37 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+
			
 
				+<head>
			
 
				+  <meta charset="UTF-8">
			
 
				+  <title data-i18n='resources.title_componentsMiniMap_Vue'></title>
			
 
				+  <script type="text/javascript" include="vue" src="../js/include-web.js"></script>
			
 
				+  <script include="iclient-mapboxgl-vue,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+  <style>
			
 
				+     #main{
			
 
				+        margin: 0 auto;
			
 
				+        width: 100%;
			
 
				+        height: 100%;
			
 
				+    }
			
 
				+  </style>
			
 
				+</head>
			
 
				+
			
 
				+<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
			
 
				+  <div id="main">
			
 
				+    <sm-web-map server-url='https://iportal.supermap.io/iportal' map-id="801571284">
			
 
				+      <!-- 鹰眼组件: sm-mini-map -->
			
 
				+      <sm-mini-map :collapsed="false"></sm-mini-map>
			
 
				+    </sm-web-map>
			
 
				+  </div>
			
 
				+
			
 
				+  <script>
			
 
				+    new Vue({
			
 
				+      el: '#main'
			
 
				+    })
			
 
				+
			
 
				+  </script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_natureResource_vue.html
+++ b/public/supermap/examples/component/components_natureResource_vue.html
--- a/public/supermap/examples/component/components_ncp_china_vue.html
+++ b/public/supermap/examples/component/components_ncp_china_vue.html
@@ -0,0 +1,541 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+    <head>
			
 
				+        <meta charset="UTF-8" />
			
 
				+        <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport" />
			
 
				+        <title></title>
			
 
				+    </head>
			
 
				+    <body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0;">
			
 
				+        <div id="main">
			
 
				+            <sm-web-map :map-options="mapOptions" @load="mapLoaded" @click="mapClicked"></sm-web-map>
			
 
				+            <div id="group">
			
 
				+                <sm-radio-group class="radio-group" v-model="type" default-value="china-riskLevel" size="large">
			
 
				+                    <sm-radio-button value="china-riskLevel" data-i18n="resources.text_ncp_riskLevel"></sm-radio-button>
			
 
				+                    <sm-radio-button
			
 
				+                        value="china-incrementConfirmed"
			
 
				+                        data-i18n="resources.text_ncp_incrementConfirmed"
			
 
				+                    ></sm-radio-button>
			
 
				+                    <sm-radio-button
			
 
				+                        value="china-nowConfirmed"
			
 
				+                        data-i18n="resources.text_ncp_nowConfirmed"
			
 
				+                    ></sm-radio-button>
			
 
				+                    <sm-radio-button value="china-incidence" data-i18n="resources.text_ncp_incidence"></sm-radio-button>
			
 
				+                </sm-radio-group>
			
 
				+                <br />
			
 
				+                <sm-indicator :title="title" unit="" mode="horizontal" :num="num" font-size="44px" font-weight="400">
			
 
				+                </sm-indicator>
			
 
				+                <sm-text
			
 
				+                    :title="time"
			
 
				+                    text-color="rgba(255, 255, 255, 0.6)"
			
 
				+                    :font-style='{ fontSize: "18px", fontWeight: "400" ,display: "block"}'
			
 
				+                >
			
 
				+                </sm-text>
			
 
				+            </div>
			
 
				+            <sm-image
			
 
				+                repeat="noRepeat"
			
 
				+                src="../img/online-qr.png"
			
 
				+                style="position: absolute; bottom: 32px; right: 16px; z-index: 1000; height: 88px; width: 88px;"
			
 
				+            ></sm-image>
			
 
				+        </div>
			
 
				+        <script type="text/javascript" include="vue" src="../js/include-web.js"></script>
			
 
				+        <script
			
 
				+            include="iclient-mapboxgl-vue,mapbox-gl-enhance"
			
 
				+            src="../../dist/mapboxgl/include-mapboxgl.js"
			
 
				+        ></script>
			
 
				+        <script src="../data/ncp/ProvinceData1M.js"></script>
			
 
				+        <script src="../data/ncp/province_center_data.js"></script>
			
 
				+        <style>
			
 
				+            #main {
			
 
				+                margin: 0 auto;
			
 
				+                width: 100%;
			
 
				+                height: 100%;
			
 
				+            }
			
 
				+            #group {
			
 
				+                position: absolute;
			
 
				+                left: 10px;
			
 
				+                top: 10px;
			
 
				+                z-index: 1000;
			
 
				+            }
			
 
				+            .sm-component-radio-button-wrapper {
			
 
				+                color: #fff;
			
 
				+                background: #333333;
			
 
				+                padding: 0px 10px;
			
 
				+            }
			
 
				+            .mapboxgl-popup-content {
			
 
				+                border: solid 1px #464646;
			
 
				+                background-color: #464646;
			
 
				+                border-radius: 7px;
			
 
				+                padding: 16px;
			
 
				+                z-index: 3;
			
 
				+                font-size: 20px;
			
 
				+                text-align: center;
			
 
				+                color: #ffffff;
			
 
				+                line-height: 30px;
			
 
				+            }
			
 
				+            .mapboxgl-popup-tip {
			
 
				+                display: none;
			
 
				+            }
			
 
				+            .sm-component-radio-button-wrapper-checked {
			
 
				+                color: #0081e2 !important;
			
 
				+                border-color: #0081e2 !important;
			
 
				+                box-shadow: -1px 0 0 0 #0081e2 !important;
			
 
				+                background: #333333 !important;
			
 
				+            }
			
 
				+            .sm-component-radio-button-wrapper:hover {
			
 
				+                color: #0081e2;
			
 
				+            }
			
 
				+            @media screen and (max-width: 768px) {
			
 
				+                .sm-component-count-to__numItem {
			
 
				+                    font-size: 32px !important;
			
 
				+                }
			
 
				+                .sm-component-indicator__title {
			
 
				+                    font-size: 20px !important;
			
 
				+                }
			
 
				+                .sm-component-indicator__num {
			
 
				+                    font-size: 32px !important;
			
 
				+                }
			
 
				+                .sm-component-text {
			
 
				+                    font-size: 16px !important;
			
 
				+                }
			
 
				+                #group {
			
 
				+                    margin-top: 28px;
			
 
				+                }
			
 
				+                .sm-component-radio-group-large .sm-component-radio-button-wrapper {
			
 
				+                    height: 32px;
			
 
				+                    line-height: 30px;
			
 
				+                    font-size: 14px;
			
 
				+                    padding: 0 10px;
			
 
				+                }
			
 
				+            }
			
 
				+        </style>
			
 
				+        <script>
			
 
				+            var styles = {
			
 
				+                'china-riskLevel': {
			
 
				+                    tooltip: function (properties) {
			
 
				+                        if (properties.daysNoConfirmedAdd >= 3) {
			
 
				+                            return resources.text_ncp_riskLevel_tooltip
			
 
				+                                .replace('{name}', properties['省份'])
			
 
				+                                .replace('{daysNoConfirmedAdd}', properties.daysNoConfirmedAdd);
			
 
				+                        }
			
 
				+                        return resources.text_ncp_riskLevel_tooltip1
			
 
				+                            .replace('{name}', properties['省份'])
			
 
				+                            .replace('{daysMaxConfirmedAdd}', properties.daysMaxConfirmedAdd)
			
 
				+                            .replace('{confirmedAdd}', properties.confirmedAdd);
			
 
				+                    },
			
 
				+                    title: resources.text_ncp_riskLevel_title,
			
 
				+                    'fill-color': [
			
 
				+                        'case',
			
 
				+                        ['>=', ['get', 'daysMaxConfirmedAdd'], 10],
			
 
				+                        '#FC9A6B',
			
 
				+                        ['>=', ['get', 'daysMaxConfirmedAdd'], 1],
			
 
				+                        '#FDCD8C',
			
 
				+                        ['>=', ['get', 'daysNoConfirmedAdd'], 14],
			
 
				+                        '#53AB5E',
			
 
				+                        ['>=', ['get', 'daysNoConfirmedAdd'], 7],
			
 
				+                        '#ADDD8E',
			
 
				+                        ['>=', ['get', 'daysNoConfirmedAdd'], 3],
			
 
				+                        '#D6FDB9',
			
 
				+                        '#F4F4F4'
			
 
				+                    ],
			
 
				+                    'text-field': [
			
 
				+                        'concat',
			
 
				+                        ['get', '省份'],
			
 
				+                        ['case', ['>', ['get', 'daysNoConfirmedAdd'], 0], ['get', 'daysNoConfirmedAdd'], '']
			
 
				+                    ],
			
 
				+                    'line-color': '#5F5F5F'
			
 
				+                },
			
 
				+                'china-incrementConfirmed': {
			
 
				+                    tooltip: function (properties) {
			
 
				+                        if (isNaN(properties['confirmedAdd'])) {
			
 
				+                            return resources.text_ncp_nodata_tooltip.replace('{name}', properties['省份']);
			
 
				+                        }
			
 
				+                        return resources.text_ncp_incrementConfirmed_tooltip
			
 
				+                            .replace('{name}', properties['省份'])
			
 
				+                            .replace('{confirmedAdd}', properties['confirmedAdd']);
			
 
				+                    },
			
 
				+                    title: resources.text_ncp_incrementConfirmed_title,
			
 
				+                    'fill-color': [
			
 
				+                        'case',
			
 
				+                        ['has', 'confirmedAdd'],
			
 
				+                        [
			
 
				+                            'case',
			
 
				+                            ['>=', ['get', 'confirmedAdd'], 200],
			
 
				+                            '#d7301f',
			
 
				+                            ['>=', ['get', 'confirmedAdd'], 100],
			
 
				+                            '#ef6548',
			
 
				+                            ['>=', ['get', 'confirmedAdd'], 50],
			
 
				+                            '#fc8d59',
			
 
				+                            ['>=', ['get', 'confirmedAdd'], 10],
			
 
				+                            '#fdbb84',
			
 
				+                            ['>=', ['get', 'confirmedAdd'], 1],
			
 
				+                            '#fdd49e',
			
 
				+                            '#F4F4F4'
			
 
				+                        ],
			
 
				+                        '#D9D9D9'
			
 
				+                    ],
			
 
				+                    'text-field': [
			
 
				+                        'concat',
			
 
				+                        ['get', '省份'],
			
 
				+                        ['case', ['>', ['get', 'confirmedAdd'], 0], ['concat', '+', ['get', 'confirmedAdd']], '']
			
 
				+                    ],
			
 
				+                    'line-color': '#83838D'
			
 
				+                },
			
 
				+                'china-nowConfirmed': {
			
 
				+                    tooltip: function (properties) {
			
 
				+                        if (isNaN(properties['nowConfirmed'])) {
			
 
				+                            return resources.text_ncp_nodata_tooltip.replace('{name}', properties['省份']);
			
 
				+                        }
			
 
				+                        return resources.text_ncp_nowConfirmed_tooltip
			
 
				+                            .replace('{name}', properties['省份'])
			
 
				+                            .replace('{nowConfirmed}', properties['nowConfirmed']);
			
 
				+                    },
			
 
				+                    title: resources.text_ncp_nowConfirmed_title,
			
 
				+                    'fill-color': [
			
 
				+                        'case',
			
 
				+                        ['has', 'nowConfirmed'],
			
 
				+                        [
			
 
				+                            'case',
			
 
				+                            ['>=', ['get', 'nowConfirmed'], 200],
			
 
				+                            '#d7301f',
			
 
				+                            ['>=', ['get', 'nowConfirmed'], 100],
			
 
				+                            '#ef6548',
			
 
				+                            ['>=', ['get', 'nowConfirmed'], 50],
			
 
				+                            '#fc8d59',
			
 
				+                            ['>=', ['get', 'nowConfirmed'], 10],
			
 
				+                            '#fdbb84',
			
 
				+                            ['>=', ['get', 'nowConfirmed'], 1],
			
 
				+                            '#fdd49e',
			
 
				+                            '#F4F4F4'
			
 
				+                        ],
			
 
				+                        '#D9D9D9'
			
 
				+                    ],
			
 
				+                    'text-field': ['get', '省份'],
			
 
				+                    'line-color': '#83838D'
			
 
				+                },
			
 
				+                'china-incidence': {
			
 
				+                    tooltip: function (properties) {
			
 
				+                        return resources.text_ncp_incidence_tooltip
			
 
				+                            .replace('{name}', properties['省份'])
			
 
				+                            .replace('{incidence}', properties['incidence'])
			
 
				+                            .replace('{confirmed}', properties['confirmed'])
			
 
				+                            .replace('{population}', parseInt(properties['population'] / 10000));
			
 
				+                    },
			
 
				+                    title: resources.text_ncp_incidence_title,
			
 
				+                    'fill-color': [
			
 
				+                        'case',
			
 
				+                        ['>=', ['get', 'incidence'], 5],
			
 
				+                        '#6a51a3',
			
 
				+                        ['>=', ['get', 'incidence'], 1.5],
			
 
				+                        '#7f7dba',
			
 
				+                        ['>=', ['get', 'incidence'], 1],
			
 
				+                        '#9e9ac8',
			
 
				+                        ['>=', ['get', 'incidence'], 0.5],
			
 
				+                        '#dadaeb',
			
 
				+                        ['>=', ['get', 'incidence'], 0],
			
 
				+                        '#efedf5',
			
 
				+                        '#F4F4F4'
			
 
				+                    ],
			
 
				+                    'text-field': ['get', '省份'],
			
 
				+                    'line-color': '#83838D'
			
 
				+                }
			
 
				+            };
			
 
				+            new Vue({
			
 
				+                el: '#main',
			
 
				+                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='https://www.supermapol.com/' target='_blank'>SuperMap Online</a></span> ";
			
 
				+
			
 
				+                    return {
			
 
				+                        type: 'china-riskLevel',
			
 
				+                        time: '04/01 24:00',
			
 
				+                        nums: {
			
 
				+                            'china-incrementConfirmed': 0,
			
 
				+                            'china-nowConfirmed': 0,
			
 
				+                            'china-incidence': 0,
			
 
				+                            'china-confirmed': 0
			
 
				+                        },
			
 
				+                        mapOptions: {
			
 
				+                            container: 'map', // container id
			
 
				+                            style: {
			
 
				+                                version: 8,
			
 
				+                                glyphs: 'https://ncov.supermapol.com/statichtml/font/{fontstack}/{range}.pbf',
			
 
				+                                sources: {
			
 
				+                                    'raster-tiles': {
			
 
				+                                        attribution: attribution,
			
 
				+                                        type: 'raster',
			
 
				+                                        tiles: [
			
 
				+                                            'https://maptiles.supermapol.com/iserver/services/map-China/rest/maps/China_Dark_Nolable'
			
 
				+                                        ],
			
 
				+                                        transparent: false,
			
 
				+                                        rasterSource: 'iserver',
			
 
				+                                        tileSize: 256
			
 
				+                                    }
			
 
				+                                },
			
 
				+                                layers: [
			
 
				+                                    {
			
 
				+                                        id: 'simple-tiles',
			
 
				+                                        type: 'raster',
			
 
				+                                        source: 'raster-tiles',
			
 
				+                                        minzoom: 0,
			
 
				+                                        maxzoom: 22
			
 
				+                                    }
			
 
				+                                ]
			
 
				+                            },
			
 
				+                            bounds: [
			
 
				+                                [72.10274031198492, 2.481417743284723],
			
 
				+                                [137.0563536922412, 54.36513803178008]
			
 
				+                            ],
			
 
				+                            center: [105.9002304535943, 31.9592716277851],
			
 
				+                            minZoom: 1.5,
			
 
				+                            maxZoom: 6,
			
 
				+                            zoom: 3.55
			
 
				+                        }
			
 
				+                    };
			
 
				+                },
			
 
				+                computed: {
			
 
				+                    num() {
			
 
				+                        return this.nums[this.type] || '';
			
 
				+                    },
			
 
				+                    title() {
			
 
				+                        return styles[this.type].title;
			
 
				+                    }
			
 
				+                },
			
 
				+                watch: {
			
 
				+                    type(val) {
			
 
				+                        if (this.popup) {
			
 
				+                            this.popup.remove();
			
 
				+                        }
			
 
				+                        this.map.setPaintProperty('china', 'fill-color', styles[val]['fill-color']);
			
 
				+                        this.map.setPaintProperty('china-strokeLine', 'line-color', styles[val]['line-color']);
			
 
				+                        this.map.setLayoutProperty('china-label', 'text-field', styles[val]['text-field']);
			
 
				+                    }
			
 
				+                },
			
 
				+                created() {
			
 
				+                    SuperMap.Components.setTheme({
			
 
				+                        textColor: 'rgba(255, 255, 255, 0.85)',
			
 
				+                        background: 'rgba(0, 0, 0, 0)',
			
 
				+                        colorGroup: ['rgb(225, 2, 0)']
			
 
				+                    });
			
 
				+                    $.get(
			
 
				+                        'https://ncpviz.oss-cn-beijing.aliyuncs.com/ncpviz/ui.json?time=' + new Date().getTime(),
			
 
				+                        function (response) {
			
 
				+                            document.title = getTitle(response);
			
 
				+                        }
			
 
				+                    );
			
 
				+                },
			
 
				+                methods: {
			
 
				+                    mapLoaded(e) {
			
 
				+                        this.map = e.map;
			
 
				+                        $.get(
			
 
				+                            'https://ncpviz.oss-cn-beijing.aliyuncs.com/ncpviz/ncp.json?time=' + new Date().getTime(),
			
 
				+                            function (response) {
			
 
				+                                // this.time = resources.text_ncp_time.replace('{time}', response.time);
			
 
				+                                var latestProvinceData = this.getLatestProvinceData(response);
			
 
				+                                this.map.addSource('china', {
			
 
				+                                    type: 'geojson',
			
 
				+                                    data: ProvinceData
			
 
				+                                });
			
 
				+                                this.map.addLayer({
			
 
				+                                    id: 'china',
			
 
				+                                    type: 'fill',
			
 
				+                                    source: 'china',
			
 
				+                                    layout: {},
			
 
				+                                    paint: {
			
 
				+                                        'fill-color': styles[this.type]['fill-color']
			
 
				+                                    }
			
 
				+                                });
			
 
				+                                this.map.addLayer({
			
 
				+                                    id: 'china-strokeLine',
			
 
				+                                    type: 'line',
			
 
				+                                    source: 'china',
			
 
				+                                    layout: {},
			
 
				+                                    paint: {
			
 
				+                                        'line-width': 0.5,
			
 
				+                                        'line-color': styles[this.type]['line-color'],
			
 
				+                                        'line-opacity': 1
			
 
				+                                    }
			
 
				+                                });
			
 
				+                                this.map.addSource('china-label', {
			
 
				+                                    type: 'geojson',
			
 
				+                                    data: ProvincesCenterData
			
 
				+                                });
			
 
				+                                this.map.addLayer({
			
 
				+                                    id: 'china-label',
			
 
				+                                    type: 'symbol',
			
 
				+                                    source: 'china-label',
			
 
				+                                    layout: {
			
 
				+                                        'text-field': styles[this.type]['text-field'],
			
 
				+                                        'text-font': ['Microsoft YaHei Regular'],
			
 
				+                                        'text-size': 14,
			
 
				+                                        'text-allow-overlap': {
			
 
				+                                            stops: [
			
 
				+                                                [2.5, false],
			
 
				+                                                [3, true]
			
 
				+                                            ]
			
 
				+                                        },
			
 
				+                                        'text-letter-spacing': 0
			
 
				+                                    },
			
 
				+                                    paint: {
			
 
				+                                        'text-color': 'white',
			
 
				+                                        'text-opacity': 1,
			
 
				+                                        'text-halo-color': '#696868',
			
 
				+                                        'text-halo-width': 1.5
			
 
				+                                    }
			
 
				+                                });
			
 
				+                                this.map.addSource('line', {
			
 
				+                                    type: 'geojson',
			
 
				+                                    data: {
			
 
				+                                        type: 'FeatureCollection',
			
 
				+                                        features: [
			
 
				+                                            {
			
 
				+                                                type: 'Feature',
			
 
				+                                                geometry: {
			
 
				+                                                    type: 'LineString',
			
 
				+                                                    coordinates: [
			
 
				+                                                        [127.53, 50.22],
			
 
				+                                                        [97.5, 24.06]
			
 
				+                                                    ]
			
 
				+                                                }
			
 
				+                                            }
			
 
				+                                        ]
			
 
				+                                    }
			
 
				+                                });
			
 
				+                                this.map.addLayer({
			
 
				+                                    id: 'line',
			
 
				+                                    type: 'line',
			
 
				+                                    source: 'line',
			
 
				+                                    layout: {
			
 
				+                                        'line-cap': 'round'
			
 
				+                                    },
			
 
				+                                    paint: {
			
 
				+                                        'line-color': '#919191',
			
 
				+                                        'line-opacity': 1,
			
 
				+                                        'line-width': 2,
			
 
				+                                        'line-dasharray': [2, 2]
			
 
				+                                    }
			
 
				+                                });
			
 
				+                            }.bind(this)
			
 
				+                        );
			
 
				+                    },
			
 
				+                    mapClicked(e) {
			
 
				+                        var bbox = [
			
 
				+                            [e.mapboxEvent.point.x - 5, e.mapboxEvent.point.y - 5],
			
 
				+                            [e.mapboxEvent.point.x + 5, e.mapboxEvent.point.y + 5]
			
 
				+                        ];
			
 
				+                        var features = this.map.queryRenderedFeatures(bbox);
			
 
				+                        if (features[0] && features[0].properties['省份']) {
			
 
				+                            this.popup = new mapboxgl.Popup({ closeButton: false, maxWidth: 'none' })
			
 
				+                                .setLngLat(e.mapboxEvent.lngLat)
			
 
				+                                .setHTML(styles[this.type].tooltip(features[0].properties))
			
 
				+                                .addTo(this.map);
			
 
				+                        }
			
 
				+                    },
			
 
				+                    getLatestProvinceData(response) {
			
 
				+                        var unit = 100000; //单位为10万
			
 
				+                        var dataByName = {};
			
 
				+                        ProvincesCenterData.features.forEach((provinceData) => {
			
 
				+                            dataByName[provinceData.properties['省份']] = provinceData;
			
 
				+                        });
			
 
				+                        var dataExcludeNational = response.data.slice(1);
			
 
				+                        var someDataOutOfDate = false;
			
 
				+                        var latestProvinceData = [];
			
 
				+                        var provinceLabelData = [];
			
 
				+                        var provinceName = [];
			
 
				+                        var daysNoConfirmedAdd = [];
			
 
				+                        dataExcludeNational.forEach((data) => {
			
 
				+                            if (data.provinces[1].provinceData && data.provinces[1].provinceData.properties) {
			
 
				+                                var name = data.provinces[1].provinceData.provinceName;
			
 
				+                                provinceName.push(name);
			
 
				+                                daysNoConfirmedAdd.push(data.provinces[1].provinceData.properties.daysNoConfirmedAdd);
			
 
				+                                // 计算连续三日最高的新增确诊数
			
 
				+                                if (data.provinces[1].provinceData.properties.confirmedAdd != null) {
			
 
				+                                    var latest3DaysConfiredInrement = data.provinces
			
 
				+                                        .slice(1, 4)
			
 
				+                                        .map((e) => e.provinceData.properties.confirmedAdd);
			
 
				+                                    data.provinces[1].provinceData.properties.daysMaxConfirmedAdd = Math.max(
			
 
				+                                        latest3DaysConfiredInrement[0],
			
 
				+                                        latest3DaysConfiredInrement[1],
			
 
				+                                        latest3DaysConfiredInrement[2]
			
 
				+                                    );
			
 
				+                                } else {
			
 
				+                                    delete data.provinces[1].provinceData.properties.daysNoConfirmedAdd;
			
 
				+                                }
			
 
				+
			
 
				+                                var confirmed = data.provinces[1].provinceData.properties.confirmed;
			
 
				+                                var confirmedAbsent = false;
			
 
				+                                if (confirmed == null) {
			
 
				+                                    confirmed = data.provinces[1].provinceData.properties.confirmed;
			
 
				+                                    confirmedAbsent = true;
			
 
				+                                }
			
 
				+                                var population = dataByName[name].properties.population;
			
 
				+                                var incidence = (confirmed / population) * unit;
			
 
				+                                incidence = Number(incidence.toFixed(2));
			
 
				+                                if (!confirmedAbsent) {
			
 
				+                                    data.provinces[1].provinceData.properties.incidence = incidence;
			
 
				+                                }
			
 
				+                                data.provinces[1].provinceData.properties.population = population;
			
 
				+                                // provinceIncidence.push(incidence);
			
 
				+                                var toPush = Object.assign(data.provinces[1].provinceData);
			
 
				+                                // latestProvinceData.push(toPush);
			
 
				+                                var province = ProvinceData.features.find(function (item) {
			
 
				+                                    return item.properties.Name === name || item.properties.Name.indexOf(name) === 0;
			
 
				+                                });
			
 
				+                                var provinceLabel = ProvincesCenterData.features.find(function (item) {
			
 
				+                                    return (
			
 
				+                                        item.properties['省份'] === name || item.properties['省份'].indexOf(name) === 0
			
 
				+                                    );
			
 
				+                                });
			
 
				+                                if (provinceLabel && province) {
			
 
				+                                    provinceLabel.properties = Object.assign(
			
 
				+                                        province.properties,
			
 
				+                                        provinceLabel.properties,
			
 
				+                                        toPush.properties,
			
 
				+                                        { 省份: getProvinceName(name) }
			
 
				+                                    );
			
 
				+                                    province.properties = Object.assign(
			
 
				+                                        province.properties,
			
 
				+                                        provinceLabel.properties,
			
 
				+                                        toPush.properties,
			
 
				+                                        { 省份: getProvinceName(name) }
			
 
				+                                    );
			
 
				+                                }
			
 
				+                            }
			
 
				+                        });
			
 
				+                        var chinaData = response.data[0].provinces[0].provinceData.properties;
			
 
				+                        if (chinaData) {
			
 
				+                            this.nums['china-nowConfirmed'] = chinaData['nowConfirmed'];
			
 
				+                            this.nums['confirmed'] = chinaData['confirmed'];
			
 
				+                            this.nums['china-incrementConfirmed'] = chinaData['confirmedAdd'];
			
 
				+                            this.nums['china-incidence'] = ((chinaData['confirmed'] / 1428003306) * unit).toFixed(2);
			
 
				+                        }
			
 
				+
			
 
				+                        return latestProvinceData;
			
 
				+                    }
			
 
				+                }
			
 
				+            });
			
 
				+            function getProvinceName(name) {
			
 
				+                if (utils.getLanguage() === 'en-US') {
			
 
				+                    return ProvincesNameEn[name];
			
 
				+                }
			
 
				+                return name;
			
 
				+            }
			
 
				+            function getTitle(response) {
			
 
				+                var titles = response[utils.getLanguage()];
			
 
				+                if (titles) {
			
 
				+                    if (titles.firstPriorityTitle) {
			
 
				+                        return titles.firstPriorityTitle;
			
 
				+                    }
			
 
				+                    if (titles.title && titles.title.indexOf('{') < 0) {
			
 
				+                        return titles.title;
			
 
				+                    }
			
 
				+                }
			
 
				+                return resources.text_ncp_china;
			
 
				+            }
			
 
				+        </script>
			
 
				+    </body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_ncp_world.html
+++ b/public/supermap/examples/component/components_ncp_world.html
@@ -0,0 +1,235 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+    <head>
			
 
				+        <meta charset="UTF-8" />
			
 
				+        <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport" />
			
 
				+        <title>国家紧急状态</title>
			
 
				+    </head>
			
 
				+
			
 
				+    <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
			
 
				+        <div id="main">
			
 
				+            <sm-web-map style="background: #081f30;" :map-options="mapOptions" @load="mapLoaded"></sm-web-map>
			
 
				+            <div id="group"></div>
			
 
				+        </div>
			
 
				+        <script type="text/javascript" include="vue" src="../js/include-web.js"></script>
			
 
				+        <script
			
 
				+            include="iclient-mapboxgl-vue,mapbox-gl-enhance"
			
 
				+            src="../../dist/mapboxgl/include-mapboxgl.js"
			
 
				+        ></script>
			
 
				+        <script src="../data/ncp//world_4326.js"></script>
			
 
				+        <script src="../data/ncp/Country_Center.js"></script>
			
 
				+        <style>
			
 
				+            #main {
			
 
				+                margin: 0 auto;
			
 
				+                width: 100%;
			
 
				+                height: 100%;
			
 
				+            }
			
 
				+        </style>
			
 
				+        <script>
			
 
				+            //数据截止时间为2020-03-26
			
 
				+            var nationalEmergencyArea = [
			
 
				+                '意大利',
			
 
				+                '西班牙',
			
 
				+                '美国',
			
 
				+                '法国',
			
 
				+                '韩国',
			
 
				+                '瑞士',
			
 
				+                '南非',
			
 
				+                '格鲁吉亚',
			
 
				+                '多米尼加',
			
 
				+                '葡萄牙',
			
 
				+                '芬兰',
			
 
				+                '澳大利亚',
			
 
				+                '萨尔瓦多',
			
 
				+                '洪都拉斯',
			
 
				+                '卢森堡',
			
 
				+                '津巴布韦',
			
 
				+                '哥伦比亚',
			
 
				+                '约旦',
			
 
				+                '纳米比亚',
			
 
				+                '斯威士兰',
			
 
				+                '苏丹',
			
 
				+                '亚美尼亚',
			
 
				+                '厄瓜多尔',
			
 
				+                '摩尔多瓦',
			
 
				+                '哥斯达黎加',
			
 
				+                '波黑',
			
 
				+                '奥地利',
			
 
				+                '塞浦路斯',
			
 
				+                '黎巴嫩',
			
 
				+                '塞尔维亚',
			
 
				+                '秘鲁',
			
 
				+                '哈萨克斯坦',
			
 
				+                '罗马尼亚',
			
 
				+                '利比亚',
			
 
				+                '保加利亚',
			
 
				+                '爱沙尼亚',
			
 
				+                '波兰',
			
 
				+                '巴拿马',
			
 
				+                '委内瑞拉',
			
 
				+                '斯洛伐克',
			
 
				+                '拉脱维亚',
			
 
				+                '阿根廷',
			
 
				+                '捷克',
			
 
				+                '匈牙利',
			
 
				+                '菲律宾',
			
 
				+                '巴勒斯坦',
			
 
				+                '危地马拉',
			
 
				+                '立陶宛',
			
 
				+                '巴布亚新几内亚',
			
 
				+                '吉尔吉斯斯坦',
			
 
				+                '摩洛哥',
			
 
				+                '萨摩亚',
			
 
				+                '汤加',
			
 
				+                '以色列',
			
 
				+                '新西兰',
			
 
				+                '安哥拉',
			
 
				+                '刚果（金）',
			
 
				+                '泰国',
			
 
				+                '科特迪瓦',
			
 
				+                '乌克兰'
			
 
				+            ];
			
 
				+            var styles = { emergencyColor: '#ef6548', defaultColor: '#002F4E' };
			
 
				+            new Vue({
			
 
				+                el: '#main',
			
 
				+                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='https://www.supermapol.com/' target='_blank'>SuperMap Online</a></span> ";
			
 
				+
			
 
				+                    return {
			
 
				+                        mapOptions: {
			
 
				+                            container: 'map', // container id
			
 
				+                            style: {
			
 
				+                                version: 8,
			
 
				+                                glyphs: 'https://ncov.supermapol.com/statichtml/font/{fontstack}/{range}.pbf',
			
 
				+                                sources: {
			
 
				+                                    'raster-tiles': {
			
 
				+                                        attribution: attribution,
			
 
				+                                        type: 'raster',
			
 
				+                                        tiles: [
			
 
				+                                            'https://maptiles.supermapol.com/iserver/services/map-China-2/rest/maps/China_DarkBlue_Nolable'
			
 
				+                                        ],
			
 
				+                                        prjCoordSys: { epsgCode: 4326 },
			
 
				+                                        rasterSource: 'iserver',
			
 
				+                                        tileSize: 256
			
 
				+                                    }
			
 
				+                                },
			
 
				+                                layers: [
			
 
				+                                    {
			
 
				+                                        id: 'simple-tiles',
			
 
				+                                        type: 'raster',
			
 
				+                                        source: 'raster-tiles',
			
 
				+                                        minzoom: 0,
			
 
				+                                        maxzoom: 22
			
 
				+                                    }
			
 
				+                                ]
			
 
				+                            },
			
 
				+                            center: [101.58, 33.11],
			
 
				+                            maxZoom: 5,
			
 
				+                            zoom: 2,
			
 
				+                            crs: 'EPSG:4326'
			
 
				+                        }
			
 
				+                    };
			
 
				+                },
			
 
				+                methods: {
			
 
				+                    mapLoaded(e) {
			
 
				+                        this.map = e.map;
			
 
				+                        this.initWorldData();
			
 
				+                        this.map.addSource('world', {
			
 
				+                            type: 'geojson',
			
 
				+                            data: CountryData
			
 
				+                        });
			
 
				+                        this.map.addLayer({
			
 
				+                            id: 'world',
			
 
				+                            type: 'fill',
			
 
				+                            source: 'world',
			
 
				+                            layout: {},
			
 
				+                            paint: {
			
 
				+                                'fill-color': [
			
 
				+                                    'case',
			
 
				+                                    ['has', 'nationalEmergency'],
			
 
				+                                    [
			
 
				+                                        'case',
			
 
				+                                        ['==', ['get', 'nationalEmergency'], true],
			
 
				+                                        styles.emergencyColor,
			
 
				+                                        styles.defaultColor
			
 
				+                                    ],
			
 
				+                                    styles.defaultColor
			
 
				+                                ]
			
 
				+                            }
			
 
				+                        });
			
 
				+                        this.map.addLayer({
			
 
				+                            id: 'world-strokeLine',
			
 
				+                            type: 'line',
			
 
				+                            source: 'world',
			
 
				+                            layout: {},
			
 
				+                            paint: {
			
 
				+                                'line-width': 0.5,
			
 
				+                                'line-color': '#83838D',
			
 
				+                                'line-opacity': 1
			
 
				+                            }
			
 
				+                        });
			
 
				+
			
 
				+                        this.map.addSource('world-label', {
			
 
				+                            type: 'geojson',
			
 
				+                            data: CountryCenterData
			
 
				+                        });
			
 
				+                        this.map.addLayer({
			
 
				+                            id: 'world-label',
			
 
				+                            type: 'symbol',
			
 
				+                            source: 'world-label',
			
 
				+                            filter: ['has', 'nationalEmergency'],
			
 
				+                            layout: {
			
 
				+                                'text-field': ['get', 'Country'],
			
 
				+                                'text-font': ['Microsoft YaHei Regular'],
			
 
				+                                'text-size': 12,
			
 
				+                                'text-allow-overlap': false,
			
 
				+                                'text-letter-spacing': 0
			
 
				+                            },
			
 
				+                            paint: {
			
 
				+                                'text-color': 'white',
			
 
				+                                'text-opacity': 1,
			
 
				+                                'text-halo-color': '#696868',
			
 
				+                                'text-halo-width': 1.5
			
 
				+                            }
			
 
				+                        });
			
 
				+                    },
			
 
				+                    initWorldData() {
			
 
				+                        nationalEmergencyArea.forEach(element => {
			
 
				+                            var country = CountryData.features.find(function(item) {
			
 
				+                                if (
			
 
				+                                    findCNName(item.properties.NAME_0) === element ||
			
 
				+                                    findCNName(item.properties.GID_0) === element
			
 
				+                                ) {
			
 
				+                                    item.zhName = element;
			
 
				+                                    return true;
			
 
				+                                }
			
 
				+                                return false;
			
 
				+                            });
			
 
				+                            if (country) {
			
 
				+                                country.properties.nationalEmergency = true;
			
 
				+                            }
			
 
				+                            var countryCenter = CountryCenterData.features.find(function(item) {
			
 
				+                                return item.properties.Country === element;
			
 
				+                            });
			
 
				+                            if (countryCenter) {
			
 
				+                                countryCenter.properties.nationalEmergency = true;
			
 
				+                            }
			
 
				+                        });
			
 
				+                    }
			
 
				+                }
			
 
				+            });
			
 
				+            function findCNName(enName) {
			
 
				+                for (const key in CountriesNameEn) {
			
 
				+                    if (CountriesNameEn[key] === enName) return key;
			
 
				+                }
			
 
				+                return null;
			
 
				+            }
			
 
				+        </script>
			
 
				+    </body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_ncp_world_vue.html
+++ b/public/supermap/examples/component/components_ncp_world_vue.html
@@ -0,0 +1,633 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+    <head>
			
 
				+        <meta charset="UTF-8" />
			
 
				+        <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport" />
			
 
				+        <title></title>
			
 
				+    </head>
			
 
				+
			
 
				+    <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
			
 
				+        <div id="main">
			
 
				+            <sm-web-map
			
 
				+                style="background: #081f30;"
			
 
				+                :map-options="mapOptions"
			
 
				+                @load="mapLoaded"
			
 
				+                @click="mapClicked"
			
 
				+            ></sm-web-map>
			
 
				+            <div id="group">
			
 
				+                <sm-radio-group class="radio-group" v-model="type" default-value="world-confirmedIncrement" size="large">
			
 
				+                    <sm-radio-button
			
 
				+                        value="world-confirmedIncrement"
			
 
				+                        data-i18n="resources.text_ncp_incrementConfirmed"
			
 
				+                    ></sm-radio-button>
			
 
				+                    <sm-radio-button value="world-confirmed" data-i18n="resources.text_ncp_confirmed"></sm-radio-button>
			
 
				+                    <sm-radio-button value="world-incidence" data-i18n="resources.text_ncp_incidence"></sm-radio-button>
			
 
				+                </sm-radio-group>
			
 
				+                <br />
			
 
				+                <sm-indicator :title="title" unit="" mode="horizontal" :num="num" font-size="44px" font-weight="400">
			
 
				+                </sm-indicator>
			
 
				+                <sm-text
			
 
				+                    :title="time"
			
 
				+                    text-color="rgba(255, 255, 255, 0.6)"
			
 
				+                    :font-style='{ fontSize: "18px", fontWeight: "400" ,display: "block"}'
			
 
				+                >
			
 
				+                </sm-text>
			
 
				+            </div>
			
 
				+            <sm-image
			
 
				+                repeat="noRepeat"
			
 
				+                src="../img/online-qr.png"
			
 
				+                style="position: absolute; bottom: 32px;right: 16px;z-index: 1000;height: 88px;width: 88px;"
			
 
				+            ></sm-image>
			
 
				+        </div>
			
 
				+        <script type="text/javascript" include="vue" src="../js/include-web.js"></script>
			
 
				+        <script
			
 
				+            include="iclient-mapboxgl-vue,mapbox-gl-enhance"
			
 
				+            src="../../dist/mapboxgl/include-mapboxgl.js"
			
 
				+        ></script>
			
 
				+        <script src="../data/ncp/Country_Region.js"></script>
			
 
				+        <script src="../data/ncp/Country_Center.js"></script>
			
 
				+        <script src="../data/ncp/CountriesPopulation.js"></script>
			
 
				+        <style>
			
 
				+            #main {
			
 
				+                margin: 0 auto;
			
 
				+                width: 100%;
			
 
				+                height: 100%;
			
 
				+            }
			
 
				+            #group {
			
 
				+                position: absolute;
			
 
				+                left: 10px;
			
 
				+                top: 10px;
			
 
				+                z-index: 1000;
			
 
				+            }
			
 
				+            .sm-component-radio-button-wrapper {
			
 
				+                color: #fff;
			
 
				+                background: #333333;
			
 
				+            }
			
 
				+            .sm-component-radio-button-wrapper-checked {
			
 
				+                color: #0081e2 !important;
			
 
				+                border-color: #0081e2 !important;
			
 
				+                box-shadow: -1px 0 0 0 #0081e2 !important;
			
 
				+                background: #333333 !important;
			
 
				+            }
			
 
				+            .mapboxgl-popup-content {
			
 
				+                border: solid 1px #464646;
			
 
				+                background-color: #464646;
			
 
				+                border-radius: 7px;
			
 
				+                padding: 16px;
			
 
				+                z-index: 3;
			
 
				+                font-size: 20px;
			
 
				+                text-align: center;
			
 
				+                color: #ffffff;
			
 
				+                line-height: 30px;
			
 
				+            }
			
 
				+            .mapboxgl-popup-tip {
			
 
				+                display: none;
			
 
				+            }
			
 
				+            @media screen and (max-width: 768px) {
			
 
				+                .sm-component-count-to__numItem {
			
 
				+                    font-size: 32px !important;
			
 
				+                }
			
 
				+                .sm-component-indicator__title {
			
 
				+                    font-size: 20px !important;
			
 
				+                }
			
 
				+                .sm-component-indicator__num {
			
 
				+                    font-size: 32px !important;
			
 
				+                }
			
 
				+                .sm-component-text {
			
 
				+                    font-size: 16px !important;
			
 
				+                }
			
 
				+                .sm-component-radio-group-large .sm-component-radio-button-wrapper {
			
 
				+                    height: 32px;
			
 
				+                    line-height: 30px;
			
 
				+                    font-size: 14px;
			
 
				+                    padding: 0 10px;
			
 
				+                }
			
 
				+            }
			
 
				+        </style>
			
 
				+        <script>
			
 
				+            var styles = {
			
 
				+                'world-confirmedIncrement': {
			
 
				+                    tooltip: function(properties) {
			
 
				+                        return resources.text_ncp_incrementConfirmed_tooltip
			
 
				+                            .replace('{name}', properties['areaName'])
			
 
				+                            .replace('{confirmedAdd}', properties['confirmedIncrement']);
			
 
				+                    },
			
 
				+                    title: resources.text_ncpworld_incrementConfirmed_title,
			
 
				+                    'fill-color': '#002F4E',
			
 
				+                    'text-field': ['case', ['>', ['get', 'confirmedIncrement'], 0], ['get', 'confirmedIncrement'], ''],
			
 
				+                    'line-color': '#0C4B68',
			
 
				+                    'circle-visibility': 'visible',
			
 
				+                    'label-visibility': 'none'
			
 
				+                },
			
 
				+                'world-confirmed': {
			
 
				+                    tooltip: function(properties) {
			
 
				+                        return resources.text_ncp_confirmed_tooltip
			
 
				+                            .replace('{name}', properties['areaName'])
			
 
				+                            .replace('{confirmed}', properties['confirmed']);
			
 
				+                    },
			
 
				+                    title: resources.text_ncpworld_confirmed_title,
			
 
				+                    'fill-color': [
			
 
				+                        'case',
			
 
				+                        ['has', 'confirmed'],
			
 
				+                        [
			
 
				+                            'case',
			
 
				+                            ['>=', ['get', 'confirmed'], 1000000],
			
 
				+                            '#580000',
			
 
				+                            ['>=', ['get', 'confirmed'], 100000],
			
 
				+                            '#900000',
			
 
				+                            ['>=', ['get', 'confirmed'], 10000],
			
 
				+                            '#ef6548',
			
 
				+                            ['>=', ['get', 'confirmed'], 1000],
			
 
				+                            '#fc8d59',
			
 
				+                            ['>=', ['get', 'confirmed'], 100],
			
 
				+                            '#fdbb84',
			
 
				+                            ['>=', ['get', 'confirmed'], 10],
			
 
				+                            '#fdd49e',
			
 
				+                            ['>=', ['get', 'confirmed'], 1],
			
 
				+                            '#fee8c8',
			
 
				+                            '#F4F4F4'
			
 
				+                        ],
			
 
				+                        '#F4F4F4'
			
 
				+                    ],
			
 
				+                    'text-field': [
			
 
				+                        'concat',
			
 
				+                        ['get', 'areaName'],
			
 
				+                        ' ',
			
 
				+                        ['case', ['>', ['get', 'confirmed'], 0], ['get', 'confirmed'], '']
			
 
				+                    ],
			
 
				+                    'line-color': '#83838D',
			
 
				+                    'circle-visibility': 'none',
			
 
				+                    'label-visibility': 'visible'
			
 
				+                },
			
 
				+                'world-incidence': {
			
 
				+                    tooltip: function(properties) {
			
 
				+                        return resources.text_ncp_incidence_tooltip
			
 
				+                            .replace('{name}', properties['areaName'])
			
 
				+                            .replace('{incidence}', properties['worldIncidence'])
			
 
				+                            .replace('{confirmed}', properties['confirmed'])
			
 
				+                            .replace('{population}', parseInt(properties['population'] / 10000));
			
 
				+                    },
			
 
				+                    title: resources.text_ncpworld_incidence_title,
			
 
				+                    'fill-color': [
			
 
				+                        'case',
			
 
				+                        ['has', 'worldIncidence'],
			
 
				+                        [
			
 
				+                            'case',
			
 
				+                            ['>=', ['get', 'worldIncidence'], 20],
			
 
				+                            '#47366D',
			
 
				+                            ['>=', ['get', 'worldIncidence'], 10],
			
 
				+                            '#6a51a3',
			
 
				+                            ['>=', ['get', 'worldIncidence'], 5],
			
 
				+                            '#7f7dba',
			
 
				+                            ['>=', ['get', 'worldIncidence'], 1],
			
 
				+                            '#9e9ac8',
			
 
				+                            ['>=', ['get', 'worldIncidence'], 0.1],
			
 
				+                            '#dadaeb',
			
 
				+                            '#efedf5'
			
 
				+                        ],
			
 
				+                        '#F4F4F4'
			
 
				+                    ],
			
 
				+                    'text-field': ['get', 'areaName'],
			
 
				+                    'line-color': '#83838D',
			
 
				+                    'circle-visibility': 'none',
			
 
				+                    'label-visibility': 'visible'
			
 
				+                }
			
 
				+            };
			
 
				+            new Vue({
			
 
				+                el: '#main',
			
 
				+                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='https://www.supermapol.com/' target='_blank'>SuperMap Online</a></span> ";
			
 
				+
			
 
				+                    return {
			
 
				+                        type: 'world-confirmedIncrement',
			
 
				+                        nums: { 'world-confirmedIncrement': 0, 'world-confirmed': 0, 'world-incidence': 0 },
			
 
				+                        chinaConfirmed: 0,
			
 
				+                        chinaConfirmedIncrement: 0,
			
 
				+                        time: '',
			
 
				+                        // mapOptions是sm-map组件的props
			
 
				+                        mapOptions: {
			
 
				+                            container: 'map', // container id
			
 
				+                            style: {
			
 
				+                                version: 8,
			
 
				+                                glyphs: 'https://ncov.supermapol.com/statichtml/font/{fontstack}/{range}.pbf',
			
 
				+                                sources: {
			
 
				+                                    'raster-tiles': {
			
 
				+                                        attribution: attribution,
			
 
				+                                        type: 'raster',
			
 
				+                                        tiles: [
			
 
				+                                            'https://maptiles.supermapol.com/iserver/services/map-China-2/rest/maps/China_DarkBlue_Nolable'
			
 
				+                                        ],
			
 
				+                                        prjCoordSys: { epsgCode: 4326 },
			
 
				+                                        rasterSource: 'iserver',
			
 
				+                                        tileSize: 256
			
 
				+                                    }
			
 
				+                                },
			
 
				+                                layers: [
			
 
				+                                    {
			
 
				+                                        id: 'simple-tiles',
			
 
				+                                        type: 'raster',
			
 
				+                                        source: 'raster-tiles',
			
 
				+                                        minzoom: 0,
			
 
				+                                        maxzoom: 22
			
 
				+                                    }
			
 
				+                                ]
			
 
				+                            },
			
 
				+                            center: [101.58, 33.11],
			
 
				+                            maxZoom: 5,
			
 
				+                            zoom: 2,
			
 
				+                            crs: 'EPSG:4326'
			
 
				+                        }
			
 
				+                    };
			
 
				+                },
			
 
				+                created() {
			
 
				+                    SuperMap.Components.setTheme({
			
 
				+                        textColor: 'rgba(255, 255, 255, 0.85)',
			
 
				+                        background: 'rgba(0, 0, 0,0)',
			
 
				+                        colorGroup: ['rgb(225, 2, 0)']
			
 
				+                    });
			
 
				+                    $.get('https://ncpviz.oss-cn-beijing.aliyuncs.com/ncpviz/ui.json?time=' + new Date().getTime(), function(response) {
			
 
				+                        document.title = getTitle(response);
			
 
				+                    });
			
 
				+                },
			
 
				+                computed: {
			
 
				+                    num() {
			
 
				+                        if (this.type === 'world-incidence') {
			
 
				+                            return this.nums['world-incidence'];
			
 
				+                        }
			
 
				+                        if (this.type === 'world-confirmedIncrement') {
			
 
				+                            return this.nums['world-confirmedIncrement'] - this.chinaConfirmedIncrement;
			
 
				+                        }
			
 
				+                        if (this.type === 'world-confirmed') {
			
 
				+                            return this.nums['world-confirmed'] - this.chinaConfirmed;
			
 
				+                        }
			
 
				+                        return '';
			
 
				+                    },
			
 
				+                    title() {
			
 
				+                        return styles[this.type].title;
			
 
				+                    }
			
 
				+                },
			
 
				+                watch: {
			
 
				+                    type(val) {
			
 
				+                        if (this.popup) {
			
 
				+                            this.popup.remove();
			
 
				+                        }
			
 
				+                        this.map.setPaintProperty('china', 'fill-color', styles[val]['fill-color']);
			
 
				+                        this.map.setPaintProperty('world-strokeLine', 'line-color', styles[val]['line-color']);
			
 
				+                        this.map.setLayoutProperty('world-label', 'text-field', styles[val]['text-field']);
			
 
				+                        this.map.setLayoutProperty('world-clusters', 'visibility', styles[val]['circle-visibility']);
			
 
				+                        this.map.setLayoutProperty(
			
 
				+                            'world-label-clusters',
			
 
				+                            'visibility',
			
 
				+                            styles[val]['circle-visibility']
			
 
				+                        );
			
 
				+                        this.map.setLayoutProperty(
			
 
				+                            'world-label-area-clusters',
			
 
				+                            'visibility',
			
 
				+                            styles[val]['circle-visibility']
			
 
				+                        );
			
 
				+                        this.map.setLayoutProperty('world-serious', 'visibility', styles[val]['circle-visibility']);
			
 
				+                        this.map.setLayoutProperty(
			
 
				+                            'world-label-area-serious',
			
 
				+                            'visibility',
			
 
				+                            styles[val]['circle-visibility']
			
 
				+                        );
			
 
				+                        this.map.setLayoutProperty(
			
 
				+                            'world-label-serious',
			
 
				+                            'visibility',
			
 
				+                            styles[val]['circle-visibility']
			
 
				+                        );
			
 
				+                        this.map.setLayoutProperty('world-label', 'visibility', styles[val]['label-visibility']);
			
 
				+                    }
			
 
				+                },
			
 
				+                methods: {
			
 
				+                    mapLoaded(e) {
			
 
				+                        this.map = e.map;
			
 
				+                        $.get(
			
 
				+                            'https://ncpviz.oss-cn-beijing.aliyuncs.com/ncpviz/worldNcp.json?time=' +
			
 
				+                                new Date().getTime(),
			
 
				+                            function(response) {
			
 
				+                                this.time = resources.text_ncp_time.replace('{time}', response.time);
			
 
				+                                var latestProvinceData = this.getLatestWorldData(response);
			
 
				+                                this.map.addSource('china', {
			
 
				+                                    type: 'geojson',
			
 
				+                                    data: CountryData
			
 
				+                                });
			
 
				+                                this.map.addLayer({
			
 
				+                                    id: 'china',
			
 
				+                                    type: 'fill',
			
 
				+                                    source: 'china',
			
 
				+                                    layout: {},
			
 
				+                                    paint: {
			
 
				+                                        'fill-color': styles[this.type]['fill-color']
			
 
				+                                    }
			
 
				+                                });
			
 
				+                                this.map.addLayer({
			
 
				+                                    id: 'world-strokeLine',
			
 
				+                                    type: 'line',
			
 
				+                                    source: 'china',
			
 
				+                                    layout: {},
			
 
				+                                    paint: {
			
 
				+                                        'line-width': 0.5,
			
 
				+                                        'line-color': styles[this.type]['line-color'],
			
 
				+                                        'line-opacity': 1
			
 
				+                                    }
			
 
				+                                });
			
 
				+                                this.map.addSource('world-label-clusters', {
			
 
				+                                    type: 'geojson',
			
 
				+                                    data: CountryCenterData,
			
 
				+                                    cluster: true,
			
 
				+                                    clusterRadius: 10
			
 
				+                                });
			
 
				+                                this.map.addSource('world-label', {
			
 
				+                                    type: 'geojson',
			
 
				+                                    data: CountryCenterData
			
 
				+                                });
			
 
				+                                this.map.addLayer({
			
 
				+                                    id: 'world-clusters',
			
 
				+                                    type: 'circle',
			
 
				+                                    source: 'world-label-clusters',
			
 
				+                                    filter: [
			
 
				+                                        'all',
			
 
				+                                        ['<', ['get', 'confirmedIncrement'], 1000],
			
 
				+                                        ['>', ['get', 'confirmedIncrement'], 0]
			
 
				+                                    ],
			
 
				+                                    layout: {
			
 
				+                                        visibility: styles[this.type]['circle-visibility']
			
 
				+                                    },
			
 
				+                                    paint: {
			
 
				+                                        'circle-color': [
			
 
				+                                            'case',
			
 
				+                                            ['>=', ['get', 'confirmedIncrement'], 1000],
			
 
				+                                            '#F35735',
			
 
				+                                            ['>=', ['get', 'confirmedIncrement'], 100],
			
 
				+                                            '#F39146',
			
 
				+                                            ['>=', ['get', 'confirmedIncrement'], 50],
			
 
				+                                            '#F9B657',
			
 
				+                                            ['>=', ['get', 'confirmedIncrement'], 10],
			
 
				+                                            '#E2B06A',
			
 
				+                                            '#ADB37E'
			
 
				+                                        ],
			
 
				+                                        'circle-radius': [
			
 
				+                                            'case',
			
 
				+                                            ['>=', ['get', 'confirmedIncrement'], 1000],
			
 
				+                                            18,
			
 
				+                                            ['>=', ['get', 'confirmedIncrement'], 100],
			
 
				+                                            15,
			
 
				+                                            ['>=', ['get', 'confirmedIncrement'], 50],
			
 
				+                                            12,
			
 
				+                                            ['>=', ['get', 'confirmedIncrement'], 10],
			
 
				+                                            10,
			
 
				+                                            7
			
 
				+                                        ],
			
 
				+                                        'circle-stroke-width': 1,
			
 
				+                                        'circle-stroke-color': '#fff',
			
 
				+                                        'circle-stroke-opacity': 0.8
			
 
				+                                    }
			
 
				+                                });
			
 
				+                                this.map.addLayer({
			
 
				+                                    id: 'world-label-area-clusters',
			
 
				+                                    type: 'symbol',
			
 
				+                                    source: 'world-label-clusters',
			
 
				+                                    filter: [
			
 
				+                                        'all',
			
 
				+                                        ['<', ['get', 'confirmedIncrement'], 1000],
			
 
				+                                        ['>', ['get', 'confirmedIncrement'], 0]
			
 
				+                                    ],
			
 
				+                                    layout: {
			
 
				+                                        visibility: styles[this.type]['circle-visibility'],
			
 
				+                                        'text-field': '{areaName}',
			
 
				+                                        'text-font': ['Microsoft YaHei Regular'],
			
 
				+                                        'text-size': 12,
			
 
				+                                        'text-letter-spacing': 0,
			
 
				+                                        'text-offset': [0, -2]
			
 
				+                                    },
			
 
				+                                    paint: {
			
 
				+                                        'text-color': 'white',
			
 
				+                                        'text-opacity': 1,
			
 
				+                                        'text-halo-color': '#696868',
			
 
				+                                        'text-halo-width': 1.5
			
 
				+                                    }
			
 
				+                                });
			
 
				+                                this.map.addLayer({
			
 
				+                                    id: 'world-label-clusters',
			
 
				+                                    type: 'symbol',
			
 
				+                                    source: 'world-label-clusters',
			
 
				+                                    filter: [
			
 
				+                                        'all',
			
 
				+                                        ['<', ['get', 'confirmedIncrement'], 1000],
			
 
				+                                        ['>', ['get', 'confirmedIncrement'], 0]
			
 
				+                                    ],
			
 
				+                                    layout: {
			
 
				+                                        visibility: styles[this.type]['circle-visibility'],
			
 
				+                                        'text-field': styles[this.type]['text-field'],
			
 
				+                                        'text-font': ['Microsoft YaHei Regular'],
			
 
				+                                        'text-size': 12,
			
 
				+                                        'text-letter-spacing': 0
			
 
				+                                    },
			
 
				+                                    paint: {
			
 
				+                                        'text-color': '#000',
			
 
				+                                        'text-opacity': 1
			
 
				+                                    }
			
 
				+                                });
			
 
				+
			
 
				+                                this.map.addLayer({
			
 
				+                                    id: 'world-serious',
			
 
				+                                    type: 'circle',
			
 
				+                                    source: 'world-label',
			
 
				+                                    filter: ['>=', ['get', 'confirmedIncrement'], 1000],
			
 
				+                                    layout: {
			
 
				+                                        visibility: styles[this.type]['circle-visibility']
			
 
				+                                    },
			
 
				+                                    paint: {
			
 
				+                                        'circle-color': '#F35735',
			
 
				+                                        'circle-radius': 18,
			
 
				+                                        'circle-stroke-width': 1,
			
 
				+                                        'circle-stroke-color': '#fff',
			
 
				+                                        'circle-stroke-opacity': 0.8
			
 
				+                                    }
			
 
				+                                });
			
 
				+                                this.map.addLayer({
			
 
				+                                    id: 'world-label-area-serious',
			
 
				+                                    type: 'symbol',
			
 
				+                                    source: 'world-label',
			
 
				+                                    filter: ['>=', ['get', 'confirmedIncrement'], 1000],
			
 
				+                                    layout: {
			
 
				+                                        visibility: styles[this.type]['circle-visibility'],
			
 
				+                                        'text-field': '{areaName}',
			
 
				+                                        'text-font': ['Microsoft YaHei Regular'],
			
 
				+                                        'text-size': 12,
			
 
				+                                        'text-allow-overlap': false,
			
 
				+                                        'text-ignore-placement': false,
			
 
				+                                        'text-letter-spacing': 0,
			
 
				+                                        'text-offset': [0, -2],
			
 
				+                                        'symbol-sort-key': 9
			
 
				+                                    },
			
 
				+                                    paint: {
			
 
				+                                        'text-color': 'white',
			
 
				+                                        'text-opacity': 1,
			
 
				+                                        'text-halo-color': '#696868',
			
 
				+                                        'text-halo-width': 1.5
			
 
				+                                    }
			
 
				+                                });
			
 
				+                                this.map.addLayer({
			
 
				+                                    id: 'world-label-serious',
			
 
				+                                    type: 'symbol',
			
 
				+                                    source: 'world-label',
			
 
				+                                    filter: ['>=', ['get', 'confirmedIncrement'], 1000],
			
 
				+                                    layout: {
			
 
				+                                        visibility: styles[this.type]['circle-visibility'],
			
 
				+                                        'text-field': styles[this.type]['text-field'],
			
 
				+                                        'text-font': ['Microsoft YaHei Regular'],
			
 
				+                                        'text-size': 12,
			
 
				+                                        'text-letter-spacing': 0,
			
 
				+                                        'symbol-sort-key': 10
			
 
				+                                    },
			
 
				+                                    paint: {
			
 
				+                                        'text-color': '#000',
			
 
				+                                        'text-opacity': 1
			
 
				+                                    }
			
 
				+                                });
			
 
				+
			
 
				+                                this.map.addLayer({
			
 
				+                                    id: 'world-label',
			
 
				+                                    type: 'symbol',
			
 
				+                                    source: 'world-label',
			
 
				+                                    layout: {
			
 
				+                                        visibility: styles[this.type]['label-visibility'],
			
 
				+                                        'text-field': styles[this.type]['text-field'],
			
 
				+                                        'text-font': ['Microsoft YaHei Regular'],
			
 
				+                                        'text-size': 12,
			
 
				+                                        'text-allow-overlap': false,
			
 
				+                                        'text-letter-spacing': 0
			
 
				+                                    },
			
 
				+                                    paint: {
			
 
				+                                        'text-color': 'white',
			
 
				+                                        'text-opacity': 1,
			
 
				+                                        'text-halo-color': '#696868',
			
 
				+                                        'text-halo-width': 1.5
			
 
				+                                    }
			
 
				+                                });
			
 
				+                            }.bind(this)
			
 
				+                        );
			
 
				+                    },
			
 
				+                    mapClicked(e) {
			
 
				+                        var bbox = [
			
 
				+                            [e.mapboxEvent.point.x - 5, e.mapboxEvent.point.y - 5],
			
 
				+                            [e.mapboxEvent.point.x + 5, e.mapboxEvent.point.y + 5]
			
 
				+                        ];
			
 
				+                        var features = this.map.queryRenderedFeatures(bbox);
			
 
				+                        if (features[0] && features[0].properties.areaName) {
			
 
				+                            this.popup = new mapboxgl.Popup({ closeButton: false, maxWidth: 'none' })
			
 
				+                                .setLngLat(e.mapboxEvent.lngLat)
			
 
				+                                .setHTML(styles[this.type].tooltip(features[0].properties))
			
 
				+                                .addTo(this.map);
			
 
				+                        }
			
 
				+                    },
			
 
				+                    getLatestWorldData(result) {
			
 
				+                        var countrys = [];
			
 
				+                        var confirmeds = [];
			
 
				+                        worldTime = result.time;
			
 
				+                        worldDataUpdateTime = result.updateTime;
			
 
				+
			
 
				+                        // 最新当天的数据
			
 
				+                        todayWorldData = result.data.worldHistory[0].historyList[0];
			
 
				+                        var unit = 100000; //单位为10万
			
 
				+
			
 
				+                        result.data.worldList.forEach(data => {
			
 
				+                            // 砖石号游轮不计算发病率
			
 
				+                            // 计算各国报告发病率
			
 
				+                            var confirmed = data.confirmed;
			
 
				+
			
 
				+                            var name = data.areaName;
			
 
				+                            if (name === '日本本土') {
			
 
				+                                name = data.areaName = '日本';
			
 
				+                            }
			
 
				+                            var countryName = CountriesNameEn[name];
			
 
				+                            if (CountriesPopulation[countryName]) {
			
 
				+                                data.population = CountriesPopulation[countryName] * 1000; //联合国数以千计
			
 
				+                            }
			
 
				+
			
 
				+                            // 大于等于10万 才计算发病率
			
 
				+                            if (data.population >= 100000) {
			
 
				+                                var incidence = (confirmed / data.population) * unit;
			
 
				+                                incidence = Number(incidence.toFixed(2));
			
 
				+                                // 地图使用
			
 
				+                                data.worldIncidence = incidence;
			
 
				+                            }
			
 
				+                            if (!isNaN(data.confirmedIncrement)) {
			
 
				+                                this.nums['world-confirmedIncrement'] += parseInt(data.confirmedIncrement);
			
 
				+                                if (name === '中国') {
			
 
				+                                    this.chinaConfirmedIncrement = data.confirmedIncrement;
			
 
				+                                }
			
 
				+                            }
			
 
				+
			
 
				+                            if (!isNaN(data.confirmed)) {
			
 
				+                                this.nums['world-confirmed'] += parseInt(data.confirmed);
			
 
				+                                if (name === '中国') {
			
 
				+                                    this.chinaConfirmed = data.confirmed;
			
 
				+                                }
			
 
				+                            }
			
 
				+                            if (!isNaN(data.worldIncidence)) {
			
 
				+                                this.nums['world-incidence'] = (
			
 
				+                                    (this.nums['world-confirmed'] / 7751396374) *
			
 
				+                                    unit
			
 
				+                                ).toFixed(2);
			
 
				+                            }
			
 
				+                            var country = CountryData.features.find(function(item) {
			
 
				+                                return (
			
 
				+                                    item.properties.Country === name ||
			
 
				+                                    (name === '中国' && item.properties.Country === '中华人民共和国')
			
 
				+                                );
			
 
				+                            });
			
 
				+                            var countryLabel = CountryCenterData.features.find(function(item) {
			
 
				+                                return (
			
 
				+                                    item.properties.Country === name ||
			
 
				+                                    (name === '中国' && item.properties.Country === '中华人民共和国')
			
 
				+                                );
			
 
				+                            });
			
 
				+
			
 
				+                            if (country && countryLabel) {
			
 
				+                                country.properties = Object.assign(country.properties, countryLabel.properties, data, {
			
 
				+                                    areaName: getareaName(name)
			
 
				+                                });
			
 
				+                                countryLabel.properties = Object.assign(
			
 
				+                                    country.properties,
			
 
				+                                    countryLabel.properties,
			
 
				+                                    data,
			
 
				+                                    { areaName: getareaName(name) }
			
 
				+                                );
			
 
				+                            }
			
 
				+                        });
			
 
				+                        CountryCenterData.features = CountryCenterData.features.sort(function(val1, val2) {
			
 
				+                            return (val2.properties.confirmed || 0) - (val1.properties.confirmed || 0);
			
 
				+                        });
			
 
				+                    }
			
 
				+                }
			
 
				+            });
			
 
				+            function getareaName(name) {
			
 
				+                if (utils.getLanguage() === 'en-US') {
			
 
				+                    return CountriesNameEn[name];
			
 
				+                }
			
 
				+                return name;
			
 
				+            }
			
 
				+            function getTitle(response) {
			
 
				+                var titles = response[utils.getLanguage()];
			
 
				+                if (titles) {
			
 
				+                    if (titles.firstPriorityTitle) {
			
 
				+                        return titles.firstPriorityTitle;
			
 
				+                    }
			
 
				+                    if (titles.title && titles.title.indexOf('{') < 0) {
			
 
				+                        return titles.title;
			
 
				+                    }
			
 
				+                }
			
 
				+                return resources.text_ncp_world;
			
 
				+            }
			
 
				+        </script>
			
 
				+    </body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_openfile_vue.html
+++ b/public/supermap/examples/component/components_openfile_vue.html
@@ -0,0 +1,74 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+    <head>
			
 
				+        <meta charset="UTF-8" />
			
 
				+        <title data-i18n="resources.title_componentsOpenFile_Vue"></title>
			
 
				+        <script type="text/javascript" include="vue" src="../js/include-web.js"></script>
			
 
				+        <script include="xlsx,shapefile,iclient-mapboxgl-vue,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+        <style>
			
 
				+            #main {
			
 
				+                margin: 0 auto;
			
 
				+                width: 100%;
			
 
				+                height: 100%;
			
 
				+            }
			
 
				+        </style>
			
 
				+    </head>
			
 
				+
			
 
				+    <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
			
 
				+        <div id="main">
			
 
				+            <sm-web-map :map-options="mapOptions">
			
 
				+                <sm-open-file :layer-style="layerStyle"></sm-open-file>
			
 
				+            </sm-web-map>
			
 
				+        </div>
			
 
				+        <script>
			
 
				+            new Vue({
			
 
				+                el: "#main",
			
 
				+                data() {
			
 
				+                    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> ";
			
 
				+                    return {
			
 
				+                        layerStyle: {
			
 
				+                            line: new SuperMap.Components.commontypes.LineStyle(),
			
 
				+                            circle: new SuperMap.Components.commontypes.CircleStyle(),
			
 
				+                            fill: new SuperMap.Components.commontypes.FillStyle()
			
 
				+                        },
			
 
				+                        mapOptions: {
			
 
				+                            container: "map", // container id
			
 
				+                            style: {
			
 
				+                                version: 8,
			
 
				+                                sources: {
			
 
				+                                    "raster-tiles": {
			
 
				+                                        attribution: attribution,
			
 
				+                                        type: "raster",
			
 
				+                                        tiles: [
			
 
				+                                            host +
			
 
				+                                                "/iserver/services/map-china400/rest/maps/ChinaDark/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],
			
 
				+                            zoom: 3
			
 
				+                        }
			
 
				+                    };
			
 
				+                }
			
 
				+            });
			
 
				+        </script>
			
 
				+    </body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_pan_vue.html
+++ b/public/supermap/examples/component/components_pan_vue.html
@@ -0,0 +1,37 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+
			
 
				+<head>
			
 
				+  <meta charset="UTF-8">
			
 
				+  <title data-i18n='resources.title_componentsPan_Vue'></title>
			
 
				+  <script type="text/javascript" include="vue" src="../js/include-web.js"></script>
			
 
				+  <script include="iclient-mapboxgl-vue,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+  <style>
			
 
				+     #main{
			
 
				+        margin: 0 auto;
			
 
				+        width: 100%;
			
 
				+        height: 100%;
			
 
				+    }
			
 
				+  </style>
			
 
				+</head>
			
 
				+
			
 
				+<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
			
 
				+  <div id="main">
			
 
				+    <sm-web-map server-url='https://iportal.supermap.io/iportal' map-id="801571284">
			
 
				+      <!-- 平移组件： sm-pan -->
			
 
				+      <sm-pan></sm-pan>
			
 
				+    </sm-web-map>
			
 
				+  </div>
			
 
				+
			
 
				+  <script>
			
 
				+    new Vue({
			
 
				+      el: '#main'
			
 
				+    })
			
 
				+
			
 
				+  </script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_pie_chart_vue.html
+++ b/public/supermap/examples/component/components_pie_chart_vue.html
@@ -0,0 +1,57 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+    <head>
			
 
				+        <meta charset="UTF-8" />
			
 
				+        <title data-i18n="resources.title_componentsChart_Vue(pie)"></title>
			
 
				+        <script type="text/javascript" include="vue" src="../js/include-web.js"></script>
			
 
				+        <!-- <script include="echarts" src="../../dist/mapboxgl/include-mapboxgl.js"></script> -->
			
 
				+        <script include="echarts-vue,iclient-mapboxgl-vue,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+        <style>
			
 
				+            #main {
			
 
				+                margin: 0 auto;
			
 
				+                width: 100%;
			
 
				+                height: 100%;
			
 
				+            }
			
 
				+            .sm-component-chart .sm-component-collapse-card__content {
			
 
				+                height: 300px;
			
 
				+            }
			
 
				+        </style>
			
 
				+    </head>
			
 
				+
			
 
				+    <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
			
 
				+        <div id="main">
			
 
				+            <sm-web-map server-url='https://iportal.supermap.io/iportal' map-id="801571284"> </sm-web-map>
			
 
				+            <sm-chart icon-class="" :style="chartStyle" :dataset="dataset" :dataset-options="datasetOptions"></sm-chart>
			
 
				+        </div>
			
 
				+
			
 
				+        <script>
			
 
				+            new Vue({
			
 
				+                el: "#main",
			
 
				+                data() {
			
 
				+                    return {
			
 
				+                        chartStyle: {
			
 
				+                            position: "absolute",
			
 
				+                            bottom: "10px",
			
 
				+                            right: "10px"
			
 
				+                        },
			
 
				+                        dataset: new SuperMap.Components.commontypes.iPortalDataParameter({
			
 
				+                            url: "https://iportal.supermap.io/iportal/web/datas/676516522",
			
 
				+                            maxFeatures: 20
			
 
				+                        }),
			
 
				+                        datasetOptions: [
			
 
				+                            {
			
 
				+                                seriesType: "pie", //图表类型
			
 
				+                                isStastic: true, //是否统计, 默认不统计
			
 
				+                                xField: "机场", //x坐标轴数据字段
			
 
				+                                yField: "同比增速%" //统计的数据，legned默认名字
			
 
				+                            }
			
 
				+                        ]
			
 
				+                    };
			
 
				+                }
			
 
				+            });
			
 
				+        </script>
			
 
				+    </body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_query_vue.html
+++ b/public/supermap/examples/component/components_query_vue.html
@@ -0,0 +1,61 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+
			
 
				+<head>
			
 
				+  <meta charset="UTF-8">
			
 
				+  <title data-i18n='resources.title_componentsQuery_Vue'></title>
			
 
				+  <script type="text/javascript" include="vue" src="../js/include-web.js"></script>
			
 
				+  <script include="iclient-mapboxgl-vue,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+  <style>
			
 
				+    #main {
			
 
				+      margin: 0 auto;
			
 
				+      width: 100%;
			
 
				+      height: 100%;
			
 
				+    }
			
 
				+    .mapboxgl-ctrl button:not(:disabled):hover {
			
 
				+        background-color: #269ff0;
			
 
				+    }
			
 
				+  </style>
			
 
				+</head>
			
 
				+
			
 
				+<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
			
 
				+  <div id="main">
			
 
				+    <sm-web-map server-url='https://iportal.supermap.io/iportal' map-id="801571284">
			
 
				+      <!-- 查询组件: sm-query -->
			
 
				+      <!-- 支持的数据：rest-map rest-data iportal-data-->
			
 
				+      <sm-query :rest-data="restData" :rest-map="restMap" :collapsed="false"></sm-query>
			
 
				+    </sm-web-map>
			
 
				+  </div>
			
 
				+
			
 
				+  <script>
			
 
				+    new Vue({
			
 
				+      el: '#main',
			
 
				+      data() {
			
 
				+        var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+        return {
			
 
				+          restData: [
			
 
				+            new SuperMap.Components.commontypes.RestDataParameter({
			
 
				+              url: host + "/iserver/services/data-world/rest/data",
			
 
				+              attributeFilter: "SmID>0",
			
 
				+              maxFeatures: 30,
			
 
				+              dataName: ["World:Countries"],
			
 
				+            })
			
 
				+          ],
			
 
				+          restMap: [
			
 
				+            new SuperMap.Components.commontypes.RestMapParameter({
			
 
				+              url: host + "/iserver/services/map-world/rest/maps/World",
			
 
				+              attributeFilter: "SmID>0",
			
 
				+              maxFeatures: 30,
			
 
				+              layerName: "Rivers@World",
			
 
				+            })
			
 
				+          ],
			
 
				+        }
			
 
				+      }
			
 
				+    })
			
 
				+  </script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_radar_chart_vue.html
+++ b/public/supermap/examples/component/components_radar_chart_vue.html
@@ -0,0 +1,56 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+    <head>
			
 
				+        <meta charset="UTF-8" />
			
 
				+        <title data-i18n="resources.title_componentsChart_Vue(radar)"></title>
			
 
				+        <script type="text/javascript" include="vue" src="../js/include-web.js"></script>
			
 
				+        <script include="echarts-vue,iclient-mapboxgl-vue,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+        <style>
			
 
				+            #main {
			
 
				+                margin: 0 auto;
			
 
				+                width: 100%;
			
 
				+                height: 100%;
			
 
				+            }
			
 
				+            .sm-component-chart .sm-component-collapse-card__content {
			
 
				+                height: 300px;
			
 
				+            }
			
 
				+        </style>
			
 
				+    </head>
			
 
				+
			
 
				+    <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
			
 
				+        <div id="main">
			
 
				+            <sm-web-map server-url='https://iportal.supermap.io/iportal' map-id="801571284"> </sm-web-map>
			
 
				+            <sm-chart icon-class="" :style="chartStyle" :dataset="dataset" :dataset-options="datasetOptions"></sm-chart>
			
 
				+        </div>
			
 
				+
			
 
				+        <script>
			
 
				+            new Vue({
			
 
				+                el: "#main",
			
 
				+                data() {
			
 
				+                    return {
			
 
				+                        chartStyle: {
			
 
				+                            position: "absolute",
			
 
				+                            bottom: "10px",
			
 
				+                            right: "10px"
			
 
				+                        },
			
 
				+                        dataset: new SuperMap.Components.commontypes.iPortalDataParameter({
			
 
				+                            url: "https://iportal.supermap.io/iportal/web/datas/676516522",
			
 
				+                            maxFeatures: 20
			
 
				+                        }),
			
 
				+                        datasetOptions: [
			
 
				+                            {
			
 
				+                                seriesType: "radar", //图表类型
			
 
				+                                isStastic: true, //是否统计, 默认不统计
			
 
				+                                xField: "机场", //x坐标轴数据字段
			
 
				+                                yField: "同比增速%" //统计的数据，legned默认名字
			
 
				+                            }
			
 
				+                        ]
			
 
				+                    };
			
 
				+                }
			
 
				+            });
			
 
				+        </script>
			
 
				+    </body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_rangetheme_react.html
+++ b/public/supermap/examples/component/components_rangetheme_react.html
@@ -0,0 +1,201 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+  <head>
			
 
				+    <meta charset="UTF-8" />
			
 
				+    <title data-i18n="resources.title_componentsRangeTheme_React"></title>
			
 
				+    <style>
			
 
				+      html,
			
 
				+      body {
			
 
				+        height: 100%;
			
 
				+        margin: 0;
			
 
				+        padding: 0;
			
 
				+      }
			
 
				+
			
 
				+      #main,
			
 
				+      #map-container {
			
 
				+        height: 100%;
			
 
				+        position: relative;
			
 
				+      }
			
 
				+
			
 
				+      .info-container {
			
 
				+        width: 272px;
			
 
				+        position: absolute;
			
 
				+        right: 0;
			
 
				+        top: 250px;
			
 
				+        font-size: 14px;
			
 
				+      }
			
 
				+    </style>
			
 
				+  </head>
			
 
				+
			
 
				+  <body>
			
 
				+    <div id="main">
			
 
				+      <div id="map-container"></div>
			
 
				+      <div class="info-container">
			
 
				+        <div id="infoBox" class="panel panel-primary infoPane" style="display: none;">
			
 
				+          <div class="panel-heading">
			
 
				+            <h5 class="panel-title text-center" data-i18n="resources.text_attributeTable"></h5>
			
 
				+          </div>
			
 
				+          <div id="infoContent" class="panel-body content"></div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <script type="text/javascript" include="widgets,react,bootstrap" src="../js/include-web.js"></script>
			
 
				+    <script include="antd,iclient-mapboxgl-react,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+    <script type="text/babel">
			
 
				+      widgets.loader.showLoader('data loading...');
			
 
				+      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/data-jingjin/rest/data';
			
 
				+
			
 
				+      var SmWebMap = SuperMap.Components.SmWebMap;
			
 
				+      var SmRangeThemeLayer = SuperMap.Components.SmRangeThemeLayer;
			
 
				+      var mapOptions = {
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+          version: 8,
			
 
				+          sources: {
			
 
				+            'raster-tiles': {
			
 
				+              attribution: attribution,
			
 
				+              type: 'raster',
			
 
				+              tiles: [HOST + '/iserver/services/map-jingjin/rest/maps/京津地区地图/zxyTileImage.png?z={z}&x={x}&y={y}'],
			
 
				+              tileSize: 256
			
 
				+            }
			
 
				+          },
			
 
				+          layers: [
			
 
				+            {
			
 
				+              id: 'simple-tiles',
			
 
				+              type: 'raster',
			
 
				+              source: 'raster-tiles',
			
 
				+              minzoom: 0,
			
 
				+              maxzoom: 22
			
 
				+            }
			
 
				+          ]
			
 
				+        },
			
 
				+        center: [116.85, 39.79],
			
 
				+        zoom: 7
			
 
				+      };
			
 
				+
			
 
				+      var themeOptions = {
			
 
				+        //                map: map,//该可选参数将在下个版本遗弃
			
 
				+        attributions: ' ',
			
 
				+        opacity: 0.8,
			
 
				+        style: {
			
 
				+          shadowBlur: 16,
			
 
				+          shadowColor: '#000000',
			
 
				+          fillColor: '#FFFFFF'
			
 
				+        },
			
 
				+        isHoverAble: true,
			
 
				+        highlightStyle: {
			
 
				+          stroke: true,
			
 
				+          strokeWidth: 4,
			
 
				+          strokeColor: 'blue',
			
 
				+          fillColor: '#00EEEE',
			
 
				+          fillOpacity: 0.8
			
 
				+        },
			
 
				+        themeField: 'POP_DENSITY99',
			
 
				+        styleGroups: [
			
 
				+          {
			
 
				+            start: 0,
			
 
				+            end: 0.02,
			
 
				+            style: {
			
 
				+              color: '#FDE2CA'
			
 
				+            }
			
 
				+          },
			
 
				+          {
			
 
				+            start: 0.02,
			
 
				+            end: 0.04,
			
 
				+            style: {
			
 
				+              color: '#FACE9C'
			
 
				+            }
			
 
				+          },
			
 
				+          {
			
 
				+            start: 0.04,
			
 
				+            end: 0.06,
			
 
				+            style: {
			
 
				+              color: '#F09C42'
			
 
				+            }
			
 
				+          },
			
 
				+          {
			
 
				+            start: 0.06,
			
 
				+            end: 0.1,
			
 
				+            style: {
			
 
				+              color: '#D0770B'
			
 
				+            }
			
 
				+          },
			
 
				+          {
			
 
				+            start: 0.1,
			
 
				+            end: 0.2,
			
 
				+            style: {
			
 
				+              color: '#945305'
			
 
				+            }
			
 
				+          }
			
 
				+        ]
			
 
				+      };
			
 
				+
			
 
				+      function createThemeFeatures() {
			
 
				+        var getFeatureParam, getFeatureBySQLService, getFeatureBySQLParams;
			
 
				+        getFeatureParam = new SuperMap.FilterParameter({
			
 
				+          name: 'Jingjin',
			
 
				+          attributeFilter: 'SMID > -1'
			
 
				+        });
			
 
				+        getFeatureBySQLParams = new SuperMap.GetFeaturesBySQLParameters({
			
 
				+          queryParameter: getFeatureParam,
			
 
				+          toIndex: 500,
			
 
				+          datasetNames: ['Jingjin:BaseMap_R']
			
 
				+        });
			
 
				+        var dataUrl = HOST + '/iserver/services/data-jingjin/rest/data';
			
 
				+        getFeatureBySQLService = new SuperMap.GetFeaturesBySQLService(dataUrl, {
			
 
				+          format: SuperMap.DataFormat.ISERVER,
			
 
				+          eventListeners: { processCompleted: processCompleted }
			
 
				+        });
			
 
				+        getFeatureBySQLService.processAsync(getFeatureBySQLParams);
			
 
				+      }
			
 
				+
			
 
				+      createThemeFeatures();
			
 
				+
			
 
				+      function processCompleted(getFeaturesEventArgs) {
			
 
				+        var result = getFeaturesEventArgs.result,
			
 
				+          features;
			
 
				+        if (result && result.features) {
			
 
				+          widgets.loader.removeLoader();
			
 
				+          features = result.features;
			
 
				+
			
 
				+          ReactDOM.render(
			
 
				+            <SmWebMap mapOptions={mapOptions}>
			
 
				+              <SmRangeThemeLayer options={themeOptions} data={features} onMousemove={handleLayerMousemove} />
			
 
				+            </SmWebMap>,
			
 
				+            document.getElementById('map-container')
			
 
				+          );
			
 
				+        }
			
 
				+      }
			
 
				+
			
 
				+      function handleLayerMousemove(params) {
			
 
				+        var e = params.mapboxEvent;
			
 
				+        var themeLayer = params.map.getLayer(params.layerId);
			
 
				+
			
 
				+        if (e.target && e.target.refDataID) {
			
 
				+          document.getElementById('infoBox').style.display = 'block';
			
 
				+          var fid = e.target.refDataID;
			
 
				+          var fea = themeLayer.getFeatureById(fid);
			
 
				+          if (fea) {
			
 
				+            document.getElementById('infoContent').innerHTML = '';
			
 
				+            document.getElementById('infoContent').innerHTML += 'ID: ' + fea.attributes.SMID + '<br/>';
			
 
				+            document.getElementById('infoContent').innerHTML +=
			
 
				+              resources.text_districtName + fea.attributes.NAME + '<br/>';
			
 
				+            document.getElementById('infoContent').innerHTML +=
			
 
				+              resources.text_populationDensity + parseFloat(fea.attributes.POP_DENSITY99).toFixed(5) + '<br/>';
			
 
				+          }
			
 
				+        } else {
			
 
				+          document.getElementById('infoContent').innerHTML = '';
			
 
				+          document.getElementById('infoBox').style.display = 'none';
			
 
				+        }
			
 
				+      }
			
 
				+    </script>
			
 
				+  </body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_rangetheme_vue.html
+++ b/public/supermap/examples/component/components_rangetheme_vue.html
@@ -0,0 +1,202 @@
 
				+<!--********************************************************************
			
 
				+* 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_componentsRangeTheme_Vue"></title>
			
 
				+    <style>
			
 
				+        #main {
			
 
				+            margin: 0 auto;
			
 
				+        }
			
 
				+
			
 
				+        #main,
			
 
				+        #map {
			
 
				+            position: absolute;
			
 
				+            width: 100%;
			
 
				+            height: 100%
			
 
				+        }
			
 
				+
			
 
				+        .legendItemHeader,
			
 
				+        .legendItemValue {
			
 
				+            width: 120px;
			
 
				+            height: 18px;
			
 
				+            font-size: 14px;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+
			
 
				+<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
			
 
				+    <div id="main">
			
 
				+        <sm-web-map :map-options="mapOptions" @load="mapIsLoaded">
			
 
				+            <sm-range-theme-layer :options="themeOptions" layer-name="RangeThemeLayer"
			
 
				+                :data="features" @load="layerLoaded" v-show="!!features.length">
			
 
				+            </sm-range-theme-layer>
			
 
				+        </sm-web-map>
			
 
				+        <!-- 属性表 -->
			
 
				+        <div style="width: 272px;float:right">
			
 
				+            <div id="infoBox" class="panel panel-primary infoPane"
			
 
				+                style="width:272px;margin-top: 250px;position: absolute;fontSize:14px;display: none;float:right">
			
 
				+                <div class="panel-heading">
			
 
				+                    <h5 class='panel-title text-center' data-i18n="resources.text_attributeTable"></h5>
			
 
				+                </div>
			
 
				+                <div id="infoContent" class="panel-body content">
			
 
				+                </div>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+    </div>
			
 
				+    <script type="text/javascript" include="widgets,vue,bootstrap" src="../js/include-web.js"></script>
			
 
				+    <script include="iclient-mapboxgl-vue,mapbox-gl-enhance"
			
 
				+        src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+    <script>
			
 
				+        widgets.loader.showLoader('data loading...');
			
 
				+        var HOST = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+        var features = [];
			
 
				+        function createThemeFeatures() {
			
 
				+            var getFeatureParam, getFeatureBySQLService, getFeatureBySQLParams;
			
 
				+            getFeatureParam = new SuperMap.FilterParameter({
			
 
				+                name: "Jingjin",
			
 
				+                attributeFilter: "SMID > -1"
			
 
				+            });
			
 
				+            getFeatureBySQLParams = new SuperMap.GetFeaturesBySQLParameters({
			
 
				+                queryParameter: getFeatureParam,
			
 
				+                toIndex: 500,
			
 
				+                datasetNames: ["Jingjin:BaseMap_R"]
			
 
				+            });
			
 
				+            var dataUrl = HOST + '/iserver/services/data-jingjin/rest/data';
			
 
				+            getFeatureBySQLService = new SuperMap.GetFeaturesBySQLService(dataUrl, {
			
 
				+                format: SuperMap.DataFormat.ISERVER,
			
 
				+                eventListeners: { "processCompleted": processCompleted }
			
 
				+            });
			
 
				+            getFeatureBySQLService.processAsync(getFeatureBySQLParams);
			
 
				+        };
			
 
				+
			
 
				+        createThemeFeatures();
			
 
				+
			
 
				+        function processCompleted(getFeaturesEventArgs) {
			
 
				+            var result = getFeaturesEventArgs.result;
			
 
				+            if (result && result.features) {
			
 
				+				widgets.loader.removeLoader();
			
 
				+                features = result.features;
			
 
				+                new Vue({
			
 
				+                    el: '#main',
			
 
				+                    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> ";
			
 
				+                        return {
			
 
				+                            mapOptions: {
			
 
				+                                container: 'map',
			
 
				+                                style: {
			
 
				+                                    "version": 8,
			
 
				+                                    "sources": {
			
 
				+                                        "raster-tiles": {
			
 
				+                                            "attribution": attribution,
			
 
				+                                            "type": "raster",
			
 
				+                                            "tiles": [HOST + '/iserver/services/map-jingjin/rest/maps/京津地区地图/zxyTileImage.png?z={z}&x={x}&y={y}'],
			
 
				+                                            "tileSize": 256,
			
 
				+                                        },
			
 
				+                                    },
			
 
				+                                    "layers": [{
			
 
				+                                        "id": "simple-tiles",
			
 
				+                                        "type": "raster",
			
 
				+                                        "source": "raster-tiles",
			
 
				+                                        "minzoom": 0,
			
 
				+                                        "maxzoom": 22
			
 
				+                                    }]
			
 
				+                                },
			
 
				+                                center: [116.85, 39.79],
			
 
				+                                zoom: 7
			
 
				+                            },
			
 
				+                            features,
			
 
				+                            themeOptions: {
			
 
				+                                //                map: map,//该可选参数将在下个版本遗弃
			
 
				+                                attributions: " ",
			
 
				+                                opacity: 0.8,
			
 
				+                                style: {
			
 
				+                                    shadowBlur: 16,
			
 
				+                                    shadowColor: "#000000",
			
 
				+                                    fillColor: "#FFFFFF"
			
 
				+                                },
			
 
				+                                isHoverAble: true,
			
 
				+                                highlightStyle: {
			
 
				+                                    stroke: true,
			
 
				+                                    strokeWidth: 4,
			
 
				+                                    strokeColor: 'blue',
			
 
				+                                    fillColor: "#00EEEE",
			
 
				+                                    fillOpacity: 0.8
			
 
				+                                },
			
 
				+                                themeField: "POP_DENSITY99",
			
 
				+                                styleGroups: [
			
 
				+                                    {
			
 
				+                                        start: 0,
			
 
				+                                        end: 0.02,
			
 
				+                                        style: {
			
 
				+                                            color: '#FDE2CA'
			
 
				+                                        }
			
 
				+                                    },
			
 
				+                                    {
			
 
				+                                        start: 0.02,
			
 
				+                                        end: 0.04,
			
 
				+                                        style: {
			
 
				+                                            color: '#FACE9C'
			
 
				+                                        }
			
 
				+                                    },
			
 
				+                                    {
			
 
				+                                        start: 0.04,
			
 
				+                                        end: 0.06,
			
 
				+                                        style: {
			
 
				+                                            color: '#F09C42'
			
 
				+                                        }
			
 
				+                                    },
			
 
				+                                    {
			
 
				+                                        start: 0.06,
			
 
				+                                        end: 0.1,
			
 
				+                                        style: {
			
 
				+                                            color: '#D0770B'
			
 
				+                                        }
			
 
				+                                    },
			
 
				+                                    {
			
 
				+                                        start: 0.1,
			
 
				+                                        end: 0.2,
			
 
				+                                        style: {
			
 
				+                                            color: '#945305'
			
 
				+                                        }
			
 
				+                                    }]
			
 
				+                            }
			
 
				+                        };
			
 
				+                    },
			
 
				+                    methods: {
			
 
				+                        mapIsLoaded(e) {
			
 
				+                            this.map = e.map;
			
 
				+                        },
			
 
				+                        layerLoaded(themeLayer) {
			
 
				+                            themeLayer.on('mousemove', function (e) {
			
 
				+                                if (e.target && e.target.refDataID) {
			
 
				+                                    document.getElementById("infoBox").style.display = "block";
			
 
				+                                    var fid = e.target.refDataID;
			
 
				+                                    var fea = themeLayer.getFeatureById(fid);
			
 
				+                                    if (fea) {
			
 
				+                                        document.getElementById("infoContent").innerHTML = "";
			
 
				+                                        document.getElementById("infoContent").innerHTML += "ID: " + fea.attributes.SMID + "<br/>";
			
 
				+                                        document.getElementById("infoContent").innerHTML += resources.text_districtName + fea.attributes.NAME + "<br/>";
			
 
				+                                        document.getElementById("infoContent").innerHTML += resources.text_populationDensity + parseFloat(fea.attributes.POP_DENSITY99).toFixed(5) + "<br/>";
			
 
				+                                    }
			
 
				+                                }
			
 
				+                                else {
			
 
				+                                    document.getElementById("infoContent").innerHTML = "";
			
 
				+                                    document.getElementById("infoBox").style.display = "none";
			
 
				+                                }
			
 
				+                            });
			
 
				+                        }
			
 
				+                    }
			
 
				+                });
			
 
				+            }
			
 
				+        };
			
 
				+    </script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_ranksymboltheme_react.html
+++ b/public/supermap/examples/component/components_ranksymboltheme_react.html
@@ -0,0 +1,160 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+  <head>
			
 
				+    <meta charset="UTF-8" />
			
 
				+    <title data-i18n="resources.title_componentsRankSymbolTheme_React"></title>
			
 
				+    <script type="text/javascript" include="react" src="../js/include-web.js"></script>
			
 
				+    <script include="antd,iclient-mapboxgl-react,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+    <script type="text/javascript" src="../data/chinaConsumptionLevel.js"></script>
			
 
				+    <style>
			
 
				+      html,
			
 
				+      body {
			
 
				+        height: 100%;
			
 
				+        margin: 0;
			
 
				+        padding: 0;
			
 
				+      }
			
 
				+      #main {
			
 
				+        margin: 0 auto;
			
 
				+      }
			
 
				+      #main,
			
 
				+      #map {
			
 
				+        position: absolute;
			
 
				+        width: 100%;
			
 
				+        height: 100%;
			
 
				+      }
			
 
				+      .legendItemHeader,
			
 
				+      .legendItemValue {
			
 
				+        width: 120px;
			
 
				+        height: 18px;
			
 
				+        font-size: 14px;
			
 
				+      }
			
 
				+    </style>
			
 
				+  </head>
			
 
				+  <body>
			
 
				+    <div id="main"></div>
			
 
				+    <script type="text/babel">
			
 
				+      var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
			
 
				+      var SmWebMap = SuperMap.Components.SmWebMap;
			
 
				+      var SmRanksymbolThemeLayer = SuperMap.Components.SmRanksymbolThemeLayer;
			
 
				+
			
 
				+      var features = [], popup, map;
			
 
				+      for (var i = 0, len = chinaConsumptionLevel.length; i < len; i++) {
			
 
				+        // 省居民消费水平（单位：元）信息
			
 
				+        var provinceInfo = chinaConsumptionLevel[i];
			
 
				+        var geo = new mapboxgl.LngLat(provinceInfo[1], provinceInfo[2]);
			
 
				+        var attrs = {};
			
 
				+        attrs.NAME = provinceInfo[0];
			
 
				+        attrs.CON2009 = provinceInfo[3];
			
 
				+        var fea = new mapboxgl.supermap.ThemeFeature(geo, attrs);
			
 
				+        features.push(fea);
			
 
				+      }
			
 
				+
			
 
				+      var mapOptions = {
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+          version: 8,
			
 
				+          sources: {
			
 
				+            'raster-tiles': {
			
 
				+              type: 'raster',
			
 
				+              tiles: [host + '/iserver/services/map-china400/rest/maps/China_4326/zxyTileImage.png?z={z}&x={x}&y={y}'],
			
 
				+              tileSize: 256
			
 
				+            }
			
 
				+          },
			
 
				+          layers: [
			
 
				+            {
			
 
				+              id: 'simple-tiles',
			
 
				+              type: 'raster',
			
 
				+              source: 'raster-tiles',
			
 
				+              minzoom: 0,
			
 
				+              maxzoom: 22
			
 
				+            }
			
 
				+          ]
			
 
				+        },
			
 
				+        center: [116.85, 39.79],
			
 
				+        zoom: 3
			
 
				+      };
			
 
				+
			
 
				+      var themeOptions = {
			
 
				+        //map: map,//该可选参数将在下个版本遗弃
			
 
				+        themeField: 'CON2009',
			
 
				+        // 配置图表参数
			
 
				+        symbolSetting: {
			
 
				+          //必设参数
			
 
				+          codomain: [0, 40000], // 允许图形展示的值域范围，此范围外的数据将不制作图图形
			
 
				+          //圆最大半径 默认100
			
 
				+          maxR: 100,
			
 
				+          //圆最小半径 默认0
			
 
				+          minR: 0,
			
 
				+          // 圆形样式
			
 
				+          circleStyle: { fillOpacity: 0.8 },
			
 
				+          // 符号专题图填充颜色
			
 
				+          fillColor: '#FFA500',
			
 
				+          // 专题图hover 样式
			
 
				+          circleHoverStyle: { fillOpacity: 1 }
			
 
				+        }
			
 
				+      };
			
 
				+      function showInfoWin(params) {
			
 
				+        var e = params.mapboxEvent;
			
 
				+        map = params.map;
			
 
				+        var themeLayer = map.getLayer(params.layerId);
			
 
				+        // e.target 是图形对象，即数据的可视化对象。
			
 
				+        // 图形对象的 refDataID 属性是数据（feature）的 id 属性，它指明图形对象是由那个数据制作而来;
			
 
				+        // 图形对象的 dataInfo 属性是图形对象表示的具体数据，他有两个属性，field、R 和 value;
			
 
				+        if (e.target && e.target.refDataID && e.target.dataInfo) {
			
 
				+          closeInfoWin();
			
 
				+          // 获取图形对应的数据 (feature)
			
 
				+          var fea = themeLayer.getFeatureById(e.target.refDataID);
			
 
				+          var info = e.target.dataInfo;
			
 
				+          // 弹窗内容
			
 
				+          var contentHTML = "<div style='color: #000; background-color: #fff'>";
			
 
				+          contentHTML += resources.text_Name + '<br><strong>' + fea.attributes.NAME + '</strong>';
			
 
				+          contentHTML += "<hr style='margin: 3px'>";
			
 
				+          switch (info.field) {
			
 
				+            case 'CON2009':
			
 
				+              contentHTML +=
			
 
				+                resources.text_consumptionLevel1 +
			
 
				+                '09' +
			
 
				+                resources.text_consumptionLevel2 +
			
 
				+                ' <br/><strong>' +
			
 
				+                info.value +
			
 
				+                '</strong>（' +
			
 
				+                resources.text_yuan +
			
 
				+                '）';
			
 
				+              break;
			
 
				+            default:
			
 
				+              contentHTML += 'No Data';
			
 
				+          }
			
 
				+          contentHTML += '</div>';
			
 
				+          var tempPoint = map.unproject(new window.mapboxgl.Point(e.event.x, e.event.y));
			
 
				+          popup = new mapboxgl.Popup({ closeOnClick: false })
			
 
				+            .setLngLat([tempPoint.lng, tempPoint.lat])
			
 
				+            .setHTML(contentHTML)
			
 
				+            .addTo(map);
			
 
				+          return;
			
 
				+        }
			
 
				+        closeInfoWin();
			
 
				+      }
			
 
				+      function closeInfoWin() {
			
 
				+        if (popup) {
			
 
				+          popup.remove(map);
			
 
				+        }
			
 
				+      }
			
 
				+
			
 
				+      ReactDOM.render(
			
 
				+        <SmWebMap mapOptions={mapOptions}>
			
 
				+          <SmRanksymbolThemeLayer
			
 
				+            options={themeOptions}
			
 
				+            layerName={'RankSymbolThemeLayer'}
			
 
				+            data={features}
			
 
				+            chartsType={'Circle'}
			
 
				+            onMousemove={showInfoWin}
			
 
				+          />
			
 
				+        </SmWebMap>,
			
 
				+        document.getElementById('main')
			
 
				+      );
			
 
				+    </script>
			
 
				+  </body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_ranksymboltheme_vue.html
+++ b/public/supermap/examples/component/components_ranksymboltheme_vue.html
@@ -0,0 +1,179 @@
 
				+<!--********************************************************************
			
 
				+* 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_componentsRankSymbolTheme_Vue"></title>
			
 
				+    <style>
			
 
				+      #main {
			
 
				+        margin: 0 auto;
			
 
				+      }
			
 
				+
			
 
				+      #main,
			
 
				+      #map {
			
 
				+        position: absolute;
			
 
				+        width: 100%;
			
 
				+        height: 100%;
			
 
				+      }
			
 
				+
			
 
				+      .legendItemHeader,
			
 
				+      .legendItemValue {
			
 
				+        width: 120px;
			
 
				+        height: 18px;
			
 
				+        font-size: 14px;
			
 
				+      }
			
 
				+    </style>
			
 
				+  </head>
			
 
				+
			
 
				+  <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
			
 
				+    <div id="main">
			
 
				+      <sm-web-map :map-options="mapOptions" @load="mapIsLoaded">
			
 
				+        <sm-ranksymbol-theme-layer
			
 
				+          :options="themeOptions"
			
 
				+          layer-name="RankSymbolThemeLayer"
			
 
				+          :data="features"
			
 
				+          symbol-type="Circle"
			
 
				+          @load="layerLoaded"
			
 
				+          v-show="!!features.length"
			
 
				+        >
			
 
				+        </sm-ranksymbol-theme-layer>
			
 
				+      </sm-web-map>
			
 
				+    </div>
			
 
				+    <script type="text/javascript" include="vue,bootstrap" src="../js/include-web.js"></script>
			
 
				+    <script
			
 
				+      include="iclient-mapboxgl-vue,mapbox-gl-enhance"
			
 
				+      src="../../dist/mapboxgl/include-mapboxgl.js"
			
 
				+    ></script>
			
 
				+    <script type="text/javascript" src="../data/chinaConsumptionLevel.js"></script>
			
 
				+    <script>
			
 
				+      new Vue({
			
 
				+        el: '#main',
			
 
				+        data() {
			
 
				+          var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
			
 
				+          var attribution =
			
 
				+            "<a href='https://www.mapbtyx.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 features = [];
			
 
				+          for (var i = 0, len = chinaConsumptionLevel.length; i < len; i++) {
			
 
				+            // 省居民消费水平（单位：元）信息
			
 
				+            var provinceInfo = chinaConsumptionLevel[i];
			
 
				+            var geo = new mapboxgl.LngLat(provinceInfo[1], provinceInfo[2]);
			
 
				+            var attrs = {};
			
 
				+            attrs.NAME = provinceInfo[0];
			
 
				+            attrs.CON2009 = provinceInfo[3];
			
 
				+            var fea = new mapboxgl.supermap.ThemeFeature(geo, attrs);
			
 
				+            features.push(fea);
			
 
				+          }
			
 
				+          return {
			
 
				+            mapOptions: {
			
 
				+              container: 'map',
			
 
				+              style: {
			
 
				+                version: 8,
			
 
				+                sources: {
			
 
				+                  'raster-tiles': {
			
 
				+                    attribution: attribution,
			
 
				+                    type: 'raster',
			
 
				+                    tiles: [
			
 
				+                      host + '/iserver/services/map-china400/rest/maps/China_4326/zxyTileImage.png?z={z}&x={x}&y={y}'
			
 
				+                    ],
			
 
				+                    tileSize: 256
			
 
				+                  }
			
 
				+                },
			
 
				+                layers: [
			
 
				+                  {
			
 
				+                    id: 'simple-tiles',
			
 
				+                    type: 'raster',
			
 
				+                    source: 'raster-tiles',
			
 
				+                    minzoom: 0,
			
 
				+                    maxzoom: 22
			
 
				+                  }
			
 
				+                ]
			
 
				+              },
			
 
				+              center: [116.85, 39.79],
			
 
				+              zoom: 3
			
 
				+            },
			
 
				+            features,
			
 
				+            themeOptions: {
			
 
				+              //map: map,//该可选参数将在下个版本遗弃
			
 
				+              attributions: ' ',
			
 
				+              themeField: 'CON2009',
			
 
				+              // 配置图表参数
			
 
				+              symbolSetting: {
			
 
				+                //必设参数
			
 
				+                codomain: [0, 40000], // 允许图形展示的值域范围，此范围外的数据将不制作图图形
			
 
				+                //圆最大半径 默认100
			
 
				+                maxR: 100,
			
 
				+                //圆最小半径 默认0
			
 
				+                minR: 0,
			
 
				+                // 圆形样式
			
 
				+                circleStyle: { fillOpacity: 0.8 },
			
 
				+                // 符号专题图填充颜色
			
 
				+                fillColor: '#FFA500',
			
 
				+                // 专题图hover 样式
			
 
				+                circleHoverStyle: { fillOpacity: 1 }
			
 
				+              }
			
 
				+            }
			
 
				+          };
			
 
				+        },
			
 
				+        methods: {
			
 
				+          mapIsLoaded(e) {
			
 
				+            this.map = e.map;
			
 
				+          },
			
 
				+          layerLoaded(themeLayer) {
			
 
				+            themeLayer.on('mousemove', function(e) {
			
 
				+              return this.showInfoWin(themeLayer, e);
			
 
				+            }.bind(this));
			
 
				+          },
			
 
				+          showInfoWin(themeLayer, e) {
			
 
				+            // e.target 是图形对象，即数据的可视化对象。
			
 
				+            // 图形对象的 refDataID 属性是数据（feature）的 id 属性，它指明图形对象是由那个数据制作而来;
			
 
				+            // 图形对象的 dataInfo 属性是图形对象表示的具体数据，他有两个属性，field、R 和 value;
			
 
				+            var map = this.map;
			
 
				+            if (e.target && e.target.refDataID && e.target.dataInfo) {
			
 
				+              this.closeInfoWin();
			
 
				+              // 获取图形对应的数据 (feature)
			
 
				+              var fea = themeLayer.getFeatureById(e.target.refDataID);
			
 
				+              var info = e.target.dataInfo;
			
 
				+              // 弹窗内容
			
 
				+              var contentHTML = "<div style='color: #000; background-color: #fff'>";
			
 
				+              contentHTML += resources.text_Name + '<br><strong>' + fea.attributes.NAME + '</strong>';
			
 
				+              contentHTML += "<hr style='margin: 3px'>";
			
 
				+              switch (info.field) {
			
 
				+                case 'CON2009':
			
 
				+                  contentHTML +=
			
 
				+                    resources.text_consumptionLevel1 +
			
 
				+                    '09' +
			
 
				+                    resources.text_consumptionLevel2 +
			
 
				+                    ' <br/><strong>' +
			
 
				+                    info.value +
			
 
				+                    '</strong>（' +
			
 
				+                    resources.text_yuan +
			
 
				+                    '）';
			
 
				+                  break;
			
 
				+                default:
			
 
				+                  contentHTML += 'No Data';
			
 
				+              }
			
 
				+              contentHTML += '</div>';
			
 
				+              var tempPoint = map.unproject(new window.mapboxgl.Point(e.event.x, e.event.y));
			
 
				+              this.popup = new mapboxgl.Popup({ closeOnClick: false })
			
 
				+                .setLngLat([tempPoint.lng, tempPoint.lat])
			
 
				+                .setHTML(contentHTML)
			
 
				+                .addTo(map);
			
 
				+              return;
			
 
				+            }
			
 
				+            this.closeInfoWin();
			
 
				+          },
			
 
				+          closeInfoWin() {
			
 
				+            if (this.popup) {
			
 
				+              this.popup.remove(this.map);
			
 
				+            }
			
 
				+          }
			
 
				+        }
			
 
				+      });
			
 
				+    </script>
			
 
				+  </body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_raster_react.html
+++ b/public/supermap/examples/component/components_raster_react.html
@@ -0,0 +1,41 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+  <head>
			
 
				+    <meta charset="UTF-8" />
			
 
				+    <title data-i18n="resources.title_componentsRasterTile_React"></title>
			
 
				+    <script type="text/javascript" include="react" src="../js/include-web.js"></script>
			
 
				+    <script include="antd,iclient-mapboxgl-react,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+    <style>
			
 
				+      html,
			
 
				+      body {
			
 
				+        height: 100%;
			
 
				+        margin: 0;
			
 
				+        padding: 0;
			
 
				+      }
			
 
				+
			
 
				+      #main {
			
 
				+        height: 100%;
			
 
				+      }
			
 
				+    </style>
			
 
				+  </head>
			
 
				+
			
 
				+  <body>
			
 
				+    <div id="main"></div>
			
 
				+    <script type="text/babel">
			
 
				+      var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
			
 
				+      var SmWebMap = SuperMap.Components.SmWebMap;
			
 
				+      var SmRasterTileLayer = SuperMap.Components.SmRasterTileLayer;
			
 
				+      var mapUrl = host + '/iserver/services/map-Population/rest/maps/PopulationDistribution';
			
 
				+
			
 
				+      ReactDOM.render(
			
 
				+        <SmWebMap serverUrl="https://iportal.supermap.io/iportal" mapId="1329428269">
			
 
				+          <SmRasterTileLayer layerId={resources.text_myRasterLayer} opacity={0.8} visible={true} mapUrl={mapUrl} />
			
 
				+        </SmWebMap>,
			
 
				+        document.getElementById('main')
			
 
				+      );
			
 
				+    </script>
			
 
				+  </body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_raster_vue.html
+++ b/public/supermap/examples/component/components_raster_vue.html
@@ -0,0 +1,47 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+	<head>
			
 
				+		<meta charset="UTF-8" />
			
 
				+		<title data-i18n="resources.title_componentsRaster_Vue"></title>
			
 
				+		<script type="text/javascript" include="vue" src="../js/include-web.js"></script>
			
 
				+		<script
			
 
				+			include="iclient-mapboxgl-vue,mapbox-gl-enhance"
			
 
				+			src="../../dist/mapboxgl/include-mapboxgl.js"
			
 
				+		></script>
			
 
				+		<style>
			
 
				+			#main {
			
 
				+				margin: 0 auto;
			
 
				+				width: 100%;
			
 
				+				height: 100%;
			
 
				+			}
			
 
				+		</style>
			
 
				+	</head>
			
 
				+
			
 
				+	<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
			
 
				+		<div id="main">
			
 
				+			<sm-web-map server-url='https://iportal.supermap.io/iportal' map-id="1329428269">
			
 
				+				<sm-raster-tile-layer v-bind="rasteLayerOptions"></sm-raster-tile-layer>
			
 
				+				<sm-layer-list position="top-left"></sm-layer-list>
			
 
				+			</sm-web-map>
			
 
				+		</div>
			
 
				+		<script>
			
 
				+			new Vue({
			
 
				+				el: '#main',
			
 
				+				data() {
			
 
				+					var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
			
 
				+					return {
			
 
				+						rasteLayerOptions: {
			
 
				+							layerId: resources.text_myRasterLayer,
			
 
				+							opacity: 0.8,
			
 
				+							visible: true,
			
 
				+							mapUrl: host + '/iserver/services/map-Population/rest/maps/PopulationDistribution',
			
 
				+						},
			
 
				+					};
			
 
				+				},
			
 
				+			});
			
 
				+		</script>
			
 
				+	</body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_rotating_text_border_react.html
+++ b/public/supermap/examples/component/components_rotating_text_border_react.html
@@ -0,0 +1,105 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+  <head>
			
 
				+    <meta charset="UTF-8" />
			
 
				+    <title data-i18n="resources.title_componentsAnimateTextLayer_React"></title>
			
 
				+    <script type="text/javascript" include="react,jquery" src="../js/include-web.js"></script>
			
 
				+    <script
			
 
				+      type="text/javascript"
			
 
				+      include="antd,mapbox-gl-enhance,iclient-mapboxgl-react"
			
 
				+      src="../../dist/mapboxgl/include-mapboxgl.js"
			
 
				+    ></script>
			
 
				+    <style>
			
 
				+      #main {
			
 
				+        margin: 0 auto;
			
 
				+        width: 100%;
			
 
				+        height: 100%;
			
 
				+      }
			
 
				+    </style>
			
 
				+  </head>
			
 
				+
			
 
				+  <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
			
 
				+    <div id="main"></div>
			
 
				+    <script type="text/babel">
			
 
				+      var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
			
 
				+      var mapUrl = host + '/iserver/services/map-china400/rest/maps/ChinaDark';
			
 
				+      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 mapOptions = {
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+          version: 8,
			
 
				+          sources: {
			
 
				+            'raster-tiles': {
			
 
				+              attribution: attribution,
			
 
				+              type: 'raster',
			
 
				+              tiles: [mapUrl + '/zxyTileImage.png?z={z}&x={x}&y={y}'],
			
 
				+              tileSize: 256
			
 
				+            },
			
 
				+            buildings: {
			
 
				+              type: 'geojson',
			
 
				+              data: 'https://iclient.supermap.io/examples/data/buildings.json'
			
 
				+            }
			
 
				+          },
			
 
				+          layers: [
			
 
				+            {
			
 
				+              id: 'simple-tiles',
			
 
				+              type: 'raster',
			
 
				+              source: 'raster-tiles',
			
 
				+              minzoom: 0,
			
 
				+              maxzoom: 22
			
 
				+            },
			
 
				+            {
			
 
				+              id: '3d-buildings',
			
 
				+              source: 'buildings',
			
 
				+              type: 'fill-extrusion',
			
 
				+              paint: {
			
 
				+                'fill-extrusion-color': [
			
 
				+                  'case',
			
 
				+                  ['<', ['get', 'height'], 2],
			
 
				+                  '#fbb03b',
			
 
				+                  ['<', ['get', 'height'], 4],
			
 
				+                  '#223b53',
			
 
				+                  ['<', ['get', 'height'], 8],
			
 
				+                  '#15D1F2',
			
 
				+                  ['<', ['get', 'height'], 16],
			
 
				+                  '#15D1F2',
			
 
				+                  '#3bb2d0'
			
 
				+                ],
			
 
				+                'fill-extrusion-height': ['*', ['get', 'height'], 5],
			
 
				+                'fill-extrusion-opacity': 0.6
			
 
				+              }
			
 
				+            }
			
 
				+          ]
			
 
				+        },
			
 
				+        center: [116.45678770471238, 39.91985987899349],
			
 
				+        zoom: 14.310035105070941,
			
 
				+        bearing: 0.8568,
			
 
				+        pitch: 60
			
 
				+      };
			
 
				+      var SmWebMap = SuperMap.Components.SmWebMap;
			
 
				+      var SmAnimateMarkerLayer = SuperMap.Components.SmAnimateMarkerLayer;
			
 
				+
			
 
				+      $.get('../data/text-marker.json', function(features) {
			
 
				+        ReactDOM.render(
			
 
				+          <SmWebMap mapOptions={mapOptions}>
			
 
				+            <SmAnimateMarkerLayer
			
 
				+              features={features}
			
 
				+              type="rotatingTextBorder"
			
 
				+              textField="NAME"
			
 
				+              colors={['rgb(21, 209, 242)', 'rgba(21, 209, 242, 0.56)']}
			
 
				+              width={150}
			
 
				+              fitBounds={false}
			
 
				+            />
			
 
				+          </SmWebMap>,
			
 
				+          document.getElementById('main')
			
 
				+        );
			
 
				+      });
			
 
				+    </script>
			
 
				+  </body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_rotating_text_border_vue.html
+++ b/public/supermap/examples/component/components_rotating_text_border_vue.html
@@ -0,0 +1,108 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+    <head>
			
 
				+        <meta charset="UTF-8" />
			
 
				+        <title data-i18n="resources.title_componentsAnimateTextLayer_Vue"></title>
			
 
				+        <script type="text/javascript" include="vue,jquery" src="../js/include-web.js"></script>
			
 
				+        <script
			
 
				+            type="text/javascript"
			
 
				+            include="mapbox-gl-enhance,iclient-mapboxgl-vue"
			
 
				+            src="../../dist/mapboxgl/include-mapboxgl.js"
			
 
				+        ></script>
			
 
				+        <style>
			
 
				+            #main {
			
 
				+                margin: 0 auto;
			
 
				+                width: 100%;
			
 
				+                height: 100%;
			
 
				+            }
			
 
				+        </style>
			
 
				+    </head>
			
 
				+
			
 
				+    <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
			
 
				+        <div id="main">
			
 
				+            <sm-web-map :map-options="mapOptions" style="background:black">
			
 
				+                <sm-animate-marker-layer
			
 
				+                    :features="features"
			
 
				+                    type="rotatingTextBorder"
			
 
				+                    text-field="NAME"
			
 
				+                    :colors="['rgb(21, 209, 242)', 'rgba(21, 209, 242, 0.56)']"
			
 
				+                    :width="150"
			
 
				+                    :fit-bounds="false"
			
 
				+                ></sm-animate-marker-layer>
			
 
				+            </sm-web-map>
			
 
				+        </div>
			
 
				+        <script>
			
 
				+            var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+            $.get("../data/text-marker.json", function(features) {
			
 
				+                new Vue({
			
 
				+                    el: "#main",
			
 
				+                    data() {
			
 
				+                        var mapUrl = host + "/iserver/services/map-china400/rest/maps/ChinaDark";
			
 
				+                        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> ";
			
 
				+                        return {
			
 
				+                            mapOptions: {
			
 
				+                                container: "map",
			
 
				+                                style: {
			
 
				+                                    version: 8,
			
 
				+                                    sources: {
			
 
				+                                        "raster-tiles": {
			
 
				+                                            attribution: attribution,
			
 
				+                                            type: "raster",
			
 
				+                                            tiles: [mapUrl + "/zxyTileImage.png?z={z}&x={x}&y={y}"],
			
 
				+                                            tileSize: 256
			
 
				+                                        },
			
 
				+                                        buildings: {
			
 
				+                                            type: "geojson",
			
 
				+                                            data: "https://iclient.supermap.io/examples/data/buildings.json"
			
 
				+                                        }
			
 
				+                                    },
			
 
				+                                    layers: [
			
 
				+                                        {
			
 
				+                                            id: "simple-tiles",
			
 
				+                                            type: "raster",
			
 
				+                                            source: "raster-tiles",
			
 
				+                                            minzoom: 0,
			
 
				+                                            maxzoom: 22
			
 
				+                                        },
			
 
				+                                        {
			
 
				+                                            id: "3d-buildings",
			
 
				+                                            source: "buildings",
			
 
				+                                            type: "fill-extrusion",
			
 
				+                                            paint: {
			
 
				+                                                "fill-extrusion-color": [
			
 
				+                                                    "case",
			
 
				+                                                    ["<", ["get", "height"], 2],
			
 
				+                                                    "#fbb03b",
			
 
				+                                                    ["<", ["get", "height"], 4],
			
 
				+                                                    "#223b53",
			
 
				+                                                    ["<", ["get", "height"], 8],
			
 
				+                                                    "#15D1F2",
			
 
				+                                                    ["<", ["get", "height"], 16],
			
 
				+                                                    "#15D1F2",
			
 
				+                                                    "#3bb2d0"
			
 
				+                                                ],
			
 
				+                                                "fill-extrusion-height": ["*", ["get", "height"], 5],
			
 
				+                                                "fill-extrusion-opacity": 0.6
			
 
				+                                            }
			
 
				+                                        }
			
 
				+                                    ]
			
 
				+                                },
			
 
				+                                center: [116.45678770471238, 39.91985987899349],
			
 
				+                                zoom: 14.310035105070941,
			
 
				+                                bearing: 0.8568,
			
 
				+                                pitch: 60
			
 
				+                            },
			
 
				+                            features: features
			
 
				+                        };
			
 
				+                    }
			
 
				+                });
			
 
				+            });
			
 
				+        </script>
			
 
				+    </body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_scale_vue.html
+++ b/public/supermap/examples/component/components_scale_vue.html
@@ -0,0 +1,37 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+
			
 
				+<head>
			
 
				+  <meta charset="UTF-8">
			
 
				+  <title data-i18n='resources.title_componentsScale_Vue'></title>
			
 
				+  <script type="text/javascript" include="vue" src="../js/include-web.js"></script>
			
 
				+  <script include="iclient-mapboxgl-vue,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+  <style>
			
 
				+     #main{
			
 
				+        margin: 0 auto;
			
 
				+        width: 100%;
			
 
				+        height: 100%;
			
 
				+    }
			
 
				+  </style>
			
 
				+</head>
			
 
				+
			
 
				+<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
			
 
				+  <div id="main">
			
 
				+    <sm-web-map server-url='https://iportal.supermap.io/iportal' map-id="801571284">
			
 
				+      <!-- 比例尺组件：sm-scale -->
			
 
				+      <sm-scale></sm-scale>
			
 
				+    </sm-web-map>
			
 
				+  </div>
			
 
				+
			
 
				+  <script>
			
 
				+    new Vue({
			
 
				+      el: '#main'
			
 
				+    })
			
 
				+
			
 
				+  </script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_search_vue.html
+++ b/public/supermap/examples/component/components_search_vue.html
@@ -0,0 +1,58 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+
			
 
				+<head>
			
 
				+  <meta charset="UTF-8">
			
 
				+  <title data-i18n='resources.title_componentsSearch_Vue'></title>
			
 
				+  <script type="text/javascript" include="vue" src="../js/include-web.js"></script>
			
 
				+  <script include="iclient-mapboxgl-vue,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+  <style>
			
 
				+    #main {
			
 
				+      margin: 0 auto;
			
 
				+      width: 100%;
			
 
				+      height: 100%;
			
 
				+    }
			
 
				+  </style>
			
 
				+</head>
			
 
				+
			
 
				+<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
			
 
				+  <div id="main">
			
 
				+    <sm-web-map server-url='https://iportal.supermap.io/iportal' map-id="801571284">
			
 
				+      <!-- 搜索组件: sm-search -->
			
 
				+      <!-- 支持的数据：layer-names address-match  rest-map rest-data online-local-search-->
			
 
				+      <sm-search :layer-names="layerNames" :address-match="addressMatch" :rest-map="restMap" :online-local-search='onlineLocalSearch'></sm-search>
			
 
				+      </sm-web-map>
			
 
				+  </div>
			
 
				+
			
 
				+  <script>
			
 
				+    new Vue({
			
 
				+      el: '#main',
			
 
				+      data() {
			
 
				+        var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+        return {
			
 
				+          layerNames: ["民航数据"],
			
 
				+          addressMatch: [
			
 
				+            new SuperMap.Components.commontypes.AddressMatchParameter({
			
 
				+              url: host + "/iserver/services/addressmatch-Address/restjsr/v1/address"
			
 
				+            })
			
 
				+          ],
			
 
				+          restMap: [
			
 
				+            new SuperMap.Components.commontypes.RestMapParameter({
			
 
				+              url: host + "/iserver/services/map-world/rest/maps/World",
			
 
				+              layerName: "Capitals@World.1",
			
 
				+            })
			
 
				+          ],
			
 
				+          onlineLocalSearch: {
			
 
				+            enable: true,
			
 
				+            city: "北京市"
			
 
				+          }
			
 
				+        }
			
 
				+      },
			
 
				+    })
			
 
				+  </script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_slideshow_vue.html
+++ b/public/supermap/examples/component/components_slideshow_vue.html
@@ -0,0 +1,102 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title data-i18n='resources.title_componentsSlideshow_Vue'></title>
			
 
				+    <script type="text/javascript" include="vue" src="../js/include-web.js"></script>
			
 
				+    <script include="iclient-mapboxgl-vue,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+    <style>
			
 
				+        #main {
			
 
				+            margin: 0 auto;
			
 
				+            width: 100%;
			
 
				+            height: 100%;
			
 
				+        }
			
 
				+
			
 
				+        .sm-component-slideshow {
			
 
				+            position: absolute;
			
 
				+            top: 40px;
			
 
				+            left: 30px;
			
 
				+            width: 400px;
			
 
				+            height: 380px;
			
 
				+            border-radius: 4px;
			
 
				+        }
			
 
				+
			
 
				+    </style>
			
 
				+</head>
			
 
				+
			
 
				+<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
			
 
				+    <div id="main">
			
 
				+        <sm-web-map map-id='567946816' :map-options="mapOptions" server-url='https://www.supermapol.com'
			
 
				+            tianditu-key='1d109683f4d84198e37a38c442d68311' @load="mapLoaded">
			
 
				+        </sm-web-map>
			
 
				+        <sm-slideshow :collapsed="false" :autoplay="autoplay" :pagination="pagination" @change="slideChange">
			
 
				+            <sm-slideshow-item v-for="item of content" :key="item.title">
			
 
				+                <h3 style="margin-top: 8px;">{{ item.title }}</h3>
			
 
				+                <p style="padding: 8px;">{{ item.description }}</p>
			
 
				+                <img :src="item.image" style="width: 300px; height: 170px;" />
			
 
				+            </sm-slideshow-item>
			
 
				+        </sm-slideshow>
			
 
				+    </div>
			
 
				+
			
 
				+    <script>
			
 
				+        new Vue({
			
 
				+            el: '#main',
			
 
				+            data() {
			
 
				+                return {
			
 
				+                    mapOptions: {
			
 
				+                        zoom: 14,
			
 
				+                        pitch: 60,
			
 
				+                        center: [103.93424623295097, 33.03730377719067]
			
 
				+                    },
			
 
				+                    content: '',
			
 
				+                    pagination: {
			
 
				+                        type: 'bullets',
			
 
				+                        clickable: true
			
 
				+                    },
			
 
				+                    autoplay: {
			
 
				+                        delay: 3000,
			
 
				+                        disableOnInteraction: false
			
 
				+                    }
			
 
				+                };
			
 
				+            },
			
 
				+            created() {
			
 
				+                this.setDataFn = this.setData.bind(this);
			
 
				+                this.getData(this.setDataFn);
			
 
				+            },
			
 
				+            beforeDestroy() {
			
 
				+                this.marker && this.marker.remove() && (this.marker = null);
			
 
				+            },
			
 
				+            methods: {
			
 
				+                getData(cb) {
			
 
				+                    var jsonName = /en/.test(SuperMap.Lang.getCode()) ? 'jiuzhai-en' : 'jiuzhai';
			
 
				+                    $.get(`../data/jiuzhai/${jsonName}.json`, function (res) {
			
 
				+                        cb && cb(res);
			
 
				+                    });
			
 
				+                },
			
 
				+                setData(res) {
			
 
				+                    this.content = res;
			
 
				+                },
			
 
				+                slideChange(options) {
			
 
				+                    let coordinates = this.content[options.realIndex].coordinates;
			
 
				+                    this.map.flyTo({ center: coordinates });
			
 
				+                    if (!this.marker) {
			
 
				+                        this.marker = new mapboxgl.Marker()
			
 
				+                            .setLngLat(coordinates)
			
 
				+                            .addTo(this.map);
			
 
				+                    } else {
			
 
				+                        this.marker.setLngLat(coordinates)
			
 
				+                    }
			
 
				+                },
			
 
				+                mapLoaded(e) {
			
 
				+                    this.map = e.map;
			
 
				+                }
			
 
				+            }
			
 
				+        })
			
 
				+    </script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_theme_vue.html
+++ b/public/supermap/examples/component/components_theme_vue.html
@@ -0,0 +1,221 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+  <head>
			
 
				+    <meta charset="UTF-8" />
			
 
				+    <title data-i18n="resources.title_componentsTheme_Vue"></title>
			
 
				+    <script type="text/javascript" include="vue" src="../js/include-web.js"></script>
			
 
				+    <script
			
 
				+      include="echarts-vue,iclient-mapboxgl-vue,mapbox-gl-enhance"
			
 
				+      src="../../dist/mapboxgl/include-mapboxgl.js"
			
 
				+    ></script>
			
 
				+    <style>
			
 
				+      body {
			
 
				+        margin: 0;
			
 
				+        overflow: hidden;
			
 
				+        background: #fff;
			
 
				+        width: 100%;
			
 
				+        height: 100%;
			
 
				+        position: absolute;
			
 
				+        top: 0;
			
 
				+      }
			
 
				+
			
 
				+      #main {
			
 
				+        margin: 0 auto;
			
 
				+        width: 100%;
			
 
				+        height: 100%;
			
 
				+      }
			
 
				+
			
 
				+      .sm-chart .sm-card__content {
			
 
				+        width: 400px;
			
 
				+        height: 300px;
			
 
				+        position: absolute;
			
 
				+        bottom: 10px;
			
 
				+        right: 10px;
			
 
				+      }
			
 
				+
			
 
				+      .box-card {
			
 
				+        width: 280px;
			
 
				+        position: absolute;
			
 
				+        top: 10px;
			
 
				+        right: 10px;
			
 
				+        z-index: 1000;
			
 
				+        overflow: hidden;
			
 
				+      }
			
 
				+
			
 
				+      .radio-group {
			
 
				+        position: absolute;
			
 
				+        left: 10px;
			
 
				+        top: 10px;
			
 
				+        text-align: center;
			
 
				+        z-index: 1000;
			
 
				+      }
			
 
				+      .sm-progress-wrap {
			
 
				+        height: 110px;
			
 
				+      }
			
 
				+      .sm-progress-wrap,
			
 
				+      .sm-component-liquidFill {
			
 
				+        width: 110px;
			
 
				+        height: 110px;
			
 
				+        display: inline-block;
			
 
				+      }
			
 
				+      .sm-component-indicator {
			
 
				+        padding-left: 0px;
			
 
				+      }
			
 
				+      .sm-component-indicator .sm-component-indicator__head {
			
 
				+        padding-left: 0px;
			
 
				+      }
			
 
				+    </style>
			
 
				+  </head>
			
 
				+
			
 
				+  <body>
			
 
				+    <div id="main">
			
 
				+      <!-- WebMap组件 -->
			
 
				+      <sm-web-map
			
 
				+        server-url="https://iportal.supermap.io/iportal"
			
 
				+        map-id="801571284"
			
 
				+        ref="map"
			
 
				+        @load.once="load"
			
 
				+      ></sm-web-map>
			
 
				+      <!-- 切换主题按钮组 -->
			
 
				+      <sm-radio-group class="radio-group" v-model="theme" @change="changeTheme">
			
 
				+        <sm-radio-button value="light">{{ resources.btn_lightTheme }}</sm-radio-button>
			
 
				+        <sm-radio-button value="dark">{{ resources.btn_darkTheme }}</sm-radio-button>
			
 
				+        <sm-radio-button value="custom">{{ resources.btn_customTheme }}</sm-radio-button>
			
 
				+      </sm-radio-group>
			
 
				+      <div class="box-card">
			
 
				+        <!-- 图标组件 -->
			
 
				+        <sm-icon icon-class="marker-layer" background="unset" size="18px" :style="{float: 'left'}"> </sm-icon>
			
 
				+        <!-- 文本组件 -->
			
 
				+        <sm-text
			
 
				+          title="点击图上点切换显示机场数据"
			
 
				+          :font-style='{ fontSize: "14px",display: "block"}'
			
 
				+          text-color="#333"
			
 
				+        ></sm-text>
			
 
				+        <sm-text
			
 
				+          title="机场"
			
 
				+          :font-style='{ fontSize: "12px",fontWeight: "bolder",display: "block"}'
			
 
				+          text-color="rgb(51,51,51)"
			
 
				+          style="width: 280px"
			
 
				+        >
			
 
				+        </sm-text>
			
 
				+        <sm-text
			
 
				+          :title="name"
			
 
				+          :font-style='{ fontSize: "18px", color:"#73b9ac", fontWeight: "700" ,display: "block"}'
			
 
				+          style="width: 100%"
			
 
				+        >
			
 
				+        </sm-text>
			
 
				+        <!-- 指标组件 -->
			
 
				+        <sm-indicator title="2017旅客吞吐量" unit="人次" :num="passengerNumber" style="width: 100%"> </sm-indicator>
			
 
				+        <sm-indicator title="2017货邮吞吐量" unit="吨" :num="goodsNumber" style="width: 100%"></sm-indicator>
			
 
				+        <sm-text
			
 
				+          title="同比增速"
			
 
				+          :font-style='{ fontSize: "12px",fontWeight: "bolder",display: "block"}'
			
 
				+          text-color="rgb(51,51,51)"
			
 
				+        ></sm-text>
			
 
				+
			
 
				+        <div :style="divStyle">
			
 
				+          <!-- 水球组件 -->
			
 
				+          <sm-liquid-fill :value="speedIncreaseValue" :wave-count="3" :wave-animation="true" style="width:100%"> </sm-liquid-fill>
			
 
				+        </div>
			
 
				+
			
 
				+        <!-- 时间组件 -->
			
 
				+        <sm-time-text
			
 
				+          :font-style='{ fontSize: "12px"}'
			
 
				+          text-color="#333"
			
 
				+          time-type="date+second"
			
 
				+          style="float:right;width:100%"
			
 
				+        >
			
 
				+        </sm-time-text>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+
			
 
				+    <script>
			
 
				+      new Vue({
			
 
				+        el: '#main',
			
 
				+        data() {
			
 
				+          return {
			
 
				+            theme: 'light',
			
 
				+            name: '北京/首都',
			
 
				+            passengerNumber: 95786296,
			
 
				+            goodsNumber: 94393454,
			
 
				+            speedIncrease: 35,
			
 
				+            divStyle: {
			
 
				+              background: 'rgba(255, 255, 255)'
			
 
				+            }
			
 
				+          };
			
 
				+        },
			
 
				+        computed: {
			
 
				+          speedIncreaseValue() {
			
 
				+            return this.speedIncrease / 100.0;
			
 
				+          }
			
 
				+        },
			
 
				+        methods: {
			
 
				+          changeTheme: function(e) {
			
 
				+            var themeList = {
			
 
				+              dark: {
			
 
				+                background: 'rgba(255, 255, 255, 0.04)', //例子中布局div的背景色,
			
 
				+                themeInfo: 'dark'
			
 
				+              },
			
 
				+              light: {
			
 
				+                background: 'rgba(255, 255, 255)', //例子中布局div的背景色,
			
 
				+                themeInfo: 'light'
			
 
				+              },
			
 
				+              other: {
			
 
				+                background: 'rgb(91, 92, 110)', //例子中布局div的背景色
			
 
				+                themeInfo: {
			
 
				+                  textColor: '#eee',
			
 
				+                  background: 'rgb(91, 92, 110)',
			
 
				+                  componentBackground: 'rgb(91, 92, 110)',
			
 
				+                  colorGroup: [
			
 
				+                    'rgb(138, 124, 168)',
			
 
				+                    'rgb(224, 152, 199)',
			
 
				+                    'rgb(143, 211, 232)',
			
 
				+                    'rgb(113, 102, 158)',
			
 
				+                    'rgb(204, 112, 175)'
			
 
				+                  ]
			
 
				+                }
			
 
				+              }
			
 
				+            };
			
 
				+            var theme = themeList[e.target.value];
			
 
				+            if(!theme) {
			
 
				+              theme = themeList['other'];
			
 
				+            }
			
 
				+            this.divStyle.background = theme.background;
			
 
				+            SuperMap.Components.setTheme(theme.themeInfo);
			
 
				+            // if (theme === 'dark') {
			
 
				+            //   this.divStyle.background = 'rgba(0, 0, 0, 0.6)'; //例子中布局div的背景色
			
 
				+            //   //切换组件主题为内置主题dark
			
 
				+            //   SuperMap.Components.setTheme(theme);
			
 
				+            // } else if (theme === 'light') {
			
 
				+            //   this.divStyle.background = 'rgba(255, 255, 255, 0.6)'; //例子中布局div的背景色
			
 
				+            //   //切换组件主题为内置主题light
			
 
				+            //   SuperMap.Components.setTheme(theme);
			
 
				+            // } else {
			
 
				+            //   this.divStyle.background = 'rgb(91, 92, 110)'; //例子中布局div的背景色
			
 
				+            //   //切换组件主题为自定义主题
			
 
				+            //   SuperMap.Components.setTheme();
			
 
				+            // }
			
 
				+          },
			
 
				+          load(obj) {
			
 
				+            var vm = this;
			
 
				+            map = obj.map;
			
 
				+            map.on('click', function(e) {
			
 
				+              var bbox = [[e.point.x - 2, e.point.y - 2], [e.point.x + 2, e.point.y + 2]];
			
 
				+              var features = map.queryRenderedFeatures(bbox);
			
 
				+              if (features.length > 0) {
			
 
				+                var properties = features[0].properties;
			
 
				+                vm.name = properties['机场'];
			
 
				+                vm.passengerNumber = properties['2017旅客吞吐量（人次）'] || 0;
			
 
				+                vm.goodsNumber = properties['2017货邮吞吐量（吨）'] || 0;
			
 
				+                vm.speedIncrease = properties['同比增速%'] || 0;
			
 
				+              }
			
 
				+            });
			
 
				+          }
			
 
				+        }
			
 
				+      });
			
 
				+    </script>
			
 
				+  </body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_tianditu_home_vue.html
+++ b/public/supermap/examples/component/components_tianditu_home_vue.html
@@ -0,0 +1,150 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+  <head>
			
 
				+    <meta charset="UTF-8" />
			
 
				+    <title data-i18n="resources.title_componentsTianditu_home_Vue"></title>
			
 
				+    <script type="text/javascript" include="vue" src="../js/include-web.js"></script>
			
 
				+    <script include="iclient-mapboxgl-vue,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+    <style>
			
 
				+      .container {
			
 
				+        margin: 0 auto;
			
 
				+        width: 100%;
			
 
				+        height: 100%;
			
 
				+      }
			
 
				+      .nav-header {
			
 
				+        width: 100%;
			
 
				+        height: 63px;
			
 
				+        background-color: #fff;
			
 
				+        border-bottom: 1px solid #ccc;
			
 
				+        z-index: 12;
			
 
				+        transition: 0.3s;
			
 
				+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
			
 
				+        border-collapse: separate;
			
 
				+        display: flex;
			
 
				+        align-items: center;
			
 
				+      }
			
 
				+      .nav-header .logo {
			
 
				+        display: block;
			
 
				+        width: 80px;
			
 
				+        height: 40px;
			
 
				+        margin: 0 20px;
			
 
				+        float: left;
			
 
				+        cursor: pointer;
			
 
				+      }
			
 
				+      .nav-header .logo-image {
			
 
				+        width: 100%;
			
 
				+        height: 100%;
			
 
				+      }
			
 
				+      .nav-header .imagesLink {
			
 
				+        list-style: none;
			
 
				+        display: flex;
			
 
				+        align-items: center;
			
 
				+        height: 100%;
			
 
				+        font-size: 15px;
			
 
				+        margin-bottom: 0;
			
 
				+      }
			
 
				+      .nav-header .imagesLink li {
			
 
				+        display: inline-block;
			
 
				+        padding: 0 10px;
			
 
				+      }
			
 
				+      .nav-header .imagesLink li a {
			
 
				+        color: #333;
			
 
				+      }
			
 
				+      .nav-header .imagesLink li a:hover {
			
 
				+        color: #3385ff;
			
 
				+      }
			
 
				+
			
 
				+      #main {
			
 
				+        width: 100%;
			
 
				+        height: calc(100% - 63px);
			
 
				+      }
			
 
				+
			
 
				+      .mapboxgl-ctrl button:not(:disabled):hover {
			
 
				+        background-color: #269ff0;
			
 
				+      }
			
 
				+    </style>
			
 
				+  </head>
			
 
				+
			
 
				+  <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
			
 
				+    <div class="container">
			
 
				+      <!-- 导航 -->
			
 
				+      <div class="nav-header">
			
 
				+        <a href="https://www.tianditu.gov.cn/" class="logo"
			
 
				+          ><img class="logo-image" src="../img/tianditu/tianditu.png" /></a>
			
 
				+        <ul class="imagesLink">
			
 
				+          <li><a href="https://www.tianditu.gov.cn/" target="_blank">首页</a></li>
			
 
				+          <li><a href="https://zhfw.tianditu.gov.cn/" target="_blank">专题图层</a></li>
			
 
				+          <li><a href="http://lbs.tianditu.gov.cn/" target="_blank">开发资源</a></li>
			
 
				+          <li><a href="https://app.tianditu.gov.cn/" target="_blank">典型应用</a></li>
			
 
				+          <li><a href="https://service.tianditu.gov.cn/" target="_blank">服务资源</a></li>
			
 
				+          <li><a href="http://yjfw.tianditu.gov.cn/" target="_blank">应急服务</a></li>
			
 
				+        </ul>
			
 
				+      </div>
			
 
				+      <!-- 天地图及其子组件 -->
			
 
				+      <div id="main">
			
 
				+        <sm-web-map :map-options="mapOptions">
			
 
				+          <!-- 天地图路线查询组件: sm-tdt-route
			
 
				+          天地图搜索组件：sm-tdt-search
			
 
				+          天地图切换组件：sm-tdt-map-switcher-->
			
 
				+          <sm-tdt-route position="top-right" :data="{tk:tk}" :collapsed="true"></sm-tdt-route>
			
 
				+          <sm-tdt-search position="top-right" :data="{tk:tk}" :collapsed="true"></sm-tdt-search>
			
 
				+          <sm-tdt-map-switcher position="top-right" :data="{tk:tk}" :collapsed="true"></sm-tdt-map-switcher>
			
 
				+        </sm-web-map>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+
			
 
				+    <script>
			
 
				+      new Vue({
			
 
				+        el: '#main',
			
 
				+        data() {
			
 
				+          return {
			
 
				+            tk: '1d109683f4d84198e37a38c442d68311',
			
 
				+            mapOptions: {
			
 
				+              center: [126.64318, 45.74141],
			
 
				+              zoom: 11,
			
 
				+              style: {
			
 
				+                version: 8,
			
 
				+                sources: {
			
 
				+                  baseLayer: {
			
 
				+                    type: 'raster',
			
 
				+                    tiles: [
			
 
				+                      'https://t0.tianditu.gov.cn/img_w/wmts?tk=1d109683f4d84198e37a38c442d68311&service=WMTS&request=GetTile&version=1.0.0&style=default&tilematrixSet=w&format=tiles&width=256&height=256&layer=img&tilematrix={z}&tilerow={y}&tilecol={x}',
			
 
				+                    ],
			
 
				+                    tileSize: 256
			
 
				+                  },
			
 
				+                  labelLayer: {
			
 
				+                    type: 'raster',
			
 
				+                    tiles: [
			
 
				+                      'https://t0.tianditu.gov.cn/cia_w/wmts?tk=1d109683f4d84198e37a38c442d68311&service=WMTS&request=GetTile&version=1.0.0&style=default&tilematrixSet=w&format=tiles&width=256&height=256&layer=cia&tilematrix={z}&tilerow={y}&tilecol={x}',
			
 
				+                    ],
			
 
				+                    tileSize: 256
			
 
				+                  }
			
 
				+                },
			
 
				+                layers: [
			
 
				+                  {
			
 
				+                    id: 'baseLayer',
			
 
				+                    type: 'raster',
			
 
				+                    source: 'baseLayer',
			
 
				+                    minzoom: 0,
			
 
				+                    maxzoom: 18
			
 
				+                  },
			
 
				+                  {
			
 
				+                    id: 'labelLayer',
			
 
				+                    type: 'raster',
			
 
				+                    source: 'labelLayer',
			
 
				+                    minzoom: 0,
			
 
				+                    maxzoom: 18
			
 
				+                  }
			
 
				+                ]
			
 
				+              },
			
 
				+              renderWorldCopies: false
			
 
				+            }
			
 
				+          };
			
 
				+        }
			
 
				+      });
			
 
				+    </script>
			
 
				+  </body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_tianditu_route_vue.html
+++ b/public/supermap/examples/component/components_tianditu_route_vue.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_componentsTianditu_route_Vue"></title>
			
 
				+    <script type="text/javascript" include="vue" src="../js/include-web.js"></script>
			
 
				+    <script include="iclient-mapboxgl-vue,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+    <style>
			
 
				+      #main {
			
 
				+        margin: 0 auto;
			
 
				+        width: 100%;
			
 
				+        height: 100%;
			
 
				+      }
			
 
				+      .mapboxgl-ctrl button:not(:disabled):hover {
			
 
				+        background-color: #269ff0;
			
 
				+      }
			
 
				+    </style>
			
 
				+  </head>
			
 
				+
			
 
				+  <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;">
			
 
				+
			
 
				+      <div id="main" style="position: absolute">
			
 
				+        <sm-web-map :map-options="mapOptions">
			
 
				+          <!-- 天地图路线查询组件: sm-tdt-route, 参数： token, busUrl, carUrl, searchUrl, position, theme -->
			
 
				+          <sm-tdt-route position="top-left" :data="{tk:tk}" :collapsed="false"></sm-tdt-route>
			
 
				+        </sm-web-map>
			
 
				+      </div>
			
 
				+
			
 
				+    <script>
			
 
				+      new Vue({
			
 
				+        el: '#main',
			
 
				+        data() {
			
 
				+          return {
			
 
				+            tk: '1d109683f4d84198e37a38c442d68311',
			
 
				+            mapOptions: {
			
 
				+              center: [126.64318, 45.74141],
			
 
				+              zoom: 11,
			
 
				+              style: {
			
 
				+                version: 8,
			
 
				+                sources: {
			
 
				+                  baseLayer: {
			
 
				+                    type: 'raster',
			
 
				+                    tiles: [
			
 
				+                      'https://t0.tianditu.gov.cn/img_w/wmts?tk=1d109683f4d84198e37a38c442d68311&service=WMTS&request=GetTile&version=1.0.0&style=default&tilematrixSet=w&format=tiles&width=256&height=256&layer=img&tilematrix={z}&tilerow={y}&tilecol={x}',
			
 
				+                    ],
			
 
				+                    tileSize: 256
			
 
				+                  },
			
 
				+                  labelLayer: {
			
 
				+                    type: 'raster',
			
 
				+                    tiles: [
			
 
				+                      'https://t0.tianditu.gov.cn/cia_w/wmts?tk=1d109683f4d84198e37a38c442d68311&service=WMTS&request=GetTile&version=1.0.0&style=default&tilematrixSet=w&format=tiles&width=256&height=256&layer=cia&tilematrix={z}&tilerow={y}&tilecol={x}',
			
 
				+                    ],
			
 
				+                    tileSize: 256
			
 
				+                  }
			
 
				+                },
			
 
				+                layers: [
			
 
				+                  {
			
 
				+                    id: 'baseLayer',
			
 
				+                    type: 'raster',
			
 
				+                    source: 'baseLayer',
			
 
				+                    minzoom: 0,
			
 
				+                    maxzoom: 18
			
 
				+                  },
			
 
				+                  {
			
 
				+                    id: 'labelLayer',
			
 
				+                    type: 'raster',
			
 
				+                    source: 'labelLayer',
			
 
				+                    minzoom: 0,
			
 
				+                    maxzoom: 18
			
 
				+                  }
			
 
				+                ]
			
 
				+              },
			
 
				+              renderWorldCopies: false
			
 
				+            }
			
 
				+          };
			
 
				+        }
			
 
				+      });
			
 
				+    </script>
			
 
				+  </body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_tianditu_search_vue.html
+++ b/public/supermap/examples/component/components_tianditu_search_vue.html
@@ -0,0 +1,81 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+  <head>
			
 
				+    <meta charset="UTF-8" />
			
 
				+    <title data-i18n="resources.title_componentsTianditu_search_Vue"></title>
			
 
				+    <script type="text/javascript" include="vue" src="../js/include-web.js"></script>
			
 
				+    <script include="iclient-mapboxgl-vue,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+    <style>
			
 
				+     #main {
			
 
				+        margin: 0 auto;
			
 
				+        width: 100%;
			
 
				+        height: 100%;
			
 
				+      }
			
 
				+    </style>
			
 
				+  </head>
			
 
				+
			
 
				+  <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;">
			
 
				+
			
 
				+      <div id="main">
			
 
				+        <sm-web-map :map-options="mapOptions">
			
 
				+          <!-- 天地图搜索组件：sm-tdt-search -->
			
 
				+          <sm-tdt-search position="top-left" :data="{tk:tk}"></sm-tdt-search>
			
 
				+        </sm-web-map>
			
 
				+      </div>
			
 
				+
			
 
				+
			
 
				+    <script>
			
 
				+      new Vue({
			
 
				+        el: '#main',
			
 
				+        data() {
			
 
				+          return {
			
 
				+            tk: '1d109683f4d84198e37a38c442d68311',
			
 
				+            mapOptions: {
			
 
				+              center: [126.64318, 45.74141],
			
 
				+              zoom: 11,
			
 
				+              style: {
			
 
				+                version: 8,
			
 
				+                sources: {
			
 
				+                  baseLayer: {
			
 
				+                    type: 'raster',
			
 
				+                    tiles: [
			
 
				+                      'https://t0.tianditu.gov.cn/img_w/wmts?tk=1d109683f4d84198e37a38c442d68311&service=WMTS&request=GetTile&version=1.0.0&style=default&tilematrixSet=w&format=tiles&width=256&height=256&layer=img&tilematrix={z}&tilerow={y}&tilecol={x}',
			
 
				+                    ],
			
 
				+                    tileSize: 256
			
 
				+                  },
			
 
				+                  labelLayer: {
			
 
				+                    type: 'raster',
			
 
				+                    tiles: [
			
 
				+                      'https://t0.tianditu.gov.cn/cia_w/wmts?tk=1d109683f4d84198e37a38c442d68311&service=WMTS&request=GetTile&version=1.0.0&style=default&tilematrixSet=w&format=tiles&width=256&height=256&layer=cia&tilematrix={z}&tilerow={y}&tilecol={x}',
			
 
				+                    ],
			
 
				+                    tileSize: 256
			
 
				+                  }
			
 
				+                },
			
 
				+                layers: [
			
 
				+                  {
			
 
				+                    id: 'baseLayer',
			
 
				+                    type: 'raster',
			
 
				+                    source: 'baseLayer',
			
 
				+                    minzoom: 0,
			
 
				+                    maxzoom: 18
			
 
				+                  },
			
 
				+                  {
			
 
				+                    id: 'labelLayer',
			
 
				+                    type: 'raster',
			
 
				+                    source: 'labelLayer',
			
 
				+                    minzoom: 0,
			
 
				+                    maxzoom: 18
			
 
				+                  }
			
 
				+                ]
			
 
				+              },
			
 
				+              renderWorldCopies: false
			
 
				+            }
			
 
				+          };
			
 
				+        }
			
 
				+      });
			
 
				+    </script>
			
 
				+  </body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_tianditu_switch_vue.html
+++ b/public/supermap/examples/component/components_tianditu_switch_vue.html
@@ -0,0 +1,82 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+  <head>
			
 
				+    <meta charset="UTF-8" />
			
 
				+    <title data-i18n="resources.title_componentsTianditu_switch_Vue"></title>
			
 
				+    <script type="text/javascript" include="vue" src="../js/include-web.js"></script>
			
 
				+    <script
			
 
				+      include="iclient-mapboxgl-vue,mapbox-gl-enhance"
			
 
				+      src="../../dist/mapboxgl/include-mapboxgl.js"
			
 
				+    ></script>
			
 
				+    <style>
			
 
				+      #main {
			
 
				+        margin: 0 auto;
			
 
				+        width: 100%;
			
 
				+        height: 100%;
			
 
				+      }
			
 
				+    </style>
			
 
				+  </head>
			
 
				+
			
 
				+  <body style=" margin: 0;overflow: hidden;background: #fff;color:#000;width: 100%;height:100%;">
			
 
				+    <div id="main">
			
 
				+      <sm-web-map :map-options="mapOptions">
			
 
				+        <!-- 天地图切换组件：sm-tdt-map-switcher -->
			
 
				+        <sm-tdt-map-switcher :data="{tk:tk}" :collapsed="false"></sm-tdt-map-switcher>
			
 
				+      </sm-web-map>
			
 
				+    </div>
			
 
				+
			
 
				+    <script>
			
 
				+      new Vue({
			
 
				+        el: '#main',
			
 
				+        data() {
			
 
				+          return {
			
 
				+            mapOptions: {
			
 
				+              center: [126.64318, 45.74141],
			
 
				+              zoom: 11,
			
 
				+              style: {
			
 
				+                version: 8,
			
 
				+                sources: {
			
 
				+                  baseLayer: {
			
 
				+                    type: 'raster',
			
 
				+                    tiles: [
			
 
				+                      'https://t0.tianditu.gov.cn/img_w/wmts?tk=1d109683f4d84198e37a38c442d68311&service=WMTS&request=GetTile&version=1.0.0&style=default&tilematrixSet=w&format=tiles&width=256&height=256&layer=img&tilematrix={z}&tilerow={y}&tilecol={x}'
			
 
				+                    ],
			
 
				+                    tileSize: 256
			
 
				+                  },
			
 
				+                  labelLayer: {
			
 
				+                    type: 'raster',
			
 
				+                    tiles: [
			
 
				+                      'https://t0.tianditu.gov.cn/cia_w/wmts?tk=1d109683f4d84198e37a38c442d68311&service=WMTS&request=GetTile&version=1.0.0&style=default&tilematrixSet=w&format=tiles&width=256&height=256&layer=cia&tilematrix={z}&tilerow={y}&tilecol={x}'
			
 
				+                    ],
			
 
				+                    tileSize: 256
			
 
				+                  }
			
 
				+                },
			
 
				+                layers: [
			
 
				+                  {
			
 
				+                    id: 'baseLayer',
			
 
				+                    type: 'raster',
			
 
				+                    source: 'baseLayer',
			
 
				+                    minzoom: 0,
			
 
				+                    maxzoom: 18
			
 
				+                  },
			
 
				+                  {
			
 
				+                    id: 'labelLayer',
			
 
				+                    type: 'raster',
			
 
				+                    source: 'labelLayer',
			
 
				+                    minzoom: 0,
			
 
				+                    maxzoom: 18
			
 
				+                  }
			
 
				+                ]
			
 
				+              },
			
 
				+              renderWorldCopies: false
			
 
				+            },
			
 
				+            tk: '1d109683f4d84198e37a38c442d68311'
			
 
				+          };
			
 
				+        }
			
 
				+      });
			
 
				+    </script>
			
 
				+  </body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_tianditu_vue.html
+++ b/public/supermap/examples/component/components_tianditu_vue.html
@@ -0,0 +1,104 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+  <head>
			
 
				+    <meta charset="UTF-8" />
			
 
				+    <title data-i18n="resources.title_componentsTianditu_Vue"></title>
			
 
				+    <script type="text/javascript" include="vue" src="../js/include-web.js"></script>
			
 
				+    <script
			
 
				+      include="iclient-mapboxgl-vue,mapbox-gl-enhance"
			
 
				+      src="../../dist/mapboxgl/include-mapboxgl.js"
			
 
				+    ></script>
			
 
				+    <style>
			
 
				+      #main {
			
 
				+        margin: 0 auto;
			
 
				+        width: 100%;
			
 
				+        height: 100%;
			
 
				+      }
			
 
				+    </style>
			
 
				+  </head>
			
 
				+  <body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%;">
			
 
				+    <div id="main">
			
 
				+      <sm-web-map :map-options="mapOptions"></sm-web-map>
			
 
				+    </div>
			
 
				+    <script>
			
 
				+      new Vue({
			
 
				+        el: '#main',
			
 
				+        data() {
			
 
				+          return {
			
 
				+            mapOptions: {
			
 
				+              center: [126.64318, 45.74141],
			
 
				+              zoom: 11,
			
 
				+              style: {
			
 
				+                version: 8,
			
 
				+                sources: {
			
 
				+                  baseLayer_img: {
			
 
				+                    type: 'raster',
			
 
				+                    tiles: [
			
 
				+                      'https://t0.tianditu.gov.cn/img_w/wmts?tk=1d109683f4d84198e37a38c442d68311&service=WMTS&request=GetTile&version=1.0.0&style=default&tilematrixSet=w&format=tiles&width=256&height=256&layer=img&tilematrix={z}&tilerow={y}&tilecol={x}'
			
 
				+                    ],
			
 
				+                    tileSize: 256
			
 
				+                  },
			
 
				+                  baseLayer_vec: {
			
 
				+                    type: 'raster',
			
 
				+                    tiles: [
			
 
				+                      'https://t0.tianditu.gov.cn/vec_w/wmts?tk=1d109683f4d84198e37a38c442d68311&service=WMTS&request=GetTile&version=1.0.0&style=default&tilematrixSet=w&format=tiles&width=256&height=256&layer=vec&tilematrix={z}&tilerow={y}&tilecol={x}'
			
 
				+                    ],
			
 
				+                    tileSize: 256
			
 
				+                  },
			
 
				+                  labelLayer_img: {
			
 
				+                    type: 'raster',
			
 
				+                    tiles: [
			
 
				+                      'https://t0.tianditu.gov.cn/cia_w/wmts?tk=1d109683f4d84198e37a38c442d68311&service=WMTS&request=GetTile&version=1.0.0&style=default&tilematrixSet=w&format=tiles&width=256&height=256&layer=cia&tilematrix={z}&tilerow={y}&tilecol={x}'
			
 
				+                    ],
			
 
				+                    tileSize: 256
			
 
				+                  },
			
 
				+                  labelLayer_vec: {
			
 
				+                    type: 'raster',
			
 
				+                    tiles: [
			
 
				+                      'https://t0.tianditu.gov.cn/cva_w/wmts?tk=1d109683f4d84198e37a38c442d68311&service=WMTS&request=GetTile&version=1.0.0&style=default&tilematrixSet=w&format=tiles&width=256&height=256&layer=cva&tilematrix={z}&tilerow={y}&tilecol={x}'
			
 
				+                    ],
			
 
				+                    tileSize: 256
			
 
				+                  }
			
 
				+                },
			
 
				+                layers: [
			
 
				+                  {
			
 
				+                    id: 'baseLayer_img',
			
 
				+                    type: 'raster',
			
 
				+                    source: 'baseLayer_img',
			
 
				+                    minzoom: 0,
			
 
				+                    maxzoom: 12
			
 
				+                  },
			
 
				+                  {
			
 
				+                    id: 'baseLayer_vec',
			
 
				+                    type: 'raster',
			
 
				+                    source: 'baseLayer_vec',
			
 
				+                    minzoom: 12,
			
 
				+                    maxzoom: 18
			
 
				+                  },
			
 
				+                  {
			
 
				+                    id: 'labelLayer_img',
			
 
				+                    type: 'raster',
			
 
				+                    source: 'labelLayer_img',
			
 
				+                    minzoom: 0,
			
 
				+                    maxzoom: 12
			
 
				+                  },
			
 
				+                  {
			
 
				+                    id: 'labelLayer_vec',
			
 
				+                    type: 'raster',
			
 
				+                    source: 'labelLayer_vec',
			
 
				+                    minzoom: 12,
			
 
				+                    maxzoom: 18
			
 
				+                  }
			
 
				+                ]
			
 
				+              },
			
 
				+              renderWorldCopies: false
			
 
				+            }
			
 
				+          };
			
 
				+        }
			
 
				+      });
			
 
				+    </script>
			
 
				+  </body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_time_line_vue.html
+++ b/public/supermap/examples/component/components_time_line_vue.html
@@ -0,0 +1,398 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+    <head>
			
 
				+        <meta charset="UTF-8" />
			
 
				+        <title data-i18n="resources.title_componentsTimeLine_Vue"></title>
			
 
				+        <script type="text/javascript" include="vue,jquery,papaparse" src="../js/include-web.js"></script>
			
 
				+        <script
			
 
				+            include="echarts-vue,iclient-mapboxgl-vue,mapbox-gl-enhance"
			
 
				+            src="../../dist/mapboxgl/include-mapboxgl.js"
			
 
				+        ></script>
			
 
				+        <style>
			
 
				+            #main {
			
 
				+                margin: 0 auto;
			
 
				+                width: 100%;
			
 
				+                height: 100%;
			
 
				+            }
			
 
				+            .sm-component-time-line {
			
 
				+                position: absolute;
			
 
				+                bottom: 20px;
			
 
				+                width: 100%;
			
 
				+                z-index: 1000;
			
 
				+            }
			
 
				+            .sm-component-text {
			
 
				+              position: absolute;
			
 
				+              top: 20px;
			
 
				+              display: flex;
			
 
				+              width: 100%;
			
 
				+              height:40px;
			
 
				+              margin: 0 auto;
			
 
				+              background: transparent !important;
			
 
				+              z-index: 1000;
			
 
				+            }
			
 
				+            .sm-component-text span {
			
 
				+              margin: 0 auto;
			
 
				+            }
			
 
				+            .chart-wrapper {
			
 
				+                position: absolute;
			
 
				+                bottom: 100px;
			
 
				+                left: 50px;
			
 
				+                width:600px;
			
 
				+                z-index: 1000;
			
 
				+            }
			
 
				+            .chart-wrapper .sm-component-text {
			
 
				+              position: static;
			
 
				+              height: 30px;
			
 
				+            }
			
 
				+            .sm-component-chart {
			
 
				+                width:600px;
			
 
				+                height: 300px;
			
 
				+            }
			
 
				+            .sm-component-chart .sm-component-collapse-card__content {
			
 
				+                width:600px;
			
 
				+                height: 300px;
			
 
				+            }
			
 
				+        </style>
			
 
				+    </head>
			
 
				+
			
 
				+    <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
			
 
				+        <div id="main">
			
 
				+        <sm-text  title="2005到2016地震发生情况" :font-style='{ fontSize: "27px", fontWeight: 700, textAlign: "center"}' text-color="#e9e9e9"></sm-text>
			
 
				+        
			
 
				+            <sm-web-map :map-options="mapOptions">
			
 
				+                <sm-heatmap-layer :data="mapData" :layer-style="heatMapStyle" ></sm-heatmap-layer>
			
 
				+            </sm-web-map>
			
 
				+            <div class="chart-wrapper">
			
 
				+              <sm-text :title="chartTitle" :font-style='{ fontSize: "16px", textAlign: "center"}' text-color="#e9e9e9"></sm-text>
			
 
				+              <sm-chart icon-class="" v-bind="options" :dataset="dataset"  background="rgba(255, 255, 255, 0)"></sm-chart>
			
 
				+            </div>
			
 
				+            <sm-time-line :data="data" :play-interval="2000" :control-style="controlStyle" :checkpoint-style="controlStyle" :label="controlStyle"  @timelinechanged="timelineChanged" background="rgba(255, 255, 255, 0)"></sm-time-line>
			
 
				+        </div>
			
 
				+
			
 
				+        <script>
			
 
				+        var heatMapStyle = new SuperMap.Components.commontypes.HeatMapStyle({
			
 
				+                   "heatmap-weight": [
			
 
				+                      "interpolate",
			
 
				+                      ["linear"],
			
 
				+                      ["get", "value"],
			
 
				+                      6, 2,
			
 
				+                      9, 18
			
 
				+                    ],
			
 
				+                    "heatmap-intensity": ["interpolate", ["linear"], ["zoom"], 0, 1, 9, 3],
			
 
				+                    "heatmap-color": [
			
 
				+                        "interpolate",
			
 
				+                        ["linear"],
			
 
				+                        ["heatmap-density"],
			
 
				+                        0,
			
 
				+                        "rgba(33,102,172,0)",
			
 
				+                        0.2,
			
 
				+                        "#333eb5",
			
 
				+
			
 
				+                        0.5,
			
 
				+                        "green",
			
 
				+                        0.9,
			
 
				+                        "yellow",
			
 
				+                        1,
			
 
				+                        "red",
			
 
				+                    ],
			
 
				+                    "heatmap-radius": 16,
			
 
				+            });
			
 
				+            new Vue({
			
 
				+                el: '#main',
			
 
				+                data() {
			
 
				+                    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> ";
			
 
				+                    return {
			
 
				+                        chartTitle: '2005年1-12月地震次数',
			
 
				+                        options: {
			
 
				+                            seriesType: 'bar',
			
 
				+                            datasetOptions: [
			
 
				+                                {
			
 
				+                                    seriesType: 'bar',
			
 
				+                                    xField: 'date',
			
 
				+                                    yField: 'value',
			
 
				+                                    sort: 'unsort'
			
 
				+                                }
			
 
				+                            ],
			
 
				+                            options: {
			
 
				+                                yAxis: {
			
 
				+                                    name: '',
			
 
				+                                    axisLine: {
			
 
				+                                        color: '#90979c',
			
 
				+                                        lineStyle: { color: '#90979c' }
			
 
				+                                    },
			
 
				+                                    axisLabel: {
			
 
				+                                        color: '#90979c',
			
 
				+                                        rotate: 0,
			
 
				+                                        fontFamily: 'MicrosoftYaHei'
			
 
				+                                    },
			
 
				+                                    show: true,
			
 
				+                                    splitLine: {
			
 
				+                                        lineStyle: {
			
 
				+                                            width: 0.3,
			
 
				+                                            type: 'solid'
			
 
				+                                        },
			
 
				+                                        show: false
			
 
				+                                    },
			
 
				+                                    splitArea: {
			
 
				+                                        show: false
			
 
				+                                    },
			
 
				+                                    nameGap: 5,
			
 
				+                                    nameLocation: 'end',
			
 
				+                                    type: 'value',
			
 
				+                                    nameTextStyle: {
			
 
				+                                        padding: [0, 0, 5, 0]
			
 
				+                                    }
			
 
				+                                },
			
 
				+                                xAxis: {
			
 
				+                                    data: [],
			
 
				+                                    axisLine: {
			
 
				+                                        color: '#90979c',
			
 
				+                                        lineStyle: { color: '#90979c' }
			
 
				+                                    },
			
 
				+                                    axisLabel: {
			
 
				+                                        rotate: 0,
			
 
				+                                        color: '#90979c',
			
 
				+                                        fontFamily: 'MicrosoftYaHei'
			
 
				+                                    },
			
 
				+                                    show: true,
			
 
				+                                    name: '',
			
 
				+                                    axisTick: {
			
 
				+                                        alignWithLabel: true
			
 
				+                                    },
			
 
				+                                    splitLine: {
			
 
				+                                        lineStyle: {
			
 
				+                                            type: 'solid'
			
 
				+                                        },
			
 
				+                                        show: false
			
 
				+                                    },
			
 
				+                                    nameGap: 2,
			
 
				+                                    nameLocation: 'end',
			
 
				+                                    type: 'category'
			
 
				+                                },
			
 
				+                                grid: {
			
 
				+                                    left: 50,
			
 
				+                                    right: 50,
			
 
				+                                    top: 10,
			
 
				+                                    bottom: 35
			
 
				+                                },
			
 
				+                                series: [
			
 
				+                                    {
			
 
				+                                        name: '次数',
			
 
				+                                        type: 'bar',
			
 
				+                                        itemStyle: {
			
 
				+                                            normal: {
			
 
				+                                                color: new echarts.graphic.LinearGradient(
			
 
				+                                                    0, 0, 0, 1,
			
 
				+                                                    [
			
 
				+                                                        { offset: 0, color: 'red' },
			
 
				+                                                        { offset: 0.5, color: 'yellow' },
			
 
				+                                                        { offset: 1, color: 'red' }
			
 
				+                                                    ]
			
 
				+                                                ),
			
 
				+                                                barBorderRadius: 15
			
 
				+                                            },
			
 
				+                                            emphasis: {
			
 
				+                                                color: new echarts.graphic.LinearGradient(
			
 
				+                                                    0, 0, 0, 1,
			
 
				+                                                    [
			
 
				+                                                        { offset: 0, color: 'red' },
			
 
				+                                                        { offset: 0.7, color: 'yellow' },
			
 
				+                                                        { offset: 1, color: 'red' }
			
 
				+                                                    ]
			
 
				+                                                )
			
 
				+                                            },
			
 
				+                                        },
			
 
				+                                        label:{
			
 
				+                                          normal:{
			
 
				+                                            show: true,
			
 
				+                                            position:"top",
			
 
				+                                            smart:false,
			
 
				+                                            textStyle:{
			
 
				+                                              color: '#e9e9e9'
			
 
				+                                            }
			
 
				+                                          }
			
 
				+                                        },
			
 
				+                                        barWidth: 20,
			
 
				+                                        bargap: 5
			
 
				+                                    }
			
 
				+                                ],
			
 
				+                                textStyle: {
			
 
				+                                    fontFamily: 'Microsoft YaHei Light'
			
 
				+                                }
			
 
				+                            }
			
 
				+                        },
			
 
				+                        dataset: {
			
 
				+                            maxFeatures: 20,
			
 
				+                            url: '',
			
 
				+                            type: 'geoJSON',
			
 
				+                            geoJSON: {
			
 
				+                                type: 'FeatureCollection',
			
 
				+                                features: []
			
 
				+                            }
			
 
				+                        },
			
 
				+                        data: [
			
 
				+                            '2005',
			
 
				+                            '2006',
			
 
				+                            '2007',
			
 
				+                            '2008',
			
 
				+                            '2009',
			
 
				+                            '2010',
			
 
				+                            '2011',
			
 
				+                            '2012',
			
 
				+                            '2013',
			
 
				+                            '2014',
			
 
				+                            '2015',
			
 
				+                            '2016'
			
 
				+                        ],
			
 
				+                        controlStyle:{color:'#fd381b', borderColor: '#fd381b'},
			
 
				+                        mapData: {
			
 
				+                            type: 'FeatureCollection',
			
 
				+                            features: null
			
 
				+                        },
			
 
				+                        heatMapStyle:heatMapStyle,
			
 
				+                        mapOptions: {
			
 
				+                            container: 'map',
			
 
				+                            style: {
			
 
				+                                version: 8,
			
 
				+                                sources: {
			
 
				+                                    'raster-tiles': {
			
 
				+                                        attribution: attribution,
			
 
				+                                        type: 'raster',
			
 
				+                                        tiles: [
			
 
				+                                            host +
			
 
				+                                                '/iserver/services/map-china400/rest/maps/ChinaDark/zxyTileImage.png?z={z}&x={x}&y={y}'
			
 
				+                                        ],
			
 
				+                                        tileSize: 256
			
 
				+                                    }
			
 
				+                                },
			
 
				+                                layers: [
			
 
				+                                    {
			
 
				+                                        id: 'simple-tiles',
			
 
				+                                        type: 'raster',
			
 
				+                                        source: 'raster-tiles',
			
 
				+                                        minzoom: 0,
			
 
				+                                        maxzoom: 22
			
 
				+                                    }
			
 
				+                                ]
			
 
				+                            },
			
 
				+                            center: [ 102.57, 31.71],
			
 
				+                            zoom: 3.3
			
 
				+                        }
			
 
				+                    };
			
 
				+                },
			
 
				+                created() {
			
 
				+                    this.requestData();
			
 
				+                },
			
 
				+                methods: {
			
 
				+                    requestData() {
			
 
				+                        var _this = this;
			
 
				+                        $.get('../data/chinaEarthquake.csv', function(csvstr) {
			
 
				+                            var result = Papa.parse(csvstr, { skipEmptyLines: true, header: true }).data;
			
 
				+                            var data = _this.createChartData(result);
			
 
				+
			
 
				+                            _this.chartData = data.chartData;
			
 
				+                            _this.heatPoints = data.heatPoints;
			
 
				+                            var year = _this.data[0];
			
 
				+                            var chartFeatures = _this.crateChartFeatures(_this.chartData, year);
			
 
				+                            var heatFeatures = _this.createHeatMapFeatures(_this.heatPoints, year);
			
 
				+                            _this.dataset.geoJSON = {
			
 
				+                                type: 'FeatureCollection',
			
 
				+                                features: chartFeatures
			
 
				+                            };
			
 
				+                            _this.mapData = {
			
 
				+                                type: 'FeatureCollection',
			
 
				+                                features: heatFeatures
			
 
				+                            };
			
 
				+                        });
			
 
				+                    },
			
 
				+                    createChartData(result) {
			
 
				+                        var chartData = {};
			
 
				+                        var heatPoints = [];
			
 
				+                        for (var i = 0; i < result.length; i++) {
			
 
				+                            var item = result && result[i];
			
 
				+
			
 
				+                            if (!item || !item.date) {
			
 
				+                                continue;
			
 
				+                            }
			
 
				+                            var date = new Date(item.date);
			
 
				+                            var year = date.getFullYear();
			
 
				+                            var month = date.getMonth() + 1;
			
 
				+                            var point = [parseFloat(item.X), parseFloat(item.Y), parseFloat(item.level)];
			
 
				+                            //每一年的地震数据
			
 
				+                            if (heatPoints[year]) {
			
 
				+                                heatPoints[year].push(point);
			
 
				+                            } else {
			
 
				+                                heatPoints[year] = [point];
			
 
				+                            }
			
 
				+                            //每年每发生的地震次数
			
 
				+                            if (!chartData[year]) {
			
 
				+                                chartData[year] = {};
			
 
				+                                chartData[year][month] = 1;
			
 
				+                            } else {
			
 
				+                                if (!chartData[year][month]) {
			
 
				+                                    chartData[year][month] = 1;
			
 
				+                                } else {
			
 
				+                                    chartData[year][month]++;
			
 
				+                                }
			
 
				+                            }
			
 
				+                        }
			
 
				+                        return { chartData: chartData, heatPoints: heatPoints };
			
 
				+                    },
			
 
				+                    crateChartFeatures(chartData, year) {
			
 
				+                        var features = [];
			
 
				+                        var data = chartData[year];
			
 
				+                        for (var month in data) {
			
 
				+                            var date = parseInt(month / 10) === 0 ? '0' + month : month;
			
 
				+                            var feature = {
			
 
				+                                type: 'Feature',
			
 
				+                                properties: { value: data[month], date: date }
			
 
				+                            };
			
 
				+                            features.push(feature);
			
 
				+                        }
			
 
				+                        return features;
			
 
				+                    },
			
 
				+                    createHeatMapFeatures(heatPoints, year) {
			
 
				+                        var features = [];
			
 
				+                        var data = heatPoints[year];
			
 
				+                        for (var i = 0; i < data.length; i++) {
			
 
				+                            if (data[i] && data[i][1] <= 85) {
			
 
				+                                var feature = {
			
 
				+                                    type: 'Feature',
			
 
				+                                    geometry: {
			
 
				+                                        coordinates: [parseFloat(data[i][0]), parseFloat(data[i][1])],
			
 
				+                                        type: 'Point'
			
 
				+                                    },
			
 
				+                                    properties: { value: data[i][2], id: i }
			
 
				+                                };
			
 
				+                                features.push(feature);
			
 
				+                            }
			
 
				+                        }
			
 
				+                        return features;
			
 
				+                    },
			
 
				+                    timelineChanged(val) {
			
 
				+                        var currentIndex = val.currentIndex;
			
 
				+                        var year = this.data[currentIndex];
			
 
				+                        var chartFeatures = this.crateChartFeatures(this.chartData, year);
			
 
				+                        var heatFeatures = this.createHeatMapFeatures(this.heatPoints, year);
			
 
				+                        this.dataset.geoJSON = {
			
 
				+                            type: 'FeatureCollection',
			
 
				+                            features: chartFeatures
			
 
				+                        };
			
 
				+                        this.mapData = {
			
 
				+                            type: 'FeatureCollection',
			
 
				+                            features: heatFeatures
			
 
				+                        };
			
 
				+                        this.chartTitle = year + '年1-12月地震次数'
			
 
				+                    }
			
 
				+                }
			
 
				+            });
			
 
				+        </script>
			
 
				+    </body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_timeline_cloud
+++ b/public/supermap/examples/component/components_timeline_cloud
@@ -0,0 +1,442 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2020 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+    <head>
			
 
				+        <meta charset="UTF-8" />
			
 
				+        <title data-i18n="resources.title_componentsTimeLineCloud_Vue"></title>
			
 
				+        <script type="text/javascript" include="vue,jquery" src="../js/include-web.js"></script>
			
 
				+        <script
			
 
				+            include="echarts-vue,iclient-mapboxgl-vue,mapbox-gl-enhance"
			
 
				+            src="../../dist/mapboxgl/include-mapboxgl.js"
			
 
				+        ></script>
			
 
				+        <style>
			
 
				+            #main {
			
 
				+                margin: 0 auto;
			
 
				+                width: 100%;
			
 
				+                height: 100%;
			
 
				+            }
			
 
				+            .sm-component-time-line {
			
 
				+                position: absolute;
			
 
				+                bottom: 20px;
			
 
				+                width: 100%;
			
 
				+                height: 80px;
			
 
				+                z-index: 1000;
			
 
				+            }
			
 
				+            .sm-cloud-info {
			
 
				+                position: absolute;
			
 
				+                right: 10px;
			
 
				+                top: 20px;
			
 
				+                width: 290px;
			
 
				+                height: 310px;
			
 
				+                z-index: 1000;
			
 
				+            }
			
 
				+            .sm-header {
			
 
				+                display: inline-flex;
			
 
				+                align-items: center;
			
 
				+                height: 25px;
			
 
				+            }
			
 
				+            .sm-header-style {
			
 
				+                width: 6px;
			
 
				+                height: 16px;
			
 
				+                background: #fff;
			
 
				+            }
			
 
				+            .sm-current-info {
			
 
				+                display: inline-flex;
			
 
				+                align-items: center;
			
 
				+            }
			
 
				+            .sm-other-info {
			
 
				+                width: 180px;
			
 
				+            }
			
 
				+            .sm-temperature {
			
 
				+                display: inline-flex;
			
 
				+                align-items: center;
			
 
				+                width: 120px;
			
 
				+            }
			
 
				+            .sm-other-info div {
			
 
				+                display: inline-flex;
			
 
				+                justify-content: center;
			
 
				+                align-items: center;
			
 
				+            }
			
 
				+            .sm-other-info .sm-component-text {
			
 
				+                justify-content: flex-start;
			
 
				+            }
			
 
				+
			
 
				+            .sm-today-weather {
			
 
				+                display: inline-flex;
			
 
				+                justify-content: center;
			
 
				+                align-items: center;
			
 
				+                width: 100%;
			
 
				+            }
			
 
				+            .sm-day-info {
			
 
				+                width: 130;
			
 
				+                height: 110px;
			
 
				+            }
			
 
				+            .sm-day-info > div {
			
 
				+                display: flex;
			
 
				+                justify-content: center;
			
 
				+            }
			
 
				+            .sm-day-info .sm-component-image {
			
 
				+                display: block;
			
 
				+                margin: 0 auto;
			
 
				+            }
			
 
				+            .sm-today-rain {
			
 
				+                position: absolute;
			
 
				+                bottom: -10px;
			
 
				+                display: flex;
			
 
				+                justify-content: center;
			
 
				+                width: 100%;
			
 
				+            }
			
 
				+        </style>
			
 
				+    </head>
			
 
				+
			
 
				+    <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
			
 
				+        <div id="main">
			
 
				+            <sm-web-map
			
 
				+                server-url="https://www.supermapol.com"
			
 
				+                :map-id="235407763"
			
 
				+                :tianditu-key="tiandituKey"
			
 
				+                :loading="loading"
			
 
				+                @load="load"
			
 
				+            ></sm-web-map>
			
 
				+            <sm-time-line
			
 
				+                ref="timeLine"
			
 
				+                :data="data"
			
 
				+                :play-interval="1000"
			
 
				+                :next-enable="nextEnable"
			
 
				+                :label="label"
			
 
				+                @timelinechanged="timelineChanged"
			
 
				+                @timelineplaychanged="timelineplaychanged"
			
 
				+            ></sm-time-line>
			
 
				+
			
 
				+            <sm-border type="border6" class="sm-cloud-info">
			
 
				+                <div class="sm-cloud-info__content">
			
 
				+                    <div class="sm-header">
			
 
				+                        <div class="sm-header-style"></div>
			
 
				+                        <sm-text title="当前实况" :font-style="{fontSize: '18px', fontWeight: 600}"></sm-text>
			
 
				+                    </div>
			
 
				+                    <div class="sm-current-info">
			
 
				+                        <div class="sm-temperature">
			
 
				+                            <sm-image src="./img/cloud/icon_wendu.png" style="width:36px;height:41px"></sm-image>
			
 
				+                            <sm-text title="27.2℃"></sm-text>
			
 
				+                        </div>
			
 
				+                        <div class="sm-other-info">
			
 
				+                            <div>
			
 
				+                                <sm-image src="./img/cloud/icon_rain.png" style="width:12px;height:12px"></sm-image>
			
 
				+                                <sm-text title="降水：1mm"></sm-text>
			
 
				+                            </div>
			
 
				+                            <div>
			
 
				+                                <sm-image src="./img/cloud/icon_sidu.png" style="width:12px;height:12px"></sm-image>
			
 
				+                                <sm-text title="相对湿度:81%"></sm-text>
			
 
				+                            </div>
			
 
				+                            <div>
			
 
				+                                <sm-image src="./img/cloud/icon_wind.png" style="width:12px;height:12px"></sm-image>
			
 
				+                                <sm-text title="风向风速：东偏北一级"></sm-text>
			
 
				+                            </div>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                    <div class="sm-header">
			
 
				+                        <div class="sm-header-style"></div>
			
 
				+                        <sm-text title="今日天气" :font-style="{fontSize: '18px', fontWeight: 600}"></sm-text>
			
 
				+                    </div>
			
 
				+                    <div class="sm-today-weather">
			
 
				+                        <div class="sm-day-info">
			
 
				+                            <sm-text title="今日白天" :font-style="{textAlign: 'center'}"></sm-text>
			
 
				+                            <sm-image src="./img/cloud/cloud.png" style="width:45px;height:45px"></sm-image>
			
 
				+                            <sm-text title="小雨" :font-style="{textAlign: 'center'}"></sm-text>
			
 
				+                            <div><sm-text title="32.5℃ 南偏西1级"></sm-text></div>
			
 
				+                        </div>
			
 
				+                        <div class="sm-day-info">
			
 
				+                            <sm-text title="今日夜间" :font-style="{textAlign: 'center'}"></sm-text>
			
 
				+                            <sm-image src="./img/cloud/cloud.png" style="width:45px;height:45px"></sm-image>
			
 
				+                            <sm-text title="小雨" :font-style="{textAlign: 'center'}"></sm-text>
			
 
				+                            <div><sm-text title="24.2℃ 西偏北1级"></sm-text></div>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                    <div class="sm-today-rain">
			
 
				+                        <sm-text title="24小时降水：3.8mm"></sm-text>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+            </sm-border>
			
 
				+        </div>
			
 
				+        <script>
			
 
				+            var label = [
			
 
				+                '7月20日22点',
			
 
				+                '7月20日23点',
			
 
				+                '7月21日0点',
			
 
				+                '7月21日1点',
			
 
				+                '7月21日2点',
			
 
				+                '7月21日3点',
			
 
				+                '7月21日4点',
			
 
				+                '7月21日5点',
			
 
				+                '7月21日6点',
			
 
				+                '7月21日6点'
			
 
				+            ];
			
 
				+            new Vue({
			
 
				+                el: '#main',
			
 
				+                data() {
			
 
				+                    return {
			
 
				+                        mapStatus: [],
			
 
				+                        mapQueue: [],
			
 
				+                        loading: false,
			
 
				+                        readyNext: true,
			
 
				+                        nextEnable: false,
			
 
				+                        tiandituKey: 'f16b023603de8ae8fdd09a2c0feb1ec2',
			
 
				+                        tooltip: {
			
 
				+                            formatter: function(params) {
			
 
				+                                console.log('params', params);
			
 
				+                                return params.name;
			
 
				+                            }
			
 
				+                        },
			
 
				+                        data: [
			
 
				+                            { name: '7月20日22点', value: 'de4dac90d63311ea8d11cb07464492f0' },
			
 
				+                            { name: '7月20日23点', value: 'deb37340d63311ea8d11cb07464492f0' },
			
 
				+                            { name: '7月21日0点', value: 'df03b620d63311ea8d11cb07464492f0' },
			
 
				+                            { name: '7月21日1点', value: 'df20b400d63311ea8d11cb07464492f0' },
			
 
				+                            { name: '7月21日2点', value: 'df55cdc0d63311ea8d11cb07464492f0' },
			
 
				+                            { name: '7月21日3点', value: 'df9b1420d63311ea8d11cb07464492f0' },
			
 
				+                            { name: '7月21日4点', value: 'dfdf2200d63311ea8d11cb07464492f0' },
			
 
				+                            { name: '7月21日5点', value: '03df7100d63411ea8d11cb07464492f0' },
			
 
				+                            { name: '7月21日6点', value: '64310670d7ad11eab208537bd0e9be18' },
			
 
				+                            { name: '7月21日6点', value: '7de12b80daa111eab51dd76b96acbea5' }
			
 
				+                        ],
			
 
				+                        mapDatas: {
			
 
				+                            de4dac90d63311ea8d11cb07464492f0: {
			
 
				+                                title: '气象云202007202200',
			
 
				+                                id: 235407763,
			
 
				+                                url: 'https://www.supermapol.com',
			
 
				+                                withCredentials: false
			
 
				+                            },
			
 
				+                            deb37340d63311ea8d11cb07464492f0: {
			
 
				+                                title: '气象云202007202300',
			
 
				+                                id: 1219321091,
			
 
				+                                url: 'https://www.supermapol.com',
			
 
				+                                withCredentials: false
			
 
				+                            },
			
 
				+                            df03b620d63311ea8d11cb07464492f0: {
			
 
				+                                title: '气象云202007210000',
			
 
				+                                id: 1047628748,
			
 
				+                                url: 'https://www.supermapol.com',
			
 
				+                                withCredentials: false
			
 
				+                            },
			
 
				+                            df20b400d63311ea8d11cb07464492f0: {
			
 
				+                                title: '气象云202007210100',
			
 
				+                                id: 262101819,
			
 
				+                                url: 'https://www.supermapol.com',
			
 
				+                                withCredentials: false
			
 
				+                            },
			
 
				+                            df55cdc0d63311ea8d11cb07464492f0: {
			
 
				+                                title: '气象云202007210200',
			
 
				+                                id: 1512879278,
			
 
				+                                url: 'https://www.supermapol.com',
			
 
				+                                withCredentials: false
			
 
				+                            },
			
 
				+                            df9b1420d63311ea8d11cb07464492f0: {
			
 
				+                                title: '气象云202007210300',
			
 
				+                                id: 1373748413,
			
 
				+                                url: 'https://www.supermapol.com',
			
 
				+                                withCredentials: false
			
 
				+                            },
			
 
				+                            dfdf2200d63311ea8d11cb07464492f0: {
			
 
				+                                title: '气象云202007210400',
			
 
				+                                id: 240104698,
			
 
				+                                url: 'https://www.supermapol.com',
			
 
				+                                withCredentials: false
			
 
				+                            },
			
 
				+                            '03df7100d63411ea8d11cb07464492f0': {
			
 
				+                                title: '气象云202007210500',
			
 
				+                                id: 1824853281,
			
 
				+                                url: 'https://www.supermapol.com',
			
 
				+                                withCredentials: false
			
 
				+                            },
			
 
				+                            '64310670d7ad11eab208537bd0e9be18': {
			
 
				+                                title: '气象云202007210600',
			
 
				+                                id: 1209527958,
			
 
				+                                url: 'https://www.supermapol.com',
			
 
				+                                withCredentials: false
			
 
				+                            },
			
 
				+                            '7de12b80daa111eab51dd76b96acbea5': {
			
 
				+                                title: '气象云202007210700',
			
 
				+                                id: 106007908,
			
 
				+                                url: 'https://www.supermapol.com',
			
 
				+                                withCredentials: false
			
 
				+                            }
			
 
				+                        },
			
 
				+                        label: {
			
 
				+                            formatter: function(val, index) {
			
 
				+                                return label[index];
			
 
				+                            }
			
 
				+                        }
			
 
				+                    };
			
 
				+                },
			
 
				+                computed: {
			
 
				+                    allLoaded() {
			
 
				+                        if (this.mapStatus.length) {
			
 
				+                            return this.mapStatus.every(item => {
			
 
				+                                return item.status;
			
 
				+                            });
			
 
				+                        }
			
 
				+                        return false;
			
 
				+                    }
			
 
				+                },
			
 
				+                watch: {
			
 
				+                    mapStatus: {
			
 
				+                        handler() {
			
 
				+                            console.log('mapStatus');
			
 
				+                            this.nextEnable = Boolean(
			
 
				+                                this.mapStatus.find((item, index) => this.currentIndex === index && item.status)
			
 
				+                            );
			
 
				+                            console.log('nextEnable', this.nextEnable);
			
 
				+                        }
			
 
				+                    },
			
 
				+                    allLoaded() {
			
 
				+                        this.playState && this.setPlayState(true);
			
 
				+                        this.nextEnable = null;
			
 
				+                    }
			
 
				+                },
			
 
				+                created() {
			
 
				+                    SuperMap.Components.setTheme({ textColor: '#fff', background: 'rgb(0,0,0,0)' });
			
 
				+                    this.$on('addlayerssucceeded', this.updateNextRasterSource);
			
 
				+                    this.$on('loadingChange', this.loadingChange);
			
 
				+                },
			
 
				+                methods: {
			
 
				+                    load(e) {
			
 
				+                        this.map = e.map;
			
 
				+                        var sourceCaches = 'T202007202300' || e.map.style.sourceCaches;
			
 
				+                        window.map = e.map;
			
 
				+                        this.resetMapLoadStatus();
			
 
				+                        // TODO,拿当前地图的sourceId
			
 
				+                    },
			
 
				+                    loadingChange(status) {
			
 
				+                        this.loading = status;
			
 
				+                    },
			
 
				+                    timelineplaychanged(val) {
			
 
				+                        this.playState = val.playState;
			
 
				+                    },
			
 
				+                    timelineChanged(val) {
			
 
				+                        console.log('timelineChanged');
			
 
				+                        var currentIndex = (val && val.currentIndex) || 0;
			
 
				+                        var dataId = this.data[currentIndex].value;
			
 
				+                        var mapInfo = this.mapDatas[dataId];
			
 
				+                        var url = mapInfo.url + '/web/maps/' + mapInfo.id + '/map.json';
			
 
				+                        this.currentIndex = currentIndex;
			
 
				+                        this.requestMapInfo(url, mapInfo, this.updateRasterSource);
			
 
				+                    },
			
 
				+                    requestMapInfo(url, mapInfo, cb) {
			
 
				+                        var rasterTiles = [];
			
 
				+                        var sourceId = 'T202007202200';
			
 
				+                        var _this = this;
			
 
				+                        $.get(url, function(data) {
			
 
				+                            var layers = data.layers;
			
 
				+                            for (var i = 0; i < layers.length; i++) {
			
 
				+                                if (layers[i].layerType === 'TILE' && layers[i].visible) {
			
 
				+                                    rasterTiles.push(layers[i].url);
			
 
				+                                }
			
 
				+                            }
			
 
				+                            if (!_this.readyNext) {
			
 
				+                                _this.mapQueue.push({ ...mapInfo, sourceId, rasterTiles });
			
 
				+                                return;
			
 
				+                            }
			
 
				+                            _this.readyNext = false;
			
 
				+                            cb(sourceId, rasterTiles);
			
 
				+                        });
			
 
				+                    },
			
 
				+                    updateRasterSource(sourceId, rasterTiles) {
			
 
				+                        var options = { proxy: '', tiles: rasterTiles };
			
 
				+                        if (!sourceId) {
			
 
				+                            return;
			
 
				+                        }
			
 
				+                        var source = this.map.getSource(sourceId);
			
 
				+                        for (var key in options) {
			
 
				+                            source[key] = options[key];
			
 
				+                        }
			
 
				+                        this.map.style.sourceCaches[sourceId].clearTiles();
			
 
				+                        this.map.style.sourceCaches[sourceId].update(this.map.transform);
			
 
				+                        this.map.triggerRepaint();
			
 
				+
			
 
				+                        this.$emit('addlayerssucceeded');
			
 
				+                    },
			
 
				+                    updateNextRasterSource() {
			
 
				+                        console.log('b');
			
 
				+                        this.readyNext = true;
			
 
				+                        if (this.mapQueue.length) {
			
 
				+                            let { id: mapId, sourceId, rasterTiles } = this.mapQueue.shift();
			
 
				+                            this.updateRasterSource(sourceId, rasterTiles);
			
 
				+                        } else {
			
 
				+                            var key = this.data[this.currentIndex].value;
			
 
				+                            var beforeIds = Object.keys(this.map.style.sourceCaches);
			
 
				+                        }
			
 
				+                        // this.playNextStep();
			
 
				+                        !this.allLoaded && this.isAllSourceLoaded(key, beforeIds);
			
 
				+                    },
			
 
				+                    playNextStep() {
			
 
				+                        console.log('a');
			
 
				+                        if (this.allLoaded) {
			
 
				+                            this.playState && this.setPlayState(true);
			
 
				+                            this.nextEnable = null;
			
 
				+                            return;
			
 
				+                        }
			
 
				+                        const result = this.mapStatus.find((item, index) => this.currentIndex === index && item.status);
			
 
				+                        console.log(this.allLoaded, result, Boolean(result));
			
 
				+                        this.nextEnable = Boolean(
			
 
				+                            this.mapStatus.find((item, index) => this.currentIndex === index && item.status)
			
 
				+                        );
			
 
				+                    },
			
 
				+                    setPlayState(status) {
			
 
				+                        this.$refs.timeLine.setPlayState(status);
			
 
				+                    },
			
 
				+                    isAllSourceLoaded(key, sourceIds) {
			
 
				+                        if (this.timer) {
			
 
				+                            clearInterval(this.timer);
			
 
				+                            this.timer = null;
			
 
				+                        }
			
 
				+                        this.timer = setInterval(() => {
			
 
				+                            this.$emit('loadingChange', true);
			
 
				+                            var loaded = sourceIds.every(id => {
			
 
				+                                if (this.map && this.map.style) {
			
 
				+                                    if (!this.map.getSource(id)) {
			
 
				+                                        return true;
			
 
				+                                    }
			
 
				+                                    return this.map.isSourceLoaded(id);
			
 
				+                                }
			
 
				+                                return true;
			
 
				+                            });
			
 
				+                            console.log('loaded', loaded);
			
 
				+                            if (loaded && this.mapStatus) {
			
 
				+                                clearInterval(this.timer);
			
 
				+                                this.timer = null;
			
 
				+                                var mapStatus = this.mapStatus.concat();
			
 
				+                                mapStatus.forEach(info => {
			
 
				+                                    if (info.key === key) {
			
 
				+                                        info.status = true;
			
 
				+                                    }
			
 
				+                                });
			
 
				+                                this.mapStatus = mapStatus;
			
 
				+                                this.$emit('loadingChange', false);
			
 
				+                            }
			
 
				+                        }, 100);
			
 
				+                    },
			
 
				+                    resetMapLoadStatus() {
			
 
				+                        let mapStatus;
			
 
				+                        if (this.mapStatus && this.mapStatus.length) {
			
 
				+                            mapStatus = this.mapStatus.map(info => {
			
 
				+                                info.status = false;
			
 
				+                                return info;
			
 
				+                            });
			
 
				+                        } else {
			
 
				+                            let mapInfoList = Object.keys(this.mapDatas);
			
 
				+                            if (mapInfoList.length) {
			
 
				+                                mapStatus = [];
			
 
				+                                mapInfoList.forEach(key => {
			
 
				+                                    mapStatus.push({ key, status: false });
			
 
				+                                });
			
 
				+                            }
			
 
				+                        }
			
 
				+                        this.mapStatus = mapStatus;
			
 
				+                    }
			
 
				+                }
			
 
				+            });
			
 
				+        </script>
			
 
				+    </body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_timeline_cloud.html
+++ b/public/supermap/examples/component/components_timeline_cloud.html
@@ -0,0 +1,385 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2020 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+    <head>
			
 
				+        <meta charset="UTF-8" />
			
 
				+        <title data-i18n="resources.title_componentsTimeLineCloud_Vue"></title>
			
 
				+        <script type="text/javascript" include="vue,jquery" src="../js/include-web.js"></script>
			
 
				+        <script
			
 
				+            include="echarts-vue,iclient-mapboxgl-vue,mapbox-gl-enhance"
			
 
				+            src="../../dist/mapboxgl/include-mapboxgl.js"
			
 
				+        ></script>
			
 
				+        <style>
			
 
				+            #main {
			
 
				+                margin: 0 auto;
			
 
				+                width: 100%;
			
 
				+                height: 100%;
			
 
				+            }
			
 
				+            .sm-component-time-line {
			
 
				+                position: absolute;
			
 
				+                bottom: 20px;
			
 
				+                width: 100%;
			
 
				+                height: 80px;
			
 
				+                z-index: 1000;
			
 
				+            }
			
 
				+            .sm-cloud-info {
			
 
				+                position: absolute;
			
 
				+                right: 10px;
			
 
				+                top: 20px;
			
 
				+                width: 290px;
			
 
				+                height: 310px;
			
 
				+                z-index: 1000;
			
 
				+            }
			
 
				+            .sm-header {
			
 
				+                display: inline-flex;
			
 
				+                align-items: center;
			
 
				+                height: 25px;
			
 
				+            }
			
 
				+            .sm-header-style {
			
 
				+                width: 6px;
			
 
				+                height: 16px;
			
 
				+                background: #fff;
			
 
				+            }
			
 
				+            .sm-current-info {
			
 
				+                display: inline-flex;
			
 
				+                align-items: center;
			
 
				+            }
			
 
				+            .sm-other-info {
			
 
				+                width: 180px;
			
 
				+            }
			
 
				+            .sm-temperature {
			
 
				+                display: inline-flex;
			
 
				+                align-items: center;
			
 
				+                width: 120px;
			
 
				+            }
			
 
				+            .sm-other-info div {
			
 
				+                display: inline-flex;
			
 
				+                justify-content: center;
			
 
				+                align-items: center;
			
 
				+            }
			
 
				+            .sm-other-info .sm-component-text {
			
 
				+                justify-content: flex-start;
			
 
				+            }
			
 
				+
			
 
				+            .sm-today-weather {
			
 
				+                display: inline-flex;
			
 
				+                justify-content: center;
			
 
				+                align-items: center;
			
 
				+                width: 100%;
			
 
				+            }
			
 
				+            .sm-day-info {
			
 
				+                width: 130;
			
 
				+                height: 110px;
			
 
				+            }
			
 
				+            .sm-day-info > div {
			
 
				+                display: flex;
			
 
				+                justify-content: center;
			
 
				+            }
			
 
				+            .sm-day-info .sm-component-image {
			
 
				+                display: block;
			
 
				+                margin: 0 auto;
			
 
				+            }
			
 
				+            .sm-today-rain {
			
 
				+                position: absolute;
			
 
				+                bottom: -10px;
			
 
				+                display: flex;
			
 
				+                justify-content: center;
			
 
				+                width: 100%;
			
 
				+            }
			
 
				+            .sm-component-spin {
			
 
				+                background: transparent !important;
			
 
				+            }
			
 
				+        </style>
			
 
				+    </head>
			
 
				+
			
 
				+    <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
			
 
				+        <div id="main">
			
 
				+            <sm-web-map
			
 
				+                server-url="https://www.supermapol.com"
			
 
				+                :map-id="235407763"
			
 
				+                :tianditu-key="tiandituKey"
			
 
				+                :map-options="mapOptions"
			
 
				+                :loading="loading"
			
 
				+                @load="load"
			
 
				+            ></sm-web-map>
			
 
				+            <sm-time-line
			
 
				+                ref="timeLine"
			
 
				+                :data="data"
			
 
				+                :play-interval="800"
			
 
				+                :next-enable="nextEnable"
			
 
				+                :label="label"
			
 
				+                @timelinechanged="timelineChanged"
			
 
				+                @timelineplaychanged="timelineplaychanged"
			
 
				+            ></sm-time-line>
			
 
				+
			
 
				+            <sm-border type="border6" class="sm-cloud-info">
			
 
				+                <div class="sm-cloud-info__content">
			
 
				+                    <div class="sm-header">
			
 
				+                        <div class="sm-header-style"></div>
			
 
				+                        <sm-text title="当前实况" :font-style="{fontSize: '18px', fontWeight: 600}"></sm-text>
			
 
				+                    </div>
			
 
				+                    <div class="sm-current-info">
			
 
				+                        <div class="sm-temperature">
			
 
				+                            <sm-image src="./img/cloud/icon_wendu.png" style="width:36px;height:41px"></sm-image>
			
 
				+                            <sm-text title="27.2℃"></sm-text>
			
 
				+                        </div>
			
 
				+                        <div class="sm-other-info">
			
 
				+                            <div>
			
 
				+                                <sm-image src="./img/cloud/icon_rain.png" style="width:12px;height:12px"></sm-image>
			
 
				+                                <sm-text title="降水：1mm"></sm-text>
			
 
				+                            </div>
			
 
				+                            <div>
			
 
				+                                <sm-image src="./img/cloud/icon_sidu.png" style="width:12px;height:12px"></sm-image>
			
 
				+                                <sm-text title="相对湿度:81%"></sm-text>
			
 
				+                            </div>
			
 
				+                            <div>
			
 
				+                                <sm-image src="./img/cloud/icon_wind.png" style="width:12px;height:12px"></sm-image>
			
 
				+                                <sm-text title="风向风速：东偏北一级"></sm-text>
			
 
				+                            </div>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                    <div class="sm-header">
			
 
				+                        <div class="sm-header-style"></div>
			
 
				+                        <sm-text title="今日天气" :font-style="{fontSize: '18px', fontWeight: 600}"></sm-text>
			
 
				+                    </div>
			
 
				+                    <div class="sm-today-weather">
			
 
				+                        <div class="sm-day-info">
			
 
				+                            <sm-text title="今日白天" :font-style="{textAlign: 'center'}"></sm-text>
			
 
				+                            <sm-image src="./img/cloud/cloud.png" style="width:45px;height:45px"></sm-image>
			
 
				+                            <sm-text title="小雨" :font-style="{textAlign: 'center'}"></sm-text>
			
 
				+                            <div><sm-text title="32.5℃ 南偏西1级"></sm-text></div>
			
 
				+                        </div>
			
 
				+                        <div class="sm-day-info">
			
 
				+                            <sm-text title="今日夜间" :font-style="{textAlign: 'center'}"></sm-text>
			
 
				+                            <sm-image src="./img/cloud/cloud.png" style="width:45px;height:45px"></sm-image>
			
 
				+                            <sm-text title="小雨" :font-style="{textAlign: 'center'}"></sm-text>
			
 
				+                            <div><sm-text title="24.2℃ 西偏北1级"></sm-text></div>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                    <div class="sm-today-rain">
			
 
				+                        <sm-text title="24小时降水：3.8mm"></sm-text>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+            </sm-border>
			
 
				+        </div>
			
 
				+        <script>
			
 
				+            var label = [
			
 
				+                '7月20日22点',
			
 
				+                '7月20日23点',
			
 
				+                '7月21日0点',
			
 
				+                '7月21日1点',
			
 
				+                '7月21日2点',
			
 
				+                '7月21日3点',
			
 
				+                '7月21日4点',
			
 
				+                '7月21日5点',
			
 
				+                '7月21日6点',
			
 
				+                '7月21日7点'
			
 
				+            ];
			
 
				+            new Vue({
			
 
				+                el: '#main',
			
 
				+                data() {
			
 
				+                    return {
			
 
				+                        mapStatus: [],
			
 
				+                        mapQueue: [],
			
 
				+                        loading: false,
			
 
				+                        readyNext: true,
			
 
				+                        nextEnable: false,
			
 
				+                        tiandituKey: 'f16b023603de8ae8fdd09a2c0feb1ec2',
			
 
				+                        tooltip: {
			
 
				+                            formatter: function(params) {
			
 
				+                                return params.name;
			
 
				+                            }
			
 
				+                        },
			
 
				+                        label: {
			
 
				+                            formatter: function(val, index) {
			
 
				+                                return label[index];
			
 
				+                            }
			
 
				+                        },
			
 
				+                        url: 'https://www.supermapol.com/proxy/iserver/services/map_qixiangyun_l93wywbb/rest/maps/',
			
 
				+                        encodeUrl:
			
 
				+                            '/image.png?viewBounds=%7B"leftBottom"%3A%7B"x"%3A9293238.75%2C"y"%3A3677548.75%7D%2C"rightTop"%3A%7B"x"%3A11189787.25%2C"y"%3A5574097.25%7D%7D&center=%7B"x"%3A10241513.0%2C"y"%3A4625823.0%7D&width=1090&scale=0.000000035714&prjCoordSys=%7B"epsgCode"%3A3857%7D&transparent=true&height=880',
			
 
				+                        data: [
			
 
				+                            'T202007202200',
			
 
				+                            'T202007202300',
			
 
				+                            'T202007210000',
			
 
				+                            'T202007210100',
			
 
				+                            'T202007210200',
			
 
				+                            'T202007210300',
			
 
				+                            'T202007210400',
			
 
				+                            'T202007210500',
			
 
				+                            'T202007210600',
			
 
				+                            'T202007210700'
			
 
				+                        ],
			
 
				+                        mapOptions: {
			
 
				+                            style: { version: 8, sources: {}, layers: [] },
			
 
				+                            zoom: 4.6
			
 
				+                        }
			
 
				+                    };
			
 
				+                },
			
 
				+                computed: {
			
 
				+                    allLoaded() {
			
 
				+                        if (this.mapStatus.length) {
			
 
				+                            var allLoaded = true;
			
 
				+                            this.mapStatus.forEach(function(item) {
			
 
				+                                if (!item.status) {
			
 
				+                                    allLoaded = false;
			
 
				+                                }
			
 
				+                            });
			
 
				+                            return allLoaded;
			
 
				+                        }
			
 
				+                        return false;
			
 
				+                    }
			
 
				+                },
			
 
				+                watch: {
			
 
				+                    mapStatus: {
			
 
				+                        handler() {
			
 
				+                            var nextEnable = false;
			
 
				+                            var currentIndex = this.currentIndex;
			
 
				+                            this.mapStatus.forEach(function(item, index) {
			
 
				+                                if (currentIndex === index && item.status) {
			
 
				+                                    nextEnable = true;
			
 
				+                                }
			
 
				+                            });
			
 
				+                            this.nextEnable = nextEnable;
			
 
				+                        }
			
 
				+                    },
			
 
				+                    allLoaded() {
			
 
				+                        this.playState && this.setPlayState(true);
			
 
				+                        this.nextEnable = null;
			
 
				+                    }
			
 
				+                },
			
 
				+                created() {
			
 
				+                    SuperMap.Components.setTheme({ textColor: '#fff', background: 'rgb(0,0,0,0)' });
			
 
				+                    this.$on('addlayerssucceeded', this.updateNextRasterSource);
			
 
				+                    this.$on('loadingChange', this.loadingChange);
			
 
				+                },
			
 
				+                methods: {
			
 
				+                    load(e) {
			
 
				+                        this.map = e.map;
			
 
				+                        this.resetMapLoadStatus();
			
 
				+                    },
			
 
				+                    loadingChange(status) {
			
 
				+                        this.loading = status;
			
 
				+                    },
			
 
				+                    timelineplaychanged(val) {
			
 
				+                        this.playState = val.playState;
			
 
				+                    },
			
 
				+                    timelineChanged(val) {
			
 
				+                        var currentIndex = (val && val.currentIndex) || 0;
			
 
				+                        var dataId = this.data[currentIndex];
			
 
				+                        var imageUrl = this.url + dataId + this.encodeUrl;
			
 
				+                        this.currentIndex = currentIndex;
			
 
				+                        var sourceId = this.data[0];
			
 
				+                        if (!this.readyNext) {
			
 
				+                            this.mapQueue.push({ key: dataId, sourceId: sourceId, imageUrl: imageUrl });
			
 
				+                            return;
			
 
				+                        }
			
 
				+                        this.readyNext = false;
			
 
				+                        this.updateRasterSource(sourceId, imageUrl);
			
 
				+                    },
			
 
				+                    updateRasterSource(sourceId, imageUrl) {
			
 
				+                        if (this.map.getLayer(sourceId)) {
			
 
				+                            this.map.setLayoutProperty(sourceId, 'visibility', 'none');
			
 
				+                        }
			
 
				+                        sourceId = sourceId + '_image';
			
 
				+                        var source = this.map.getSource(sourceId);
			
 
				+                        if (!source) {
			
 
				+                            this.map.addSource(sourceId, {
			
 
				+                                type: 'image',
			
 
				+                                url: imageUrl,
			
 
				+                                coordinates: [
			
 
				+                                    [50, 61],
			
 
				+                                    [145.9, 61],
			
 
				+                                    [145.9, 0],
			
 
				+                                    [50, 0]
			
 
				+                                ]
			
 
				+                            });
			
 
				+                            this.map.addLayer({
			
 
				+                                id: sourceId,
			
 
				+                                type: 'raster',
			
 
				+                                source: sourceId,
			
 
				+                                paint: {
			
 
				+                                    'raster-fade-duration': 0
			
 
				+                                }
			
 
				+                            });
			
 
				+                        } else {
			
 
				+                            source.updateImage({ url: imageUrl });
			
 
				+                        }
			
 
				+                        this.$emit('addlayerssucceeded');
			
 
				+                    },
			
 
				+                    updateNextRasterSource() {
			
 
				+                        this.readyNext = true;
			
 
				+                        if (this.mapQueue.length) {
			
 
				+                            var { id: mapId, sourceId, imageUrl } = this.mapQueue.shift();
			
 
				+                            this.updateRasterSource(sourceId, imageUrl);
			
 
				+                        } else {
			
 
				+                            var key = this.data[this.currentIndex];
			
 
				+                            var sourceCaches = this.map.style.sourceCaches;
			
 
				+                            var beforeIds = [];
			
 
				+                            for (var sourceId in sourceCaches) {
			
 
				+                                beforeIds.push(sourceId);
			
 
				+                            }
			
 
				+                        }
			
 
				+                        !this.allLoaded && this.isAllSourceLoaded(key, beforeIds);
			
 
				+                    },
			
 
				+                    setPlayState(status) {
			
 
				+                        this.$refs.timeLine.setPlayState(status);
			
 
				+                    },
			
 
				+                    isAllSourceLoaded(key, sourceIds) {
			
 
				+                        if (this.timer) {
			
 
				+                            clearInterval(this.timer);
			
 
				+                            this.timer = null;
			
 
				+                        }
			
 
				+                        var map = this.map;
			
 
				+                        var _this = this;
			
 
				+                        this.timer = setInterval(function() {
			
 
				+                            _this.$emit('loadingChange', true);
			
 
				+                            var loaded = true;
			
 
				+                            sourceIds.forEach(function(id) {
			
 
				+                                if (_this.map && _this.map.style) {
			
 
				+                                    if (!_this.map.getSource(id)) {
			
 
				+                                        return true;
			
 
				+                                    }
			
 
				+                                    if (!_this.map.isSourceLoaded(id)) {
			
 
				+                                        loaded = false;
			
 
				+                                    }
			
 
				+                                    return _this.map.isSourceLoaded(id);
			
 
				+                                }
			
 
				+                                return true;
			
 
				+                            });
			
 
				+                            _this.nextEnable = false;
			
 
				+                            if (loaded && _this.mapStatus) {
			
 
				+                                clearInterval(_this.timer);
			
 
				+                                _this.timer = null;
			
 
				+                                var mapStatus = _this.mapStatus.concat();
			
 
				+                                mapStatus.forEach(function(info) {
			
 
				+                                    if (info.key === key) {
			
 
				+                                        info.status = true;
			
 
				+                                    }
			
 
				+                                });
			
 
				+                                _this.mapStatus = mapStatus;
			
 
				+                                _this.$emit('loadingChange', false);
			
 
				+                            }
			
 
				+                        }, 100);
			
 
				+                    },
			
 
				+                    resetMapLoadStatus() {
			
 
				+                        var mapStatus = [];
			
 
				+                        if (this.mapStatus && this.mapStatus.length) {
			
 
				+                            mapStatus = this.mapStatus.map(function(info) {
			
 
				+                                info.status = false;
			
 
				+                                return info;
			
 
				+                            });
			
 
				+                        } else {
			
 
				+                            this.data.forEach(function(key) {
			
 
				+                                mapStatus.push({ key: key, status: false });
			
 
				+                            });
			
 
				+                        }
			
 
				+                        this.mapStatus = mapStatus;
			
 
				+                    }
			
 
				+                }
			
 
				+            });
			
 
				+        </script>
			
 
				+    </body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_timeline_ncp.html
+++ b/public/supermap/examples/component/components_timeline_ncp.html
@@ -0,0 +1,742 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+    <head>
			
 
				+        <meta charset="UTF-8" />
			
 
				+        <title data-i18n="resources.title_componentsTimeLineNcp_Vue"></title>
			
 
				+        <script type="text/javascript" include="vue,jquery,papaparse" src="../js/include-web.js"></script>
			
 
				+        <script
			
 
				+            include="moment,echarts-vue,iclient-mapboxgl-vue,mapbox-gl-enhance"
			
 
				+            src="../../dist/mapboxgl/include-mapboxgl.js"
			
 
				+        ></script>
			
 
				+        <style>
			
 
				+            #main {
			
 
				+                display: inline-flex;
			
 
				+                margin: 0 auto;
			
 
				+                width: 100%;
			
 
				+                height: 100%;
			
 
				+            }
			
 
				+            .sm-component-time-line {
			
 
				+                position: absolute;
			
 
				+                bottom: 0px;
			
 
				+                width: 100%;
			
 
				+                z-index: 1000;
			
 
				+            }
			
 
				+            .sm-left-part {
			
 
				+                display: inline-block;
			
 
				+                width: 55%;
			
 
				+                height: 100%;
			
 
				+            }
			
 
				+            .sm-right-part {
			
 
				+                display: inline-block;
			
 
				+                width: 44.5%;
			
 
				+                height: 100%;
			
 
				+                margin-left: 0.5%;
			
 
				+            }
			
 
				+            .sm-right-part__top {
			
 
				+                position: relative;
			
 
				+                height: 45%;
			
 
				+                background: transparent;
			
 
				+            }
			
 
				+            .sm-right-part__bottom {
			
 
				+                position: relative;
			
 
				+                height: 54.5%;
			
 
				+                margin-top: 0.5%;
			
 
				+                background: transparent;
			
 
				+            }
			
 
				+            .sm-left-header {
			
 
				+                position: relative;
			
 
				+                display: inline-block;
			
 
				+                width: 100%;
			
 
				+            }
			
 
				+            .sm-left-header .sm-component-image {
			
 
				+                position: absolute;
			
 
				+            }
			
 
				+            .sm-left-header__title {
			
 
				+                width: 100%;
			
 
				+            }
			
 
				+            .sm-left-header__title .sm-component-text {
			
 
				+                display: flex;
			
 
				+                width: 100%;
			
 
				+            }
			
 
				+            .sm-left-content {
			
 
				+                position: relative;
			
 
				+                width: 100%;
			
 
				+                height: calc(100% - 100px);
			
 
				+                margin-top: 20px;
			
 
				+            }
			
 
				+            .sm-left-content .sm-component-text {
			
 
				+                position: absolute;
			
 
				+                top: 10px;
			
 
				+                z-index: 1000;
			
 
				+            }
			
 
				+            .sm-right-part__top .sm-component-web-map,
			
 
				+            .sm-component-chart {
			
 
				+                position: absolute;
			
 
				+                bottom: 0;
			
 
				+                width: 100%;
			
 
				+                height: calc(100% - 130px);
			
 
				+            }
			
 
				+            .sm-component-chart .sm-component-collapse-card__content {
			
 
				+                width: 100%;
			
 
				+                height: 100%;
			
 
				+            }
			
 
				+            .sm-right-part__top .sm-component-time-text {
			
 
				+                position: absolute;
			
 
				+                top: 0;
			
 
				+                right: 5px;
			
 
				+                z-index: 1000;
			
 
				+            }
			
 
				+            .sm-total-indicators {
			
 
				+                position: absolute;
			
 
				+                top: 50px;
			
 
				+                display: inline-flex;
			
 
				+                justify-content: space-between;
			
 
				+                width: 450px;
			
 
				+                margin-top: 10px;
			
 
				+                z-index: 1000;
			
 
				+            }
			
 
				+            .sm-total-indicator {
			
 
				+                width: 140px;
			
 
				+                height: 84px;
			
 
				+            }
			
 
				+            .sm-total-indicator .sm-component-indicator {
			
 
				+                width: 100%;
			
 
				+            }
			
 
				+            .sm-total-indicator .sm-component-image__content {
			
 
				+                background-size: 100% 100% !important;
			
 
				+            }
			
 
				+
			
 
				+            .sm-indicators {
			
 
				+                position: absolute;
			
 
				+                left: 10px;
			
 
				+                top: 50px;
			
 
				+                display: inline-flex;
			
 
				+                justify-content: space-between;
			
 
				+                align-items: center;
			
 
				+                width: calc(100% - 20px);
			
 
				+                height: 70px;
			
 
				+                z-index: 1000;
			
 
				+            }
			
 
				+            .sm-indicator {
			
 
				+                display: inline-flex;
			
 
				+                justify-content: space-around;
			
 
				+                width: 180px;
			
 
				+                height: 100%;
			
 
				+                background: #1c2027;
			
 
				+            }
			
 
				+        </style>
			
 
				+    </head>
			
 
				+
			
 
				+    <body style=" margin: 0;overflow: hidden;background: #000000;width: 100%;height:100%;position: absolute;top: 0;">
			
 
				+        <div id="main">
			
 
				+            <sm-border type="border6" class="sm-left-part">
			
 
				+                <div>
			
 
				+                    <div class="sm-left-header">
			
 
				+                        <sm-image
			
 
				+                            src="./img/ncp/superMap.png"
			
 
				+                            repeat="center"
			
 
				+                            style="width:140px;height:50px"
			
 
				+                        ></sm-image>
			
 
				+                        <div class="sm-left-header__title">
			
 
				+                            <sm-text
			
 
				+                                title="全国新型冠状病毒感染的肺炎疫情分布"
			
 
				+                                :font-style='{ fontSize: "27px", fontWeight: 700, textAlign: "center"}'
			
 
				+                            ></sm-text>
			
 
				+                            <sm-text
			
 
				+                                title="截至2020年4月2日24时（数据来源：国家与地方卫健委官网）"
			
 
				+                                :font-style='{ textAlign: "center"}'
			
 
				+                                text-color="#C8BFBF"
			
 
				+                            ></sm-text>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                    <div class="sm-left-content">
			
 
				+                        <sm-web-map
			
 
				+                            server-url="https://www.supermapol.com"
			
 
				+                            :map-id="1312968431"
			
 
				+                            target="map_1"
			
 
				+                            :map-options="mapOptions"
			
 
				+                            @load="load"
			
 
				+                        ></sm-web-map>
			
 
				+                        <sm-text :title="timeInfo" :font-style="{fontSize: '20px', fontWeight: 600}"></sm-text>
			
 
				+                        <div class="sm-total-indicators">
			
 
				+                            <div class="sm-total-indicator">
			
 
				+                                <sm-image src="./img/ncp/red.png" style="width:140px;height:8px"></sm-image>
			
 
				+                                <sm-indicator
			
 
				+                                    title="新增确诊"
			
 
				+                                    unit=""
			
 
				+                                    :num="totalConfirmedAdd"
			
 
				+                                    indicator-color="#79BC45"
			
 
				+                                    text-font-size="14px"
			
 
				+                                    font-size="30px"
			
 
				+                                ></sm-indicator>
			
 
				+                            </div>
			
 
				+                            <div class="sm-total-indicator">
			
 
				+                                <sm-image src="./img/ncp/yellow.png" style="width:140px;height:8px"></sm-image>
			
 
				+                                <sm-indicator
			
 
				+                                    title="现有确诊"
			
 
				+                                    unit=""
			
 
				+                                    :num="totalConfirmedNow"
			
 
				+                                    indicator-color="#F24B3D"
			
 
				+                                    text-font-size="14px"
			
 
				+                                    font-size="30px"
			
 
				+                                ></sm-indicator>
			
 
				+                            </div>
			
 
				+                            <div class="sm-total-indicator">
			
 
				+                                <sm-image src="./img/ncp/green.png" style="width:140px;height:8px"></sm-image>
			
 
				+                                <sm-indicator
			
 
				+                                    title="疑似病例"
			
 
				+                                    unit=""
			
 
				+                                    :num="totalSuspected"
			
 
				+                                    indicator-color="#79BC45"
			
 
				+                                    text-font-size="14px"
			
 
				+                                    font-size="30px"
			
 
				+                                ></sm-indicator>
			
 
				+                            </div>
			
 
				+                        </div>
			
 
				+                        <sm-time-line
			
 
				+                            :data="data"
			
 
				+                            :play-interval="1000"
			
 
				+                            :label="label"
			
 
				+                            :control-style="timeLineStyle"
			
 
				+                            :checkpoint-style="timeLineStyle"
			
 
				+                            @timelinechanged="timelineChanged"
			
 
				+                        ></sm-time-line>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+            </sm-border>
			
 
				+            <div class="sm-right-part">
			
 
				+                <sm-border type="border6" class="sm-right-part__top">
			
 
				+                    <div>
			
 
				+                        <sm-text
			
 
				+                            title="全省疫情监控"
			
 
				+                            :font-style='{ fontSize: "22px", fontWeight: 700}'
			
 
				+                            text-color="#e9e9e9"
			
 
				+                        ></sm-text>
			
 
				+                        <sm-time-text :font-style='{ fontSize: "14px"}' time-type="date+second"> </sm-time-text>
			
 
				+                        <div class="sm-indicators">
			
 
				+                            <div class="sm-indicator">
			
 
				+                                <sm-image src="./img/ncp/icon-red.png" style="width:40px;height:100%"></sm-image>
			
 
				+                                <sm-indicator
			
 
				+                                    title="新增确诊"
			
 
				+                                    unit=""
			
 
				+                                    :num="confirmedAdd"
			
 
				+                                    indicator-color="#FB016D"
			
 
				+                                    text-font-size="14px"
			
 
				+                                    font-size="24px"
			
 
				+                                ></sm-indicator>
			
 
				+                            </div>
			
 
				+                            <div class="sm-indicator">
			
 
				+                                <sm-image src="./img/ncp/icon-yellow.png" style="width:40px;height:100%"></sm-image>
			
 
				+                                <sm-indicator
			
 
				+                                    title="现有确诊"
			
 
				+                                    unit=""
			
 
				+                                    :num="nowConfirmed"
			
 
				+                                    indicator-color="#FEAD00"
			
 
				+                                    text-font-size="14px"
			
 
				+                                    font-size="24px"
			
 
				+                                ></sm-indicator>
			
 
				+                            </div>
			
 
				+                            <div class="sm-indicator">
			
 
				+                                <sm-image src="./img/ncp/icon-green.png" style="width:40px;height:100%"></sm-image>
			
 
				+                                <sm-indicator
			
 
				+                                    title="疑似病例"
			
 
				+                                    unit=""
			
 
				+                                    :num="suspectedAdd"
			
 
				+                                    indicator-color="#5AFBAE"
			
 
				+                                    text-font-size="14px"
			
 
				+                                    font-size="24px"
			
 
				+                                ></sm-indicator>
			
 
				+                            </div>
			
 
				+                        </div>
			
 
				+                        <sm-web-map
			
 
				+                            server-url="https://www.supermapol.com"
			
 
				+                            :map-id="558388156"
			
 
				+                            target="map_2"
			
 
				+                            :map-options="mapOptions2"
			
 
				+                            @load="load1"
			
 
				+                        ></sm-web-map>
			
 
				+                    </div>
			
 
				+                </sm-border>
			
 
				+                <sm-border type="border6" class="sm-right-part__bottom">
			
 
				+                    <div>
			
 
				+                        <sm-text
			
 
				+                            title="市区疫情监控"
			
 
				+                            :font-style='{ fontSize: "22px", fontWeight: 700}'
			
 
				+                            text-color="#e9e9e9"
			
 
				+                        ></sm-text>
			
 
				+                        <div class="sm-indicators">
			
 
				+                            <div class="sm-indicator">
			
 
				+                                <sm-image src="./img/ncp/icon-red.png" style="width:40px;height:100%"></sm-image>
			
 
				+                                <sm-indicator
			
 
				+                                    title="新增确诊"
			
 
				+                                    unit=""
			
 
				+                                    :num="confirmedAdd"
			
 
				+                                    indicator-color="#FB016D"
			
 
				+                                    text-font-size="14px"
			
 
				+                                    font-size="24px"
			
 
				+                                ></sm-indicator>
			
 
				+                            </div>
			
 
				+                            <div class="sm-indicator">
			
 
				+                                <sm-image src="./img/ncp/icon-yellow.png" style="width:40px;height:100%"></sm-image>
			
 
				+                                <sm-indicator
			
 
				+                                    title="现有确诊"
			
 
				+                                    unit=""
			
 
				+                                    :num="nowConfirmed"
			
 
				+                                    indicator-color="#FEAD00"
			
 
				+                                    text-font-size="14px"
			
 
				+                                    font-size="24px"
			
 
				+                                ></sm-indicator>
			
 
				+                            </div>
			
 
				+                            <div class="sm-indicator">
			
 
				+                                <sm-image src="./img/ncp/icon-green.png" style="width:40px;height:100%"></sm-image>
			
 
				+                                <sm-indicator
			
 
				+                                    title="疑似病例"
			
 
				+                                    unit=""
			
 
				+                                    :num="suspectedAdd"
			
 
				+                                    indicator-color="#5AFBAE"
			
 
				+                                    text-font-size="14px"
			
 
				+                                    font-size="24px"
			
 
				+                                ></sm-indicator>
			
 
				+                            </div>
			
 
				+                        </div>
			
 
				+                        <sm-chart
			
 
				+                            icon-class=""
			
 
				+                            v-bind="options"
			
 
				+                            :dataset="dataset"
			
 
				+                            :dataset-options="datasetOptions"
			
 
				+                            :options="options"
			
 
				+                            :color-group="colorGroup"
			
 
				+                        ></sm-chart>
			
 
				+                    </div>
			
 
				+                </sm-border>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+
			
 
				+        <script>
			
 
				+            new Vue({
			
 
				+                el: '#main',
			
 
				+                data() {
			
 
				+                    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> ";
			
 
				+                    return {
			
 
				+                        data: [],
			
 
				+                        colorGroup: ['#d53e4f', '#fc8d59', '#fee08b', '#ffffbf', '#e6f598'],
			
 
				+                        datasetOptions: [
			
 
				+                            {
			
 
				+                                seriesType: 'line',
			
 
				+                                isStastic: false,
			
 
				+                                isStack: false,
			
 
				+                                xField: 'name',
			
 
				+                                yField: 'confirmedAdd',
			
 
				+                                sort: 'descending'
			
 
				+                            }
			
 
				+                        ],
			
 
				+                        dataset: {
			
 
				+                            maxFeatures: 20,
			
 
				+                            url: '',
			
 
				+                            type: 'geoJSON',
			
 
				+                            geoJSON: {
			
 
				+                                type: 'FeatureCollection',
			
 
				+                                features: []
			
 
				+                            }
			
 
				+                        },
			
 
				+                        options: {
			
 
				+                            series: [
			
 
				+                                {
			
 
				+                                    data: ['3900', '3340', '3300', '2500', '2000', '520', '100'],
			
 
				+                                    name: 'Y1',
			
 
				+                                    emphasis: { itemStyle: {} },
			
 
				+                                    stack: 0,
			
 
				+                                    type: 'line',
			
 
				+                                    smooth: true,
			
 
				+                                    animationEasing: 'quadraticIn',
			
 
				+                                    animationEasingUpdate: 'quadraticIn',
			
 
				+                                    label: {
			
 
				+                                        normal: {
			
 
				+                                            position: 'top',
			
 
				+                                            show: true,
			
 
				+                                            textStyle: { color: '#d53e4f', fontSize: 12 },
			
 
				+                                            smart: true
			
 
				+                                        }
			
 
				+                                    },
			
 
				+                                    lineStyle: { color: '#d53e4f' },
			
 
				+                                    itemStyle: { borderColor: '#d53e4f', color: '#d53e4f' },
			
 
				+                                    symbol: 'circle',
			
 
				+                                    areaStyle: { opacity: 0.7 }
			
 
				+                                }
			
 
				+                            ],
			
 
				+                            yAxis: {
			
 
				+                                axisLabel: {
			
 
				+                                    rotate: 0,
			
 
				+                                    fontFamily: 'MicrosoftYaHei',
			
 
				+                                    show: true,
			
 
				+                                    color: '#fff',
			
 
				+                                    fontSize: 12
			
 
				+                                },
			
 
				+                                axisLine: { lineStyle: {} },
			
 
				+                                name: '',
			
 
				+                                show: true,
			
 
				+                                splitLine: {
			
 
				+                                    lineStyle: { width: 0.3, type: 'solid', color: '#ccc', opacity: 1 },
			
 
				+                                    show: true
			
 
				+                                },
			
 
				+                                splitArea: { show: false },
			
 
				+                                nameGap: 5,
			
 
				+                                nameLocation: 'end',
			
 
				+                                type: 'value',
			
 
				+                                nameTextStyle: { padding: [0, 0, 5, 0] },
			
 
				+                                axisTick: { show: true }
			
 
				+                            },
			
 
				+                            xAxis: {
			
 
				+                                axisLabel: {
			
 
				+                                    rotate: 47,
			
 
				+                                    fontFamily: 'MicrosoftYaHei',
			
 
				+                                    show: true,
			
 
				+                                    color: '#fff',
			
 
				+                                    fontSize: 12
			
 
				+                                },
			
 
				+                                data: ['Fri', 'Thu', 'Sat', 'Sun', 'Wed', 'Tue', 'Mon'],
			
 
				+                                axisLine: { lineStyle: {} },
			
 
				+                                show: true,
			
 
				+                                name: '',
			
 
				+                                axisTick: { alignWithLabel: true, show: true },
			
 
				+                                splitLine: {
			
 
				+                                    lineStyle: { type: 'solid', color: '#ccc', opacity: 1, width: 0.3 },
			
 
				+                                    show: false
			
 
				+                                },
			
 
				+                                nameGap: 2,
			
 
				+                                nameLocation: 'end',
			
 
				+                                type: 'category',
			
 
				+                                boundaryGap: false
			
 
				+                            },
			
 
				+                            grid: { top: 20, left: 43, bottom: 77, right: 20 },
			
 
				+                            legend: {
			
 
				+                                data: ['confirmedAdd'],
			
 
				+                                show: false,
			
 
				+                                textStyle: { color: '#fff', fontSize: 12 },
			
 
				+                                type: 'scroll',
			
 
				+                                top: 'top',
			
 
				+                                left: 'center'
			
 
				+                            },
			
 
				+                            tooltip: {
			
 
				+                                axisPointer: { shadowStyle: {}, type: 'line' },
			
 
				+                                trigger: 'axis',
			
 
				+                                textStyle: { align: 'left' }
			
 
				+                            },
			
 
				+                            textStyle: { fontFamily: 'Microsoft YaHei Light' },
			
 
				+                            title: {
			
 
				+                                padding: [5, 0, 0, 20],
			
 
				+                                x: 'left',
			
 
				+                                text: '',
			
 
				+                                textStyle: { fontFamily: 'Microsoft YaHei Light', fontWeight: '100' }
			
 
				+                            },
			
 
				+                            dataZoom: []
			
 
				+                        },
			
 
				+                        label: {
			
 
				+                            color: '#EF6548',
			
 
				+                            borderColor: '#EF6548',
			
 
				+                            formatter: function(val, index) {
			
 
				+                                var timestamp = val;
			
 
				+                                return moment(timestamp * 1000).format('YYYY-MM-DD');
			
 
				+                            }
			
 
				+                        },
			
 
				+                        timeLineStyle: {
			
 
				+                            color: '#EF6548',
			
 
				+                            borderColor: '#EF6548'
			
 
				+                        },
			
 
				+                        mapOptions: {
			
 
				+                            style: { version: 8, sources: {}, layers: [] },
			
 
				+                            center: [106.9163, 37.2424],
			
 
				+                            zoom: 3,
			
 
				+                            bearing: 0,
			
 
				+                            pitch: 0
			
 
				+                        },
			
 
				+                        mapOptions2: {
			
 
				+                            style: { version: 8, sources: {}, layers: [] },
			
 
				+                            center: [112.7597, 31.1603],
			
 
				+                            zoom: 4.63,
			
 
				+                            bearing: 0,
			
 
				+                            pitch: 0,
			
 
				+                            preserveDrawingBuffer: true
			
 
				+                        },
			
 
				+                        layersIdField: { self_layers_ProviceDataWithNcp: 'provinceName' },
			
 
				+                        timeInfo: '2020-04-02',
			
 
				+                        totalConfirmedAdd: 399,
			
 
				+                        totalConfirmedNow: 53371,
			
 
				+                        totalSuspected: 1361,
			
 
				+                        confirmedAdd: 366,
			
 
				+                        nowConfirmed: 47547,
			
 
				+                        suspectedAdd: 1125
			
 
				+                    };
			
 
				+                },
			
 
				+                created() {
			
 
				+                    SuperMap.Components.setTheme({ textColor: '#fff', background: 'rgb(0,0,0,0)' });
			
 
				+                    var _this = this;
			
 
				+                    this.requestData('../data/ncp/ncpTotal.json', function(res) {
			
 
				+                        _this.ncpTotal = res;
			
 
				+                    });
			
 
				+                    this.requestData('../data/ncp/ncpProperties.json', function(res) {
			
 
				+                        _this.ncpProperties = res;
			
 
				+                        _this.data = _this.getTimeStamps(res);
			
 
				+                        _this.timelineChanged({ currentIndex: 0 });
			
 
				+                    });
			
 
				+                    this.requestData('https://www.supermapol.com/web/maps/1312968431/map.json', function(res) {
			
 
				+                        _this.layerInfo = res.layers[0];
			
 
				+                    });
			
 
				+                    this.requestData('https://www.supermapol.com/web/maps/558388156/map.json', function(res) {
			
 
				+                        _this.layerInfo1 = res.layers[0];
			
 
				+                    });
			
 
				+                },
			
 
				+                mounted() {},
			
 
				+                methods: {
			
 
				+                    load(e, vm) {
			
 
				+                        this.map = e.map;
			
 
				+                    },
			
 
				+                    load1(e, vm) {
			
 
				+                        this.map1 = e.map;
			
 
				+                    },
			
 
				+                    requestData(url = '../data/ncp/ncpTotal.json', cb) {
			
 
				+                        var _this = this;
			
 
				+                        $.get(url, function(res) {
			
 
				+                            cb(res);
			
 
				+                        });
			
 
				+                    },
			
 
				+                    timelineChanged(val) {
			
 
				+                        var currentIndex = val.currentIndex;
			
 
				+                        var timestamp = this.data[currentIndex];
			
 
				+                        var geoJSON = this.getNcpFeatures(this.ncpProperties, timestamp);
			
 
				+
			
 
				+                        this.timeInfo = this.timestamp2Date(timestamp);
			
 
				+                        this.dataset.geoJSON = geoJSON;
			
 
				+                        this.setIndicatorNum(timestamp);
			
 
				+                        this.updateSourceData(
			
 
				+                            this.map,
			
 
				+                            'ProviceDataWithNcp',
			
 
				+                            this.layerInfo,
			
 
				+                            geoJSON.features,
			
 
				+                            'provinceName'
			
 
				+                        );
			
 
				+                        this.updateSourceData(
			
 
				+                            this.map1,
			
 
				+                            'ProviceDataWithNcp',
			
 
				+                            this.layerInfo1,
			
 
				+                            geoJSON.features,
			
 
				+                            'provinceName'
			
 
				+                        );
			
 
				+                    },
			
 
				+                    setIndicatorNum(timestamp) {
			
 
				+                        var ncpProperties = this.ncpProperties[timestamp];
			
 
				+                        var hubeiInfo = this.getProvinceInfo(ncpProperties, '湖北');
			
 
				+                        this.confirmedAdd = hubeiInfo.properties.confirmedAdd;
			
 
				+                        this.suspectedAdd = hubeiInfo.properties.suspectedAdd;
			
 
				+                        this.nowConfirmed = hubeiInfo.properties.nowConfirmed;
			
 
				+
			
 
				+                        var ncpTotal = this.ncpTotal[timestamp][0];
			
 
				+                        this.totalConfirmedAdd = ncpTotal.properties.confirmedAdd;
			
 
				+                        this.totalSuspected = ncpTotal.properties.suspectedAdd;
			
 
				+                        this.totalConfirmedNow = ncpTotal.properties.nowConfirmed;
			
 
				+                    },
			
 
				+                    getProvinceInfo(data, provinceName) {
			
 
				+                        var hubeiInfo = data.find(function(item) {
			
 
				+                            return item.properties.provinceName === provinceName;
			
 
				+                        }) || { properties: {} };
			
 
				+                        return hubeiInfo;
			
 
				+                    },
			
 
				+                    timestamp2Date(timestamp) {
			
 
				+                        return timestamp ? moment(timestamp * 1000).format('YYYY-MM-DD HH:mm:ss') : '';
			
 
				+                    },
			
 
				+                    date2Timestamp(date) {
			
 
				+                        return moment(date, 'YYYY-MM-DD HH:mm:ss').valueOf() / 1000;
			
 
				+                    },
			
 
				+                    getTimeStamps(ncpData) {
			
 
				+                        var data = [];
			
 
				+                        for (var timestamp in ncpData) {
			
 
				+                            data.push(timestamp);
			
 
				+                        }
			
 
				+                        return data;
			
 
				+                    },
			
 
				+                    getNcpFeatures(data, timestamp) {
			
 
				+                        var features = data[timestamp];
			
 
				+                        return {
			
 
				+                            type: 'FeatureCollection',
			
 
				+                            features: features
			
 
				+                        };
			
 
				+                    },
			
 
				+                    updateSourceData(map, sourceId, layerInfo, features, mergeByField) {
			
 
				+                        if (map && map.getSource(sourceId)) {
			
 
				+                            var newFeatures = this.mergeFeatures(sourceId, features, mergeByField);
			
 
				+                            map.getSource(sourceId).setData({
			
 
				+                                type: 'FeatureCollection',
			
 
				+                                features: newFeatures
			
 
				+                            });
			
 
				+                            var expression = this.getExpression(layerInfo, newFeatures);
			
 
				+                            // 获取样式
			
 
				+                            var layerStyle = {
			
 
				+                                layout: {}
			
 
				+                            };
			
 
				+                            layerStyle.layout.visibility = layerInfo.visible;
			
 
				+                            var featureType = layerInfo.featureType;
			
 
				+                            var paint = this.transformStyleToMapBoxGl(layerInfo.style, featureType, expression);
			
 
				+                            for (var key in paint) {
			
 
				+                                map.setPaintProperty(sourceId, key, paint[key]);
			
 
				+                            }
			
 
				+                        }
			
 
				+                    },
			
 
				+                    mergeFeatures(layerId, features, mergeByField) {
			
 
				+                        features = features.map(function(feature, index) {
			
 
				+                            if (!feature.properties.hasOwnProperty('index')) {
			
 
				+                                feature.properties.index = index;
			
 
				+                            }
			
 
				+                            return feature;
			
 
				+                        });
			
 
				+                        if (!mergeByField) {
			
 
				+                            return features;
			
 
				+                        }
			
 
				+                        var source = this.map.getSource(layerId);
			
 
				+                        if (!source || !source._data.features) {
			
 
				+                            return features;
			
 
				+                        }
			
 
				+                        var prevFeatures = source._data.features;
			
 
				+                        var nextFeatures = [];
			
 
				+                        features.forEach(feature => {
			
 
				+                            var prevFeature = prevFeatures.find(item => {
			
 
				+                                if (isNaN(+item.properties[mergeByField]) && isNaN(+feature.properties[mergeByField])) {
			
 
				+                                    return (
			
 
				+                                        JSON.stringify(item.properties[mergeByField] || '') ===
			
 
				+                                        JSON.stringify(feature.properties[mergeByField] || '')
			
 
				+                                    );
			
 
				+                                } else {
			
 
				+                                    return +item.properties[mergeByField] === +feature.properties[mergeByField];
			
 
				+                                }
			
 
				+                            });
			
 
				+                            if (prevFeature) {
			
 
				+                                nextFeatures.push({
			
 
				+                                    ...prevFeature,
			
 
				+                                    ...feature
			
 
				+                                });
			
 
				+                            } else if (feature.geometry) {
			
 
				+                                nextFeatures.push(feature);
			
 
				+                            }
			
 
				+                        });
			
 
				+                        return nextFeatures;
			
 
				+                    },
			
 
				+                    getExpression(layerInfo, features) {
			
 
				+                        var fieldName = layerInfo.themeSetting.themeField;
			
 
				+                        var featureType = layerInfo.featureType;
			
 
				+                        var styleGroups = this.getRangeStyleGroup(layerInfo, features);
			
 
				+                        var expression = ['match', ['get', 'index']];
			
 
				+                        var datas = features.filter((row, index, arr) => {
			
 
				+                            var tartget = parseFloat(row.properties[fieldName]);
			
 
				+                            if (!tartget && tartget !== 0) {
			
 
				+                                return false;
			
 
				+                            }
			
 
				+                            if (styleGroups) {
			
 
				+                                for (var i = 0; i < styleGroups.length; i++) {
			
 
				+                                    if (styleGroups[i].start <= tartget && tartget < styleGroups[i].end) {
			
 
				+                                        expression.push(row.properties['index'], styleGroups[i].color);
			
 
				+                                        break;
			
 
				+                                    }
			
 
				+                                }
			
 
				+                            }
			
 
				+                            return true;
			
 
				+                        }, this);
			
 
				+                        expression.push('rgba(255, 255, 255, 1)');
			
 
				+                        return expression;
			
 
				+                    },
			
 
				+                    getRangeStyleGroup(layerInfo, features) {
			
 
				+                        var featureType = layerInfo.featureType;
			
 
				+                        var style = layerInfo.style;
			
 
				+                        var themeSetting = layerInfo.themeSetting;
			
 
				+                        var customSettings = themeSetting.customSettings;
			
 
				+                        var themeField = themeSetting.themeField;
			
 
				+                        var segmentMethod = themeSetting.segmentMethod;
			
 
				+                        var colors = themeSetting.colors;
			
 
				+                        var segmentCount = themeSetting.segmentCount;
			
 
				+                        var values = [];
			
 
				+                        var attributes;
			
 
				+
			
 
				+                        features.forEach(feature => {
			
 
				+                            attributes = feature.properties;
			
 
				+                            if (attributes) {
			
 
				+                                var val = attributes[themeField];
			
 
				+                                (val || val === 0) && Number(+val) && values.push(parseFloat(val));
			
 
				+                            }
			
 
				+                        }, this);
			
 
				+
			
 
				+                        var segements = SuperMap.ArrayStatistic.getArraySegments(values, segmentMethod, segmentCount);
			
 
				+                        if (segements) {
			
 
				+                            var itemNum = segmentCount;
			
 
				+                            if (attributes && segements[0] === segements[attributes.length - 1]) {
			
 
				+                                itemNum = 1;
			
 
				+                                segements.length = 2;
			
 
				+                            }
			
 
				+                            for (var i = 0; i < segements.length; i++) {
			
 
				+                                var value = segements[i];
			
 
				+                                value = i === 0 ? Math.floor(value * 100) / 100 : Math.ceil(value * 100) / 100 + 0.1; // 加0.1 解决最大值没有样式问题
			
 
				+                                segements[i] = Number(value.toFixed(2));
			
 
				+                            }
			
 
				+
			
 
				+                            var curentColors = colors;
			
 
				+                            curentColors = SuperMap.ColorsPickerUtil.getGradientColors(curentColors, itemNum, 'RANGE');
			
 
				+                            for (var index = 0; index < itemNum; index++) {
			
 
				+                                if (index in customSettings) {
			
 
				+                                    if (customSettings[index]['segment']['start']) {
			
 
				+                                        segements[index] = customSettings[index]['segment']['start'];
			
 
				+                                    }
			
 
				+                                    if (customSettings[index]['segment']['end']) {
			
 
				+                                        segements[index + 1] = customSettings[index]['segment']['end'];
			
 
				+                                    }
			
 
				+                                }
			
 
				+                            }
			
 
				+                            var styleGroups = [];
			
 
				+                            for (var i = 0; i < itemNum; i++) {
			
 
				+                                var color = curentColors[i];
			
 
				+                                if (i in customSettings) {
			
 
				+                                    if (customSettings[i].color) {
			
 
				+                                        color = customSettings[i].color;
			
 
				+                                    }
			
 
				+                                }
			
 
				+                                style.fillColor = color;
			
 
				+                                var start = segements[i];
			
 
				+                                var end = segements[i + 1];
			
 
				+                                var styleObj = JSON.parse(JSON.stringify(style));
			
 
				+                                styleGroups.push({
			
 
				+                                    style: styleObj,
			
 
				+                                    color: color,
			
 
				+                                    start: start,
			
 
				+                                    end: end
			
 
				+                                });
			
 
				+                            }
			
 
				+                            return styleGroups;
			
 
				+                        }
			
 
				+                    },
			
 
				+                    transformStyleToMapBoxGl(style, type, expression, expressionType) {
			
 
				+                        var transTable = {};
			
 
				+                        if (['REGION', 'POLYGON', 'MULTIPOLYGON'].includes(type)) {
			
 
				+                            transTable = {
			
 
				+                                fillColor: 'fill-color',
			
 
				+                                fillOpacity: 'fill-opacity'
			
 
				+                            };
			
 
				+                        }
			
 
				+                        var newObj = {};
			
 
				+                        for (var item in style) {
			
 
				+                            if (transTable[item]) {
			
 
				+                                newObj[transTable[item]] = style[item];
			
 
				+                            }
			
 
				+                        }
			
 
				+                        if (expression) {
			
 
				+                            newObj['fill-color'] = expression;
			
 
				+                        }
			
 
				+                        return newObj;
			
 
				+                    }
			
 
				+                }
			
 
				+            });
			
 
				+        </script>
			
 
				+    </body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_timeline_supermap.html
+++ b/public/supermap/examples/component/components_timeline_supermap.html
@@ -0,0 +1,301 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2020 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+    <head>
			
 
				+        <meta charset="UTF-8" />
			
 
				+        <title data-i18n="resources.title_componentsTimeLineSupermap_Vue"></title>
			
 
				+        <script type="text/javascript" include="vue,jquery" src="../js/include-web.js"></script>
			
 
				+        <script
			
 
				+            include="echarts-vue,iclient-mapboxgl-vue,mapbox-gl-enhance"
			
 
				+            src="../../dist/mapboxgl/include-mapboxgl.js"
			
 
				+        ></script>
			
 
				+        <style>
			
 
				+            #main {
			
 
				+                margin: 0 auto;
			
 
				+                width: 100%;
			
 
				+                height: 100%;
			
 
				+            }
			
 
				+            .sm-component-time-line {
			
 
				+                position: absolute;
			
 
				+                bottom: 20px;
			
 
				+                width: 100%;
			
 
				+                height: 80px;
			
 
				+                z-index: 1000;
			
 
				+            }
			
 
				+            .sm-supermap-title {
			
 
				+                position: absolute;
			
 
				+                top: 20px;
			
 
				+                left: 20px;
			
 
				+                width: 600px;
			
 
				+                height: 50px;
			
 
				+                z-index: 1000;
			
 
				+            }
			
 
				+            .sm-time-info {
			
 
				+                position: absolute;
			
 
				+                top: 20px;
			
 
				+                right: 50px;
			
 
				+                width: 300px;
			
 
				+                height: 50px;
			
 
				+                z-index: 1000;
			
 
				+            }
			
 
				+            .sm-component-spin {
			
 
				+                background: transparent !important;
			
 
				+            }
			
 
				+        </style>
			
 
				+    </head>
			
 
				+
			
 
				+    <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
			
 
				+        <div id="main">
			
 
				+            <sm-web-map
			
 
				+                server-url="https://www.supermapol.com"
			
 
				+                :map-id="35063750"
			
 
				+                :tianditu-key="tiandituKey"
			
 
				+                :map-options="mapOptions"
			
 
				+                :loading="loading"
			
 
				+                @load="load"
			
 
				+            ></sm-web-map>
			
 
				+            <sm-time-line
			
 
				+                ref="timeLine"
			
 
				+                :data="data"
			
 
				+                :play-interval="2000"
			
 
				+                :next-enable="nextEnable"
			
 
				+                :label="label"
			
 
				+                @timelinechanged="timelineChanged"
			
 
				+                @timelineplaychanged="timelineplaychanged"
			
 
				+            ></sm-time-line>
			
 
				+
			
 
				+            <sm-border type="border6" class="sm-supermap-title">
			
 
				+                <sm-text
			
 
				+                    title="超图大厦（成都）周边历史影像"
			
 
				+                    :font-style="{fontSize: '28px', fontWeight: 600}"
			
 
				+                ></sm-text>
			
 
				+            </sm-border>
			
 
				+            <sm-border type="border6" class="sm-time-info">
			
 
				+                <sm-text :title="timeInfo" :font-style="{fontSize: '18px', fontWeight: 600}"></sm-text>
			
 
				+            </sm-border>
			
 
				+        </div>
			
 
				+        <script>
			
 
				+            var label = [
			
 
				+                '2016年11月26日',
			
 
				+                '2017年4月13日',
			
 
				+                '2017年5月25日',
			
 
				+                '2017年11月11日',
			
 
				+                '2017年12月19日',
			
 
				+                '2018年1月10日',
			
 
				+                '2018年5月25日',
			
 
				+                '2019年11月11日'
			
 
				+            ];
			
 
				+            new Vue({
			
 
				+                el: '#main',
			
 
				+                data() {
			
 
				+                    return {
			
 
				+                        mapStatus: [],
			
 
				+                        mapQueue: [],
			
 
				+                        loading: false,
			
 
				+                        readyNext: true,
			
 
				+                        nextEnable: false,
			
 
				+                        tiandituKey: 'f16b023603de8ae8fdd09a2c0feb1ec2',
			
 
				+                        tooltip: {
			
 
				+                            formatter: function(params) {
			
 
				+                                return params.name;
			
 
				+                            }
			
 
				+                        },
			
 
				+                        label: {
			
 
				+                            formatter: function(val, index) {
			
 
				+                                return label[index];
			
 
				+                            }
			
 
				+                        },
			
 
				+                        url:
			
 
				+                            'https://www.supermapol.com/proxy/iserver/services/map_supermap_building1_qqm0ighb/rest/maps/',
			
 
				+                        encodeUrl:
			
 
				+                            '/image.png?viewBounds=%7B"leftBottom"%3A%7B"x"%3A11586898.539611159%2C"y"%3A3570491.9618448047%7D%2C"rightTop"%3A%7B"x"%3A11588127.387288133%2C"y"%3A3571087.184938393%7D%7D%20&center=%7B"x"%3A11587505.74%2C"y"%3A3570771.31%7D&width=1920&scale=0.000346564548&prjCoordSys=%7B"epsgCode"%3A3857%7D&transparent=true&height=930',
			
 
				+                        data: [
			
 
				+                            'T20161126',
			
 
				+                            'T20170413',
			
 
				+                            'T20170525',
			
 
				+                            'T20171111',
			
 
				+                            'T20171219',
			
 
				+                            'T20180110',
			
 
				+                            'T20180525',
			
 
				+                            'T20191111'
			
 
				+                        ],
			
 
				+                        timeInfo: label[0],
			
 
				+                        mapOptions: {
			
 
				+                            style: { version: 8, sources: {}, layers: [] },
			
 
				+                            center: [104.0924, 30.5217],
			
 
				+                            zoom: 18,
			
 
				+                            bearing: 0,
			
 
				+                            pitch: 0,
			
 
				+                            tileSize: 1024,
			
 
				+                            rasterTileSize: 1024
			
 
				+                        }
			
 
				+                    };
			
 
				+                },
			
 
				+                computed: {
			
 
				+                    allLoaded() {
			
 
				+                        if (this.mapStatus.length) {
			
 
				+                            var allLoaded = true;
			
 
				+                            this.mapStatus.forEach(function(item) {
			
 
				+                                if (!item.status) {
			
 
				+                                    allLoaded = false;
			
 
				+                                }
			
 
				+                            });
			
 
				+                            return allLoaded;
			
 
				+                        }
			
 
				+                        return false;
			
 
				+                    }
			
 
				+                },
			
 
				+                watch: {
			
 
				+                    mapStatus: {
			
 
				+                        handler() {
			
 
				+                            var nextEnable = false;
			
 
				+                            var currentIndex = this.currentIndex;
			
 
				+                            this.mapStatus.forEach(function(item, index) {
			
 
				+                                if (currentIndex === index && item.status) {
			
 
				+                                    nextEnable = true;
			
 
				+                                }
			
 
				+                            });
			
 
				+                            this.nextEnable = nextEnable;
			
 
				+                        }
			
 
				+                    },
			
 
				+                    allLoaded() {
			
 
				+                        this.playState && this.setPlayState(true);
			
 
				+                        this.nextEnable = null;
			
 
				+                    }
			
 
				+                },
			
 
				+                created() {
			
 
				+                    SuperMap.Components.setTheme({ textColor: '#fff', background: 'rgb(0,0,0,0)' });
			
 
				+                    this.$on('addlayerssucceeded', this.updateNextRasterSource);
			
 
				+                    this.$on('loadingChange', this.loadingChange);
			
 
				+                },
			
 
				+                methods: {
			
 
				+                    load(e) {
			
 
				+                        this.map = e.map;
			
 
				+                        this.resetMapLoadStatus();
			
 
				+                    },
			
 
				+                    loadingChange(status) {
			
 
				+                        this.loading = status;
			
 
				+                    },
			
 
				+                    timelineplaychanged(val) {
			
 
				+                        this.playState = val.playState;
			
 
				+                    },
			
 
				+                    timelineChanged(val) {
			
 
				+                        var currentIndex = (val && val.currentIndex) || 0;
			
 
				+                        var dataId = this.data[currentIndex];
			
 
				+                        var imageUrl = this.url + dataId + this.encodeUrl;
			
 
				+                        this.currentIndex = currentIndex;
			
 
				+                        var sourceId = this.data[0];
			
 
				+                        if (!this.readyNext) {
			
 
				+                            this.mapQueue.push({ key: dataId, sourceId: sourceId, imageUrl: imageUrl });
			
 
				+                            return;
			
 
				+                        }
			
 
				+                        this.readyNext = false;
			
 
				+                        this.timeInfo = label[currentIndex];
			
 
				+                        this.updateRasterSource(sourceId, imageUrl);
			
 
				+                    },
			
 
				+                    updateRasterSource(sourceId, imageUrl) {
			
 
				+                        if (this.map.getLayer(sourceId)) {
			
 
				+                            this.map.setLayoutProperty(sourceId, 'visibility', 'none');
			
 
				+                        }
			
 
				+                        sourceId = sourceId + '_image';
			
 
				+                        var source = this.map.getSource(sourceId);
			
 
				+                        if (!source) {
			
 
				+                            this.map.addSource(sourceId, {
			
 
				+                                type: 'image',
			
 
				+                                url: imageUrl,
			
 
				+                                coordinates: [
			
 
				+                                    [104.08688053674865, 30.524020349913428],
			
 
				+                                    [104.09791946324947, 30.524020349913428],
			
 
				+                                    [104.09791946324947, 30.519414264971005],
			
 
				+                                    [104.08688053674865, 30.519414264971005]
			
 
				+                                ]
			
 
				+                            });
			
 
				+                            this.map.addLayer({
			
 
				+                                id: sourceId,
			
 
				+                                type: 'raster',
			
 
				+                                source: sourceId,
			
 
				+                                paint: {
			
 
				+                                    'raster-fade-duration': 0
			
 
				+                                }
			
 
				+                            });
			
 
				+                        } else {
			
 
				+                            source.updateImage({ url: imageUrl });
			
 
				+                        }
			
 
				+                        this.$emit('addlayerssucceeded');
			
 
				+                    },
			
 
				+                    updateNextRasterSource() {
			
 
				+                        this.readyNext = true;
			
 
				+                        if (this.mapQueue.length) {
			
 
				+                            var { id: mapId, sourceId, imageUrl } = this.mapQueue.shift();
			
 
				+                            this.updateRasterSource(sourceId, imageUrl);
			
 
				+                        } else {
			
 
				+                            var key = this.data[this.currentIndex];
			
 
				+                            var sourceCaches = this.map.style.sourceCaches;
			
 
				+                            var beforeIds = [];
			
 
				+                            for (var sourceId in sourceCaches) {
			
 
				+                                beforeIds.push(sourceId);
			
 
				+                            }
			
 
				+                        }
			
 
				+                        !this.allLoaded && this.isAllSourceLoaded(key, beforeIds);
			
 
				+                    },
			
 
				+                    setPlayState(status) {
			
 
				+                        this.$refs.timeLine.setPlayState(status);
			
 
				+                    },
			
 
				+                    isAllSourceLoaded(key, sourceIds) {
			
 
				+                        if (this.timer) {
			
 
				+                            clearInterval(this.timer);
			
 
				+                            this.timer = null;
			
 
				+                        }
			
 
				+                        var map = this.map;
			
 
				+                        var _this = this;
			
 
				+                        this.timer = setInterval(function() {
			
 
				+                            _this.$emit('loadingChange', true);
			
 
				+                            var loaded = true;
			
 
				+                            sourceIds.forEach(function(id) {
			
 
				+                                if (_this.map && _this.map.style) {
			
 
				+                                    if (!_this.map.getSource(id)) {
			
 
				+                                        return true;
			
 
				+                                    }
			
 
				+                                    if (!_this.map.isSourceLoaded(id)) {
			
 
				+                                        loaded = false;
			
 
				+                                    }
			
 
				+                                    return _this.map.isSourceLoaded(id);
			
 
				+                                }
			
 
				+                                return true;
			
 
				+                            });
			
 
				+                            _this.nextEnable = false;
			
 
				+                            if (loaded && _this.mapStatus) {
			
 
				+                                clearInterval(_this.timer);
			
 
				+                                _this.timer = null;
			
 
				+                                var mapStatus = _this.mapStatus.concat();
			
 
				+                                mapStatus.forEach(function(info) {
			
 
				+                                    if (info.key === key) {
			
 
				+                                        info.status = true;
			
 
				+                                    }
			
 
				+                                });
			
 
				+                                _this.mapStatus = mapStatus;
			
 
				+                                _this.$emit('loadingChange', false);
			
 
				+                            }
			
 
				+                        }, 100);
			
 
				+                    },
			
 
				+                    resetMapLoadStatus() {
			
 
				+                        var mapStatus = [];
			
 
				+                        if (this.mapStatus && this.mapStatus.length) {
			
 
				+                            mapStatus = this.mapStatus.map(function(info) {
			
 
				+                                info.status = false;
			
 
				+                                return info;
			
 
				+                            });
			
 
				+                        } else {
			
 
				+                            this.data.forEach(function(key) {
			
 
				+                                mapStatus.push({ key: key, status: false });
			
 
				+                            });
			
 
				+                        }
			
 
				+                        this.mapStatus = mapStatus;
			
 
				+                    }
			
 
				+                }
			
 
				+            });
			
 
				+        </script>
			
 
				+    </body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_timeline_tracklayer.html
+++ b/public/supermap/examples/component/components_timeline_tracklayer.html
@@ -0,0 +1,857 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+    <head>
			
 
				+        <meta charset="UTF-8" />
			
 
				+        <title data-i18n="resources.title_componentsTimeLineTracklayer_Vue"></title>
			
 
				+        <script type="text/javascript" include="vue,jquery,papaparse" src="../js/include-web.js"></script>
			
 
				+        <script
			
 
				+            include="lodash,moment,three92,LoaderSupport,OBJLoader2,echarts-vue,iclient-mapboxgl-vue,mapbox-gl-enhance"
			
 
				+            src="../../dist/mapboxgl/include-mapboxgl.js"
			
 
				+        ></script>
			
 
				+        <style>
			
 
				+            #main {
			
 
				+                position: relative;
			
 
				+                margin: 0 auto;
			
 
				+                width: 100%;
			
 
				+                height: 100%;
			
 
				+            }
			
 
				+            .sm-left-part {
			
 
				+                position: absolute;
			
 
				+                width: 270px;
			
 
				+                height: 100%;
			
 
				+                z-index: 1000;
			
 
				+                background: rgba(0, 0, 0, 0.73);
			
 
				+            }
			
 
				+            .sm-chart-wrapper .sm-component-chart {
			
 
				+                display: flex;
			
 
				+            }
			
 
				+            .sm-component-time-slider {
			
 
				+                position: absolute;
			
 
				+                left: 270px;
			
 
				+                bottom: 0px;
			
 
				+                width: calc(100% - 270px);
			
 
				+                z-index: 1000;
			
 
				+            }
			
 
				+            .sm-component-web-map {
			
 
				+                position: absolute;
			
 
				+                width: 100%;
			
 
				+                height: 100%;
			
 
				+            }
			
 
				+            .sm-gauge-wrapper {
			
 
				+                position: absolute;
			
 
				+                bottom: 0px;
			
 
				+                width: 100%;
			
 
				+                margin: 0 auto;
			
 
				+            }
			
 
				+            .sm-gauge-item {
			
 
				+                position: relative;
			
 
				+            }
			
 
				+            .sm-component-text {
			
 
				+                position: absolute;
			
 
				+                bottom: 0;
			
 
				+                width: 100%;
			
 
				+            }
			
 
				+            .sm-component-text span {
			
 
				+                margin: 0 auto;
			
 
				+            }
			
 
				+            .sm-chart-wrapper .sm-component-chart,
			
 
				+            .sm-chart-wrapper .sm-component-chart .sm-component-collapse-card__content {
			
 
				+                width: 270px;
			
 
				+                height: 160px;
			
 
				+            }
			
 
				+            .sm-gauge-wrapper .sm-component-chart,
			
 
				+            .sm-gauge-wrapper .sm-component-chart .sm-component-collapse-card__content {
			
 
				+                width: 130px;
			
 
				+                height: 100px;
			
 
				+            }
			
 
				+        </style>
			
 
				+    </head>
			
 
				+
			
 
				+    <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
			
 
				+        <div id="main">
			
 
				+            <sm-web-map :map-options="mapOptions" :tianditu-key="tiandituKey">
			
 
				+                <sm-track-layer v-bind="trackLayers" :position="position"></sm-track-layer>
			
 
				+            </sm-web-map>
			
 
				+            <div class="sm-left-part">
			
 
				+                <div class="sm-chart-wrapper">
			
 
				+                    <sm-chart icon-class="" v-bind="chart" :dataset="dataset"></sm-chart>
			
 
				+                    <sm-chart icon-class="" v-bind="chart1" :dataset="dataset"></sm-chart>
			
 
				+                    <sm-chart icon-class="" v-bind="chart2" :dataset="dataset"></sm-chart>
			
 
				+                </div>
			
 
				+                <div class="sm-gauge-wrapper">
			
 
				+                    <div class="sm-gauge-item" style="width:100%">
			
 
				+                        <sm-chart
			
 
				+                            icon-class=""
			
 
				+                            v-bind="gauge"
			
 
				+                            :dataset="gaugeDataset"
			
 
				+                            style="margin: 0 auto"
			
 
				+                        ></sm-chart>
			
 
				+                        <sm-text title="速度"></sm-text>
			
 
				+                    </div>
			
 
				+                    <div class="sm-gauge-item" style="display: inline-block;width:49%">
			
 
				+                        <sm-chart icon-class="" v-bind="gauge1" :dataset="gaugeDataset"></sm-chart>
			
 
				+                        <sm-text title="加速度"></sm-text>
			
 
				+                    </div>
			
 
				+                    <div class="sm-gauge-item" style="display: inline-block;width:49%">
			
 
				+                        <sm-chart icon-class="" v-bind="gauge2" :dataset="gaugeDataset"></sm-chart>
			
 
				+                        <sm-text title="方位角"></sm-text>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+            <sm-time-slider
			
 
				+                :data="data"
			
 
				+                :play-interval="2000"
			
 
				+                :theme-style="themeStyle"
			
 
				+                :checkpoint-style="checkpointStyle"
			
 
				+                :label="themeStyle"
			
 
				+                :line-style="lineStyle"
			
 
				+                @timeplayerchanged="timeplayerchanged"
			
 
				+                background="rgba(0, 0, 0, 0.73)"
			
 
				+            ></sm-time-slider>
			
 
				+        </div>
			
 
				+
			
 
				+        <script>
			
 
				+            new Vue({
			
 
				+                el: '#main',
			
 
				+                data() {
			
 
				+                    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> ";
			
 
				+                    return {
			
 
				+                        tiandituKey: 'f16b023603de8ae8fdd09a2c0feb1ec2',
			
 
				+                        dataset: {
			
 
				+                            maxFeatures: '',
			
 
				+                            type: 'geoJSON',
			
 
				+                            geoJSON: {
			
 
				+                                type: 'FeatureCollection',
			
 
				+                                features: []
			
 
				+                            }
			
 
				+                        },
			
 
				+                        chart: {
			
 
				+                            datasetOptions: [
			
 
				+                                {
			
 
				+                                    seriesType: 'line',
			
 
				+                                    isStastic: false,
			
 
				+                                    isStack: false,
			
 
				+                                    xField: 'timestamp',
			
 
				+                                    yField: 'speed',
			
 
				+                                    sort: 'unsort'
			
 
				+                                }
			
 
				+                            ],
			
 
				+                            options: {
			
 
				+                                series: [
			
 
				+                                    {
			
 
				+                                        data: ['3900', '3340', '3300', '2500', '2000', '520', '100'],
			
 
				+                                        name: 'Y1',
			
 
				+                                        emphasis: { itemStyle: {} },
			
 
				+                                        stack: 0,
			
 
				+                                        type: 'line',
			
 
				+                                        smooth: true,
			
 
				+                                        animationEasing: 'quadraticIn',
			
 
				+                                        animationEasingUpdate: 'quadraticIn',
			
 
				+                                        label: {
			
 
				+                                            normal: {
			
 
				+                                                position: 'top',
			
 
				+                                                show: false,
			
 
				+                                                textStyle: { fontSize: 12 },
			
 
				+                                                smart: false
			
 
				+                                            }
			
 
				+                                        },
			
 
				+                                        showAllSymbol: 'auto',
			
 
				+                                        symbol: 'emptyCircle',
			
 
				+                                        symbolSize: 4,
			
 
				+                                        itemStyle: { borderWidth: 2, color: '#F2F5F8', borderColor: '#F2F5F8' },
			
 
				+                                        lineStyle: { color: '#F2F5F8' }
			
 
				+                                    }
			
 
				+                                ],
			
 
				+                                yAxis: {
			
 
				+                                    axisLabel: {
			
 
				+                                        rotate: 0,
			
 
				+                                        fontFamily: 'MicrosoftYaHei',
			
 
				+                                        show: true,
			
 
				+                                        color: '#fff',
			
 
				+                                        fontSize: 12,
			
 
				+                                        align: 'right',
			
 
				+                                        margin: 8
			
 
				+                                    },
			
 
				+                                    axisLine: { lineStyle: { color: '#fff' }, show: true },
			
 
				+                                    name: '速度',
			
 
				+                                    show: true,
			
 
				+                                    splitLine: {
			
 
				+                                        lineStyle: { width: 0.3, type: 'solid', color: '#ccc', opacity: 1 },
			
 
				+                                        show: true
			
 
				+                                    },
			
 
				+                                    splitArea: { show: false },
			
 
				+                                    nameGap: 5,
			
 
				+                                    nameLocation: 'end',
			
 
				+                                    type: 'value',
			
 
				+                                    nameTextStyle: { padding: [0, 0, 5, 0] },
			
 
				+                                    axisTick: { show: false }
			
 
				+                                },
			
 
				+                                xAxis: {
			
 
				+                                    axisLabel: {
			
 
				+                                        rotate: 0,
			
 
				+                                        fontFamily: 'MicrosoftYaHei',
			
 
				+                                        show: false,
			
 
				+                                        color: '#fff',
			
 
				+                                        fontSize: 12,
			
 
				+                                        align: 'center',
			
 
				+                                        margin: 8
			
 
				+                                    },
			
 
				+                                    data: ['Fri', 'Thu', 'Sat', 'Sun', 'Wed', 'Tue', 'Mon'],
			
 
				+                                    axisLine: { lineStyle: { color: '#fff' }, show: false },
			
 
				+                                    show: true,
			
 
				+                                    name: '',
			
 
				+                                    axisTick: { alignWithLabel: true, show: false },
			
 
				+                                    splitLine: {
			
 
				+                                        lineStyle: { type: 'solid', color: '#ccc', opacity: 1, width: 0.3 },
			
 
				+                                        show: false
			
 
				+                                    },
			
 
				+                                    nameGap: 2,
			
 
				+                                    nameLocation: 'end',
			
 
				+                                    type: 'category',
			
 
				+                                    boundaryGap: true
			
 
				+                                },
			
 
				+                                grid: { top: 35, left: 36, bottom: 35, right: 20 },
			
 
				+                                legend: {
			
 
				+                                    data: ['speed'],
			
 
				+                                    show: false,
			
 
				+                                    textStyle: { color: '#fff', fontSize: 12 },
			
 
				+                                    type: 'scroll',
			
 
				+                                    top: 'top',
			
 
				+                                    left: 'center'
			
 
				+                                },
			
 
				+                                tooltip: {
			
 
				+                                    axisPointer: { shadowStyle: {}, type: 'line' },
			
 
				+                                    trigger: 'axis',
			
 
				+                                    textStyle: { align: 'left' }
			
 
				+                                },
			
 
				+                                textStyle: { fontFamily: 'Microsoft YaHei Light' },
			
 
				+                                title: {
			
 
				+                                    padding: [5, 0, 0, 20],
			
 
				+                                    x: 'left',
			
 
				+                                    text: '',
			
 
				+                                    textStyle: { fontFamily: 'Microsoft YaHei Light', fontWeight: '100' }
			
 
				+                                },
			
 
				+                                dataZoom: []
			
 
				+                            }
			
 
				+                        },
			
 
				+                        chart1: {
			
 
				+                            datasetOptions: [
			
 
				+                                {
			
 
				+                                    seriesType: 'line',
			
 
				+                                    isStastic: false,
			
 
				+                                    isStack: false,
			
 
				+                                    xField: 'timestamp',
			
 
				+                                    yField: 'acceleration',
			
 
				+                                    sort: 'unsort'
			
 
				+                                }
			
 
				+                            ],
			
 
				+                            options: {
			
 
				+                                series: [
			
 
				+                                    {
			
 
				+                                        data: ['3900', '3340', '3300', '2500', '2000', '520', '100'],
			
 
				+                                        name: 'Y1',
			
 
				+                                        emphasis: { itemStyle: {} },
			
 
				+                                        stack: 0,
			
 
				+                                        type: 'line',
			
 
				+                                        smooth: true,
			
 
				+                                        animationEasing: 'quadraticIn',
			
 
				+                                        animationEasingUpdate: 'quadraticIn',
			
 
				+                                        label: {
			
 
				+                                            normal: {
			
 
				+                                                position: 'top',
			
 
				+                                                show: false,
			
 
				+                                                textStyle: { fontSize: 12 },
			
 
				+                                                smart: false
			
 
				+                                            }
			
 
				+                                        },
			
 
				+                                        showAllSymbol: 'auto',
			
 
				+                                        symbol: 'emptyCircle',
			
 
				+                                        symbolSize: 4,
			
 
				+                                        itemStyle: { borderWidth: 2, color: '#F2F5F8', borderColor: '#F2F5F8' },
			
 
				+                                        lineStyle: { color: '#F2F5F8' }
			
 
				+                                    }
			
 
				+                                ],
			
 
				+                                yAxis: {
			
 
				+                                    axisLabel: {
			
 
				+                                        rotate: 0,
			
 
				+                                        fontFamily: 'MicrosoftYaHei',
			
 
				+                                        show: true,
			
 
				+                                        color: '#fff',
			
 
				+                                        fontSize: 12,
			
 
				+                                        align: 'right',
			
 
				+                                        margin: 8
			
 
				+                                    },
			
 
				+                                    axisLine: { lineStyle: { color: '#fff' }, show: true },
			
 
				+                                    name: '加速度',
			
 
				+                                    show: true,
			
 
				+                                    splitLine: {
			
 
				+                                        lineStyle: { width: 0.3, type: 'solid', color: '#ccc', opacity: 1 },
			
 
				+                                        show: true
			
 
				+                                    },
			
 
				+                                    splitArea: { show: false },
			
 
				+                                    nameGap: 5,
			
 
				+                                    nameLocation: 'end',
			
 
				+                                    type: 'value',
			
 
				+                                    nameTextStyle: { padding: [0, 0, 5, 0] },
			
 
				+                                    axisTick: { show: false }
			
 
				+                                },
			
 
				+                                xAxis: {
			
 
				+                                    axisLabel: {
			
 
				+                                        rotate: 0,
			
 
				+                                        fontFamily: 'MicrosoftYaHei',
			
 
				+                                        show: false,
			
 
				+                                        color: '#fff',
			
 
				+                                        fontSize: 12,
			
 
				+                                        align: 'center',
			
 
				+                                        margin: 8
			
 
				+                                    },
			
 
				+                                    data: ['Fri', 'Thu', 'Sat', 'Sun', 'Wed', 'Tue', 'Mon'],
			
 
				+                                    axisLine: { lineStyle: { color: '#fff' }, show: false },
			
 
				+                                    show: true,
			
 
				+                                    name: '',
			
 
				+                                    axisTick: { alignWithLabel: true, show: false },
			
 
				+                                    splitLine: {
			
 
				+                                        lineStyle: { type: 'solid', color: '#ccc', opacity: 1, width: 0.3 },
			
 
				+                                        show: false
			
 
				+                                    },
			
 
				+                                    nameGap: 2,
			
 
				+                                    nameLocation: 'end',
			
 
				+                                    type: 'category',
			
 
				+                                    boundaryGap: true
			
 
				+                                },
			
 
				+                                grid: { top: 35, left: 36, bottom: 35, right: 20 },
			
 
				+                                legend: {
			
 
				+                                    data: ['acceleration'],
			
 
				+                                    show: false,
			
 
				+                                    textStyle: { color: '#fff', fontSize: 12 },
			
 
				+                                    type: 'scroll',
			
 
				+                                    top: 'top',
			
 
				+                                    left: 'center'
			
 
				+                                },
			
 
				+                                tooltip: {
			
 
				+                                    axisPointer: { shadowStyle: {}, type: 'line' },
			
 
				+                                    trigger: 'axis',
			
 
				+                                    textStyle: { align: 'left' }
			
 
				+                                },
			
 
				+                                textStyle: { fontFamily: 'Microsoft YaHei Light' },
			
 
				+                                title: {
			
 
				+                                    padding: [5, 0, 0, 20],
			
 
				+                                    x: 'left',
			
 
				+                                    text: '',
			
 
				+                                    textStyle: { fontFamily: 'Microsoft YaHei Light', fontWeight: '100' }
			
 
				+                                },
			
 
				+                                dataZoom: []
			
 
				+                            }
			
 
				+                        },
			
 
				+                        chart2: {
			
 
				+                            datasetOptions: [
			
 
				+                                {
			
 
				+                                    seriesType: 'line',
			
 
				+                                    isStastic: false,
			
 
				+                                    isStack: false,
			
 
				+                                    xField: 'timestamp',
			
 
				+                                    yField: 'wheel_angle',
			
 
				+                                    sort: 'unsort'
			
 
				+                                }
			
 
				+                            ],
			
 
				+                            options: {
			
 
				+                                series: [
			
 
				+                                    {
			
 
				+                                        data: ['3900', '3340', '3300', '2500', '2000', '520', '100'],
			
 
				+                                        name: 'Y1',
			
 
				+                                        emphasis: { itemStyle: {} },
			
 
				+                                        stack: 0,
			
 
				+                                        type: 'line',
			
 
				+                                        smooth: true,
			
 
				+                                        animationEasing: 'quadraticIn',
			
 
				+                                        animationEasingUpdate: 'quadraticIn',
			
 
				+                                        label: {
			
 
				+                                            normal: {
			
 
				+                                                position: 'top',
			
 
				+                                                show: false,
			
 
				+                                                textStyle: { fontSize: 12 },
			
 
				+                                                smart: false
			
 
				+                                            }
			
 
				+                                        },
			
 
				+                                        showAllSymbol: 'auto',
			
 
				+                                        symbol: 'emptyCircle',
			
 
				+                                        symbolSize: 4,
			
 
				+                                        itemStyle: { borderWidth: 2, color: '#F2F5F8', borderColor: '#F2F5F8' },
			
 
				+                                        lineStyle: { color: '#F2F5F8' }
			
 
				+                                    }
			
 
				+                                ],
			
 
				+                                yAxis: {
			
 
				+                                    axisLabel: {
			
 
				+                                        rotate: 0,
			
 
				+                                        fontFamily: 'MicrosoftYaHei',
			
 
				+                                        show: true,
			
 
				+                                        color: '#fff',
			
 
				+                                        fontSize: 12,
			
 
				+                                        align: 'right',
			
 
				+                                        margin: 8
			
 
				+                                    },
			
 
				+                                    axisLine: { lineStyle: { color: '#fff' }, show: true },
			
 
				+                                    name: '方位角',
			
 
				+                                    show: true,
			
 
				+                                    splitLine: {
			
 
				+                                        lineStyle: { width: 0.3, type: 'solid', color: '#ccc', opacity: 1 },
			
 
				+                                        show: true
			
 
				+                                    },
			
 
				+                                    splitArea: { show: false },
			
 
				+                                    nameGap: 5,
			
 
				+                                    nameLocation: 'end',
			
 
				+                                    type: 'value',
			
 
				+                                    nameTextStyle: { padding: [0, 0, 5, 0] },
			
 
				+                                    axisTick: { show: false }
			
 
				+                                },
			
 
				+                                xAxis: {
			
 
				+                                    axisLabel: {
			
 
				+                                        rotate: 0,
			
 
				+                                        fontFamily: 'MicrosoftYaHei',
			
 
				+                                        show: false,
			
 
				+                                        color: '#fff',
			
 
				+                                        fontSize: 12,
			
 
				+                                        align: 'center',
			
 
				+                                        margin: 8
			
 
				+                                    },
			
 
				+                                    data: ['Fri', 'Thu', 'Sat', 'Sun', 'Wed', 'Tue', 'Mon'],
			
 
				+                                    axisLine: { lineStyle: { color: '#fff' }, show: false },
			
 
				+                                    show: true,
			
 
				+                                    name: '',
			
 
				+                                    axisTick: { alignWithLabel: true, show: false },
			
 
				+                                    splitLine: {
			
 
				+                                        lineStyle: { type: 'solid', color: '#ccc', opacity: 1, width: 0.3 },
			
 
				+                                        show: false
			
 
				+                                    },
			
 
				+                                    nameGap: 2,
			
 
				+                                    nameLocation: 'end',
			
 
				+                                    type: 'category',
			
 
				+                                    boundaryGap: true
			
 
				+                                },
			
 
				+                                grid: { top: 35, left: 36, bottom: 35, right: 20 },
			
 
				+                                legend: {
			
 
				+                                    data: ['wheel_angle'],
			
 
				+                                    show: false,
			
 
				+                                    textStyle: { color: '#fff', fontSize: 12 },
			
 
				+                                    type: 'scroll',
			
 
				+                                    top: 'top',
			
 
				+                                    left: 'center'
			
 
				+                                },
			
 
				+                                tooltip: {
			
 
				+                                    axisPointer: { shadowStyle: {}, type: 'line' },
			
 
				+                                    trigger: 'axis',
			
 
				+                                    textStyle: { align: 'left' }
			
 
				+                                },
			
 
				+                                textStyle: { fontFamily: 'Microsoft YaHei Light' },
			
 
				+                                title: {
			
 
				+                                    padding: [5, 0, 0, 20],
			
 
				+                                    x: 'left',
			
 
				+                                    text: '',
			
 
				+                                    textStyle: { fontFamily: 'Microsoft YaHei Light', fontWeight: '100' }
			
 
				+                                },
			
 
				+                                dataZoom: []
			
 
				+                            }
			
 
				+                        },
			
 
				+                        gaugeDataset: { maxFeatures: 20, url: '', type: '', withCredentials: false },
			
 
				+                        gauge: {
			
 
				+                            datasetOptions: [{ seriesType: 'gauge' }],
			
 
				+                            options: {
			
 
				+                                series: [
			
 
				+                                    {
			
 
				+                                        name: 'inLoop',
			
 
				+                                        type: 'gauge',
			
 
				+                                        min: -15,
			
 
				+                                        max: 15,
			
 
				+                                        center: ['50%', '50%'],
			
 
				+                                        startAngle: 180,
			
 
				+                                        endAngle: 0,
			
 
				+                                        splitNumber: 10,
			
 
				+                                        radius: '70%',
			
 
				+                                        data: [{ value: 0, name: '完成率' }],
			
 
				+                                        title: { show: false, textStyle: { fontSize: 14, color: '#ffffff' } },
			
 
				+                                        detail: { show: true, textStyle: { fontSize: 15, color: '#ffffff' } },
			
 
				+                                        axisTick: { show: false, length: 13, lineStyle: { width: 1, color: '#fff' } },
			
 
				+                                        splitLine: { show: false, length: 20, lineStyle: { width: 2, color: '#fff' } },
			
 
				+                                        axisLabel: {
			
 
				+                                            show: false,
			
 
				+                                            fontSize: 12,
			
 
				+                                            fontWeight: 'normal',
			
 
				+                                            distance: 16,
			
 
				+                                            color: '#fff'
			
 
				+                                        },
			
 
				+                                        axisLine: {
			
 
				+                                            show: true,
			
 
				+                                            lineStyle: {
			
 
				+                                                color: [
			
 
				+                                                    [0.36, '#F2F5F8'],
			
 
				+                                                    [1, '#D3DDE8']
			
 
				+                                                ],
			
 
				+                                                width: 8
			
 
				+                                            }
			
 
				+                                        },
			
 
				+                                        pointer: { show: true, length: '66%', width: 2 },
			
 
				+                                        itemStyle: { show: false, color: 'auto' }
			
 
				+                                    },
			
 
				+                                    {
			
 
				+                                        name: 'outLoop',
			
 
				+                                        type: 'gauge',
			
 
				+                                        min: -15,
			
 
				+                                        max: 15,
			
 
				+                                        center: ['50%', '50%'],
			
 
				+                                        startAngle: 225,
			
 
				+                                        endAngle: -45,
			
 
				+                                        splitNumber: 10,
			
 
				+                                        radius: '75%',
			
 
				+                                        title: { show: false },
			
 
				+                                        detail: { show: false },
			
 
				+                                        axisTick: {
			
 
				+                                            show: false,
			
 
				+                                            length: -8,
			
 
				+                                            lineStyle: { width: 1, color: '#F2F5F8' },
			
 
				+                                            splitNumber: 7
			
 
				+                                        },
			
 
				+                                        splitLine: {
			
 
				+                                            show: false,
			
 
				+                                            length: -20,
			
 
				+                                            lineStyle: { width: 2, color: '#D3DDE8' }
			
 
				+                                        },
			
 
				+                                        axisLabel: { show: false, fontSize: 12, fontWeight: 'normal', distance: 25 },
			
 
				+                                        axisLine: { show: false },
			
 
				+                                        pointer: { show: false },
			
 
				+                                        itemStyle: { show: true, color: '' }
			
 
				+                                    }
			
 
				+                                ]
			
 
				+                            }
			
 
				+                        },
			
 
				+                        gauge1: {
			
 
				+                            datasetOptions: [{ seriesType: 'gauge' }],
			
 
				+                            options: {
			
 
				+                                series: [
			
 
				+                                    {
			
 
				+                                        name: 'inLoop',
			
 
				+                                        type: 'gauge',
			
 
				+                                        min: -0.6,
			
 
				+                                        max: 1.2,
			
 
				+                                        center: ['50%', '50%'],
			
 
				+                                        startAngle: 180,
			
 
				+                                        endAngle: 0,
			
 
				+                                        splitNumber: 10,
			
 
				+                                        radius: '70%',
			
 
				+                                        data: [{ value: 0, name: '完成率' }],
			
 
				+                                        title: { show: false, textStyle: { fontSize: 14, color: '#ffffff' } },
			
 
				+                                        detail: { show: true, textStyle: { fontSize: 15, color: '#ffffff' } },
			
 
				+                                        axisTick: { show: false, length: 13, lineStyle: { width: 1, color: '#fff' } },
			
 
				+                                        splitLine: { show: false, length: 20, lineStyle: { width: 2, color: '#fff' } },
			
 
				+                                        axisLabel: {
			
 
				+                                            show: false,
			
 
				+                                            fontSize: 12,
			
 
				+                                            fontWeight: 'normal',
			
 
				+                                            distance: 16,
			
 
				+                                            color: '#fff'
			
 
				+                                        },
			
 
				+                                        axisLine: {
			
 
				+                                            show: true,
			
 
				+                                            lineStyle: {
			
 
				+                                                color: [
			
 
				+                                                    [0.36, '#F2F5F8'],
			
 
				+                                                    [1, '#D3DDE8']
			
 
				+                                                ],
			
 
				+                                                width: 8
			
 
				+                                            }
			
 
				+                                        },
			
 
				+                                        pointer: { show: true, length: '66%', width: 2 },
			
 
				+                                        itemStyle: { show: false, color: 'auto' }
			
 
				+                                    },
			
 
				+                                    {
			
 
				+                                        name: 'outLoop',
			
 
				+                                        type: 'gauge',
			
 
				+                                        min: -0.6,
			
 
				+                                        max: 1.2,
			
 
				+                                        center: ['50%', '50%'],
			
 
				+                                        startAngle: 225,
			
 
				+                                        endAngle: -45,
			
 
				+                                        splitNumber: 10,
			
 
				+                                        radius: '75%',
			
 
				+                                        title: { show: false },
			
 
				+                                        detail: { show: false },
			
 
				+                                        axisTick: {
			
 
				+                                            show: false,
			
 
				+                                            length: -8,
			
 
				+                                            lineStyle: { width: 1, color: '#F2F5F8' },
			
 
				+                                            splitNumber: 7
			
 
				+                                        },
			
 
				+                                        splitLine: {
			
 
				+                                            show: false,
			
 
				+                                            length: -20,
			
 
				+                                            lineStyle: { width: 2, color: '#D3DDE8' }
			
 
				+                                        },
			
 
				+                                        axisLabel: { show: false, fontSize: 12, fontWeight: 'normal', distance: 25 },
			
 
				+                                        axisLine: { show: false },
			
 
				+                                        pointer: { show: false },
			
 
				+                                        itemStyle: { show: true, color: '' }
			
 
				+                                    }
			
 
				+                                ]
			
 
				+                            }
			
 
				+                        },
			
 
				+                        gauge2: {
			
 
				+                            datasetOptions: [{ seriesType: 'gauge' }],
			
 
				+                            options: {
			
 
				+                                series: [
			
 
				+                                    {
			
 
				+                                        name: 'inLoop',
			
 
				+                                        type: 'gauge',
			
 
				+                                        min: 0,
			
 
				+                                        max: 7,
			
 
				+                                        center: ['50%', '50%'],
			
 
				+                                        startAngle: 180,
			
 
				+                                        endAngle: 0,
			
 
				+                                        splitNumber: 10,
			
 
				+                                        radius: '70%',
			
 
				+                                        data: [{ value: 0, name: '完成率' }],
			
 
				+                                        title: { show: false, textStyle: { fontSize: 14, color: '#ffffff' } },
			
 
				+                                        detail: { show: true, textStyle: { fontSize: 15, color: '#ffffff' } },
			
 
				+                                        axisTick: { show: false, length: 13, lineStyle: { width: 1, color: '#fff' } },
			
 
				+                                        splitLine: { show: false, length: 20, lineStyle: { width: 2, color: '#fff' } },
			
 
				+                                        axisLabel: {
			
 
				+                                            show: false,
			
 
				+                                            fontSize: 12,
			
 
				+                                            fontWeight: 'normal',
			
 
				+                                            distance: 16,
			
 
				+                                            color: '#fff'
			
 
				+                                        },
			
 
				+                                        axisLine: {
			
 
				+                                            show: true,
			
 
				+                                            lineStyle: {
			
 
				+                                                color: [
			
 
				+                                                    [0.36, '#F2F5F8'],
			
 
				+                                                    [1, '#D3DDE8']
			
 
				+                                                ],
			
 
				+                                                width: 8
			
 
				+                                            }
			
 
				+                                        },
			
 
				+                                        pointer: { show: true, length: '66%', width: 2 },
			
 
				+                                        itemStyle: { show: false, color: 'auto' }
			
 
				+                                    },
			
 
				+                                    {
			
 
				+                                        name: 'outLoop',
			
 
				+                                        type: 'gauge',
			
 
				+                                        min: 0,
			
 
				+                                        max: 7,
			
 
				+                                        center: ['50%', '50%'],
			
 
				+                                        startAngle: 225,
			
 
				+                                        endAngle: -45,
			
 
				+                                        splitNumber: 10,
			
 
				+                                        radius: '75%',
			
 
				+                                        title: { show: false },
			
 
				+                                        detail: { show: false },
			
 
				+                                        axisTick: {
			
 
				+                                            show: false,
			
 
				+                                            length: -8,
			
 
				+                                            lineStyle: { width: 1, color: '#F2F5F8' },
			
 
				+                                            splitNumber: 7
			
 
				+                                        },
			
 
				+                                        splitLine: {
			
 
				+                                            show: false,
			
 
				+                                            length: -20,
			
 
				+                                            lineStyle: { width: 2, color: '#D3DDE8' }
			
 
				+                                        },
			
 
				+                                        axisLabel: { show: false, fontSize: 12, fontWeight: 'normal', distance: 25 },
			
 
				+                                        axisLine: { show: false },
			
 
				+                                        pointer: { show: false },
			
 
				+                                        itemStyle: { show: true, color: '' }
			
 
				+                                    }
			
 
				+                                ]
			
 
				+                            }
			
 
				+                        },
			
 
				+                        data: [],
			
 
				+                        checkpointStyle: { color: '#F2F5F8', background: '#F2F5F8' },
			
 
				+                        themeStyle: { color: '#F2F5F8', borderColor: '#F2F5F8' },
			
 
				+                        lineStyle: { background: '#515659', height: '5px', type: 'solid' },
			
 
				+                        mapOptions: {
			
 
				+                            pitch: 60,
			
 
				+                            container: 'map',
			
 
				+                            style: {
			
 
				+                                version: 8,
			
 
				+                                sources: {
			
 
				+                                    buildings: {
			
 
				+                                        type: 'geojson',
			
 
				+                                        data: 'https://iclient.supermap.io/examples/data/buildings.json'
			
 
				+                                    },
			
 
				+                                    baseLayer: {
			
 
				+                                        type: 'raster',
			
 
				+                                        tiles: [
			
 
				+                                            'https://t0.tianditu.gov.cn/img_w/wmts?tk=1d109683f4d84198e37a38c442d68311&service=WMTS&request=GetTile&version=1.0.0&style=default&tilematrixSet=w&format=tiles&width=256&height=256&layer=img&tilematrix={z}&tilerow={y}&tilecol={x}',
			
 
				+                                            'https://t1.tianditu.gov.cn/img_w/wmts?tk=1d109683f4d84198e37a38c442d68311&service=WMTS&request=GetTile&version=1.0.0&style=default&tilematrixSet=w&format=tiles&width=256&height=256&layer=img&tilematrix={z}&tilerow={y}&tilecol={x}',
			
 
				+                                            'https://t2.tianditu.gov.cn/img_w/wmts?tk=1d109683f4d84198e37a38c442d68311&service=WMTS&request=GetTile&version=1.0.0&style=default&tilematrixSet=w&format=tiles&width=256&height=256&layer=img&tilematrix={z}&tilerow={y}&tilecol={x}',
			
 
				+                                            'https://t3.tianditu.gov.cn/img_w/wmts?tk=1d109683f4d84198e37a38c442d68311&service=WMTS&request=GetTile&version=1.0.0&style=default&tilematrixSet=w&format=tiles&width=256&height=256&layer=img&tilematrix={z}&tilerow={y}&tilecol={x}',
			
 
				+                                            'https://t4.tianditu.gov.cn/img_w/wmts?tk=1d109683f4d84198e37a38c442d68311&service=WMTS&request=GetTile&version=1.0.0&style=default&tilematrixSet=w&format=tiles&width=256&height=256&layer=img&tilematrix={z}&tilerow={y}&tilecol={x}',
			
 
				+                                            'https://t5.tianditu.gov.cn/img_w/wmts?tk=1d109683f4d84198e37a38c442d68311&service=WMTS&request=GetTile&version=1.0.0&style=default&tilematrixSet=w&format=tiles&width=256&height=256&layer=img&tilematrix={z}&tilerow={y}&tilecol={x}',
			
 
				+                                            'https://t6.tianditu.gov.cn/img_w/wmts?tk=1d109683f4d84198e37a38c442d68311&service=WMTS&request=GetTile&version=1.0.0&style=default&tilematrixSet=w&format=tiles&width=256&height=256&layer=img&tilematrix={z}&tilerow={y}&tilecol={x}',
			
 
				+                                            'https://t7.tianditu.gov.cn/img_w/wmts?tk=1d109683f4d84198e37a38c442d68311&service=WMTS&request=GetTile&version=1.0.0&style=default&tilematrixSet=w&format=tiles&width=256&height=256&layer=img&tilematrix={z}&tilerow={y}&tilecol={x}'
			
 
				+                                        ],
			
 
				+                                        tileSize: 256
			
 
				+                                    }
			
 
				+                                },
			
 
				+                                layers: [
			
 
				+                                    { id: 'baseLayer', type: 'raster', source: 'baseLayer' },
			
 
				+                                    {
			
 
				+                                        id: '3d-buildings',
			
 
				+                                        source: 'buildings',
			
 
				+                                        type: 'fill-extrusion',
			
 
				+                                        paint: {
			
 
				+                                            'fill-extrusion-color': '#484646',
			
 
				+                                            'fill-extrusion-height': ['*', ['get', 'height'], 5],
			
 
				+                                            'fill-extrusion-opacity': 1
			
 
				+                                        }
			
 
				+                                    }
			
 
				+                                ]
			
 
				+                            },
			
 
				+                            center: [116.4553, 39.9313],
			
 
				+                            zoom: 16.51,
			
 
				+                            maxZoom: 17,
			
 
				+                            bearing: 180,
			
 
				+                            rasterTileSize: 256
			
 
				+                        },
			
 
				+                        trackLayers: {
			
 
				+                            loaderType: 'OBJ2',
			
 
				+                            url: '../data/track-layer/car.obj',
			
 
				+                            obj2Url: '../data/track-layer/car.obj',
			
 
				+                            gltfUrl: '',
			
 
				+                            imgUrl: '',
			
 
				+                            displayLine: 'All',
			
 
				+                            layerStyle: {
			
 
				+                                line: {
			
 
				+                                    paint: { 'line-color': '#13FF13', 'line-width': 20, 'line-opacity': 0.8 }
			
 
				+                                }
			
 
				+                            },
			
 
				+                            direction: { front: 'x', bottom: '-z' },
			
 
				+
			
 
				+                            unit: 'millimeter',
			
 
				+                            scale: 5,
			
 
				+                            followCamera: true,
			
 
				+                            trackPoints: []
			
 
				+                        },
			
 
				+                        position: {
			
 
				+                            prevTimestamp: null,
			
 
				+                            currentTimestamp: 1599810915000,
			
 
				+                            nextTimestamp: 1599810920000,
			
 
				+                            step: 3000
			
 
				+                        }
			
 
				+                    };
			
 
				+                },
			
 
				+                created() {
			
 
				+                    SuperMap.Components.setTheme({ textColor: '#fff', background: 'rgb(0,0,0,0)' });
			
 
				+                    this.requestData();
			
 
				+                },
			
 
				+                methods: {
			
 
				+                    requestData() {
			
 
				+                        var _this = this;
			
 
				+                        $.get('../data/track-layer/outTime.json', function(res) {
			
 
				+                            _this.timeData = res;
			
 
				+                            _this.setData(res);
			
 
				+                            _this.trackLayers.trackPoints = _this.getAllDataFeatures(res);
			
 
				+                            _this.timeplayerchanged({ currentTimestamp: 1599810915000, lastIndex: 0, nextIndex: 1 });
			
 
				+                        });
			
 
				+                    },
			
 
				+                    setData(data) {
			
 
				+                        var keys = [];
			
 
				+                        for (var key in data) {
			
 
				+                            keys.push(Number(key));
			
 
				+                        }
			
 
				+                        this.data = keys;
			
 
				+                    },
			
 
				+                    timeplayerchanged(val) {
			
 
				+                        var currentIndex = val.lastIndex;
			
 
				+                        var nextIndex = val.nextIndex;
			
 
				+                        var currentTimeStamp = val.currentTimeStamp;
			
 
				+                        if (currentIndex === -1) {
			
 
				+                            return;
			
 
				+                        }
			
 
				+                        var timestamp = this.data[currentIndex] + '';
			
 
				+                        var data = this.timeData[timestamp];
			
 
				+
			
 
				+                        this.gauge.options.series[0].data[0].value = data.properties.speed;
			
 
				+                        this.gauge1.options.series[0].data[0].value = data.properties.acceleration;
			
 
				+                        this.gauge2.options.series[0].data[0].value = data.properties.wheel_angle;
			
 
				+
			
 
				+                        var chartData = this.getDataByDates(this.timeData, Number(this.data[0]), Number(timestamp));
			
 
				+                        var chartFeatures = this.createChartFeatures(chartData, [
			
 
				+                            'speed',
			
 
				+                            'acceleration',
			
 
				+                            'wheel_angle'
			
 
				+                        ]);
			
 
				+                        this.dataset.geoJSON = {
			
 
				+                            type: 'FeatureCollection',
			
 
				+                            features: chartFeatures
			
 
				+                        };
			
 
				+                        this.position = {
			
 
				+                            prevTimestamp: Number(this.data[currentIndex] + '000'),
			
 
				+                            currentTimestamp: Number(currentTimeStamp),
			
 
				+                            nextTimestamp: Number(this.data[nextIndex] + '000'),
			
 
				+                            step: 3000
			
 
				+                        };
			
 
				+                    },
			
 
				+                    getAllDataFeatures(data) {
			
 
				+                        var features = [];
			
 
				+                        for (var key in data) {
			
 
				+                            data[key].properties.timestamp = Number(key + '000');
			
 
				+                            features.push(data[key]);
			
 
				+                        }
			
 
				+                        return features;
			
 
				+                    },
			
 
				+                    createChartFeatures(data, yFields) {
			
 
				+                        var results = [];
			
 
				+                        for (var timestamp in data) {
			
 
				+                            var result = {};
			
 
				+                            result['timestamp'] = this.timestamp2Date(timestamp);
			
 
				+                            var datas = data[timestamp];
			
 
				+                            yFields.forEach(yField => {
			
 
				+                                result[yField] = datas.properties[yField];
			
 
				+                            });
			
 
				+
			
 
				+                            results.push(result);
			
 
				+                        }
			
 
				+                        results = results.map(val => {
			
 
				+                            var feature = {};
			
 
				+                            feature.properties = val;
			
 
				+                            return feature;
			
 
				+                        });
			
 
				+                        return results;
			
 
				+                    },
			
 
				+                    getDataByDates(data, start, end) {
			
 
				+                        var newdata = {};
			
 
				+                        if (data && start && end) {
			
 
				+                            if (start === end) {
			
 
				+                                var timestamp = this.getNearestDataIndex(this.data, start);
			
 
				+                                newdata[start] = data[timestamp + ''];
			
 
				+                            }
			
 
				+                            for (var timestamp in data) {
			
 
				+                                if (timestamp >= start && timestamp <= end) {
			
 
				+                                    newdata[timestamp] = data[timestamp + ''];
			
 
				+                                }
			
 
				+                            }
			
 
				+                        }
			
 
				+                        return newdata;
			
 
				+                    },
			
 
				+                    getNearestDataIndex(data, timestamp) {
			
 
				+                        var keys = data;
			
 
				+                        var index = _.findLastIndex(keys, function(val) {
			
 
				+                            return val <= timestamp;
			
 
				+                        });
			
 
				+                        return keys[index];
			
 
				+                    },
			
 
				+                    timestamp2Date(timestamp) {
			
 
				+                        return timestamp ? moment(timestamp * 1000).format('YYYY-MM-DD HH:mm:ss') : '';
			
 
				+                    }
			
 
				+                }
			
 
				+            });
			
 
				+        </script>
			
 
				+    </body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_uniquetheme_react.html
+++ b/public/supermap/examples/component/components_uniquetheme_react.html
@@ -0,0 +1,446 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+  <head>
			
 
				+    <meta charset="UTF-8" />
			
 
				+    <title data-i18n="resources.title_componentsUniqueTheme_React"></title>
			
 
				+    <style>
			
 
				+      html,
			
 
				+      body {
			
 
				+        height: 100%;
			
 
				+        margin: 0;
			
 
				+        padding: 0;
			
 
				+      }
			
 
				+
			
 
				+      #main,
			
 
				+      #map-container {
			
 
				+        height: 100%;
			
 
				+        position: relative;
			
 
				+      }
			
 
				+
			
 
				+      .info-container {
			
 
				+        width: 272px;
			
 
				+        position: absolute;
			
 
				+        right: 0;
			
 
				+        top: 250px;
			
 
				+        font-size: 14px;
			
 
				+      }
			
 
				+    </style>
			
 
				+  </head>
			
 
				+
			
 
				+  <body>
			
 
				+    <div id="main">
			
 
				+      <div id="map-container"></div>
			
 
				+      <div class="info-container">
			
 
				+        <div id="infoBox" class="panel panel-primary infoPane" style="display: none;">
			
 
				+          <div class="panel-heading">
			
 
				+            <h5 class="panel-title text-center" data-i18n="resources.text_attributeTable"></h5>
			
 
				+          </div>
			
 
				+          <div id="infoContent" class="panel-body content"></div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <script type="text/javascript" include="widgets,react,bootstrap" src="../js/include-web.js"></script>
			
 
				+    <script include="antd,iclient-mapboxgl-react,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+    <script type="text/babel">
			
 
				+      widgets.loader.showLoader('data loading...');
			
 
				+      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/data-jingjin/rest/data';
			
 
				+
			
 
				+      var SmWebMap = SuperMap.Components.SmWebMap;
			
 
				+      var SmUniqueThemeLayer = SuperMap.Components.SmUniqueThemeLayer;
			
 
				+      var mapOptions = {
			
 
				+        container: 'map',
			
 
				+        style: {
			
 
				+          version: 8,
			
 
				+          sources: {
			
 
				+            'raster-tiles': {
			
 
				+              attribution: attribution,
			
 
				+              type: 'raster',
			
 
				+              tiles: [HOST + '/iserver/services/map-jingjin/rest/maps/京津地区地图/zxyTileImage.png?z={z}&x={x}&y={y}'],
			
 
				+              tileSize: 256
			
 
				+            }
			
 
				+          },
			
 
				+          layers: [
			
 
				+            {
			
 
				+              id: 'simple-tiles',
			
 
				+              type: 'raster',
			
 
				+              source: 'raster-tiles',
			
 
				+              minzoom: 0,
			
 
				+              maxzoom: 22
			
 
				+            }
			
 
				+          ]
			
 
				+        },
			
 
				+        center: [116.85, 39.79],
			
 
				+        zoom: 7
			
 
				+      };
			
 
				+
			
 
				+      var themeOptions = {
			
 
				+        //                map: map, //该可选参数将在下个版本遗弃
			
 
				+        attributions: ' ',
			
 
				+        style: {
			
 
				+          shadowBlur: 3,
			
 
				+          shadowColor: '#000000',
			
 
				+          shadowOffsetX: 1,
			
 
				+          shadowOffsetY: 1,
			
 
				+          fillColor: '#FFFFFF'
			
 
				+        },
			
 
				+        isHoverAble: true,
			
 
				+        highlightStyle: {
			
 
				+          stroke: true,
			
 
				+          strokeWidth: 2,
			
 
				+          strokeColor: 'blue',
			
 
				+          fillColor: '#00F5FF',
			
 
				+          fillOpacity: 0.2
			
 
				+        },
			
 
				+        themeField: 'LANDTYPE',
			
 
				+        styleGroups: [
			
 
				+          {
			
 
				+            value: '草地',
			
 
				+            style: {
			
 
				+              fillColor: '#C1FFC1'
			
 
				+            }
			
 
				+          },
			
 
				+          {
			
 
				+            value: '城市',
			
 
				+            style: {
			
 
				+              fillColor: '#CD7054'
			
 
				+            }
			
 
				+          },
			
 
				+          {
			
 
				+            value: '灌丛',
			
 
				+            style: {
			
 
				+              fillColor: '#7CCD7C'
			
 
				+            }
			
 
				+          },
			
 
				+          {
			
 
				+            value: '旱地',
			
 
				+            style: {
			
 
				+              fillColor: '#EE9A49'
			
 
				+            }
			
 
				+          },
			
 
				+          {
			
 
				+            value: '湖泊水库',
			
 
				+            style: {
			
 
				+              fillColor: '#8EE5EE'
			
 
				+            }
			
 
				+          },
			
 
				+          {
			
 
				+            value: '经济林',
			
 
				+            style: {
			
 
				+              fillColor: '#548B54'
			
 
				+            }
			
 
				+          },
			
 
				+          {
			
 
				+            value: '沙漠',
			
 
				+            style: {
			
 
				+              fillColor: '#DEB887'
			
 
				+            }
			
 
				+          },
			
 
				+          {
			
 
				+            value: '水浇地',
			
 
				+            style: {
			
 
				+              fillColor: '#E0FFFF'
			
 
				+            }
			
 
				+          },
			
 
				+          {
			
 
				+            value: '水田',
			
 
				+            style: {
			
 
				+              fillColor: '#388E8E'
			
 
				+            }
			
 
				+          },
			
 
				+          {
			
 
				+            value: '用材林',
			
 
				+            style: {
			
 
				+              fillColor: '#556B2F'
			
 
				+            }
			
 
				+          },
			
 
				+          {
			
 
				+            value: '沼泽',
			
 
				+            style: {
			
 
				+              fillColor: '#2F4F4F'
			
 
				+            }
			
 
				+          },
			
 
				+          {
			
 
				+            value: '缺省风格',
			
 
				+            style: {
			
 
				+              fillColor: '#ABABAB'
			
 
				+            }
			
 
				+          }
			
 
				+        ]
			
 
				+      };
			
 
				+      var getFeatureParam, getFeatureBySQLService, getFeatureBySQLParams;
			
 
				+      getFeatureParam = new SuperMap.FilterParameter({
			
 
				+        name: 'Jingjin',
			
 
				+        attributeFilter: 'SMID > -1'
			
 
				+      });
			
 
				+      getFeatureBySQLParams = new SuperMap.GetFeaturesBySQLParameters({
			
 
				+        queryParameter: getFeatureParam,
			
 
				+        toIndex: 500,
			
 
				+        datasetNames: ['Jingjin:Landuse_R']
			
 
				+      });
			
 
				+      getFeatureBySQLService = new SuperMap.GetFeaturesBySQLService(dataUrl, {
			
 
				+        format: SuperMap.DataFormat.ISERVER,
			
 
				+        eventListeners: { processCompleted: processCompleted }
			
 
				+      });
			
 
				+      getFeatureBySQLService.processAsync(getFeatureBySQLParams);
			
 
				+
			
 
				+      function processCompleted(getFeaturesEventArgs) {
			
 
				+        var result = getFeaturesEventArgs.result;
			
 
				+        var feas = [];
			
 
				+        if (result && result.features) {
			
 
				+          widgets.loader.removeLoader();
			
 
				+          var resultFeatures = result.features;
			
 
				+          var IHFeas = [],
			
 
				+            features; //岛洞多面
			
 
				+          for (var i = 0, len = resultFeatures.length; i < len; i++) {
			
 
				+            var feature = resultFeatures[i];
			
 
				+            var smid = feature.fieldValues[0];
			
 
				+            if (smid === '86' || smid === '87' || smid === '89') {
			
 
				+              // islandHoleHandlerForFeature 处理岛洞面
			
 
				+              IHFeas.push(islandHoleHandlerForFeature(feature));
			
 
				+            } else {
			
 
				+              feas.push(feature);
			
 
				+            }
			
 
				+          }
			
 
				+          // 岛洞多面要素必需在其他要素之前添加
			
 
				+          features = IHFeas.concat(feas);
			
 
				+
			
 
				+          ReactDOM.render(
			
 
				+            <SmWebMap mapOptions={mapOptions}>
			
 
				+              <SmUniqueThemeLayer options={themeOptions} data={features} onMousemove={handleLayerMousemove} />
			
 
				+            </SmWebMap>,
			
 
				+            document.getElementById('map-container')
			
 
				+          );
			
 
				+        }
			
 
				+      }
			
 
				+
			
 
				+      function handleLayerMousemove(params) {
			
 
				+        var e = params.mapboxEvent;
			
 
				+        var themeLayer = params.map.getLayer(params.layerId);
			
 
				+        if (e.target && e.target.refDataID) {
			
 
				+          document.getElementById('infoBox').style.display = 'block';
			
 
				+          var fid = e.target.refDataID;
			
 
				+          var fea = themeLayer.getFeatureById(fid);
			
 
				+          if (fea) {
			
 
				+            document.getElementById('infoContent').innerHTML = '';
			
 
				+            document.getElementById('infoContent').innerHTML += 'ID: ' + fea.attributes.SMID + '<br/>';
			
 
				+            document.getElementById('infoContent').innerHTML +=
			
 
				+              resources.text_landType + ': ' + fea.attributes.LANDTYPE + '<br/>';
			
 
				+            document.getElementById('infoContent').innerHTML +=
			
 
				+              resources.text_area + parseFloat(fea.attributes.SMAREA).toFixed(5) + '<br/>';
			
 
				+          }
			
 
				+        } else {
			
 
				+          document.getElementById('infoContent').innerHTML = '';
			
 
				+          document.getElementById('infoBox').style.display = 'none';
			
 
				+        }
			
 
				+      }
			
 
				+
			
 
				+      /*
			
 
				+       * Method: islandHoleHandlerForFeature。
			
 
				+       * 要素岛洞处理。
			
 
				+       *
			
 
				+       * 多面中，一个子面包含另一个子面，则被包含子面处理为岛洞。
			
 
				+       *
			
 
				+       * Parameters:
			
 
				+       * multiPolygon - {<SuperMap.Feature.Vector>} 需要进行岛洞处理的要素。
			
 
				+       *
			
 
				+       * Returns:
			
 
				+       * {<SuperMap.Feature.Vector>} 处理后的要素。
			
 
				+       */
			
 
				+      function islandHoleHandlerForFeature(feature) {
			
 
				+        if (feature.geometry instanceof SuperMap.Geometry.MultiPolygon && feature.geometry.components.length > 1) {
			
 
				+          var newGeometry = islandHoleHandlerForMultiPolygon(feature.geometry);
			
 
				+          feature.geometry = newGeometry;
			
 
				+        }
			
 
				+        return feature;
			
 
				+
			
 
				+        /*
			
 
				+         * Method: islandHoleHandlerForMultiPolygon
			
 
				+         * 处理误判为岛洞的多面。
			
 
				+         *
			
 
				+         * iClient 在解析 iServer 数据时，默认将面要素处理为 MultiPolygon 类型，但有的面要素带有岛洞，
			
 
				+         * 这种情况下应该做特殊处理，本函数可以对一个多面进行岛洞处理，并返回新的多面。
			
 
				+         *
			
 
				+         * Parameters:
			
 
				+         * multiPolygon - {<SuperMap.Geometry.MultiPolygon>} 需要进行岛洞处理的多面。
			
 
				+         *
			
 
				+         * Returns:
			
 
				+         * {<SuperMap.Geometry.MultiPolygon>} 处理后的多面。
			
 
				+         */
			
 
				+        function islandHoleHandlerForMultiPolygon(multiPolygon) {
			
 
				+          if (multiPolygon instanceof SuperMap.Geometry.MultiPolygon && multiPolygon.components.length > 1) {
			
 
				+            var mPTmp = multiPolygon.clone();
			
 
				+            var componentsPolygons = mPTmp.components;
			
 
				+
			
 
				+            //洞面关系数组
			
 
				+            var polygonHoleGroup = [];
			
 
				+
			
 
				+            for (var k = 0, len = componentsPolygons.length; k < len; k++) {
			
 
				+              var geoPolygon = componentsPolygons[k];
			
 
				+
			
 
				+              //不处理已经是岛洞的面
			
 
				+              if ((geoPolygon.components.length = 1)) {
			
 
				+                var lineRings = geoPolygon.components[0];
			
 
				+
			
 
				+                //将每个点放到面中进行判断
			
 
				+                for (var j = 0, len1 = componentsPolygons.length; j < len1; j++) {
			
 
				+                  if (componentsPolygons[j].components.length != 1) continue;
			
 
				+
			
 
				+                  if (j != k) {
			
 
				+                    var polygonGeoComp = componentsPolygons[j].components[0].components;
			
 
				+
			
 
				+                    //假设此面为岛洞
			
 
				+                    var isAllPoiIn = true;
			
 
				+
			
 
				+                    for (var i = 0, len2 = geoPolygon.components.length; i < len2; i++) {
			
 
				+                      var point = lineRings.components[i];
			
 
				+                      if (isPointInPoly(point, polygonGeoComp) == false) {
			
 
				+                        isAllPoiIn = false;
			
 
				+                        continue;
			
 
				+                      }
			
 
				+                    }
			
 
				+
			
 
				+                    //确定并记录洞面关系
			
 
				+                    if (isAllPoiIn == true) {
			
 
				+                      var polygonHole = [j, k];
			
 
				+                      polygonHoleGroup.push(polygonHole);
			
 
				+                    }
			
 
				+                  }
			
 
				+                }
			
 
				+              } else {
			
 
				+                continue;
			
 
				+              }
			
 
				+            }
			
 
				+            // 根据洞面信息重构多面 Geometry。
			
 
				+            var bPsTmp = [];
			
 
				+            var hPsTmp = [];
			
 
				+            for (var m = 0, len3 = polygonHoleGroup.length; m < len3; m++) {
			
 
				+              bPsTmp.push(polygonHoleGroup[m][0]);
			
 
				+              hPsTmp.push(polygonHoleGroup[m][1]);
			
 
				+            }
			
 
				+
			
 
				+            //岛洞基础面
			
 
				+            var bPs = delRepeatInArray(bPsTmp);
			
 
				+            //洞面
			
 
				+            var hPs = delRepeatInArray(hPsTmp);
			
 
				+
			
 
				+            //独立面
			
 
				+            var iPs = [];
			
 
				+            //查找独立面
			
 
				+            for (var isIPs = 0, compLen = componentsPolygons.length; isIPs < compLen; isIPs++) {
			
 
				+              var isNoHP = true;
			
 
				+
			
 
				+              for (var o = 0, len = bPs.length; o < len; o++) {
			
 
				+                if (isIPs == bPs[o]) {
			
 
				+                  isNoHP = false;
			
 
				+                  break;
			
 
				+                }
			
 
				+              }
			
 
				+
			
 
				+              if (isNoHP == true) {
			
 
				+                for (var o = 0, len = hPs.length; o < len; o++) {
			
 
				+                  if (isIPs == hPs[o]) {
			
 
				+                    isNoHP = false;
			
 
				+                    break;
			
 
				+                  }
			
 
				+                }
			
 
				+              }
			
 
				+
			
 
				+              if (isNoHP == true) {
			
 
				+                iPs.push(isIPs);
			
 
				+              }
			
 
				+            }
			
 
				+
			
 
				+            //新洞面信息
			
 
				+            var hpInfo = [];
			
 
				+
			
 
				+            //组织新geometry所需要的信息
			
 
				+            for (var o = 0, len4 = bPs.length; o < len4; o++) {
			
 
				+              var ph = [];
			
 
				+              ph.push(bPs[o]);
			
 
				+              for (var m = 0, len3 = polygonHoleGroup.length; m < len3; m++) {
			
 
				+                if (bPs[o] == polygonHoleGroup[m][0]) {
			
 
				+                  ph.push(polygonHoleGroup[m][1]);
			
 
				+                }
			
 
				+              }
			
 
				+
			
 
				+              if (ph.length > 1) {
			
 
				+                hpInfo.push(ph);
			
 
				+              }
			
 
				+            }
			
 
				+
			
 
				+            var newComponents = [];
			
 
				+            //岛洞子面处理
			
 
				+            for (var m = 0, len3 = hpInfo.length; m < len3; m++) {
			
 
				+              var geoP = hpInfo[m];
			
 
				+              var newLineRings = [];
			
 
				+              for (var n = 0, len6 = geoP.length; n < len6; n++) {
			
 
				+                newLineRings.push(componentsPolygons[geoP[n]].components[0]);
			
 
				+              }
			
 
				+              var newGeoPolygon = new SuperMap.Geometry.Polygon(newLineRings);
			
 
				+              newComponents.push(newGeoPolygon);
			
 
				+            }
			
 
				+
			
 
				+            //独立子面处理
			
 
				+            for (var s = 0, len7 = iPs.length; s < len7; s++) {
			
 
				+              var is = iPs[s];
			
 
				+              newComponents.push(componentsPolygons[is]);
			
 
				+            }
			
 
				+
			
 
				+            multiPolygon.components = newComponents;
			
 
				+          }
			
 
				+
			
 
				+          return multiPolygon;
			
 
				+        }
			
 
				+
			
 
				+        /*
			
 
				+         * Method: delRepeatInArray
			
 
				+         * 删除数组中的重复元素。
			
 
				+         *
			
 
				+         * Parameters:
			
 
				+         * arr - {Array} 要进行重复元素删除的数组。
			
 
				+         *
			
 
				+         * Returns:
			
 
				+         * {Array} 无重复元素的数组。
			
 
				+         */
			
 
				+        function delRepeatInArray(arr) {
			
 
				+          var newArray = [];
			
 
				+          var provisionalTable = {};
			
 
				+          for (var i = 0, a; (a = arr[i]) != null; i++) {
			
 
				+            if (!provisionalTable[a]) {
			
 
				+              newArray.push(a);
			
 
				+              provisionalTable[a] = true;
			
 
				+            }
			
 
				+          }
			
 
				+          return newArray;
			
 
				+        }
			
 
				+
			
 
				+        /*
			
 
				+         * Method: PointInPoly
			
 
				+         * 判断一个点是否在多边形里面。(射线法)
			
 
				+         *
			
 
				+         * Parameters:
			
 
				+         * pt - {Object} 需要判定的点对象，该对象含有属性x(横坐标)，属性y(纵坐标)。
			
 
				+         * poly - {Array(Objecy)}  多边形节点数组。例如一个四边形：[{"x":1,"y":1},{"x":3,"y":1},{"x":6,"y":4},{"x":2,"y":10},{"x":1,"y":1}]。
			
 
				+         *
			
 
				+         * Returns:
			
 
				+         * {Boolean} 点是否在多边形内。
			
 
				+         */
			
 
				+        function isPointInPoly(pt, poly) {
			
 
				+          for (var isIn = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i)
			
 
				+            ((poly[i].y <= pt.y && pt.y < poly[j].y) || (poly[j].y <= pt.y && pt.y < poly[i].y)) &&
			
 
				+              pt.x < ((poly[j].x - poly[i].x) * (pt.y - poly[i].y)) / (poly[j].y - poly[i].y) + poly[i].x &&
			
 
				+              (isIn = !isIn);
			
 
				+          return isIn;
			
 
				+        }
			
 
				+      }
			
 
				+    </script>
			
 
				+  </body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_uniquetheme_vue.html
+++ b/public/supermap/examples/component/components_uniquetheme_vue.html
@@ -0,0 +1,455 @@
 
				+<!--********************************************************************
			
 
				+* 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_componentsUniqueTheme_Vue"></title>
			
 
				+    <style>
			
 
				+        #main {
			
 
				+            margin: 0 auto;
			
 
				+        }
			
 
				+
			
 
				+        #main,
			
 
				+        #map {
			
 
				+            position: absolute;
			
 
				+            width: 100%;
			
 
				+            height: 100%
			
 
				+        }
			
 
				+
			
 
				+        .legendItemHeader,
			
 
				+        .legendItemValue {
			
 
				+            width: 120px;
			
 
				+            height: 18px;
			
 
				+            font-size: 14px;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+
			
 
				+<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
			
 
				+    <div id="main">
			
 
				+        <sm-web-map :map-options="mapOptions" @load="mapIsLoaded">
			
 
				+            <sm-unique-theme-layer :options="themeOptions" layer-name="UniqueThemeLayer"
			
 
				+                :data="features" @load="layerLoaded" v-show="!!features.length">
			
 
				+            </sm-unique-theme-layer>
			
 
				+        </sm-web-map>
			
 
				+
			
 
				+        <!-- 属性表 -->
			
 
				+        <div style="width: 272px;float:right">
			
 
				+            <div id="infoBox" class="panel panel-primary infoPane"
			
 
				+                style="width:272px;margin-top: 250px;position: absolute;fontSize:14px;display: none;float:right">
			
 
				+                <div class="panel-heading">
			
 
				+                    <h5 class='panel-title text-center' data-i18n="resources.text_attributeTable"></h5>
			
 
				+                </div>
			
 
				+                <div id="infoContent" class="panel-body content">
			
 
				+                </div>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+    </div>
			
 
				+    <script type="text/javascript" include="widgets,vue,bootstrap" src="../js/include-web.js"></script>
			
 
				+    <script include="iclient-mapboxgl-vue,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+    <script>
			
 
				+        widgets.loader.showLoader('data loading...');
			
 
				+        var HOST = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+        var dataUrl = HOST + "/iserver/services/data-jingjin/rest/data";
			
 
				+        var getFeatureParam, getFeatureBySQLService, getFeatureBySQLParams;
			
 
				+        getFeatureParam = new SuperMap.FilterParameter({
			
 
				+            name: "Jingjin",
			
 
				+            attributeFilter: "SMID > -1"
			
 
				+        });
			
 
				+        getFeatureBySQLParams = new SuperMap.GetFeaturesBySQLParameters({
			
 
				+            queryParameter: getFeatureParam,
			
 
				+            toIndex: 500,
			
 
				+            datasetNames: ["Jingjin:Landuse_R"]
			
 
				+        });
			
 
				+        getFeatureBySQLService = new SuperMap.GetFeaturesBySQLService(dataUrl, {
			
 
				+            format: SuperMap.DataFormat.ISERVER,
			
 
				+            eventListeners: { "processCompleted": processCompleted }
			
 
				+        });
			
 
				+        getFeatureBySQLService.processAsync(getFeatureBySQLParams);
			
 
				+
			
 
				+        function processCompleted(getFeaturesEventArgs) {
			
 
				+            var result = getFeaturesEventArgs.result;
			
 
				+            var feas = [];
			
 
				+            if (result && result.features) {
			
 
				+                widgets.loader.removeLoader();
			
 
				+                var resultFeatures = result.features;
			
 
				+                var IHFeas = []; //岛洞多面
			
 
				+                for (var i = 0, len = resultFeatures.length; i < len; i++) {
			
 
				+                    var feature = resultFeatures[i];
			
 
				+                    var smid = feature.fieldValues[0];
			
 
				+                    if (smid === "86" || smid === "87" || smid === "89") {
			
 
				+                        // islandHoleHandlerForFeature 处理岛洞面
			
 
				+                        IHFeas.push(islandHoleHandlerForFeature(feature));
			
 
				+                    }
			
 
				+                    else {
			
 
				+                        feas.push(feature);
			
 
				+                    }
			
 
				+                }
			
 
				+                // 岛洞多面要素必需在其他要素之前添加
			
 
				+                features = IHFeas.concat(feas);
			
 
				+
			
 
				+                new Vue({
			
 
				+                    el: '#main',
			
 
				+                    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> ";
			
 
				+                        return {
			
 
				+                            mapOptions: {
			
 
				+                                container: 'map',
			
 
				+                                style: {
			
 
				+                                    "version": 8,
			
 
				+                                    "sources": {
			
 
				+                                        "raster-tiles": {
			
 
				+                                            "attribution": attribution,
			
 
				+                                            "type": "raster",
			
 
				+                                            "tiles": [HOST + '/iserver/services/map-jingjin/rest/maps/京津地区地图/zxyTileImage.png?z={z}&x={x}&y={y}'],
			
 
				+                                            "tileSize": 256,
			
 
				+                                        },
			
 
				+                                    },
			
 
				+                                    "layers": [{
			
 
				+                                        "id": "simple-tiles",
			
 
				+                                        "type": "raster",
			
 
				+                                        "source": "raster-tiles",
			
 
				+                                        "minzoom": 0,
			
 
				+                                        "maxzoom": 22
			
 
				+                                    }]
			
 
				+                                },
			
 
				+                                center: [116.85, 39.79],
			
 
				+                                zoom: 7
			
 
				+                            },
			
 
				+                            features,
			
 
				+                            themeOptions: {
			
 
				+                                //                map: map, //该可选参数将在下个版本遗弃
			
 
				+                                attributions: " ",
			
 
				+                                style: {
			
 
				+                                    shadowBlur: 3,
			
 
				+                                    shadowColor: "#000000",
			
 
				+                                    shadowOffsetX: 1,
			
 
				+                                    shadowOffsetY: 1,
			
 
				+                                    fillColor: "#FFFFFF"
			
 
				+                                },
			
 
				+                                isHoverAble: true,
			
 
				+                                highlightStyle: {
			
 
				+                                    stroke: true,
			
 
				+                                    strokeWidth: 2,
			
 
				+                                    strokeColor: 'blue',
			
 
				+                                    fillColor: "#00F5FF",
			
 
				+                                    fillOpacity: 0.2
			
 
				+                                },
			
 
				+                                themeField: "LANDTYPE",
			
 
				+                                styleGroups: [
			
 
				+                                    {
			
 
				+                                        value: "草地",
			
 
				+                                        style: {
			
 
				+                                            fillColor: "#C1FFC1"
			
 
				+                                        }
			
 
				+                                    },
			
 
				+                                    {
			
 
				+                                        value: "城市",
			
 
				+                                        style: {
			
 
				+                                            fillColor: "#CD7054"
			
 
				+                                        }
			
 
				+                                    },
			
 
				+                                    {
			
 
				+                                        value: "灌丛",
			
 
				+                                        style: {
			
 
				+                                            fillColor: "#7CCD7C"
			
 
				+                                        }
			
 
				+                                    },
			
 
				+                                    {
			
 
				+                                        value: "旱地",
			
 
				+                                        style: {
			
 
				+                                            fillColor: "#EE9A49"
			
 
				+                                        }
			
 
				+                                    },
			
 
				+                                    {
			
 
				+                                        value: "湖泊水库",
			
 
				+                                        style: {
			
 
				+                                            fillColor: "#8EE5EE"
			
 
				+                                        }
			
 
				+                                    },
			
 
				+                                    {
			
 
				+                                        value: "经济林",
			
 
				+                                        style: {
			
 
				+                                            fillColor: "#548B54"
			
 
				+                                        }
			
 
				+                                    },
			
 
				+                                    {
			
 
				+                                        value: "沙漠",
			
 
				+                                        style: {
			
 
				+                                            fillColor: "#DEB887"
			
 
				+                                        }
			
 
				+                                    },
			
 
				+                                    {
			
 
				+                                        value: "水浇地",
			
 
				+                                        style: {
			
 
				+                                            fillColor: "#E0FFFF"
			
 
				+                                        }
			
 
				+                                    },
			
 
				+                                    {
			
 
				+                                        value: "水田",
			
 
				+                                        style: {
			
 
				+                                            fillColor: "#388E8E"
			
 
				+                                        }
			
 
				+                                    },
			
 
				+                                    {
			
 
				+                                        value: "用材林",
			
 
				+                                        style: {
			
 
				+                                            fillColor: "#556B2F"
			
 
				+                                        }
			
 
				+                                    },
			
 
				+                                    {
			
 
				+                                        value: "沼泽",
			
 
				+                                        style: {
			
 
				+                                            fillColor: "#2F4F4F"
			
 
				+                                        }
			
 
				+                                    },
			
 
				+                                    {
			
 
				+                                        value: "缺省风格",
			
 
				+                                        style: {
			
 
				+                                            fillColor: "#ABABAB"
			
 
				+                                        }
			
 
				+                                    }
			
 
				+                                ]
			
 
				+                            }
			
 
				+                        };
			
 
				+                    },
			
 
				+                    methods: {
			
 
				+                        mapIsLoaded(e) {
			
 
				+                            this.map = e.map;
			
 
				+                        },
			
 
				+                        layerLoaded(themeLayer) {
			
 
				+                            themeLayer.on('mousemove', function (e) {
			
 
				+                                if (e.target && e.target.refDataID) {
			
 
				+                                    document.getElementById("infoBox").style.display = "block";
			
 
				+                                    var fid = e.target.refDataID;
			
 
				+                                    var fea = themeLayer.getFeatureById(fid);
			
 
				+                                    if (fea) {
			
 
				+                                        document.getElementById("infoContent").innerHTML = "";
			
 
				+                                        document.getElementById("infoContent").innerHTML += "ID: " + fea.attributes.SMID + "<br/>";
			
 
				+                                        document.getElementById("infoContent").innerHTML += resources.text_landType + ": " + fea.attributes.LANDTYPE + "<br/>";
			
 
				+                                        document.getElementById("infoContent").innerHTML += resources.text_area + parseFloat(fea.attributes.SMAREA).toFixed(5) + "<br/>";
			
 
				+                                    }
			
 
				+                                }
			
 
				+                                else {
			
 
				+                                    document.getElementById("infoContent").innerHTML = "";
			
 
				+                                    document.getElementById("infoBox").style.display = "none";
			
 
				+                                }
			
 
				+                            });
			
 
				+                        }
			
 
				+                    }
			
 
				+                });
			
 
				+            }
			
 
				+        }
			
 
				+
			
 
				+        /*
			
 
				+         * Method: islandHoleHandlerForFeature。
			
 
				+         * 要素岛洞处理。
			
 
				+         *
			
 
				+         * 多面中，一个子面包含另一个子面，则被包含子面处理为岛洞。
			
 
				+         *
			
 
				+         * Parameters:
			
 
				+         * multiPolygon - {<SuperMap.Feature.Vector>} 需要进行岛洞处理的要素。
			
 
				+         *
			
 
				+         * Returns:
			
 
				+         * {<SuperMap.Feature.Vector>} 处理后的要素。
			
 
				+         */
			
 
				+        function islandHoleHandlerForFeature(feature) {
			
 
				+            if (feature.geometry instanceof SuperMap.Geometry.MultiPolygon && feature.geometry.components.length > 1) {
			
 
				+                var newGeometry = islandHoleHandlerForMultiPolygon(feature.geometry);
			
 
				+                feature.geometry = newGeometry;
			
 
				+            }
			
 
				+            return feature;
			
 
				+
			
 
				+            /*
			
 
				+             * Method: islandHoleHandlerForMultiPolygon
			
 
				+             * 处理误判为岛洞的多面。
			
 
				+             *
			
 
				+             * iClient 在解析 iServer 数据时，默认将面要素处理为 MultiPolygon 类型，但有的面要素带有岛洞，
			
 
				+             * 这种情况下应该做特殊处理，本函数可以对一个多面进行岛洞处理，并返回新的多面。
			
 
				+             *
			
 
				+             * Parameters:
			
 
				+             * multiPolygon - {<SuperMap.Geometry.MultiPolygon>} 需要进行岛洞处理的多面。
			
 
				+             *
			
 
				+             * Returns:
			
 
				+             * {<SuperMap.Geometry.MultiPolygon>} 处理后的多面。
			
 
				+             */
			
 
				+            function islandHoleHandlerForMultiPolygon(multiPolygon) {
			
 
				+                if (multiPolygon instanceof SuperMap.Geometry.MultiPolygon && multiPolygon.components.length > 1) {
			
 
				+                    var mPTmp = multiPolygon.clone();
			
 
				+                    var componentsPolygons = mPTmp.components;
			
 
				+
			
 
				+                    //洞面关系数组
			
 
				+                    var polygonHoleGroup = [];
			
 
				+
			
 
				+                    for (var k = 0, len = componentsPolygons.length; k < len; k++) {
			
 
				+                        var geoPolygon = componentsPolygons[k];
			
 
				+
			
 
				+                        //不处理已经是岛洞的面
			
 
				+                        if (geoPolygon.components.length = 1) {
			
 
				+                            var lineRings = geoPolygon.components[0];
			
 
				+
			
 
				+                            //将每个点放到面中进行判断
			
 
				+                            for (var j = 0, len1 = componentsPolygons.length; j < len1; j++) {
			
 
				+                                if (componentsPolygons[j].components.length != 1) continue;
			
 
				+
			
 
				+                                if (j != k) {
			
 
				+                                    var polygonGeoComp = componentsPolygons[j].components[0].components;
			
 
				+
			
 
				+                                    //假设此面为岛洞
			
 
				+                                    var isAllPoiIn = true;
			
 
				+
			
 
				+                                    for (var i = 0, len2 = geoPolygon.components.length; i < len2; i++) {
			
 
				+                                        var point = lineRings.components[i];
			
 
				+                                        if (isPointInPoly(point, polygonGeoComp) == false) {
			
 
				+                                            isAllPoiIn = false;
			
 
				+                                            continue;
			
 
				+                                        }
			
 
				+                                    }
			
 
				+
			
 
				+                                    //确定并记录洞面关系
			
 
				+                                    if (isAllPoiIn == true) {
			
 
				+                                        var polygonHole = [j, k];
			
 
				+                                        polygonHoleGroup.push(polygonHole);
			
 
				+                                    }
			
 
				+
			
 
				+                                }
			
 
				+                            }
			
 
				+                        }
			
 
				+                        else {
			
 
				+                            continue;
			
 
				+                        }
			
 
				+                    }
			
 
				+                    // 根据洞面信息重构多面 Geometry。
			
 
				+                    var bPsTmp = [];
			
 
				+                    var hPsTmp = [];
			
 
				+                    for (var m = 0, len3 = polygonHoleGroup.length; m < len3; m++) {
			
 
				+                        bPsTmp.push(polygonHoleGroup[m][0]);
			
 
				+                        hPsTmp.push(polygonHoleGroup[m][1]);
			
 
				+                    }
			
 
				+
			
 
				+                    //岛洞基础面
			
 
				+                    var bPs = delRepeatInArray(bPsTmp);
			
 
				+                    //洞面
			
 
				+                    var hPs = delRepeatInArray(hPsTmp);
			
 
				+
			
 
				+                    //独立面
			
 
				+                    var iPs = [];
			
 
				+                    //查找独立面
			
 
				+                    for (var isIPs = 0, compLen = componentsPolygons.length; isIPs < compLen; isIPs++) {
			
 
				+                        var isNoHP = true;
			
 
				+
			
 
				+                        for (var o = 0, len = bPs.length; o < len; o++) {
			
 
				+                            if (isIPs == bPs[o]) {
			
 
				+                                isNoHP = false;
			
 
				+                                break;
			
 
				+                            }
			
 
				+                        }
			
 
				+
			
 
				+                        if (isNoHP == true) {
			
 
				+                            for (var o = 0, len = hPs.length; o < len; o++) {
			
 
				+                                if (isIPs == hPs[o]) {
			
 
				+                                    isNoHP = false;
			
 
				+                                    break;
			
 
				+                                }
			
 
				+                            }
			
 
				+                        }
			
 
				+
			
 
				+                        if (isNoHP == true) {
			
 
				+                            iPs.push(isIPs);
			
 
				+                        }
			
 
				+                    }
			
 
				+
			
 
				+                    //新洞面信息
			
 
				+                    var hpInfo = [];
			
 
				+
			
 
				+                    //组织新geometry所需要的信息
			
 
				+                    for (var o = 0, len4 = bPs.length; o < len4; o++) {
			
 
				+                        var ph = [];
			
 
				+                        ph.push(bPs[o]);
			
 
				+                        for (var m = 0, len3 = polygonHoleGroup.length; m < len3; m++) {
			
 
				+                            if (bPs[o] == polygonHoleGroup[m][0]) {
			
 
				+                                ph.push(polygonHoleGroup[m][1]);
			
 
				+                            }
			
 
				+                        }
			
 
				+
			
 
				+                        if (ph.length > 1) {
			
 
				+                            hpInfo.push(ph);
			
 
				+                        }
			
 
				+                    }
			
 
				+
			
 
				+
			
 
				+                    var newComponents = [];
			
 
				+                    //岛洞子面处理
			
 
				+                    for (var m = 0, len3 = hpInfo.length; m < len3; m++) {
			
 
				+                        var geoP = hpInfo[m];
			
 
				+                        var newLineRings = [];
			
 
				+                        for (var n = 0, len6 = geoP.length; n < len6; n++) {
			
 
				+                            newLineRings.push(componentsPolygons[geoP[n]].components[0]);
			
 
				+                        }
			
 
				+                        var newGeoPolygon = new SuperMap.Geometry.Polygon(newLineRings);
			
 
				+                        newComponents.push(newGeoPolygon)
			
 
				+                    }
			
 
				+
			
 
				+                    //独立子面处理
			
 
				+                    for (var s = 0, len7 = iPs.length; s < len7; s++) {
			
 
				+                        var is = iPs[s];
			
 
				+                        newComponents.push(componentsPolygons[is])
			
 
				+                    }
			
 
				+
			
 
				+                    multiPolygon.components = newComponents;
			
 
				+                }
			
 
				+
			
 
				+                return multiPolygon;
			
 
				+            }
			
 
				+
			
 
				+            /*
			
 
				+             * Method: delRepeatInArray
			
 
				+             * 删除数组中的重复元素。
			
 
				+             *
			
 
				+             * Parameters:
			
 
				+             * arr - {Array} 要进行重复元素删除的数组。
			
 
				+             *
			
 
				+             * Returns:
			
 
				+             * {Array} 无重复元素的数组。
			
 
				+             */
			
 
				+            function delRepeatInArray(arr) {
			
 
				+                var newArray = [];
			
 
				+                var provisionalTable = {};
			
 
				+                for (var i = 0, a; (a = arr[i]) != null; i++) {
			
 
				+                    if (!provisionalTable[a]) {
			
 
				+                        newArray.push(a);
			
 
				+                        provisionalTable[a] = true;
			
 
				+                    }
			
 
				+                }
			
 
				+                return newArray;
			
 
				+            }
			
 
				+
			
 
				+            /*
			
 
				+             * Method: PointInPoly
			
 
				+             * 判断一个点是否在多边形里面。(射线法)
			
 
				+             *
			
 
				+             * Parameters:
			
 
				+             * pt - {Object} 需要判定的点对象，该对象含有属性x(横坐标)，属性y(纵坐标)。
			
 
				+             * poly - {Array(Objecy)}  多边形节点数组。例如一个四边形：[{"x":1,"y":1},{"x":3,"y":1},{"x":6,"y":4},{"x":2,"y":10},{"x":1,"y":1}]。
			
 
				+             *
			
 
				+             * Returns:
			
 
				+             * {Boolean} 点是否在多边形内。
			
 
				+             */
			
 
				+            function isPointInPoly(pt, poly) {
			
 
				+                for (var isIn = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i)
			
 
				+                    ((poly[i].y <= pt.y && pt.y < poly[j].y) || (poly[j].y <= pt.y && pt.y < poly[i].y))
			
 
				+                        && (pt.x < (poly[j].x - poly[i].x) * (pt.y - poly[i].y) / (poly[j].y - poly[i].y) + poly[i].x)
			
 
				+                        && (isIn = !isIn);
			
 
				+                return isIn;
			
 
				+            }
			
 
				+        }
			
 
				+    </script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_vector_tile_react.html
+++ b/public/supermap/examples/component/components_vector_tile_react.html
@@ -0,0 +1,43 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+  <head>
			
 
				+    <meta charset="UTF-8" />
			
 
				+    <title data-i18n="resources.title_componentsVectorTile_React"></title>
			
 
				+    <script type="text/javascript" include="react" src="../js/include-web.js"></script>
			
 
				+    <script include="antd,iclient-mapboxgl-react,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+    <style>
			
 
				+      html,
			
 
				+      body {
			
 
				+        height: 100%;
			
 
				+        margin: 0;
			
 
				+        padding: 0;
			
 
				+      }
			
 
				+
			
 
				+      #main {
			
 
				+        height: 100%;
			
 
				+      }
			
 
				+    </style>
			
 
				+  </head>
			
 
				+
			
 
				+  <body>
			
 
				+    <div id="main"></div>
			
 
				+    <script type="text/babel">
			
 
				+      var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+      var SmWebMap = SuperMap.Components.SmWebMap;
			
 
				+      var SmVectorTileLayer = SuperMap.Components.SmVectorTileLayer;
			
 
				+      var styleOptions =
			
 
				+        host +
			
 
				+        '/iserver/services/map-Population/rest/maps/PopulationDistribution/tileFeature/vectorstyles.json?type=MapBox_GL&styleonly=true';
			
 
				+
			
 
				+      ReactDOM.render(
			
 
				+        <SmWebMap serverUrl="https://iportal.supermap.io/iportal" mapId="1329428269">
			
 
				+          <SmVectorTileLayer styleOptions={styleOptions} />
			
 
				+        </SmWebMap>,
			
 
				+        document.getElementById('main')
			
 
				+      );
			
 
				+    </script>
			
 
				+  </body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_vector_tile_vue.html
+++ b/public/supermap/examples/component/components_vector_tile_vue.html
@@ -0,0 +1,44 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+	<head>
			
 
				+		<meta charset="UTF-8" />
			
 
				+		<title data-i18n="resources.title_componentsVectorTile_Vue"></title>
			
 
				+		<script type="text/javascript" include="vue" src="../js/include-web.js"></script>
			
 
				+		<script
			
 
				+			include="iclient-mapboxgl-vue,mapbox-gl-enhance"
			
 
				+			src="../../dist/mapboxgl/include-mapboxgl.js"
			
 
				+		></script>
			
 
				+		<style>
			
 
				+			#main {
			
 
				+				margin: 0 auto;
			
 
				+				width: 100%;
			
 
				+				height: 100%;
			
 
				+			}
			
 
				+		</style>
			
 
				+	</head>
			
 
				+
			
 
				+	<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
			
 
				+		<div id="main">
			
 
				+			<sm-web-map server-url='https://iportal.supermap.io/iportal' map-id="1329428269">
			
 
				+				<sm-vector-tile-layer :style-options="styleOptions"></sm-vector-tile-layer>
			
 
				+				<sm-layer-list position="top-left"></sm-layer-list>
			
 
				+			</sm-web-map>
			
 
				+		</div>
			
 
				+		<script>
			
 
				+			new Vue({
			
 
				+				el: '#main',
			
 
				+				data() {
			
 
				+					var host = window.isLocal ? window.server : "https://iserver.supermap.io";
			
 
				+					return {
			
 
				+						styleOptions:
			
 
				+							host +
			
 
				+							'/iserver/services/map-Population/rest/maps/PopulationDistribution/tileFeature/vectorstyles.json?type=MapBox_GL&styleonly=true',
			
 
				+					};
			
 
				+				},
			
 
				+			});
			
 
				+		</script>
			
 
				+	</body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_video.html
+++ b/public/supermap/examples/component/components_video.html
@@ -0,0 +1,40 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2020 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+    <head>
			
 
				+        <meta charset="UTF-8" />
			
 
				+        <title data-i18n="resources.title_componentsEcharts_Vue"></title>
			
 
				+        <link href="//vjs.zencdn.net/7.8.2/video-js.min.css" rel="stylesheet" />
			
 
				+        <script src="//vjs.zencdn.net/7.8.2/video.min.js"></script>
			
 
				+          <!-- <script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.5.0/flv.min.js"></script>
			
 
				+        <script src="https://cdn.jsdelivr.net/npm/videojs-flash@2/dist/videojs-flash.min.js"></script> -->
			
 
				+        <script type="text/javascript" include="vue,jquery" src="../js/include-web.js"></script>
			
 
				+        <script include="iclient-mapboxgl-vue,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+        <style>
			
 
				+            #main {
			
 
				+                margin: 0 auto;
			
 
				+                width: 100%;
			
 
				+                height: 100%;
			
 
				+            }
			
 
				+        </style>
			
 
				+    </head>
			
 
				+
			
 
				+    <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
			
 
				+        <div id="main">
			
 
				+            <sm-video-player
			
 
				+                url="https://mister-ben.github.io/videojs-flvjs/bbb.flv"
			
 
				+                style="width:400px; height:400px"
			
 
				+            ></sm-video-player>
			
 
				+        </div>
			
 
				+        <script>
			
 
				+            new Vue({
			
 
				+                el: '#main',
			
 
				+                data() {
			
 
				+                    return {};
			
 
				+                }
			
 
				+            });
			
 
				+        </script>
			
 
				+    </body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_webmap_react.html
+++ b/public/supermap/examples/component/components_webmap_react.html
@@ -0,0 +1,33 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+  <head>
			
 
				+    <meta charset="UTF-8" />
			
 
				+    <title data-i18n="resources.title_componentsWebmap_React"></title>
			
 
				+    <script type="text/javascript" include="react" src="../js/include-web.js"></script>
			
 
				+    <script include="antd,iclient-mapboxgl-react,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+    <style>
			
 
				+      html,
			
 
				+      body {
			
 
				+        height: 100%;
			
 
				+        margin: 0;
			
 
				+        padding: 0;
			
 
				+      }
			
 
				+      #main {
			
 
				+        height: 100%;
			
 
				+      }
			
 
				+    </style>
			
 
				+  </head>
			
 
				+  <body>
			
 
				+    <div id="main"></div>
			
 
				+    <script type="text/babel">
			
 
				+      var SmWebMap = SuperMap.Components.SmWebMap;
			
 
				+      ReactDOM.render(
			
 
				+        <SmWebMap mapId='801571284' serverUrl='https://iportal.supermap.io/iportal' />,
			
 
				+        document.getElementById('main')
			
 
				+      );
			
 
				+    </script>
			
 
				+  </body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_webmap_vue.html
+++ b/public/supermap/examples/component/components_webmap_vue.html
@@ -0,0 +1,34 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+
			
 
				+<head>
			
 
				+  <meta charset="UTF-8">
			
 
				+  <title data-i18n='resources.title_componentsWebmap_Vue'></title>
			
 
				+  <script type="text/javascript" include="vue" src="../js/include-web.js"></script>
			
 
				+  <script include="iclient-mapboxgl-vue,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+  <style>
			
 
				+     #main{
			
 
				+        margin: 0 auto;
			
 
				+        width: 100%;
			
 
				+        height: 100%;
			
 
				+    }
			
 
				+  </style>
			
 
				+</head>
			
 
				+
			
 
				+<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
			
 
				+  <div id="main">
			
 
				+    <sm-web-map server-url='https://iportal.supermap.io/iportal' map-id="801571284"></sm-web-map>
			
 
				+  </div>
			
 
				+
			
 
				+  <script>
			
 
				+    new Vue({
			
 
				+      el: '#main'
			
 
				+    })
			
 
				+
			
 
				+  </script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/public/supermap/examples/component/components_zoom_vue.html
+++ b/public/supermap/examples/component/components_zoom_vue.html
@@ -0,0 +1,40 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+
			
 
				+<head>
			
 
				+  <meta charset="UTF-8">
			
 
				+  <title data-i18n='resources.title_componentsZoom_Vue'></title>
			
 
				+  <script type="text/javascript" include="vue" src="../js/include-web.js"></script>
			
 
				+  <script include="iclient-mapboxgl-vue,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
			
 
				+  <style>
			
 
				+     #main{
			
 
				+        margin: 0 auto;
			
 
				+        width: 100%;
			
 
				+        height: 100%;
			
 
				+    }
			
 
				+    .mapboxgl-ctrl button:not(:disabled):hover {
			
 
				+        background-color: transparent;
			
 
				+    }
			
 
				+  </style>
			
 
				+</head>
			
 
				+
			
 
				+<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
			
 
				+  <div id="main">
			
 
				+    <sm-web-map server-url='https://iportal.supermap.io/iportal' map-id="801571284">
			
 
				+      <!-- 缩放组件:sm-zoom  props: showZoomSlider是否显示缩放的滑块 -->
			
 
				+      <sm-zoom :show-zoom-slider="true"></sm-zoom>
			
 
				+    </sm-web-map>
			
 
				+  </div>
			
 
				+
			
 
				+  <script>
			
 
				+    new Vue({
			
 
				+      el: '#main'
			
 
				+    })
			
 
				+
			
 
				+  </script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/public/supermap/examples/component/config.js
+++ b/public/supermap/examples/component/config.js
@@ -0,0 +1,752 @@
 
				+/* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.*/
			
 
				+/**
			
 
				+ * component 示例配置文件：包含示例的分类、名称、缩略图、文件路径
			
 
				+ */
			
 
				+var identification = {
			
 
				+  name: 'component'
			
 
				+};
			
 
				+
			
 
				+var exampleConfig = {
			
 
				+  vuecomponents_mbgl: {
			
 
				+    name: 'Vue - MapboxGL',
			
 
				+    name_en: 'Vue - MapboxGL',
			
 
				+    content: {
			
 
				+      map: {
			
 
				+        name: '地图',
			
 
				+        name_en: 'Map',
			
 
				+        content: [
			
 
				+          {
			
 
				+            name: 'iServer 地图',
			
 
				+            name_en: 'iServer Map',
			
 
				+            version: '10.0.0',
			
 
				+            thumbnail: 'components_map_vue.png',
			
 
				+            fileName: 'components_map_vue'
			
 
				+          },
			
 
				+          {
			
 
				+            name: 'iPortal 地图',
			
 
				+            name_en: 'iPortal Map',
			
 
				+            version: '10.0.0',
			
 
				+            thumbnail: 'components_webmap.png',
			
 
				+            fileName: 'components_webmap_vue',
			
 
				+            localIgnore: true
			
 
				+          },
			
 
				+          {
			
 
				+            name: '栅格图层',
			
 
				+            name_en: 'Raster Layer',
			
 
				+            version: '10.0.0',
			
 
				+            thumbnail: 'components_rasterLayer_vue.png',
			
 
				+            fileName: 'components_raster_vue',
			
 
				+            localIgnore: true
			
 
				+          },
			
 
				+          {
			
 
				+            name: '矢量瓦片图层',
			
 
				+            name_en: 'Vector Tile Layer',
			
 
				+            version: '10.0.0',
			
 
				+            thumbnail: 'components_vector_tile_vue.png',
			
 
				+            fileName: 'components_vector_tile_vue',
			
 
				+            localIgnore: true
			
 
				+          },
			
 
				+          {
			
 
				+            name: '地图卷帘',
			
 
				+            name_en: 'Map Compare',
			
 
				+            version: '10.1.0',
			
 
				+            thumbnail: 'components_compare_vue.png',
			
 
				+            fileName: 'components_compare_vue',
			
 
				+            localIgnore: true
			
 
				+          }
			
 
				+        ]
			
 
				+      },
			
 
				+      map_subcomponent: {
			
 
				+        name: '地图子组件',
			
 
				+        name_en: 'Map subcomponent',
			
 
				+        content: [
			
 
				+          {
			
 
				+            name: '图层列表',
			
 
				+            name_en: 'LayerList',
			
 
				+            version: '10.0.0',
			
 
				+            thumbnail: 'components_layerList_vue.png',
			
 
				+            fileName: 'components_layerList_vue',
			
 
				+            localIgnore: true
			
 
				+          },
			
 
				+          {
			
 
				+            name: '鹰眼',
			
 
				+            name_en: 'Minimap',
			
 
				+            version: '10.0.0',
			
 
				+            thumbnail: 'components_minimap_vue.png',
			
 
				+            fileName: 'components_minimap_vue',
			
 
				+            localIgnore: true
			
 
				+          },
			
 
				+          {
			
 
				+            name: '平移',
			
 
				+            name_en: 'Pan',
			
 
				+            version: '10.0.0',
			
 
				+            thumbnail: 'components_pan_vue.png',
			
 
				+            fileName: 'components_pan_vue',
			
 
				+            localIgnore: true
			
 
				+          },
			
 
				+          {
			
 
				+            name: '比例尺',
			
 
				+            name_en: 'Scale',
			
 
				+            version: '10.0.0',
			
 
				+            thumbnail: 'components_scale_vue.png',
			
 
				+            fileName: 'components_scale_vue',
			
 
				+            localIgnore: true
			
 
				+          },
			
 
				+          {
			
 
				+            name: '缩放',
			
 
				+            name_en: 'Zoom',
			
 
				+            version: '10.0.0',
			
 
				+            thumbnail: 'components_zoom_vue.png',
			
 
				+            fileName: 'components_zoom_vue',
			
 
				+            localIgnore: true
			
 
				+          },
			
 
				+          {
			
 
				+            name: '图例',
			
 
				+            name_en: 'Legend',
			
 
				+            version: '10.0.0',
			
 
				+            thumbnail: 'components_legend_vue.png',
			
 
				+            fileName: 'components_legend_vue',
			
 
				+            localIgnore: true
			
 
				+          },
			
 
				+          {
			
 
				+            name: '查询',
			
 
				+            name_en: 'Query',
			
 
				+            version: '10.0.0',
			
 
				+            thumbnail: 'components_query_vue.png',
			
 
				+            fileName: 'components_query_vue',
			
 
				+            localIgnore: true
			
 
				+          },
			
 
				+          {
			
 
				+            name: '搜索',
			
 
				+            name_en: 'Search',
			
 
				+            version: '10.0.0',
			
 
				+            thumbnail: 'components_search_vue.png',
			
 
				+            fileName: 'components_search_vue',
			
 
				+            localIgnore: true
			
 
				+          },
			
 
				+          {
			
 
				+            name: '量算',
			
 
				+            name_en: 'Measure',
			
 
				+            version: '10.0.0',
			
 
				+            thumbnail: 'components_measure_vue.png',
			
 
				+            fileName: 'components_measure_vue',
			
 
				+            localIgnore: true
			
 
				+          },
			
 
				+          {
			
 
				+            name: '打开文件',
			
 
				+            name_en: 'Open File',
			
 
				+            version: '10.0.0',
			
 
				+            thumbnail: 'components_openfile_vue.png',
			
 
				+            fileName: 'components_openfile_vue'
			
 
				+          },
			
 
				+          {
			
 
				+            name: '点选查询',
			
 
				+            name_en: 'Identify',
			
 
				+            version: '10.0.1',
			
 
				+            thumbnail: 'components_identify_vue.png',
			
 
				+            fileName: 'components_identify_vue'
			
 
				+          },
			
 
				+          {
			
 
				+            name: '图层管理',
			
 
				+            name_en: 'Layer Manager',
			
 
				+            version: '10.0.1',
			
 
				+            thumbnail: 'components_layerManager_vue.png',
			
 
				+            fileName: 'components_layerManager_vue'
			
 
				+          },
			
 
				+          {
			
 
				+            name: '指南针',
			
 
				+            name_en: 'Compass',
			
 
				+            version: '10.1.2',
			
 
				+            thumbnail: 'components_compass_vue.png',
			
 
				+            fileName: 'components_compass_vue'
			
 
				+          },
			
 
				+          {
			
 
				+            name: '绘制',
			
 
				+            name_en: 'Draw',
			
 
				+            version: '10.1.2',
			
 
				+            thumbnail: 'components_draw_vue.png',
			
 
				+            fileName: 'components_draw_vue'
			
 
				+          },
			
 
				+          {
			
 
				+            name: '坐标转换',
			
 
				+            name_en: 'Coordinate Conversion',
			
 
				+            version: '10.1.2',
			
 
				+            thumbnail: 'components_coordinate_conversion_vue.png',
			
 
				+            fileName: 'components_coordinate_conversion_vue'
			
 
				+          },
			
 
				+          {
			
 
				+            name: '飞行定位',
			
 
				+            name_en: 'Fly To',
			
 
				+            version: '10.1.2',
			
 
				+            thumbnail: 'components_flyTo_vue.png',
			
 
				+            fileName: 'components_flyto_vue'
			
 
				+          },
			
 
				+          {
			
 
				+            name: '图层颜色',
			
 
				+            name_en: 'Layer Color',
			
 
				+            version: '10.1.2',
			
 
				+            thumbnail: 'components_layer_color_vue.png',
			
 
				+            fileName: 'components_layer_color_vue'
			
 
				+          },
			
 
				+          {
			
 
				+            name: '属性表',
			
 
				+            name_en: 'Attributes',
			
 
				+            version: '10.1.2',
			
 
				+            thumbnail: 'components_attributes_vue.png',
			
 
				+            fileName: 'components_attributes_vue'
			
 
				+          }
			
 
				+        ]
			
 
				+      },
			
 
				+      tdtmap_subcomponent: {
			
 
				+        name: '天地图子组件',
			
 
				+        name_en: 'Tianditu subcomponent',
			
 
				+        localIgnore: true,
			
 
				+        content: [
			
 
				+          {
			
 
				+            name: '天地图',
			
 
				+            name_en: 'Tianditu',
			
 
				+            version: '10.0.0',
			
 
				+            localIgnore: true,
			
 
				+            thumbnail: 'components_Tianditu_vue.png',
			
 
				+            fileName: 'components_tianditu_vue'
			
 
				+          },
			
 
				+          {
			
 
				+            name: '路线规划',
			
 
				+            name_en: 'Route Plan',
			
 
				+            version: '10.0.0',
			
 
				+            localIgnore: true,
			
 
				+            thumbnail: 'components_Tianditu_route_vue.png',
			
 
				+            fileName: 'components_tianditu_route_vue'
			
 
				+          },
			
 
				+          {
			
 
				+            name: 'POI搜索',
			
 
				+            name_en: 'POI Search',
			
 
				+            version: '10.0.0',
			
 
				+            localIgnore: true,
			
 
				+            thumbnail: 'components_Tianditu_search_vue.png',
			
 
				+            fileName: 'components_tianditu_search_vue'
			
 
				+          },
			
 
				+          {
			
 
				+            name: '天地图切换',
			
 
				+            name_en: 'Switcher',
			
 
				+            version: '10.0.0',
			
 
				+            localIgnore: true,
			
 
				+            thumbnail: 'components_Tianditu_switch_vue.png',
			
 
				+            fileName: 'components_tianditu_switch_vue'
			
 
				+          },
			
 
				+          {
			
 
				+            name: '天地图首页',
			
 
				+            name_en: 'Home',
			
 
				+            version: '10.0.0',
			
 
				+            localIgnore: true,
			
 
				+            thumbnail: 'components_Tianditu_home_vue.png',
			
 
				+            fileName: 'components_tianditu_home_vue'
			
 
				+          }
			
 
				+        ]
			
 
				+      },
			
 
				+      viz: {
			
 
				+        name: '可视化',
			
 
				+        name_en: 'Visualization',
			
 
				+        content: [
			
 
				+          {
			
 
				+            name: '点聚合图层',
			
 
				+            name_en: 'Cluster layer',
			
 
				+            version: '10.0.0',
			
 
				+            thumbnail: 'components_cluster_vue.png',
			
 
				+            fileName: 'components_cluster_vue',
			
 
				+            localIgnore: true
			
 
				+          },
			
 
				+          {
			
 
				+            name: '单值专题图',
			
 
				+            name_en: 'Unique Theme layer',
			
 
				+            version: '10.0.0',
			
 
				+            thumbnail: 'components_uniquetheme_vue.png',
			
 
				+            fileName: 'components_uniquetheme_vue'
			
 
				+          },
			
 
				+          {
			
 
				+            name: '分段专题图',
			
 
				+            name_en: 'Range Theme layer',
			
 
				+            version: '10.0.0',
			
 
				+            thumbnail: 'components_rangetheme_vue.png',
			
 
				+            fileName: 'components_rangetheme_vue'
			
 
				+          },
			
 
				+          {
			
 
				+            name: '等级符号专题图',
			
 
				+            name_en: 'RanSymbol Theme layer',
			
 
				+            version: '10.0.0',
			
 
				+            thumbnail: 'components_ranksymboltheme_vue.png',
			
 
				+            fileName: 'components_ranksymboltheme_vue'
			
 
				+          },
			
 
				+          {
			
 
				+            name: '标签专题图',
			
 
				+            name_en: 'Label Theme layer',
			
 
				+            version: '10.0.0',
			
 
				+            thumbnail: 'components_labeltheme_vue.png',
			
 
				+            fileName: 'components_labeltheme_vue'
			
 
				+          },
			
 
				+          {
			
 
				+            name: '图表专题图',
			
 
				+            name_en: 'Statistical chart',
			
 
				+            version: '10.0.0',
			
 
				+            thumbnail: 'components_graph_theme_layer_vue.png',
			
 
				+            fileName: 'components_graph_theme_layer_vue',
			
 
				+            localIgnore: true
			
 
				+          },
			
 
				+          {
			
 
				+            name: '热力图图层',
			
 
				+            name_en: 'Heatmap layer',
			
 
				+            version: '10.0.0',
			
 
				+            thumbnail: 'components_heatmap_vue.png',
			
 
				+            fileName: 'components_heatmap_vue'
			
 
				+          },
			
 
				+          {
			
 
				+            name: 'MapV 图层',
			
 
				+            name_en: 'MapV layer',
			
 
				+            version: '10.0.0',
			
 
				+            thumbnail: 'components_mapv_vue.gif',
			
 
				+            fileName: 'components_mapv_vue'
			
 
				+          },
			
 
				+          {
			
 
				+            name: 'Echarts 图层',
			
 
				+            name_en: 'Echarts layer',
			
 
				+            version: '10.0.0',
			
 
				+            thumbnail: 'components_echartsLayer_vue.gif',
			
 
				+            fileName: 'components_echarts_vue'
			
 
				+          },
			
 
				+          {
			
 
				+            name: 'DeckGL 图层',
			
 
				+            name_en: 'DeckGL layer',
			
 
				+            version: '10.0.0',
			
 
				+            thumbnail: 'components_deckgl_vue.png',
			
 
				+            fileName: 'components_deckgl_vue'
			
 
				+          },
			
 
				+          {
			
 
				+            name: '数据流图层',
			
 
				+            name_en: 'Data Flow Layer',
			
 
				+            version: '10.0.0',
			
 
				+            thumbnail: 'components_dataflow_vue.gif',
			
 
				+            fileName: 'components_dataflow_vue'
			
 
				+          },
			
 
				+          {
			
 
				+            name: '动效火焰图层',
			
 
				+            name_en: 'Animate Fire Layer',
			
 
				+            version: '10.0.0',
			
 
				+            thumbnail: 'components_fire_layer_vue.gif',
			
 
				+            fileName: 'components_fire_layer_vue'
			
 
				+          },
			
 
				+          {
			
 
				+            name: '动效标记图层',
			
 
				+            name_en: 'Animate Marker Layer',
			
 
				+            version: '10.0.0',
			
 
				+            thumbnail: 'components_animate_marker_layer_vue.gif',
			
 
				+            fileName: 'components_animate_marker_layer_vue'
			
 
				+          },
			
 
				+          {
			
 
				+            name: '动效文本标记图层',
			
 
				+            name_en: 'Animate Text Layer',
			
 
				+            version: '10.0.0',
			
 
				+            thumbnail: 'components_rotating_text_border_vue.gif',
			
 
				+            fileName: 'components_rotating_text_border_vue'
			
 
				+          },
			
 
				+          {
			
 
				+            name: 'GeoJSON 图层',
			
 
				+            name_en: 'GeoJSON Layer',
			
 
				+            version: '10.0.0',
			
 
				+            thumbnail: 'components_geojson_vue.png',
			
 
				+            fileName: 'components_geojson_vue'
			
 
				+          }
			
 
				+        ]
			
 
				+      },
			
 
				+      chart: {
			
 
				+        name: '图表',
			
 
				+        name_en: 'Chart',
			
 
				+        localIgnore: true,
			
 
				+        content: [
			
 
				+          {
			
 
				+            name: '图表',
			
 
				+            name_en: 'Chart',
			
 
				+            version: '10.0.0',
			
 
				+            thumbnail: 'components_chart_vue.png',
			
 
				+            fileName: 'components_chart_vue',
			
 
				+            localIgnore: true
			
 
				+          },
			
 
				+          {
			
 
				+            name: '饼图',
			
 
				+            name_en: 'Chart(pie)',
			
 
				+            version: '10.0.0',
			
 
				+            thumbnail: 'components_chart_vue(pie).png',
			
 
				+            fileName: 'components_pie_chart_vue',
			
 
				+            localIgnore: true
			
 
				+          },
			
 
				+          {
			
 
				+            name: '雷达图',
			
 
				+            name_en: 'Chart(radar)',
			
 
				+            version: '10.0.0',
			
 
				+            thumbnail: 'components_chart_vue(radar).png',
			
 
				+            fileName: 'components_radar_chart_vue',
			
 
				+            localIgnore: true
			
 
				+          },
			
 
				+          {
			
 
				+            name: '仪表盘',
			
 
				+            name_en: 'Chart(gauge)',
			
 
				+            version: '10.0.0',
			
 
				+            thumbnail: 'components_chart_vue(gauge).png',
			
 
				+            fileName: 'components_gauge_chart_vue',
			
 
				+            localIgnore: true
			
 
				+          }
			
 
				+        ]
			
 
				+      },
			
 
				+      basic: {
			
 
				+        name: '基础',
			
 
				+        localIgnore: true,
			
 
				+        name_en: 'Basic component',
			
 
				+        content: [
			
 
				+          {
			
 
				+            name: '基础组件',
			
 
				+            name_en: 'Basic Component',
			
 
				+            version: '10.0.0',
			
 
				+            thumbnail: 'components_basic_vue.png',
			
 
				+            fileName: 'components_basic_vue',
			
 
				+            localIgnore: true
			
 
				+          },
			
 
				+          {
			
 
				+            name: '边框组件',
			
 
				+            name_en: 'Border Component',
			
 
				+            version: '10.0.0',
			
 
				+            thumbnail: 'components_border_vue.png',
			
 
				+            fileName: 'components_border_vue',
			
 
				+            localIgnore: true
			
 
				+          },
			
 
				+          {
			
 
				+              name: '时间轴组件',
			
 
				+              name_en: 'TimeLine Component',
			
 
				+              version: '10.1.2',
			
 
				+              thumbnail: 'components_time_line_vue.png',
			
 
				+              fileName: 'components_time_line_vue',
			
 
				+              localIgnore: true
			
 
				+          },
			
 
				+          {
			
 
				+            name: '超图大厦历史影像',
			
 
				+            name_en: 'Historical image of Chaotu Building',
			
 
				+            version: '10.1.2',
			
 
				+            thumbnail: 'components_timeline_supermap.png',
			
 
				+            fileName: 'components_timeline_supermap',
			
 
				+            localIgnore: true
			
 
				+        },
			
 
				+        {
			
 
				+            name: '气象卫星云图',
			
 
				+            name_en: 'Meteorological satellite cloud image',
			
 
				+            version: '10.1.2',
			
 
				+            thumbnail: 'components_timeline_cloud.png',
			
 
				+            fileName: 'components_timeline_cloud',
			
 
				+            localIgnore: true
			
 
				+        },
			
 
				+        {
			
 
				+              name: '幻灯片组件',
			
 
				+              name_en: 'Slideshow Component',
			
 
				+              version: '10.1.2',
			
 
				+              thumbnail: 'components_slideshow_vue.png',
			
 
				+              fileName: 'components_slideshow_vue',
			
 
				+              localIgnore: true
			
 
				+          }
			
 
				+        ]
			
 
				+      },
			
 
				+      others_vue: {
			
 
				+        name: '其他',
			
 
				+        name_en: 'Others',
			
 
				+        content: [
			
 
				+          {
			
 
				+            name: '主题切换',
			
 
				+            name_en: 'Theme switching',
			
 
				+            version: '10.0.0',
			
 
				+            thumbnail: 'components_theme_vue.png',
			
 
				+            fileName: 'components_theme_vue',
			
 
				+            localIgnore: true
			
 
				+          }
			
 
				+        ]
			
 
				+      }
			
 
				+    }
			
 
				+  },
			
 
				+  vuecomponents_leaflet: {
			
 
				+    name: 'Vue - Leaflet',
			
 
				+    name_en: 'Vue - Leaflet',
			
 
				+    content: {
			
 
				+      l_map: {
			
 
				+        name: '地图',
			
 
				+        name_en: 'Map',
			
 
				+        content: [
			
 
				+          {
			
 
				+            name: 'iServer 地图',
			
 
				+            name_en: 'iServer Map',
			
 
				+            version: '10.0.1',
			
 
				+            thumbnail: 'components_map_vue.png',
			
 
				+            fileName: 'l_map_vue'
			
 
				+          },
			
 
				+          {
			
 
				+            name: 'iPortal 地图',
			
 
				+            name_en: 'iPortal Map',
			
 
				+            version: '10.0.1',
			
 
				+            thumbnail: 'components_webmap.png',
			
 
				+            fileName: 'l_webmap_vue',
			
 
				+            localIgnore: true
			
 
				+          },
			
 
				+          {
			
 
				+            name: '栅格图层',
			
 
				+            name_en: 'Tile Layer',
			
 
				+            version: '10.0.1',
			
 
				+            thumbnail: 'components_rasterLayer_vue.png',
			
 
				+            fileName: 'l_tile_vue',
			
 
				+            localIgnore: true
			
 
				+          }
			
 
				+        ]
			
 
				+      },
			
 
				+      l_map_subcomponent: {
			
 
				+        name: '地图子组件',
			
 
				+        name_en: 'Map subcomponent',
			
 
				+        content: [
			
 
				+          {
			
 
				+            name: '弹窗',
			
 
				+            name_en: 'Popup',
			
 
				+            version: '10.0.1',
			
 
				+            thumbnail: 'components_popup_vue.png',
			
 
				+            fileName: 'l_popup_vue'
			
 
				+          },
			
 
				+          {
			
 
				+            name: '点选查询',
			
 
				+            name_en: 'Identify',
			
 
				+            version: '10.0.1',
			
 
				+            thumbnail: 'components_identify_vue.png',
			
 
				+            fileName: 'l_identify_vue'
			
 
				+          }
			
 
				+        ]
			
 
				+      },
			
 
				+      l_chart: {
			
 
				+        name: '图表',
			
 
				+        name_en: 'Chart',
			
 
				+        localIgnore: true,
			
 
				+        content: [
			
 
				+          {
			
 
				+            name: '图表',
			
 
				+            name_en: 'Chart',
			
 
				+            version: '10.0.1',
			
 
				+            thumbnail: 'components_chart_vue.png',
			
 
				+            fileName: 'l_chart_vue',
			
 
				+            localIgnore: true
			
 
				+          },
			
 
				+          {
			
 
				+            name: '饼图',
			
 
				+            name_en: 'Chart(pie)',
			
 
				+            version: '10.0.1',
			
 
				+            thumbnail: 'components_chart_vue(pie).png',
			
 
				+            fileName: 'l_pie_chart_vue',
			
 
				+            localIgnore: true
			
 
				+          },
			
 
				+          {
			
 
				+            name: '雷达图',
			
 
				+            name_en: 'Chart(radar)',
			
 
				+            version: '10.0.1',
			
 
				+            thumbnail: 'components_chart_vue(radar).png',
			
 
				+            fileName: 'l_radar_chart_vue',
			
 
				+            localIgnore: true
			
 
				+          },
			
 
				+          {
			
 
				+            name: '仪表盘',
			
 
				+            name_en: 'Chart(gauge)',
			
 
				+            version: '10.0.1',
			
 
				+            thumbnail: 'components_chart_vue(gauge).png',
			
 
				+            fileName: 'l_gauge_chart_vue',
			
 
				+            localIgnore: true
			
 
				+          }
			
 
				+        ]
			
 
				+      }
			
 
				+    }
			
 
				+  },
			
 
				+  reactcomponents_mbgl: {
			
 
				+    name: 'React - MapboxGL',
			
 
				+    name_en: 'React - MapboxGL',
			
 
				+    localIgnore: true,
			
 
				+    content: {
			
 
				+      react_map: {
			
 
				+        name: '地图',
			
 
				+        name_en: 'Map',
			
 
				+        content: [
			
 
				+          {
			
 
				+            name: 'iServer 地图',
			
 
				+            name_en: 'iServer Map',
			
 
				+            version: '10.0.0',
			
 
				+            thumbnail: 'components_map_react.png',
			
 
				+            fileName: 'components_map_react'
			
 
				+          },
			
 
				+          {
			
 
				+            name: 'iPortal 地图',
			
 
				+            name_en: 'iPortal Map',
			
 
				+            version: '10.0.0',
			
 
				+            thumbnail: 'components_webmap.png',
			
 
				+            fileName: 'components_webmap_react',
			
 
				+            localIgnore: true
			
 
				+          },
			
 
				+          {
			
 
				+            name: '栅格图层',
			
 
				+            name_en: 'Raster Layer',
			
 
				+            version: '10.0.0',
			
 
				+            thumbnail: 'components_rasterLayer_react.png',
			
 
				+            fileName: 'components_raster_react',
			
 
				+            localIgnore: true
			
 
				+          },
			
 
				+          {
			
 
				+            name: '矢量瓦片图层',
			
 
				+            name_en: 'Vector Tile Layer',
			
 
				+            version: '10.0.0',
			
 
				+            thumbnail: 'components_vector_tile_react.png',
			
 
				+            fileName: 'components_vector_tile_react',
			
 
				+            localIgnore: true
			
 
				+          }
			
 
				+        ]
			
 
				+      },
			
 
				+      react_viz: {
			
 
				+        name: '可视化',
			
 
				+        name_en: 'Visualization',
			
 
				+        content: [
			
 
				+          {
			
 
				+            name: '点聚合图层',
			
 
				+            name_en: 'Cluster Layer',
			
 
				+            version: '10.0.0',
			
 
				+            thumbnail: 'components_cluster_react.png',
			
 
				+            fileName: 'components_cluster_react'
			
 
				+          },
			
 
				+          {
			
 
				+            name: '单值专题图',
			
 
				+            name_en: 'Unique Theme layer',
			
 
				+            version: '10.0.0',
			
 
				+            thumbnail: 'components_uniquetheme_react.png',
			
 
				+            fileName: 'components_uniquetheme_react'
			
 
				+          },
			
 
				+          {
			
 
				+            name: '分段专题图',
			
 
				+            name_en: 'Range Theme layer',
			
 
				+            version: '10.0.0',
			
 
				+            thumbnail: 'components_rangetheme_react.png',
			
 
				+            fileName: 'components_rangetheme_react'
			
 
				+          },
			
 
				+          {
			
 
				+            name: '等级符号专题图',
			
 
				+            name_en: 'RankSymbolTheme Layer',
			
 
				+            version: '10.0.0',
			
 
				+            thumbnail: 'components_ranksymboltheme_react.png',
			
 
				+            fileName: 'components_ranksymboltheme_react'
			
 
				+          },
			
 
				+          {
			
 
				+            name: '标签专题图',
			
 
				+            name_en: 'LabelTheme Layer',
			
 
				+            version: '10.0.0',
			
 
				+            thumbnail: 'components_labeltheme_react.png',
			
 
				+            fileName: 'components_labeltheme_react'
			
 
				+          },
			
 
				+          {
			
 
				+            name: '图表专题图',
			
 
				+            name_en: 'Statistical chart',
			
 
				+            version: '10.0.0',
			
 
				+            thumbnail: 'components_graph_theme_layer_react.png',
			
 
				+            fileName: 'components_graph_theme_layer_react',
			
 
				+            localIgnore: true
			
 
				+          },
			
 
				+          {
			
 
				+            name: '热力图图层',
			
 
				+            name_en: 'Heatmap layer',
			
 
				+            version: '10.0.0',
			
 
				+            thumbnail: 'components_heatmap_react.png',
			
 
				+            fileName: 'components_heatmap_react'
			
 
				+          },
			
 
				+          {
			
 
				+            name: 'MapV 图层',
			
 
				+            name_en: 'MapV layer',
			
 
				+            version: '10.0.0',
			
 
				+            thumbnail: 'components_mapv_react.gif',
			
 
				+            fileName: 'components_mapv_react'
			
 
				+          },
			
 
				+          {
			
 
				+            name: 'Echarts 图层',
			
 
				+            name_en: 'Echarts layer',
			
 
				+            version: '10.0.0',
			
 
				+            thumbnail: 'components_echartsLayer_react.gif',
			
 
				+            fileName: 'components_echarts_react'
			
 
				+          },
			
 
				+          {
			
 
				+            name: 'DeckGL 图层',
			
 
				+            name_en: 'DeckGL Layer',
			
 
				+            version: '10.0.0',
			
 
				+            thumbnail: 'components_deckgl_react.png',
			
 
				+            fileName: 'components_deckgl_react'
			
 
				+          },
			
 
				+          {
			
 
				+            name: '数据流图层',
			
 
				+            name_en: 'Data Flow Layer',
			
 
				+            version: '10.0.0',
			
 
				+            thumbnail: 'components_dataflow_react.gif',
			
 
				+            fileName: 'components_dataflow_react'
			
 
				+          },
			
 
				+          {
			
 
				+            name: '动效火焰图层',
			
 
				+            name_en: 'Animate Fire Layer',
			
 
				+            version: '10.0.0',
			
 
				+            thumbnail: 'components_fire_layer_react.gif',
			
 
				+            fileName: 'components_fire_layer_react'
			
 
				+          },
			
 
				+          {
			
 
				+            name: '动效标记图层',
			
 
				+            name_en: 'Animate Marker Layer',
			
 
				+            version: '10.0.0',
			
 
				+            thumbnail: 'components_animate_marker_layer_react.gif',
			
 
				+            fileName: 'components_animate_marker_layer_react'
			
 
				+          },
			
 
				+          {
			
 
				+            name: '动效文本标记图层',
			
 
				+            name_en: 'Animate Text Layer',
			
 
				+            version: '10.0.0',
			
 
				+            thumbnail: 'components_rotating_text_border_react.gif',
			
 
				+            fileName: 'components_rotating_text_border_react'
			
 
				+          },
			
 
				+          {
			
 
				+            name: 'GeoJSON 图层',
			
 
				+            name_en: 'GeoJSON Layer',
			
 
				+            version: '10.0.0',
			
 
				+            thumbnail: 'components_geojson_react.png',
			
 
				+            fileName: 'components_geojson_react'
			
 
				+          }
			
 
				+        ]
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+  // h5components: {
			
 
				+  //   name: 'H5',
			
 
				+  //   name_en: 'H5',
			
 
				+  //   localIgnore: true,
			
 
				+  //   content: {}
			
 
				+  // }
			
 
				+};
			
 
				+
			
 
				+/**
			
 
				+ *key值：为exampleConfig配置的key值或者fileName值
			
 
				+ *      （为中间节点时是key值，叶结点是fileName值）
			
 
				+ *value值：fontawesome字体icon名
			
 
				+ *不分层
			
 
				+ */
			
 
				+var sideBarIconConfig = {
			
 
				+  vuecomponents_mbgl: 'fa-window-restore',
			
 
				+  vuecomponents_leaflet: 'fa-window-restore',
			
 
				+  reactcomponents_mbgl: 'fa-globe',
			
 
				+  h5components: 'fa-map'
			
 
				+};
			
 
				+
			
 
				+/**
			
 
				+ *key值：为exampleConfig配置的key值
			
 
				+ *value值：fontawesome字体icon名
			
 
				+ *与sideBarIconConfig的区别：sideBarIconConfig包括侧边栏所有层级目录的图标，exampleIconConfig仅包括一级标题的图标
			
 
				+ */
			
 
				+var exampleIconConfig = {
			
 
				+  vuecomponents_mbgl: 'fa-window-restore',
			
 
				+  vuecomponents_leaflet: 'fa-window-restore',
			
 
				+  reactcomponents_mbgl: 'fa-globe',
			
 
				+  h5components: 'fa-map'
			
 
				+};
			
 
				+window.componentExampleConfig = exampleConfig;
			
--- a/public/supermap/examples/component/editor-wechat.html
+++ b/public/supermap/examples/component/editor-wechat.html
@@ -0,0 +1,71 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+  <head>
			
 
				+    <meta charset="UTF-8" />
			
 
				+    <title data-i18n="resources.title_editorComponent"></title>
			
 
				+    <link rel="shortcut icon" type="image/x-icon" href="../../web/img/favicon.ico" />
			
 
				+    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport" />
			
 
				+    <script
			
 
				+      type="text/javascript"
			
 
				+      include="jquery,bootstrap,template,admin-lte,ace,i18n"
			
 
				+      src="../js/include-web.js"
			
 
				+    ></script>
			
 
				+    <link rel="stylesheet" href="../css/common.css" />
			
 
				+    <link rel="stylesheet" href="../css/header.css" />
			
 
				+    <link rel="stylesheet" href="../css/sideBar.css" />
			
 
				+    <link rel="stylesheet" href="../css/editor.css" />
			
 
				+    <script type="text/javascript" src="../js/utils.js"></script>
			
 
				+    <style>
			
 
				+      /* 删除头部和侧边栏 */
			
 
				+      header {
			
 
				+        display: none;
			
 
				+      }
			
 
				+      aside {
			
 
				+        display: none;
			
 
				+      }
			
 
				+      .content-wrapper {
			
 
				+        margin: 0px !important;
			
 
				+      }
			
 
				+      /* .ace_gutter {
			
 
				+        display: none;
			
 
				+      }
			
 
				+      .ace_scroller {
			
 
				+        left: 8px !important;
			
 
				+        right: 8px !important;
			
 
				+      } */
			
 
				+      .ace_layer .ace_gutter-layer {
			
 
				+        width: 40px !important;
			
 
				+      }
			
 
				+      .ace_gutter-cell {
			
 
				+        padding-left: 0px;
			
 
				+      }
			
 
				+    </style>
			
 
				+  </head>
			
 
				+  <body class="hold-transition skin-blue sidebar-mini sidebar-collapse">
			
 
				+    <!-- ./wrapper -->
			
 
				+    <div class="wrapper"></div>
			
 
				+    <script>
			
 
				+      $('.wrapper').load('../template/editor.html', function() {
			
 
				+        var navigation = {
			
 
				+          nav: {
			
 
				+            title: 'SuperMap iClient 10i(2020)',
			
 
				+            path: '../../web/',
			
 
				+            isLocal: window.isLocal
			
 
				+          }
			
 
				+        };
			
 
				+        utils.loadTemplate('.icl-header', '../template/header.html', navigation);
			
 
				+
			
 
				+        $body = $('body');
			
 
				+        $body.append("<script type='text/javascript' src='./config.js'><\/script>");
			
 
				+        $body.append("<script type='text/javascript' src='../js/localization.js'><\/script>");
			
 
				+        $body.append("<script type='text/javascript' src='../js/common.js'><\/script>");
			
 
				+        $body.append("<script type='text/javascript' src='../js/sidebar.js'><\/script>");
			
 
				+        $body.append("<script type='text/javascript' src='../js/editor.js'><\/script>");
			
 
				+      });
			
 
				+    </script>
			
 
				+    <!-- ./wrapper end-->
			
 
				+  </body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/editor.html
+++ b/public/supermap/examples/component/editor.html
@@ -0,0 +1,49 @@
 
				+<!--********************************************************************
			
 
				+* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
			
 
				+*********************************************************************-->
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title data-i18n="resources.title_editorComponent"></title>
			
 
				+    <link rel="shortcut icon" type="image/x-icon" href="../../web/img/favicon.ico"/>
			
 
				+    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
			
 
				+    <script type="text/javascript"  include="jquery,bootstrap,template,admin-lte,ace,i18n"
			
 
				+            src="../js/include-web.js"></script>
			
 
				+    <link rel="stylesheet" href="../css/common.css">
			
 
				+    <link rel="stylesheet" href="../css/header.css">
			
 
				+    <link rel="stylesheet" href="../css/sideBar.css">
			
 
				+    <link rel="stylesheet" href="../css/editor.css">
			
 
				+    <script type="text/javascript" src="../js/utils.js"></script>
			
 
				+</head>
			
 
				+<body class="hold-transition skin-blue sidebar-mini sidebar-collapse">
			
 
				+
			
 
				+<!-- ./wrapper -->
			
 
				+<div class="wrapper"></div>
			
 
				+<script>
			
 
				+    $('.wrapper').load("../template/editor.html", function () {
			
 
				+        var navigation = {
			
 
				+            nav: {
			
 
				+                title: "SuperMap iClient 10i(2020)",
			
 
				+                path: "../../web/",
			
 
				+                isLocal: window.isLocal
			
 
				+            }
			
 
				+        };
			
 
				+        utils.loadTemplate(".icl-header", "../template/header.html", navigation);
			
 
				+
			
 
				+        $body = $('body');
			
 
				+        $body.append("<script type='text/javascript' src='../leaflet/config.js'><\/script>");
			
 
				+        $body.append("<script type='text/javascript' src='../mapboxgl/config.js'><\/script>");
			
 
				+        $body.append("<script type='text/javascript' src='../classic/config.js'><\/script>");
			
 
				+        $body.append("<script type='text/javascript' src='../openlayers/config.js'><\/script>");
			
 
				+        $body.append("<script type='text/javascript' src='./config.js'><\/script>");
			
 
				+        $body.append("<script type='text/javascript' src='../js/localization.js'><\/script>");
			
 
				+        $body.append("<script type='text/javascript' src='../js/common.js'><\/script>");
			
 
				+        $body.append("<script type='text/javascript' src='../js/sidebar.js'><\/script>");
			
 
				+        $body.append("<script type='text/javascript' src='../js/editor.js'><\/script>");
			
 
				+    })
			
 
				+</script>
			
 
				+<!-- ./wrapper end-->
			
 
				+
			
 
				+</body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/examples-wechat.html
+++ b/public/supermap/examples/component/examples-wechat.html
@@ -0,0 +1,87 @@
 
				+<!--********************************************************************
			
 
				+* 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" />
			
 
				+    <title data-i18n="resources.title_examplesComponent"></title>
			
 
				+    <link rel="shortcut icon" type="image/x-icon" href="../../web/img/favicon.ico" />
			
 
				+    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport" />
			
 
				+    <script
			
 
				+      type="text/javascript"
			
 
				+      include="jquery,bootstrap,template,admin-lte,jquery.scrollto,i18n,lazyload"
			
 
				+      src="../js/include-web.js"
			
 
				+    ></script>
			
 
				+    <link rel="stylesheet" href="../css/common.css" />
			
 
				+    <link rel="stylesheet" href="../css/header.css" />
			
 
				+    <link rel="stylesheet" href="../css/sideBar.css" />
			
 
				+    <link rel="stylesheet" href="../css/examples.css" />
			
 
				+    <script type="text/javascript" src="../js/utils.js"></script>
			
 
				+    <style>
			
 
				+      /* 删除头部和侧边栏 */
			
 
				+      header {
			
 
				+        display: none;
			
 
				+      }
			
 
				+      aside {
			
 
				+        display: none;
			
 
				+      }
			
 
				+      .content-wrapper {
			
 
				+        margin: 0px;
			
 
				+      }
			
 
				+      .examples-container {
			
 
				+        margin-top: 0px;
			
 
				+      }
			
 
				+      #charts-list {
			
 
				+        padding: 5px;
			
 
				+      }
			
 
				+      .category,
			
 
				+      .box.box-default,
			
 
				+      .box-body {
			
 
				+        padding: 0;
			
 
				+      }
			
 
				+      .box-header {
			
 
				+        padding: 2px;
			
 
				+      }
			
 
				+      .col-xs-6 {
			
 
				+        padding: 0 5px 2px;
			
 
				+      }
			
 
				+      .category-title {
			
 
				+        font-size: 18px;
			
 
				+      }
			
 
				+      .box-header > .fa,
			
 
				+      .box-header > .glyphicon,
			
 
				+      .box-header > .ion,
			
 
				+      .box-header .box-title {
			
 
				+        font-size: 15px;
			
 
				+        margin-left: -15px;
			
 
				+      }
			
 
				+    </style>
			
 
				+  </head>
			
 
				+  <body class="hold-transition skin-blue sidebar-mini" data-spy="scroll" data-target="#scrollSpy">
			
 
				+    <!-- ./wrapper -->
			
 
				+    <div class="wrapper"></div>
			
 
				+    <script>
			
 
				+      $('.wrapper').load('../template/example.html', function() {
			
 
				+        var navigation = {
			
 
				+          nav: {
			
 
				+            title: 'SuperMap iClient 10i(2020)',
			
 
				+            path: '../../web/',
			
 
				+            isLocal: window.isLocal
			
 
				+          }
			
 
				+        };
			
 
				+        utils.loadTemplate('.icl-header', '../template/header.html', navigation);
			
 
				+        $body = $('body');
			
 
				+
			
 
				+        $body.append("<script type='text/javascript' src='./config.js'><\/script>");
			
 
				+        $body.append("<script type='text/javascript' src='../js/localization.js'><\/script>");
			
 
				+        $body.append("<script type='text/javascript' src='../js/common.js'><\/script>");
			
 
				+        $body.append("<script type='text/javascript' src='../js/sidebar.js'><\/script>");
			
 
				+        $body.append("<script type='text/javascript' src='../js/example.js'><\/script>");
			
 
				+        $body.append("<script type='text/javascript' src='../js/wechat.js'><\/script>");
			
 
				+      });
			
 
				+    </script>
			
 
				+    <!-- ./wrapper end-->
			
 
				+  </body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/examples.html
+++ b/public/supermap/examples/component/examples.html
@@ -0,0 +1,51 @@
 
				+<!--********************************************************************
			
 
				+* 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" />
			
 
				+        <title data-i18n="resources.title_examplesComponent"></title>
			
 
				+        <link rel="shortcut icon" type="image/x-icon" href="../../web/img/favicon.ico" />
			
 
				+        <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport" />
			
 
				+        <script
			
 
				+            type="text/javascript"
			
 
				+            include="jquery,bootstrap,template,admin-lte,jquery.scrollto,i18n,lazyload"
			
 
				+            src="../js/include-web.js"
			
 
				+        ></script>
			
 
				+        <link rel="stylesheet" href="../css/common.css" />
			
 
				+        <link rel="stylesheet" href="../css/header.css" />
			
 
				+        <link rel="stylesheet" href="../css/sideBar.css" />
			
 
				+        <link rel="stylesheet" href="../css/examples.css" />
			
 
				+        <script type="text/javascript" src="../js/utils.js"></script>
			
 
				+    </head>
			
 
				+    <body class="hold-transition skin-blue sidebar-mini" data-spy="scroll" data-target="#scrollSpy">
			
 
				+        <!-- ./wrapper -->
			
 
				+        <div class="wrapper"></div>
			
 
				+        <script>
			
 
				+            $('.wrapper').load('../template/example.html', function() {
			
 
				+                var navigation = {
			
 
				+                    nav: {
			
 
				+                        title: 'SuperMap iClient 10i(2020)',
			
 
				+                        path: '../../web/',
			
 
				+                        isLocal: window.isLocal
			
 
				+                    }
			
 
				+                };
			
 
				+                utils.loadTemplate('.icl-header', '../template/header.html', navigation);
			
 
				+                $body = $('body');
			
 
				+                $body.append("<script type='text/javascript' src='../openlayers/config.js'><\/script>");
			
 
				+                $body.append("<script type='text/javascript' src='../leaflet/config.js'><\/script>");
			
 
				+                $body.append("<script type='text/javascript' src='../classic/config.js'><\/script>");
			
 
				+                $body.append("<script type='text/javascript' src='../mapboxgl/config.js'><\/script>");
			
 
				+                $body.append("<script type='text/javascript' src='./config.js'><\/script>");
			
 
				+                $body.append("<script type='text/javascript' src='../js/localization.js'><\/script>");
			
 
				+                $body.append("<script type='text/javascript' src='../js/common.js'><\/script>");
			
 
				+                $body.append("<script type='text/javascript' src='../js/sidebar.js'><\/script>");
			
 
				+                $body.append("<script type='text/javascript' src='../js/example.js'><\/script>");
			
 
				+                utils.loadTemplate('.icl-footer', '../template/footer.html', navigation);
			
 
				+            });
			
 
				+        </script>
			
 
				+        <!-- ./wrapper end-->
			
 
				+    </body>
			
 
				+</html>
			
--- a/public/supermap/examples/component/img/cloud/cloud.png
+++ b/public/supermap/examples/component/img/cloud/cloud.png
--- a/public/supermap/examples/component/img/cloud/icon_rain.png
+++ b/public/supermap/examples/component/img/cloud/icon_rain.png
--- a/public/supermap/examples/component/img/cloud/icon_sidu.png
+++ b/public/supermap/examples/component/img/cloud/icon_sidu.png
--- a/public/supermap/examples/component/img/cloud/icon_wendu.png
+++ b/public/supermap/examples/component/img/cloud/icon_wendu.png
--- a/public/supermap/examples/component/img/cloud/icon_wind.png
+++ b/public/supermap/examples/component/img/cloud/icon_wind.png
--- a/public/supermap/examples/component/img/components_Tianditu_home_vue.png
+++ b/public/supermap/examples/component/img/components_Tianditu_home_vue.png
--- a/public/supermap/examples/component/img/components_Tianditu_route_vue.png
+++ b/public/supermap/examples/component/img/components_Tianditu_route_vue.png
--- a/public/supermap/examples/component/img/components_Tianditu_search_vue.png
+++ b/public/supermap/examples/component/img/components_Tianditu_search_vue.png
--- a/public/supermap/examples/component/img/components_Tianditu_switch_vue.png
+++ b/public/supermap/examples/component/img/components_Tianditu_switch_vue.png