From 30198240aa84a75e16f767f421903b64ab49e112 Mon Sep 17 00:00:00 2001
From: zhanghao <zhanghao@bd-apaas.com>
Date: Sat, 14 Nov 2020 10:21:28 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=83=A8=E5=88=86=E5=9C=B0?=
 =?UTF-8?q?=E5=9B=BEdemo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 static/view/data/arcgisTreeNode.json          |  68 +--
 static/view/demo/page-2d_base_map.html        |  50 +-
 static/view/demo/page-2d_csvlayer.html        |  38 +-
 static/view/demo/page-2d_loadjson.html        | 289 ----------
 static/view/demo/page-2d_query.html           | 351 ------------
 static/view/demo/page-2dto3d.html             |  40 +-
 static/view/demo/page-3d_base_map.html        |  33 +-
 static/view/demo/page-3d_csvlayer.html        |  97 ++--
 .../demo/page-arcgis_load_geoserver_wmts.html | 290 ----------
 .../demo/page-arcgis_load_mapbox_wmts.html    |  72 +++
 static/view/demo/page-arcgis_wmts.html        |  60 ++
 static/view/demo/page-basic_web_map.html      |   4 +-
 static/view/demo/page-featurelayer.html       | 534 +++++++++---------
 static/view/demo/page-fz_map.html             | 192 -------
 static/view/demo/page-geocoding.html          |  76 +--
 static/view/demo/page-multilayer3search.html  |  15 +-
 .../page-multilayersandfeilds_3search.html    |  10 +-
 static/view/demo/page-pointshine_map.html     |  50 +-
 static/view/demo/page-simplesearch.html       |  39 +-
 static/view/demo/page-sliderZoom.html         |  33 +-
 static/view/demo/page-video_web_map.html      |   9 +-
 21 files changed, 682 insertions(+), 1668 deletions(-)
 delete mode 100644 static/view/demo/page-2d_loadjson.html
 delete mode 100644 static/view/demo/page-2d_query.html
 delete mode 100644 static/view/demo/page-arcgis_load_geoserver_wmts.html
 create mode 100644 static/view/demo/page-arcgis_load_mapbox_wmts.html
 create mode 100644 static/view/demo/page-arcgis_wmts.html
 delete mode 100644 static/view/demo/page-fz_map.html

diff --git a/static/view/data/arcgisTreeNode.json b/static/view/data/arcgisTreeNode.json
index d2d123a..a25a4a0 100644
--- a/static/view/data/arcgisTreeNode.json
+++ b/static/view/data/arcgisTreeNode.json
@@ -3,6 +3,11 @@
         {
             "label": "arcgis server 地图示例",
             "children": [
+                {
+                    "label": "基础地图",
+                    "name": "basic_web_map",
+                    "branch": "arcgis_latest"
+                },
                 {
                     "label": "二维地图",
                     "name": "2d_base_map",
@@ -18,31 +23,6 @@
                     "name": "2dto3d",
                     "branch": "arcgis_latest"
                 },
-                {
-                    "label": "二维地图之加载csv数据源",
-                    "name": "2d_csvlayer",
-                    "branch": "arcgis_latest"
-                },
-                {
-                    "label": "二维地图之加载json数据源",
-                    "name": "2d_loadjson",
-                    "branch": "arcgis_latest"
-                },
-                {
-                    "label": "二维地图之查询",
-                    "name": "2d_query",
-                    "branch": "arcgis_latest"
-                },
-                {
-                    "label": "三维地图之加载csv数据源",
-                    "name": "3d_csvlayer",
-                    "branch": "arcgis_latest"
-                },
-                {
-                    "label": "基础地图",
-                    "name": "basic_web_map",
-                    "branch": "arcgis_latest"
-                },
                 {
                     "label": "地图级别控件",
                     "name": "sliderZoom",
@@ -58,34 +38,19 @@
                     "name": "geocoding",
                     "branch": "arcgis_latest"
                 },
-                {
-                    "label": "缓冲区服务与空间分析",
-                    "name": "linebuffer",
-                    "branch": "arcgis_latest"
-                },
-                {
-                    "label": "人员轨迹查询",
-                    "name": "peoplecluster",
-                    "branch": "arcgis_latest"
-                },
                 {
                     "label": "高亮图层要素",
                     "name": "pointshine_map",
                     "branch": "arcgis_latest"
                 },
                 {
-                    "label": "天地图_WMTS",
-                    "name": "tdt_wmts_map",
-                    "branch": "arcgis_latest"
-                },
-                {
-                    "label": "方正_WMTS",
-                    "name": "fz_map",
+                    "label": "ArcGIS_WMTS",
+                    "name": "arcgis_wmts",
                     "branch": "arcgis_latest"
                 },
                 {
-                    "label": "Geoserver_WMTS服务",
-                    "name": "arcgis_load_geoserver_wmts",
+                    "label": "Mapbox_WMTS服务",
+                    "name": "arcgis_load_mapbox_wmts",
                     "branch": "arcgis_latest"
                 },
                 {
@@ -98,11 +63,6 @@
                     "name": "multilayer3search",
                     "branch": "arcgis_latest"
                 },
-                {
-                    "label": "多图层属性查询",
-                    "name": "multilayer4search",
-                    "branch": "arcgis_latest"
-                },
                 {
                     "label": "通用多图层多字段查询",
                     "name": "multilayersandfeilds_3search",
@@ -143,6 +103,16 @@
                     "name": "migrate2",
                     "branch": "arcgis_latest"
                 },
+                {
+                    "label": "二维地图之加载csv数据源",
+                    "name": "2d_csvlayer",
+                    "branch": "arcgis_latest"
+                },
+                {
+                    "label": "三维地图之加载csv数据源",
+                    "name": "3d_csvlayer",
+                    "branch": "arcgis_latest"
+                },
                 {
                     "label": "公交线路图",
                     "name": "bus_line",
diff --git a/static/view/demo/page-2d_base_map.html b/static/view/demo/page-2d_base_map.html
index 656dde7..5d34e64 100644
--- a/static/view/demo/page-2d_base_map.html
+++ b/static/view/demo/page-2d_base_map.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
-    
-  <head>
+
+<head>
     <meta charset="utf-8" />
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
     <title>2D Base Map</title>
@@ -10,22 +10,49 @@
         html,
         body,
         #viewDiv {
-          padding: 0;
-          margin: 0;
-          height: 100%;
-          width: 100%;
+            padding: 0;
+            margin: 0;
+            height: 100%;
+            width: 100%;
         }
     </style>
     <script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
     <script>
         require([
-            "esri/Map", 
-            "esri/views/MapView"
-        ], function(Map, MapView) {
+            "esri/config",
+            "esri/Map",
+            "esri/Basemap",
+            "esri/views/MapView",
+            "esri/layers/WebTileLayer",
+            "dojo/domReady!"
+        ], function (ESRICONFIG, Map, Basemap, MapView, WebTileLayer) {
+            // 通过瓦片形式加载天地图
+            // 天地图根据投影分为两种：墨卡托和经纬度，在3D视图中使用Web墨卡托投影
+            // 在加载经纬度地图的时候我们需要使用 {subDomain}, {col}, {row}, {level}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别
+            var tiledLayer = new WebTileLayer({
+                urlTemplate: "http://{subDomain}.tianditu.gov.cn/vec_w/wmts?tk=fbaab7dca87a6ebf0bd1071ad5d837c0&SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&FORMAT=tiles&TILEMATRIXSET=w&STYLE=default&LAYER=vec&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}",
+                subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]
+            });
+            var annolayer = new WebTileLayer({
+                urlTemplate: "http://{subDomain}.tianditu.gov.cn/cva_w/wmts?tk=fbaab7dca87a6ebf0bd1071ad5d837c0&SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&FORMAT=tiles&TILEMATRIXSET=w&STYLE=default&LAYER=cva&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}",
+                subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]
+            });
+            //请求天地图服务跨域的设置
+            ESRICONFIG.request.corsEnabledServers.push(
+                "t0.tianditu.gov.cn", "t1.tianditu.gov.cn", "t2.tianditu.gov.cn", "t3.tianditu.gov.cn",
+                "t4.tianditu.gov.cn", "t5.tianditu.gov.cn", "t6.tianditu.gov.cn", "t7.tianditu.gov.cn"
+            );
+            // 初始化天地图-Web墨卡托投影底图
+            var basemap = new Basemap({
+                id: "tdt",
+                title: "天地图-Web墨卡托",
+                baseLayers: [tiledLayer, annolayer]
+            })
+            // 初始化地图
             var map = new Map({
-                basemap: "streets"
+                basemap: basemap
             });
- 
+            // 初始化二维视图
             var view = new MapView({
                 container: "viewDiv",
                 map: map,
@@ -35,6 +62,7 @@
         });
     </script>
 </head>
+
 <body>
     <div id="viewDiv"></div>
 </body>
diff --git a/static/view/demo/page-2d_csvlayer.html b/static/view/demo/page-2d_csvlayer.html
index 384430a..9a01b4a 100644
--- a/static/view/demo/page-2d_csvlayer.html
+++ b/static/view/demo/page-2d_csvlayer.html
@@ -1,9 +1,10 @@
 <!DOCTYPE html>
 <html>
+
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
-    <title>CSVLayer - 4.11</title>
+    <title>CSVLayer - 2d</title>
     <link rel="stylesheet" href="https://apaas.wodcloud.com/api_4.x/esri/css/main.css">
     <style>
         html,
@@ -28,7 +29,8 @@
             "esri/layers/CSVLayer",
             "esri/renderers/SimpleRenderer",
             "esri/symbols/SimpleMarkerSymbol",
-            "esri/Color"
+            "esri/Color",
+            "dojo/domReady!"
         ], function (Map, Basemap, MapView, WebTileLayer, TileInfo, CSVLayer, SimpleRenderer, SimpleMarkerSymbol, Color) {
             // 通过瓦片形式加载天地图的
             // 天地图根据投影分为两种：墨卡托和经纬度
@@ -152,24 +154,26 @@
             // 在加载经纬度地图的时候我们需要使用 {subDomain}, {col}, {row}, {level}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别
             var tiledLayer = new WebTileLayer("http://{subDomain}.tianditu.gov.cn/vec_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", {
                 subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
-                tileInfo: tileInfo
+                tileInfo: tileInfo,
+                spatialReference: {
+                    wkid: 4326
+                },
             });
             var annomap = new WebTileLayer("http://{subDomain}.tianditu.gov.cn/cva_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", {
                 subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
-                tileInfo: tileInfo
+                tileInfo: tileInfo,
+                spatialReference: {
+                    wkid: 4326
+                },
             });
             // 天地图经纬度地图及注记作为底图
             var tdtBasemap = new Basemap({
                 baseLayers: [tiledLayer, annomap],
                 title: "TDT Basemap",
-                id: "tdtBasemap",
-                spatialReference: {
-                    wkid: 4326
-                },
+                id: "tdtBasemap"
             });
-           
             // csv文件的url
-            var url = "https://apaas.wodcloud.com/mapsamples/static/data/stations.csv";
+            var url = "https://apaas3.wodcloud.com/mapstatic/data/stations.csv";
             var template = {
                 title: "Weather Observation Station",
                 content: " {province} {st_name} on {ele} with id {stid}."
@@ -184,20 +188,19 @@
             });
             //csv图层的渲染配置
             csvLayer.renderer = {
-                type: "simple",  
+                type: "simple",
                 symbol: {
-                    type: "simple-marker", 
+                    type: "simple-marker",
                     size: 8,
-                    color: [245,125,33],
-                    outline: {  
+                    color: [245, 125, 33],
+                    outline: {
                         width: 1,
                         color: "white"
                     }
                 }
             };
-
             // 创建地图数据
-             var map = new Map({
+            var map = new Map({
                 basemap: tdtBasemap,
                 layers: [csvLayer]
             });
@@ -205,9 +208,6 @@
             var view = new MapView({
                 map: map,
                 container: "viewDiv",
-                spatialReference: {
-                    wkid: 4326
-                },
                 zoom: 4,
                 constraints: {
                     lods: tileInfo.lods,
diff --git a/static/view/demo/page-2d_loadjson.html b/static/view/demo/page-2d_loadjson.html
deleted file mode 100644
index bef84e5..0000000
--- a/static/view/demo/page-2d_loadjson.html
+++ /dev/null
@@ -1,289 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
-  <title>People Cluster</title>
-  <link rel="stylesheet" href="https://apaas.wodcloud.com/api_4.x/esri/css/main.css">
-  <style>
-    html,
-    body,
-    #viewDiv {
-      padding: 0;
-      margin: 0;
-      height: 100%;
-      width: 100%;
-    }
-
-  </style>
-  <script src="https://apaas.wodcloud.com/mapsamples/static/js/jquery-3.3.1.min.js"></script>
-  <script src="https://apaas.wodcloud.com/mapsamples/static/config/mapconfig.js"></script>
-  <script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
-  <script>
-    $(function () {
-      require([
-        "esri/Map",
-        "esri/Graphic",
-        "esri/Basemap",
-        "esri/views/MapView",
-        "esri/layers/WebTileLayer",
-        "esri/layers/support/TileInfo",
-        "esri/geometry/Point",
-        "esri/widgets/Search",
-        "esri/tasks/QueryTask",
-        "esri/tasks/support/Query",
-        "esri/layers/GraphicsLayer",
-        "esri/geometry/SpatialReference",
-        "esri/layers/VectorTileLayer",
-        "esri/symbols/PictureMarkerSymbol"
-      ], function (Map, Graphic, Basemap, MapView, WebTileLayer, TileInfo, Point, Search, QueryTask, Query,
-        GraphicsLayer, SpatialReference,
-        VectorTileLayer, PictureMarkerSymbol) {
-        // 通过瓦片形式加载天地图的
-        // 天地图根据投影分为两种：墨卡托和经纬度
-        // 设定瓦片信息，天地图经纬度地图的切片信息全部使用该信息设定
-        var tileInfo = new TileInfo({
-          dpi: 90.71428571427429, //解析度，即像素
-          rows: 256,
-          cols: 256,
-          compressionQuality: 0, //压缩像素值
-          origin: {
-            x: -180,
-            y: 90
-          },
-          spatialReference: {
-            wkid: 4326
-          },
-          lods: [ //定义平铺方案的细节级别数组
-            {
-              level: 1,
-              levelValue: 1,
-              resolution: 0.703125,
-              scale: 295497593.05875003
-            }, {
-              level: 2,
-              levelValue: 2,
-              resolution: 0.3515625,
-              scale: 147748796.52937502
-            }, {
-              level: 3,
-              levelValue: 3,
-              resolution: 0.17578125,
-              scale: 73874398.264687508
-            }, {
-              level: 4,
-              levelValue: 4,
-              resolution: 0.087890625,
-              scale: 36937199.132343754
-            }, {
-              level: 5,
-              levelValue: 5,
-              resolution: 0.0439453125,
-              scale: 18468599.566171877
-            }, {
-              level: 6,
-              levelValue: 6,
-              resolution: 0.02197265625,
-              scale: 9234299.7830859385
-            }, {
-              level: 7,
-              levelValue: 7,
-              resolution: 0.010986328125,
-              scale: 4617149.8915429693
-            }, {
-              level: 8,
-              levelValue: 8,
-              resolution: 0.0054931640625,
-              scale: 2308574.9457714846
-            }, {
-              level: 9,
-              levelValue: 9,
-              resolution: 0.00274658203125,
-              scale: 1154287.4728857423
-            }, {
-              level: 10,
-              levelValue: 10,
-              resolution: 0.001373291015625,
-              scale: 577143.73644287116
-            }, {
-              level: 11,
-              levelValue: 11,
-              resolution: 0.0006866455078125,
-              scale: 288571.86822143558
-            }, {
-              level: 12,
-              levelValue: 12,
-              resolution: 0.00034332275390625,
-              scale: 144285.93411071779
-            }, {
-              level: 13,
-              levelValue: 13,
-              resolution: 0.000171661376953125,
-              scale: 72142.967055358895
-            }, {
-              level: 14,
-              levelValue: 14,
-              resolution: 8.58306884765625e-005,
-              scale: 36071.483527679447
-            }, {
-              level: 15,
-              levelValue: 15,
-              resolution: 4.291534423828125e-005,
-              scale: 18035.741763839724
-            }, {
-              level: 16,
-              levelValue: 16,
-              resolution: 2.1457672119140625e-005,
-              scale: 9017.8708819198619
-            }, {
-              level: 17,
-              levelValue: 17,
-              resolution: 1.0728836059570313e-005,
-              scale: 4508.9354409599309
-            }, {
-              level: 18,
-              levelValue: 18,
-              resolution: 5.3644180297851563e-006,
-              scale: 2254.4677204799655
-            }, {
-              level: 19,
-              levelValue: 19,
-              resolution: 2.68220901489257815e-006,
-              scale: 1127.23386023998275
-            }, {
-              level: 20,
-              levelValue: 2,
-              resolution: 1.341104507446289075e-006,
-              scale: 563.616930119991375
-            }
-          ]
-        });
-        // 在加载经纬度地图的时候我们需要使用 {subDomain}, {col}, {row}, {level}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别
-        var tiledLayer = new WebTileLayer(
-          "http://{subDomain}.tianditu.gov.cn/vec_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", {
-            subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
-            tileInfo: tileInfo
-          });
-        var annomap = new WebTileLayer(
-          "http://{subDomain}.tianditu.gov.cn/cva_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", {
-            subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
-            tileInfo: tileInfo
-          });
-        // 天地图经纬度地图及注记作为底图
-        var tdtBasemap = new Basemap({
-          baseLayers: [tiledLayer, annomap],
-          title: "TDT Basemap",
-          id: "tdtBasemap",
-          spatialReference: {
-            wkid: 4326
-          },
-        });
-        // 创建地图
-        var map = new Map({
-          basemap: tdtBasemap
-        });
-        //json格式的地理数据
-        var url = "https://apaas.wodcloud.com/mapsamples/static/data/ga_footprint.json"
-        $.ajax({
-          type: "GET",
-          url: url,
-          dataType: "json",
-          timeout: 5000,
-          success: function (response) {
-            console.log(response)
-            loaddata(response);
-          },
-          error: function (xhr, status, err) {
-            alert("找不到数据");
-          }
-        });
-        var footprintlayer = new GraphicsLayer();
-        function loaddata(data) {
-          if (!data.features || !data.features.length) {
-            console.log("no data");
-            return;
-          }
-
-          var wkid = data.crs.properties.name.split(':')[1];
-
-          var features = data.features;
-          for (var i = 0; i < features.length; i++) {
-            var feature = features[i];
-            if (feature) {
-              var properties = feature.properties;
-              var reportor = properties.BUS_REPO_1 ? properties.BUS_REPO_1 : "匿名";
-              var happenedTime = properties.BUS_HAPPEN;
-              var happenedAddress = properties.BUS_ADDRES;
-              var description = properties.BUS_DESCRI;
-              var lon = feature.geometry.coordinates[0];
-              var lat = feature.geometry.coordinates[1];
-              var pt = new Point({
-                "x": lon,
-                "y": lat,
-                "spatialReference": new SpatialReference(wkid)
-              });
-              var symbol = new PictureMarkerSymbol("https://apaas.wodcloud.com/mapsamples/static/images/marker-yellow.png", 26, 37);
-              var attr = {
-                "name": reportor,
-                "happenedTime": happenedTime,
-                "happenedAddress": happenedAddress,
-                "detail": description
-              };
-              var graphic = new Graphic(pt, symbol, attr);
-              footprintlayer.add(graphic);
-            }
-          }
-        }
-        const search = new Search({
-          view: view,
-          resultGraphicEnabled: false,
-          popupEnabled: false
-        });
-
-        map.add(footprintlayer);
-        // 创建二维地图
-        var view = new MapView({
-          map: map,
-          container: "viewDiv",
-          spatialReference: {
-            wkid: 4326
-          },
-          zoom: 16,
-          constraints: {
-            lods: tileInfo.lods,
-            snapToZoom: true
-          },
-          center: [119.636832387, 30.944171371]
-        });
-        view.ui.add(search, {
-          position: "top-right"
-        });
-      });
-    });
-
-  </script>
-</head>
-
-<body>
-  <div id="viewDiv"></div>
-  <div class="esri-widget" id="optionsDiv">
-    <h2>过滤条件</h2>
-    <br />
-    <label for="province">省 ： </label>
-    <select class="esri-widget" id="valSelect">
-      <option value="北京">北京市</option>
-      <option value="湖北">湖北省</option>
-      <option value="天津">天津市</option>
-      <option value="上海">上海市</option>
-      <option value="江苏">江苏省</option>
-    </select>
-    <br />
-    <label for="name">站点名称:</label>
-    <input id="st_name" type="text">
-    <button class="esri-widget" id="doBtn">检索</button> <br />
-    <p><span id="printResults"></span></p>
-  </div>
-</body>
-
-</html>
diff --git a/static/view/demo/page-2d_query.html b/static/view/demo/page-2d_query.html
deleted file mode 100644
index 23b864d..0000000
--- a/static/view/demo/page-2d_query.html
+++ /dev/null
@@ -1,351 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
-  <title>QueryTask</title>
-
-  <style>
-    html,
-    body,
-    #viewDiv {
-      padding: 0;
-      margin: 0;
-      height: 100%;
-      width: 100%;
-    }
-
-    #optionsDiv {
-      display: flex;
-      flex-direction: row;
-      flex-wrap: wrap;
-      justify-content: space-around;
-      align-items: baseline;
-      align-content: center;
-      background-color: dimgray;
-      color: white;
-      padding: 10px;
-      width: 200px;
-    }
-    #printResults{
-      width: 200px
-
-    }
-    .esri-popup .esri-popup-header .esri-title {
-      font-size: 18px;
-      font-weight: bolder;
-    }
-
-    .esri-popup .esri-popup-body .esri-popup-content {
-      font-size: 14px;
-    }
-
-  </style>
-  <link rel="stylesheet" href="https://apaas.wodcloud.com/api_4.x/esri/css/main.css">
-  <script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
-
-  <script src="/static/js/jquery-3.3.1.min.js"></script>
-  <script src="/static/config/mapconfig.js"></script>
-
-  <script>
-    require([
-      "esri/Map",
-      "esri/Graphic",
-      "esri/Basemap",
-      "esri/views/MapView",
-      "esri/layers/WebTileLayer",
-      "esri/layers/support/TileInfo",
-      "esri/geometry/Point",
-      "esri/layers/FeatureLayer",
-      "esri/layers/GraphicsLayer",
-      "esri/geometry/SpatialReference",
-      "esri/layers/VectorTileLayer",
-      "esri/symbols/PictureMarkerSymbol",
-      "esri/tasks/QueryTask",
-      "esri/tasks/support/Query"
-    ], function (Map, Graphic, Basemap, MapView, WebTileLayer, TileInfo, Point, FeatureLayer, GraphicsLayer,
-      SpatialReference, VectorTileLayer,
-      PictureMarkerSymbol, QueryTask, Query) {
-      // 通过瓦片形式加载天地图的
-      // 天地图根据投影分为两种：墨卡托和经纬度
-      // 设定瓦片信息，天地图经纬度地图的切片信息全部使用该信息设定
-      var tileInfo = new TileInfo({
-        dpi: 90.71428571427429, //解析度，即像素
-        rows: 256,
-        cols: 256,
-        compressionQuality: 0, //压缩像素值
-        origin: {
-          x: -180,
-          y: 90
-        },
-        spatialReference: {
-          wkid: 4326
-        },
-        lods: [ //定义平铺方案的细节级别数组
-          {
-            level: 1,
-            levelValue: 1,
-            resolution: 0.703125,
-            scale: 295497593.05875003
-          }, {
-            level: 2,
-            levelValue: 2,
-            resolution: 0.3515625,
-            scale: 147748796.52937502
-          }, {
-            level: 3,
-            levelValue: 3,
-            resolution: 0.17578125,
-            scale: 73874398.264687508
-          }, {
-            level: 4,
-            levelValue: 4,
-            resolution: 0.087890625,
-            scale: 36937199.132343754
-          }, {
-            level: 5,
-            levelValue: 5,
-            resolution: 0.0439453125,
-            scale: 18468599.566171877
-          }, {
-            level: 6,
-            levelValue: 6,
-            resolution: 0.02197265625,
-            scale: 9234299.7830859385
-          }, {
-            level: 7,
-            levelValue: 7,
-            resolution: 0.010986328125,
-            scale: 4617149.8915429693
-          }, {
-            level: 8,
-            levelValue: 8,
-            resolution: 0.0054931640625,
-            scale: 2308574.9457714846
-          }, {
-            level: 9,
-            levelValue: 9,
-            resolution: 0.00274658203125,
-            scale: 1154287.4728857423
-          }, {
-            level: 10,
-            levelValue: 10,
-            resolution: 0.001373291015625,
-            scale: 577143.73644287116
-          }, {
-            level: 11,
-            levelValue: 11,
-            resolution: 0.0006866455078125,
-            scale: 288571.86822143558
-          }, {
-            level: 12,
-            levelValue: 12,
-            resolution: 0.00034332275390625,
-            scale: 144285.93411071779
-          }, {
-            level: 13,
-            levelValue: 13,
-            resolution: 0.000171661376953125,
-            scale: 72142.967055358895
-          }, {
-            level: 14,
-            levelValue: 14,
-            resolution: 8.58306884765625e-005,
-            scale: 36071.483527679447
-          }, {
-            level: 15,
-            levelValue: 15,
-            resolution: 4.291534423828125e-005,
-            scale: 18035.741763839724
-          }, {
-            level: 16,
-            levelValue: 16,
-            resolution: 2.1457672119140625e-005,
-            scale: 9017.8708819198619
-          }, {
-            level: 17,
-            levelValue: 17,
-            resolution: 1.0728836059570313e-005,
-            scale: 4508.9354409599309
-          }, {
-            level: 18,
-            levelValue: 18,
-            resolution: 5.3644180297851563e-006,
-            scale: 2254.4677204799655
-          }, {
-            level: 19,
-            levelValue: 19,
-            resolution: 2.68220901489257815e-006,
-            scale: 1127.23386023998275
-          }, {
-            level: 20,
-            levelValue: 2,
-            resolution: 1.341104507446289075e-006,
-            scale: 563.616930119991375
-          }
-        ]
-      });
-      // 在加载经纬度地图的时候我们需要使用 {subDomain}, {col}, {row}, {level}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别
-      var tiledLayer = new WebTileLayer(
-        "http://{subDomain}.tianditu.gov.cn/vec_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", {
-          subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
-          tileInfo: tileInfo
-        });
-      var annomap = new WebTileLayer(
-        "http://{subDomain}.tianditu.gov.cn/cva_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", {
-          subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
-          tileInfo: tileInfo
-        });
-      // 天地图经纬度地图及注记作为底图
-      var tdtBasemap = new Basemap({
-        baseLayers: [tiledLayer, annomap],
-        title: "TDT Basemap",
-        id: "tdtBasemap",
-        spatialReference: {
-          wkid: 4326
-        },
-      });
-      //预设弹出窗模板
-      var popupTemplate = {
-        title: "{province}, {st_name} 站",
-        fieldInfos: [{
-          fieldName: "st_name",
-          label: "站点名称",
-          format: {
-            places: 0,
-            digitSeperator: true
-          }
-        }],
-        content: "</b> 站点 {st_name} 位于 {province} 省/直辖市" +
-          "<br><b>传感器高度:</b> {ele}" +
-          "<br><b>海拔高度:</b> {ele}" +
-          "</b> 经度：{lon}  纬度：{lat} "
-      };
-
-      var stationUrl = "https://geoserver.deekong.com/arcgis/rest/services/weather_station_wmo/FeatureServer/0"
-      //声明查询结果图层和目标要素图层
-      var resultsLayer = new GraphicsLayer();
-      var weatherstation = new FeatureLayer({
-        url: stationUrl
-      });
-      //创建查询
-      var qTask = new QueryTask({
-        url: stationUrl
-      });
-      //设置查询参数，是否返回几何数据、返回字段数组
-      var params = new Query({
-        returnGeometry: true,
-        outFields: ["*"]
-      });
-
-      //构建地图数据
-      var map = new Map({
-        basemap: tdtBasemap,
-        layers: [weatherstation, resultsLayer]
-      });
-      //显示地图
-      var view = new MapView({
-        map: map,
-        container: "viewDiv",
-        spatialReference: {
-          wkid: 4326
-        },
-        zoom: 6,
-        constraints: {
-          lods: tileInfo.lods,
-          snapToZoom: true
-        },
-        center: [109, 38],
-        popup: {
-          dockEnabled: true,
-          dockOptions: {
-            position: "top-right",
-            breakpoint: false
-          }
-        }
-      });
-      //地图数据加载完成
-      view.when(function () {
-        view.ui.add("optionsDiv", "bottom-right");
-        //按钮点击监听事件，执行查询
-        document.getElementById("doBtn").addEventListener("click", doQuery);
-      });
-
-      var st_name = document.getElementById("st_name");
-      var province = document.getElementById("valSelect");
-
-      //查询事件
-      function doQuery() {
-        //清楚之前查询结果
-        resultsLayer.removeAll();
-        //设置查询条件，与数据库查询SQL语句类似
-        params.where = "province='" + province.value + "'";
-        qTask
-          .execute(params)
-          .then(getResults)
-          .catch(promiseRejected);
-      }
-
-      // 查询完成处理返回结果
-      function getResults(response) {
-        var peakResults = response.features.map(function (feature) {
-          var pt = new Point({
-            "x": feature.geometry.longitude,
-            "y": feature.geometry.latitude,
-            "spatialReference": new SpatialReference(4326)
-          });
-          var symbol = new PictureMarkerSymbol("/images/marker-red.png", 26, 37);
-          var attr = {
-            "st_name": feature.attributes.st_name,
-            "province": feature.attributes.province,
-            "ele": feature.attributes.ele,
-            "lat": feature.attributes.lat,
-            "lon": feature.attributes.lon
-          };
-          var graphic = new Graphic(pt, symbol, attr);
-          graphic.popupTemplate = popupTemplate;
-          return graphic;
-        });
-        //将结果添加到图层
-        resultsLayer.addMany(peakResults);
-
-        //移动地图到结果处
-        view.goTo(peakResults).then(function () {
-          view.popup.open({
-            features: peakResults,
-            featureMenuOpen: true,
-            updateLocationEnabled: true
-          });
-        });
-
-        document.getElementById("printResults").innerHTML =
-          "共查询到" + peakResults.length + "个对象";
-      }
-
-      function promiseRejected(error) {
-        console.error("Promise rejected: ", error.message);
-      }
-    });
-
-  </script>
-</head>
-
-<body>
-  <div id="viewDiv"></div>
-  <div class="esri-widget" id="optionsDiv">
-    <label for="province">省 ： </label>
-    <select class="esri-widget" id="valSelect">
-      <option value="北京">北京市</option>
-      <option value="湖北">湖北省</option>
-      <option value="天津">天津市</option>
-      <option value="上海">上海市</option>
-      <option value="江苏">江苏省</option>
-    </select>
-    <br><br>
-    <button class="esri-widget" id="doBtn">检索</button> <br />
-    <span id="printResults"></span>
-  </div>
-</body>
-
-</html>
diff --git a/static/view/demo/page-2dto3d.html b/static/view/demo/page-2dto3d.html
index a5af54b..37bd7c6 100644
--- a/static/view/demo/page-2dto3d.html
+++ b/static/view/demo/page-2dto3d.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html>
-
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
@@ -15,13 +14,11 @@
       height: 100%;
       width: 100%;
     }
-
     #infoDiv {
       position: absolute;
       top: 15px;
       left: 60px;
     }
-
     #infoDiv input {
       border: none;
       box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 2px;
@@ -31,12 +28,13 @@
   <script>
     require([
       "esri/config",
-      "esri/layers/WebTileLayer",
       "esri/Map",
+      "esri/Basemap",
       "esri/views/MapView",
       "esri/views/SceneView",
+      "esri/layers/WebTileLayer",
       "dojo/domReady!"
-    ], function (ESRICONFIG, WebTileLayer, Map, MapView, SceneView) {
+    ], function (ESRICONFIG, Map, Basemap, MapView, SceneView, WebTileLayer) {
       // 通过瓦片形式加载天地图
       // 天地图根据投影分为两种：墨卡托和经纬度，在3D视图中使用Web墨卡托投影
       // 在加载经纬度地图的时候我们需要使用 {subDomain}, {col}, {row}, {level}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别
@@ -48,58 +46,54 @@
         urlTemplate: "http://{subDomain}.tianditu.gov.cn/cva_w/wmts?tk=fbaab7dca87a6ebf0bd1071ad5d837c0&SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&FORMAT=tiles&TILEMATRIXSET=w&STYLE=default&LAYER=cva&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}",
         subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]
       });
-      //请求天地图服务跨域的设置
+      // 请求天地图服务跨域的设置
       ESRICONFIG.request.corsEnabledServers.push(
         "t0.tianditu.gov.cn", "t1.tianditu.gov.cn", "t2.tianditu.gov.cn", "t3.tianditu.gov.cn",
         "t4.tianditu.gov.cn", "t5.tianditu.gov.cn", "t6.tianditu.gov.cn", "t7.tianditu.gov.cn"
       );
-
+      // 初始化天地图-Web墨卡托投影底图
+      var basemap = new Basemap({
+        id: "tdt",
+        title: "天地图-Web墨卡托",
+        baseLayers: [tiledLayer,annolayer]
+      })
+      // 获取切换按钮节点
       var switchButton = document.getElementById("switch-btn");
-      //统一管理页面中的地图视图
+      // 统一管理页面中的地图视图
       var appConfig = {
         mapView: null, //2D视图
         sceneView: null, //3D视图
         activeView: null, //当前显示的视图
         container: "viewDiv"
       };
-
-      //视图初始设置，缩放等级，中心
+      // 视图初始设置，缩放等级，中心
       var initialViewParams = {
         zoom: 5,
         center: [114, 30],
         container: appConfig.container
       };
-      //同一个地图数据资源
+      // 初始化地图
       var map = new Map({
-        ground: "world-elevation"
+        basemap: basemap
       });
-      map.layers.add(tiledLayer);
-      map.layers.add(annolayer);
-
       //创建2D视图
       appConfig.mapView = createView(initialViewParams, "2d");
       appConfig.mapView.map = map;
       appConfig.activeView = appConfig.mapView;
-
       // 创建3D视图
       initialViewParams.container = null; //初始状况不显示3D视图
       initialViewParams.map = map;
       appConfig.sceneView = createView(initialViewParams, "3d");
-
       // 转换按钮
       switchButton.addEventListener("click", function () {
         switchView();
       });
-
       function switchView() {
         //判断当前视图是否是3D视图
         var is3D = appConfig.activeView.type === "3d";
-
         var activeViewpoint = appConfig.activeView.viewpoint.clone();
-
         //移除当前视图
         appConfig.activeView.container = null;
-
         if (is3D) {
           // 如果是3D视图，就将其转换为2D视图
           appConfig.mapView.viewpoint = activeViewpoint;
@@ -114,7 +108,6 @@
           switchButton.value = "2D";
         }
       }
-
       //创建2D和3D视图
       function createView(params, type) {
         var view;
@@ -128,10 +121,8 @@
         return view;
       }
     });
-
   </script>
 </head>
-
 <body>
   <div id="viewDiv"></div>
   <div id="infoDiv">
@@ -139,5 +130,4 @@
       value="3D" />
   </div>
 </body>
-
 </html>
diff --git a/static/view/demo/page-3d_base_map.html b/static/view/demo/page-3d_base_map.html
index 22f164e..b8b62e4 100644
--- a/static/view/demo/page-3d_base_map.html
+++ b/static/view/demo/page-3d_base_map.html
@@ -19,13 +19,14 @@
   <script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
   <script>
     require([
+      "esri/config",
       "esri/Map",
+      "esri/Basemap",
       "esri/views/SceneView",
       "esri/layers/WebTileLayer",
-      "esri/config",
       "esri/geometry/Point",
       "dojo/domReady!"
-    ], function (Map, SceneView, WebTileLayer, ESRICONFIG, Point) {
+    ], function (ESRICONFIG,Map, Basemap, SceneView, WebTileLayer, Point) {
       // 通过瓦片形式加载天地图
       // 天地图根据投影分为两种：墨卡托和经纬度，在3D视图中使用Web墨卡托投影
       // 在加载经纬度地图的时候我们需要使用 {subDomain}, {col}, {row}, {level}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别
@@ -37,37 +38,41 @@
         urlTemplate: "http://{subDomain}.tianditu.gov.cn/cva_w/wmts?tk=fbaab7dca87a6ebf0bd1071ad5d837c0&SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&FORMAT=tiles&TILEMATRIXSET=w&STYLE=default&LAYER=cva&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}",
         subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]
       });
-      //请求天地图服务跨域的设置
+      // 请求天地图服务跨域的设置
       ESRICONFIG.request.corsEnabledServers.push(
         "t0.tianditu.gov.cn", "t1.tianditu.gov.cn", "t2.tianditu.gov.cn", "t3.tianditu.gov.cn",
         "t4.tianditu.gov.cn", "t5.tianditu.gov.cn", "t6.tianditu.gov.cn", "t7.tianditu.gov.cn"
       );
+      // 初始化天地图-Web墨卡托投影底图
+      var basemap = new Basemap({
+        id: "tdt",
+        title: "天地图-Web墨卡托",
+        baseLayers: [tiledLayer,annolayer]
+      })
+      // 初始化地图
       var map = new Map({
-        ground: "world-elevation"
+        basemap: basemap
       });
-      map.layers.add(tiledLayer);
-      map.layers.add(annolayer);
-
+      // 初始化三维视图
       var view = new SceneView({
         map: map,
         container: "viewDiv",
         zoom: 3,
         center: [114, 30]
       });
-      var pt = new Point({
-        longitude: 106.7,
-        latitude: 26.6
-      });
-      view.whenLayerView(tiledLayer,annolayer).then(function() {
+      // 缩放到特定点
+      view.when(function() {
         setTimeout(view.goTo({
-          target: pt,
+          target: new Point({
+            longitude: 106.7,
+            latitude: 26.6
+          }),
           zoom: 10,
           tilt: 0,
           heading: 0
         }), 4000)
       })
     });
-
   </script>
 </head>
 
diff --git a/static/view/demo/page-3d_csvlayer.html b/static/view/demo/page-3d_csvlayer.html
index a62e1d2..6eb5140 100644
--- a/static/view/demo/page-3d_csvlayer.html
+++ b/static/view/demo/page-3d_csvlayer.html
@@ -4,7 +4,7 @@
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
-  <title>CSVLayer - 4.11</title>
+  <title>CSVLayer-3d</title>
   <link rel="stylesheet" href="https://apaas.wodcloud.com/api_4.x/esri/css/main.css">
   <style>
     html,
@@ -16,20 +16,21 @@
       width: 100%;
     }
   </style>
-  <script src="https://apaas.wodcloud.com/mapsamples/static/js/jquery-3.3.1.min.js"></script>
+  <script src="https://apaas3.wodcloud.com/mapstatic/js/jquery-3.3.1.min.js"></script>
   <script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
   <script>
     require([
       "esri/config",
-      "esri/layers/WebTileLayer",
       "esri/Map",
+      "esri/Basemap",
       "esri/views/SceneView",
+      "esri/layers/WebTileLayer",
       "esri/layers/CSVLayer",
       "esri/renderers/SimpleRenderer",
       "esri/symbols/SimpleMarkerSymbol",
       "esri/Color",
       "dojo/domReady!"
-    ], function (ESRICONFIG, WebTileLayer, Map, SceneView, CSVLayer, SimpleRenderer, SimpleMarkerSymbol, Color) {
+    ], function (ESRICONFIG, Map, Basemap, SceneView, WebTileLayer, CSVLayer, SimpleRenderer, SimpleMarkerSymbol, Color) {
       // 通过瓦片形式加载天地图
       // 天地图根据投影分为两种：墨卡托和经纬度，在3D视图中使用Web墨卡托投影
       // 在加载经纬度地图的时候我们需要使用 {subDomain}, {col}, {row}, {level}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别
@@ -41,64 +42,60 @@
         urlTemplate: "http://{subDomain}.tianditu.gov.cn/cva_w/wmts?tk=fbaab7dca87a6ebf0bd1071ad5d837c0&SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&FORMAT=tiles&TILEMATRIXSET=w&STYLE=default&LAYER=cva&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}",
         subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]
       });
-      //请求天地图服务跨域的设置
+      // 请求天地图服务跨域的设置
       ESRICONFIG.request.corsEnabledServers.push(
         "t0.tianditu.gov.cn", "t1.tianditu.gov.cn", "t2.tianditu.gov.cn", "t3.tianditu.gov.cn",
         "t4.tianditu.gov.cn", "t5.tianditu.gov.cn", "t6.tianditu.gov.cn", "t7.tianditu.gov.cn"
       );
-
-      var url =
-        "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.csv";
-      var url = "https://apaas.wodcloud.com/mapsamples/static/data/stations.csv";
-
-
-      var template = {
-        title: "Weather Observation Station",
-        content: " {province} {st_name} on {ele} with id {stid}."
-      };
-      var csvLayer = new CSVLayer({
-        url: url,
-        copyright: "big-data",
-        popupTemplate: template,
-        elevationInfo: {
-          //在地球表面放置
-          mode: "on-the-ground"
-        }
-      });
-
-      csvLayer.renderer = {
-        type: "simple", //渲染的类型
-        symbol: {
-          type: "point-3d", //要素为3D点
-          symbolLayers: [{
-            type: "icon", // 符号类型为图标
-            material: {
-              color: [238, 69, 0, 0.75]
-            },
-            outline: {
-              width: 0.5,
-              color: "white"
-            },
-            size: "12px"
-          }]
-        }
-      };
-
+      // 初始化天地图-Web墨卡托投影底图
+      var basemap = new Basemap({
+        id: "tdt",
+        title: "天地图-Web墨卡托",
+        baseLayers: [tiledLayer, annolayer]
+      })
+      // 初始化地图
       var map = new Map({
-        ground: "world-elevation"
+        basemap: basemap
       });
-      map.layers.add(tiledLayer);
-      map.layers.add(annolayer);
-      map.layers.add(csvLayer);
-
+      // 初始化三维视图
       var view = new SceneView({
         container: "viewDiv",
         center: [108.3, 33.9],
         zoom: 4,
         map: map
       });
+      // 添加csv图层
+      var url = "https://apaas3.wodcloud.com/mapstatic/data/stations.csv";
+      var csvLayer = new CSVLayer({
+        url: url,
+        copyright: "big-data",
+        popupTemplate: {
+          title: "Weather Observation Station",
+          content: " {province} {st_name} on {ele} with id {stid}."
+        },
+        elevationInfo: {
+          mode: "on-the-ground" //在地球表面放置
+        },
+        renderer: {
+          type: "simple", //渲染的类型
+          symbol: {
+            type: "point-3d", //要素为3D点
+            symbolLayers: [{
+              type: "icon", // 符号类型为图标
+              material: {
+                color: [238, 69, 0, 0.75]
+              },
+              outline: {
+                width: 0.5,
+                color: "white"
+              },
+              size: "12px"
+            }]
+          }
+        }
+      });
+      map.layers.add(csvLayer);
     });
-
   </script>
 </head>
 
@@ -106,4 +103,4 @@
   <div id="viewDiv"></div>
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/static/view/demo/page-arcgis_load_geoserver_wmts.html b/static/view/demo/page-arcgis_load_geoserver_wmts.html
deleted file mode 100644
index 791083c..0000000
--- a/static/view/demo/page-arcgis_load_geoserver_wmts.html
+++ /dev/null
@@ -1,290 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
-    <title>TDT WMTS Map</title>
-    <link rel="stylesheet" href="https://apaas.wodcloud.com/api_4.x/esri/css/main.css" />
-    <style>
-        html,
-        body,
-        #viewDiv {
-            height: 100%;
-            width: 100%;
-            margin: 0;
-            padding: 0;
-        }
-
-        #switchBaseMap {
-            position: fixed;
-            width: 50px;
-            height: 50px;
-            top: 20px;
-            right: 90px;
-        }
-
-        #switchBaseMap img {
-            width: auto;
-            height: auto;
-        }
-
-        #diqiu {
-            display: none;
-        }
-
-        #ditu {
-            display: block;
-        }
-    </style>
-    <script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
-    <script>
-        require([
-            "esri/Map",
-            "esri/Basemap",
-            "esri/views/MapView",
-            "esri/layers/WebTileLayer",
-            "esri/layers/support/TileInfo",
-            "esri/layers/MapImageLayer",
-            "https://apaas.wodcloud.com/mapsamples/static/js/GaodeLayer.js",
-            "dojo/domReady!"
-        ], function (Map, Basemap, MapView, WebTileLayer, TileInfo, MapImageLayer, GaodeLayer) {
-
-            var GaodeLayer = new GaodeLayer();
-            var tileInfo = new TileInfo({
-                rows: 256,
-                cols: 256,
-                compressionQuality: 0, //压缩像素值
-                origin: {
-                    x: -180,
-                    y: 90
-                },
-                spatialReference: {
-                    wkid: 4326
-                },
-                lods: [ //定义平铺方案的细节级别数组
-                    {
-                        level: 0,
-                        levelValue: 0,
-                        resolution: 0.703125,
-                        scale: 295497593.05875003
-                    }, {
-                        level: 1,
-                        levelValue: 1,
-                        resolution: 0.3515625,
-                        scale: 147748796.52937502
-                    }, {
-                        level: 2,
-                        levelValue: 2,
-                        resolution: 0.17578125,
-                        scale: 73874398.264687508
-                    }, {
-                        level: 3,
-                        levelValue: 3,
-                        resolution: 0.087890625,
-                        scale: 36937199.132343754
-                    }, {
-                        level: 4,
-                        levelValue: 4,
-                        resolution: 0.0439453125,
-                        scale: 18468599.566171877
-                    }, {
-                        level: 5,
-                        levelValue: 5,
-                        resolution: 0.02197265625,
-                        scale: 9234299.7830859385
-                    }, {
-                        level: 6,
-                        levelValue: 6,
-                        resolution: 0.010986328125,
-                        scale: 4617149.8915429693
-                    }, {
-                        level: 7,
-                        levelValue: 7,
-                        resolution: 0.0054931640625,
-                        scale: 2308574.9457714846
-                    }, {
-                        level: 8,
-                        levelValue: 8,
-                        resolution: 0.00274658203125,
-                        scale: 1154287.4728857423
-                    }, {
-                        level: 9,
-                        levelValue: 9,
-                        resolution: 0.001373291015625,
-                        scale: 577143.73644287116
-                    }, {
-                        level: 10,
-                        levelValue: 10,
-                        resolution: 0.0006866455078125,
-                        scale: 288571.86822143558
-                    }, {
-                        level: 11,
-                        levelValue: 11,
-                        resolution: 0.00034332275390625,
-                        scale: 144285.93411071779
-                    }, {
-                        level: 12,
-                        levelValue: 12,
-                        resolution: 0.000171661376953125,
-                        scale: 72142.967055358895
-                    }, {
-                        level: 13,
-                        levelValue: 13,
-                        resolution: 8.58306884765625e-005,
-                        scale: 36071.483527679447
-                    }, {
-                        level: 14,
-                        levelValue: 14,
-                        resolution: 4.291534423828125e-005,
-                        scale: 18035.741763839724
-                    }, {
-                        level: 15,
-                        levelValue: 15,
-                        resolution: 2.1457672119140625e-005,
-                        scale: 9017.8708819198619
-                    }, {
-                        level: 16,
-                        levelValue: 16,
-                        resolution: 1.0728836059570313e-005,
-                        scale: 4508.9354409599309
-                    }, {
-                        level: 17,
-                        levelValue: 17,
-                        resolution: 5.3644180297851563e-006,
-                        scale: 2254.4677204799655
-                    }, {
-                        level: 18,
-                        levelValue: 18,
-                        resolution: 2.68220901489257815e-006,
-                        scale: 1127.23386023998275
-                    }
-                ]
-            });
-
-            let layer = new WebTileLayer({
-                id: 'baseMapOne',
-                urlTemplate: 'http://218.19.252.203:20052/geoserver/gwc/service/wmts?SERVICE=WMTS&request=GetTile&version=1.0.0&LAYER=chanzhou%3Ajichutu&tileMatrixSet=EPSG:4326&TileMatrix=EPSG:4326:{level}&TileRow={row}&TileCol={col}&style=&format=image/png',
-                spatialReference: {
-                    wkid: 4326
-                },
-                tileInfo: tileInfo
-            })
-
-            var layer1 = new MapImageLayer({
-                title: "深圳市控制点",
-                id: "controlMap",
-                url: "https://apaasgis.wodcloud.com/server/rest/services/SZ_POINT_TEST/MapServer",
-                sublayers: [
-                    {
-                        id: 0,
-                        visible: true
-                    }
-                ]
-            });
-
-            // var tdtBasemap = new Basemap({
-            //     baseLayers: [layer, layer1],
-            //     title: "TDT Basemap",
-            //     id: "tdtBasemap",
-            //     spatialReference: {
-            //         wkid: 4326
-            //     },
-            // });
-
-            // var tdtBasemap2 = new Basemap({
-            //     baseLayers: [GaodeLayer,layer1],
-            //     title: "TDT Basemap",
-            //     id: "tdtBasemap",
-            //     spatialReference: {
-            //         wkid: 3857
-            //     },
-            // });
-            // // 创建地图
-            // var map = new Map({
-            //     basemap: tdtBasemap2
-            // });
-
-            var map = new Map();
-            map.layers.addMany([GaodeLayer, layer1]);
-            // 创建二维地图
-            var view = new MapView({
-                map: map,
-                container: "viewDiv",
-                zoom: 12,
-                constraints: {
-                    lods: tileInfo.lods,
-                    snapToZoom: true
-                },
-                center: [114.05457, 22.54635]
-                //center:[3793128.792642,12738689.385894]
-                //center:new Point(114.05457, 22.54635, new SpatialReference({ wkid: 3857 }))
-            });
-            window.onload = function () {
-                function $(id) {
-                    return document.getElementById(id);
-                }
-                //鼠标进
-                $("switchBaseMap").onmouseover = function () {
-                    $("diqiu").style.display = "block";
-                    $("ditu").style.display = "block";
-                }
-                //鼠标出
-                $("switchBaseMap").onmouseout = function () {
-                    if ($("diqiu").style.display == "block") {
-                        $("ditu").style.display = "none";
-                    } else if ($("ditu").style.display == "block") {
-                        $("diqiu").style.display = "none";
-                    }
-                }
-            }
-            //点击ditu图标
-            document.getElementById("ditu").onclick = () => {
-                document.getElementById("ditu").style.display = "block";
-                document.getElementById("diqiu").style.display = "none";
-                map = new Map();
-                map.layers.addMany([GaodeLayer, layer1]);
-                // GaodeLayer.visible = false;
-                // layer.visible = true; 
-                view = new MapView({
-                    map: map,
-                    container: "viewDiv",
-                    zoom: 12,
-                    constraints: {
-                        lods: tileInfo.lods,
-                        snapToZoom: true
-                    },
-                    center: [114.05457, 22.54635]
-                });
-            }
-
-            //点击diqiu图标
-            document.getElementById("diqiu").onclick = () => {
-                document.getElementById("ditu").style.display = "none";
-                document.getElementById("diqiu").style.display = "block";
-                map = new Map();
-                map.layers.addMany([layer, layer1]);
-                view = new MapView({
-                    map: map,
-                    container: "viewDiv",
-                    zoom: 12,
-                    constraints: {
-                        lods: tileInfo.lods,
-                        snapToZoom: true
-                    },
-                    center: [114.05457, 22.54635]
-                });
-            }
-        });
-    </script>
-</head>
-
-<body>
-    <div id="viewDiv"></div>
-    <div id="switchBaseMap">
-        <img id="diqiu" src="../../images/diqiu.png" />
-        <img id="ditu" src="../../images/ditu.png" />
-    </div>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/static/view/demo/page-arcgis_load_mapbox_wmts.html b/static/view/demo/page-arcgis_load_mapbox_wmts.html
new file mode 100644
index 0000000..6f9f02d
--- /dev/null
+++ b/static/view/demo/page-arcgis_load_mapbox_wmts.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
+    <title>Mapbox WMTS Map</title>
+    <link rel="stylesheet" href="https://apaas.wodcloud.com/api_4.x/esri/css/main.css" />
+    <style>
+        html,
+        body,
+        #viewDiv {
+            height: 100%;
+            width: 100%;
+            margin: 0;
+            padding: 0;
+        }
+    </style>
+    <script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
+    <script>
+        require([
+            "esri/Map",
+            "esri/Basemap",
+            "esri/views/SceneView",
+            "esri/layers/WebTileLayer",
+            "dojo/domReady!"
+        ], function (Map, Basemap, SceneView, WebTileLayer) {
+            // 初始化mapbox wmts图层服务
+            let tiledlayer = new WebTileLayer({
+                urlTemplate:
+                    "https://mapboxwmts.ali.wodcloud.com/styles/v1/cfangogogo/ckexp7fhw0aot19n63ngh1h1z/tiles/512/{level}/{col}/{row}?access_token=pk.eyJ1IjoiY2ZhbmdvZ29nbyIsImEiOiJja2IxamxkN24wMHJsMnNtZGNzYWd2NnBlIn0.NhCC9fS15MhO5lpl9i45BQ"
+            });
+            // 底图中使用mapbox wmts图层服务
+            let mapboxBasemap = new Basemap({
+                baseLayers: [tiledlayer],
+                title: "Mapbox Basemap",
+                id: "mapboxBasemap",
+                spatialReference: {
+                wkid: 3857
+                }
+            });
+            // 初始化地图
+            let map = new Map({
+                basemap: mapboxBasemap
+            });
+            // 创建三维地图
+            var view = new SceneView({
+                container: "viewDiv",
+                map: map,
+                spatialReference: {
+                    wkid: 3857
+                },
+                camera: {
+                    position: [119.95393142467243, 31.779518311309737,500],
+                    tilt: 55,
+                    heading: 90
+                },
+                constraints: {
+                    maxZoom: 22,
+                    minZoom: 0
+                },
+                zoom: 12
+            });
+        });
+    </script>
+</head>
+
+<body>
+    <div id="viewDiv"></div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/view/demo/page-arcgis_wmts.html b/static/view/demo/page-arcgis_wmts.html
new file mode 100644
index 0000000..3cb3a78
--- /dev/null
+++ b/static/view/demo/page-arcgis_wmts.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
+    <title>ArcGIS WMTS Map</title>
+    <link rel="stylesheet" href="https://apaas.wodcloud.com/api_4.x/esri/css/main.css" />
+    <style>
+        html,
+        body,
+        #viewDiv {
+            height: 100%;
+            width: 100%;
+            margin: 0;
+            padding: 0;
+        }
+    </style>
+    <script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
+    <script>
+        require([
+            "esri/Map",
+            "esri/Basemap",
+            "esri/views/MapView",
+            "esri/layers/TileLayer",
+            "dojo/domReady!"
+        ], function(Map, Basemap, MapView, TileLayer) {
+            // ArcGIS 切片服务
+            let tilelayer = new TileLayer({
+                url: 'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer'
+            });
+            // 作为底图
+            var agsBasemap = new Basemap({
+                baseLayers: [tilelayer],
+                title: "ArcGIS Basemap",
+                id: "agsBasemap"
+            });
+            // 创建地图
+            var map = new Map({
+                basemap: agsBasemap
+            });
+            // 创建二维地图
+            var view = new MapView({
+                map: map,
+                container: "viewDiv",
+                zoom: 12,
+                constraints: {
+                    snapToZoom: true
+                },
+                center: [106.72, 26.585]
+            });
+        });
+    </script>
+</head>
+
+<body>
+    <div id="viewDiv"></div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/view/demo/page-basic_web_map.html b/static/view/demo/page-basic_web_map.html
index 727d7c2..b7cc8ac 100644
--- a/static/view/demo/page-basic_web_map.html
+++ b/static/view/demo/page-basic_web_map.html
@@ -24,10 +24,10 @@
             "esri/WebMap"
         ], function(esriConfig, MapView, WebMap) {
             //使用portal门户的地图资源
-            esriConfig.portalUrl = "https://apaasgis.wodcloud.com/arcgis";
+            esriConfig.portalUrl = "https://apaasgis.wodcloud.com/portal";
             var webmap = new WebMap({
                 portalItem: {
-                    id: "54a708b3890a4d1aaff37988697aeaec"
+                    id: "aa912ada83904d7c901066673ee1a5aa"
                 }
             });
 
diff --git a/static/view/demo/page-featurelayer.html b/static/view/demo/page-featurelayer.html
index e806600..2f1a293 100644
--- a/static/view/demo/page-featurelayer.html
+++ b/static/view/demo/page-featurelayer.html
@@ -1,275 +1,10 @@
 <html>
-
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
-
   <title>从要素图层中查询</title>
-
   <link rel="stylesheet" href="https://apaas.wodcloud.com/api_4.x/esri/css/main.css" />
   <script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
-
-  <script>
-    require([
-      "esri/Map",
-      "esri/Basemap",
-      "esri/views/MapView",
-      "esri/layers/WebTileLayer",
-      "esri/layers/support/TileInfo",
-      "esri/layers/FeatureLayer",
-    ], function (Map, Basemap, MapView, WebTileLayer, TileInfo, FeatureLayer) {
-      // 通过瓦片形式加载天地图的
-      // 天地图根据投影分为两种：墨卡托和经纬度
-      // 设定瓦片信息，天地图经纬度地图的切片信息全部使用该信息设定
-      var tileInfo = new TileInfo({
-        dpi: 90.71428571427429, //解析度，即像素
-        rows: 256,
-        cols: 256,
-        compressionQuality: 0, //压缩像素值
-        origin: {
-          x: -180,
-          y: 90
-        },
-        spatialReference: {
-          wkid: 4326
-        },
-        lods: [ //定义平铺方案的细节级别数组
-          {
-            level: 1,
-            levelValue: 1,
-            resolution: 0.703125,
-            scale: 295497593.05875003
-          }, {
-            level: 2,
-            levelValue: 2,
-            resolution: 0.3515625,
-            scale: 147748796.52937502
-          }, {
-            level: 3,
-            levelValue: 3,
-            resolution: 0.17578125,
-            scale: 73874398.264687508
-          }, {
-            level: 4,
-            levelValue: 4,
-            resolution: 0.087890625,
-            scale: 36937199.132343754
-          }, {
-            level: 5,
-            levelValue: 5,
-            resolution: 0.0439453125,
-            scale: 18468599.566171877
-          }, {
-            level: 6,
-            levelValue: 6,
-            resolution: 0.02197265625,
-            scale: 9234299.7830859385
-          }, {
-            level: 7,
-            levelValue: 7,
-            resolution: 0.010986328125,
-            scale: 4617149.8915429693
-          }, {
-            level: 8,
-            levelValue: 8,
-            resolution: 0.0054931640625,
-            scale: 2308574.9457714846
-          }, {
-            level: 9,
-            levelValue: 9,
-            resolution: 0.00274658203125,
-            scale: 1154287.4728857423
-          }, {
-            level: 10,
-            levelValue: 10,
-            resolution: 0.001373291015625,
-            scale: 577143.73644287116
-          }, {
-            level: 11,
-            levelValue: 11,
-            resolution: 0.0006866455078125,
-            scale: 288571.86822143558
-          }, {
-            level: 12,
-            levelValue: 12,
-            resolution: 0.00034332275390625,
-            scale: 144285.93411071779
-          }, {
-            level: 13,
-            levelValue: 13,
-            resolution: 0.000171661376953125,
-            scale: 72142.967055358895
-          }, {
-            level: 14,
-            levelValue: 14,
-            resolution: 8.58306884765625e-005,
-            scale: 36071.483527679447
-          }, {
-            level: 15,
-            levelValue: 15,
-            resolution: 4.291534423828125e-005,
-            scale: 18035.741763839724
-          }, {
-            level: 16,
-            levelValue: 16,
-            resolution: 2.1457672119140625e-005,
-            scale: 9017.8708819198619
-          }, {
-            level: 17,
-            levelValue: 17,
-            resolution: 1.0728836059570313e-005,
-            scale: 4508.9354409599309
-          }, {
-            level: 18,
-            levelValue: 18,
-            resolution: 5.3644180297851563e-006,
-            scale: 2254.4677204799655
-          }, {
-            level: 19,
-            levelValue: 19,
-            resolution: 2.68220901489257815e-006,
-            scale: 1127.23386023998275
-          }, {
-            level: 20,
-            levelValue: 2,
-            resolution: 1.341104507446289075e-006,
-            scale: 563.616930119991375
-          }
-        ]
-      });
-      // 在加载经纬度地图的时候我们需要使用 {subDomain}, {col}, {row}, {level}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别
-      var tiledLayer = new WebTileLayer(
-        "http://{subDomain}.tianditu.gov.cn/vec_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", {
-          subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
-          tileInfo: tileInfo
-        });
-      var annomap = new WebTileLayer(
-        "http://{subDomain}.tianditu.gov.cn/cva_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", {
-          subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
-          tileInfo: tileInfo
-        });
-      // 天地图经纬度地图及注记作为底图
-      var tdtBasemap = new Basemap({
-        baseLayers: [tiledLayer, annomap],
-        title: "TDT Basemap",
-        id: "tdtBasemap",
-        spatialReference: {
-          wkid: 4326
-        },
-      });
-      const map = new Map({
-        basemap: tdtBasemap
-      });
-      const view = new MapView({
-        map: map,
-        container: "sceneDiv",
-        spatialReference: {
-          wkid: 4326
-        },
-        zoom: 14,
-        constraints: {
-          lods: tileInfo.lods,
-          snapToZoom: true
-        },
-        center: [106.7, 26.5],
-        padding: {
-          right: 300
-        }
-      });
-      
-      const listNode = document.getElementById("nyc_graphics");
-
-
-      const popupTemplate = {
-        title: "{NAME}",
-        content: [{
-          type: "fields",
-          fieldInfos: [{
-            fieldName: "ADRESS",
-            label: "地址",
-            format: {
-              places: 0,
-              digitSeparator: true
-            }
-          },{
-            fieldName: "SSQY",
-            label: "所属区域",
-            format: {
-              places: 0,
-              digitSeparator: true
-            }
-          }]
-        }]
-      };
-
-
-      const featureLayer = new FeatureLayer({
-        url: "https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer/3",
-        outFields: ["*"],
-        popupTemplate: popupTemplate,
-      });
-      map.add(featureLayer);
-
-      let graphics;
-
-      //加载完成要素图层
-      view.whenLayerView(featureLayer).then(function (layerView) {
-        layerView.watch("updating", function (value) {
-          if (!value) {
-
-            layerView
-              .queryFeatures({
-                geometry: view.extent,
-                returnGeometry: true
-              })
-              .then(function (results) {
-                graphics = results.features;
-
-                const fragment = document.createDocumentFragment();
-                graphics.forEach(function (result, index) {
-                  const attributes = result.attributes;
-                  const name = attributes.NAME;
-                  const li = document.createElement("li");
-                  li.classList.add("panel-result");
-                  li.tabIndex = 0;
-                  li.setAttribute("data-result-id", index);
-                  li.textContent = name;
-
-                  fragment.appendChild(li);
-                });
-                listNode.innerHTML = "";
-                listNode.appendChild(fragment);
-              })
-              .catch(function (error) {
-                console.error("query failed: ", error);
-              });
-          }
-        });
-      });
-
-      listNode.addEventListener("click", onListClickHandler);
-
-      function onListClickHandler(event) {
-        const target = event.target;
-        const resultId = target.getAttribute("data-result-id");
-
-        const result =
-          resultId && graphics && graphics[parseInt(resultId, 10)];
-
-        if (result) {
-          console.log(result)
-          view.goTo(result.geometry).then(function () {
-            view.popup.open({
-              features: [result],
-              location: result.geometry
-            });
-          });
-        }
-      }
-    });
-
-  </script>
-
   <style>
     html,
     body,
@@ -280,13 +15,11 @@
       padding: 0;
       font-family: sans-serif;
     }
-
     .panel-container {
       position: relative;
       width: 100%;
       height: 100%;
     }
-
     .panel-side {
       padding: 2px;
       box-sizing: border-box;
@@ -300,38 +33,31 @@
       overflow: auto;
       z-index: 60;
     }
-
     .panel-side h3 {
       padding: 0 20px;
       margin: 20px 0;
     }
-
     .panel-side ul {
       list-style: none;
       margin: 0;
       padding: 0;
     }
-
     .panel-side li {
       list-style: none;
       padding: 10px 20px;
     }
-
     .panel-result {
       cursor: pointer;
       margin: 2px 0;
       background-color: rgba(0, 0, 0, 0.3);
     }
-
     .panel-result:hover,
     .panel-result:focus {
       color: orange;
       background-color: rgba(0, 0, 0, 0.75);
     }
-
   </style>
 </head>
-
 <body>
   <div class="panel-container">
     <div class="panel-side">
@@ -343,5 +69,261 @@
     <div id="sceneDiv"></div>
   </div>
 </body>
-
-</html>
+<script>
+  require([
+    "esri/config",
+    "esri/Map",
+    "esri/Basemap",
+    "esri/views/MapView",
+    "esri/layers/WebTileLayer",
+    "esri/layers/support/TileInfo",
+    "esri/layers/FeatureLayer",,
+    "dojo/domReady!"
+  ], function (ESRICONFIG, Map, Basemap, MapView, WebTileLayer, TileInfo, FeatureLayer) {
+    // 通过瓦片形式加载天地图的
+    // 天地图根据投影分为两种：墨卡托和经纬度
+    // 设定瓦片信息，天地图经纬度地图的切片信息全部使用该信息设定
+    var tileInfo = new TileInfo({
+      dpi: 90.71428571427429, //解析度，即像素
+      rows: 256,
+      cols: 256,
+      compressionQuality: 0, //压缩像素值
+      origin: {
+        x: -180,
+        y: 90
+      },
+      spatialReference: {
+        wkid: 4326
+      },
+      lods: [ //定义平铺方案的细节级别数组
+        {
+          level: 1,
+          levelValue: 1,
+          resolution: 0.703125,
+          scale: 295497593.05875003
+        }, {
+          level: 2,
+          levelValue: 2,
+          resolution: 0.3515625,
+          scale: 147748796.52937502
+        }, {
+          level: 3,
+          levelValue: 3,
+          resolution: 0.17578125,
+          scale: 73874398.264687508
+        }, {
+          level: 4,
+          levelValue: 4,
+          resolution: 0.087890625,
+          scale: 36937199.132343754
+        }, {
+          level: 5,
+          levelValue: 5,
+          resolution: 0.0439453125,
+          scale: 18468599.566171877
+        }, {
+          level: 6,
+          levelValue: 6,
+          resolution: 0.02197265625,
+          scale: 9234299.7830859385
+        }, {
+          level: 7,
+          levelValue: 7,
+          resolution: 0.010986328125,
+          scale: 4617149.8915429693
+        }, {
+          level: 8,
+          levelValue: 8,
+          resolution: 0.0054931640625,
+          scale: 2308574.9457714846
+        }, {
+          level: 9,
+          levelValue: 9,
+          resolution: 0.00274658203125,
+          scale: 1154287.4728857423
+        }, {
+          level: 10,
+          levelValue: 10,
+          resolution: 0.001373291015625,
+          scale: 577143.73644287116
+        }, {
+          level: 11,
+          levelValue: 11,
+          resolution: 0.0006866455078125,
+          scale: 288571.86822143558
+        }, {
+          level: 12,
+          levelValue: 12,
+          resolution: 0.00034332275390625,
+          scale: 144285.93411071779
+        }, {
+          level: 13,
+          levelValue: 13,
+          resolution: 0.000171661376953125,
+          scale: 72142.967055358895
+        }, {
+          level: 14,
+          levelValue: 14,
+          resolution: 8.58306884765625e-005,
+          scale: 36071.483527679447
+        }, {
+          level: 15,
+          levelValue: 15,
+          resolution: 4.291534423828125e-005,
+          scale: 18035.741763839724
+        }, {
+          level: 16,
+          levelValue: 16,
+          resolution: 2.1457672119140625e-005,
+          scale: 9017.8708819198619
+        }, {
+          level: 17,
+          levelValue: 17,
+          resolution: 1.0728836059570313e-005,
+          scale: 4508.9354409599309
+        }, {
+          level: 18,
+          levelValue: 18,
+          resolution: 5.3644180297851563e-006,
+          scale: 2254.4677204799655
+        }, {
+          level: 19,
+          levelValue: 19,
+          resolution: 2.68220901489257815e-006,
+          scale: 1127.23386023998275
+        }, {
+          level: 20,
+          levelValue: 2,
+          resolution: 1.341104507446289075e-006,
+          scale: 563.616930119991375
+        }
+      ]
+    });
+    // 在加载经纬度地图的时候我们需要使用 {subDomain}, {col}, {row}, {level}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别
+    var tiledLayer = new WebTileLayer(
+      "http://{subDomain}.tianditu.gov.cn/vec_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", {
+      subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
+      tileInfo: tileInfo,
+      spatialReference: {
+        wkid: 4326
+      }
+    });
+    var annomap = new WebTileLayer(
+      "http://{subDomain}.tianditu.gov.cn/cva_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", {
+      subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
+      tileInfo: tileInfo,
+      spatialReference: {
+        wkid: 4326
+      }
+    });
+    // 请求天地图服务跨域的设置
+    ESRICONFIG.request.corsEnabledServers.push(
+      "t0.tianditu.gov.cn", "t1.tianditu.gov.cn", "t2.tianditu.gov.cn", "t3.tianditu.gov.cn",
+      "t4.tianditu.gov.cn", "t5.tianditu.gov.cn", "t6.tianditu.gov.cn", "t7.tianditu.gov.cn"
+    );
+    // 使用本地字体文件
+    ESRICONFIG.fontsUrl = "https://apaas.wodcloud.com/mapstatic/font";
+    // 天地图经纬度地图及注记作为底图
+    var tdtBasemap = new Basemap({
+      baseLayers: [tiledLayer, annomap],
+      title: "TDT Basemap",
+      id: "tdtBasemap"
+    });
+    // 初始化地图
+    var map = new Map({
+      basemap: tdtBasemap
+    });
+    // 初始化地图视图
+    var view = new MapView({
+      map: map,
+      container: "sceneDiv",
+      zoom: 12,
+      constraints: {
+        lods: tileInfo.lods,
+        snapToZoom: true
+      },
+      center: [106.7, 26.5],
+      padding: {
+        right: 300
+      }
+    });
+    // 添加要素地图服务
+    var listNode = document.getElementById("nyc_graphics");
+    var popupTemplate = {
+      title: "{name}",
+      content: [{
+        type: "fields",
+        fieldInfos: [{
+          fieldName: "x",
+          label: "经度",
+          format: {
+            places: 6,
+            digitSeparator: true
+          }
+        }, {
+          fieldName: "y",
+          label: "纬度",
+          format: {
+            places: 6,
+            digitSeparator: true
+          }
+        }]
+      }]
+    };
+    var featureLayer = new FeatureLayer({
+      url: "https://apaasgis.wodcloud.com/server/rest/services/GZ_STATION/FeatureServer/0",
+      outFields: ["*"],
+      popupTemplate: popupTemplate,
+    });
+    map.add(featureLayer);
+    var graphics = null;
+    //加载完成要素图层
+    view.whenLayerView(featureLayer).then(function (layerView) {
+      layerView.watch("updating", function (value) {
+        if (!value) {
+          layerView
+            .queryFeatures({
+              geometry: view.extent,
+              returnGeometry: true
+            })
+            .then(function (results) {
+              graphics = results.features;
+              var fragment = document.createDocumentFragment();
+              graphics.forEach(function (result, index) {
+                var attributes = result.attributes;
+                var name = attributes.name;
+                var li = document.createElement("li");
+                li.classList.add("panel-result");
+                li.tabIndex = 0;
+                li.setAttribute("data-result-id", index);
+                li.textContent = name;
+                fragment.appendChild(li);
+              });
+              listNode.innerHTML = "";
+              listNode.appendChild(fragment);
+            })
+            .catch(function (error) {
+              alert("query failed: ", error);
+            });
+        }
+      });
+    });
+    // 监听列表点击事件
+    listNode.addEventListener("click", onListClickHandler);
+    function onListClickHandler(event) {
+      var target = event.target;
+      var resultId = target.getAttribute("data-result-id");
+      var result =
+        resultId && graphics && graphics[parseInt(resultId, 10)];
+      if (result) {
+        view.goTo(result.geometry).then(function () {
+          view.popup.open({
+            features: [result],
+            location: result.geometry
+          });
+        });
+      }
+    }
+  });
+</script>
+</html>
\ No newline at end of file
diff --git a/static/view/demo/page-fz_map.html b/static/view/demo/page-fz_map.html
deleted file mode 100644
index 6262ef9..0000000
--- a/static/view/demo/page-fz_map.html
+++ /dev/null
@@ -1,192 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
-    <title>TDT WMTS Map</title>
-    <link rel="stylesheet" href="https://apaas.wodcloud.com/api_4.x/esri/css/main.css" />
-    <style>
-        html,
-        body,
-        #viewDiv {
-            height: 100%;
-            width: 100%;
-            margin: 0;
-            padding: 0;
-        }
-    </style>
-    <script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
-    <script>
-        require([
-            "esri/Map",
-            "esri/Basemap",
-            "esri/views/MapView",
-            "esri/layers/WebTileLayer",
-            "esri/layers/support/TileInfo",
-            "dojo/domReady!"
-        ], function(Map, Basemap, MapView, WebTileLayer, TileInfo) {
-            // 通过瓦片形式加载天地图的
-            // 天地图根据投影分为两种：墨卡托和经纬度
-            // 设定瓦片信息，天地图经纬度地图的切片信息全部使用该信息设定
-            var tileInfo = new TileInfo({
-                dpi: 90.71428571427429, //解析度，即像素
-                rows: 256,
-                cols: 256,
-                compressionQuality: 0, //压缩像素值
-                origin: {
-                    x: -180,
-                    y: 90
-                },
-                spatialReference: {
-                    wkid: 4326
-                },
-                lods: [ //定义平铺方案的细节级别数组
-                    {
-                        level: 1,
-                        levelValue: 1,
-                        resolution: 0.703125,
-                        scale: 295497593.05875003
-                    }, {
-                        level: 2,
-                        levelValue: 2,
-                        resolution: 0.3515625,
-                        scale: 147748796.52937502
-                    }, {
-                        level: 3,
-                        levelValue: 3,
-                        resolution: 0.17578125,
-                        scale: 73874398.264687508
-                    }, {
-                        level: 4,
-                        levelValue: 4,
-                        resolution: 0.087890625,
-                        scale: 36937199.132343754
-                    }, {
-                        level: 5,
-                        levelValue: 5,
-                        resolution: 0.0439453125,
-                        scale: 18468599.566171877
-                    }, {
-                        level: 6,
-                        levelValue: 6,
-                        resolution: 0.02197265625,
-                        scale: 9234299.7830859385
-                    }, {
-                        level: 7,
-                        levelValue: 7,
-                        resolution: 0.010986328125,
-                        scale: 4617149.8915429693
-                    }, {
-                        level: 8,
-                        levelValue: 8,
-                        resolution: 0.0054931640625,
-                        scale: 2308574.9457714846
-                    }, {
-                        level: 9,
-                        levelValue: 9,
-                        resolution: 0.00274658203125,
-                        scale: 1154287.4728857423
-                    }, {
-                        level: 10,
-                        levelValue: 10,
-                        resolution: 0.001373291015625,
-                        scale: 577143.73644287116
-                    }, {
-                        level: 11,
-                        levelValue: 11,
-                        resolution: 0.0006866455078125,
-                        scale: 288571.86822143558
-                    }, {
-                        level: 12,
-                        levelValue: 12,
-                        resolution: 0.00034332275390625,
-                        scale: 144285.93411071779
-                    }, {
-                        level: 13,
-                        levelValue: 13,
-                        resolution: 0.000171661376953125,
-                        scale: 72142.967055358895
-                    }, {
-                        level: 14,
-                        levelValue: 14,
-                        resolution: 8.58306884765625e-005,
-                        scale: 36071.483527679447
-                    }, {
-                        level: 15,
-                        levelValue: 15,
-                        resolution: 4.291534423828125e-005,
-                        scale: 18035.741763839724
-                    }, {
-                        level: 16,
-                        levelValue: 16,
-                        resolution: 2.1457672119140625e-005,
-                        scale: 9017.8708819198619
-                    }, {
-                        level: 17,
-                        levelValue: 17,
-                        resolution: 1.0728836059570313e-005,
-                        scale: 4508.9354409599309
-                    }, {
-                        level: 18,
-                        levelValue: 18,
-                        resolution: 5.3644180297851563e-006,
-                        scale: 2254.4677204799655
-                    }, {
-                        level: 19,
-                        levelValue: 19,
-                        resolution: 2.68220901489257815e-006,
-                        scale: 1127.23386023998275
-                    }, {
-                        level: 20,
-                        levelValue: 2,
-                        resolution: 1.341104507446289075e-006,
-                        scale: 563.616930119991375
-                    }
-                ]
-            });
-            // 在加载经纬度地图的时候我们需要使用 {subDomain}, {col}, {row}, {level}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别
-            var tiledLayer = new WebTileLayer("http://39.104.61.84:9001/EzServer7/Maps/sltdt/EzMap?Service=getImage&Type=RGB&ZoomOffset=0&Col={col}&Row={row}&Zoom={level}&V=0.3&key=", {
-                tileInfo: tileInfo
-            });
-            // var annomap = new WebTileLayer("http://{subDomain}.tianditu.gov.cn/cva_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", {
-            //     subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
-            //     tileInfo: tileInfo
-            // });
-
-            // 作为底图
-            var tdtBasemap = new Basemap({
-                baseLayers: [tiledLayer],
-                title: "TDT Basemap",
-                id: "tdtBasemap",
-                spatialReference: {
-                    wkid: 4326
-                },
-            });
-            // 创建地图
-            var map = new Map({
-                basemap: tdtBasemap
-            });
-            // 创建二维地图
-            var view = new MapView({
-                map: map,
-                container: "viewDiv",
-                spatialReference: {
-                    wkid: 4326
-                },
-                zoom: 12,
-                constraints: {
-                    lods: tileInfo.lods,
-                    snapToZoom: true
-                },
-                center: [106.72, 26.585]
-            });
-        });
-    </script>
-</head>
-
-<body>
-    <div id="viewDiv"></div>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/static/view/demo/page-geocoding.html b/static/view/demo/page-geocoding.html
index 04571cd..8fd67c9 100644
--- a/static/view/demo/page-geocoding.html
+++ b/static/view/demo/page-geocoding.html
@@ -63,6 +63,7 @@
             }
         }
     </style>
+    <script src="https://apaas.wodcloud.com/mapstatic/js/jquery-3.3.1.min.js"></script>
     <script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
     <script>
         require([
@@ -79,15 +80,10 @@
             "esri/symbols/PictureMarkerSymbol",
             "dojo/domReady!"
         ], function (Map, Graphic, Basemap, Point, MapView, PopupTemplate, WebTileLayer, GraphicsLayer, MapImageLayer, TileInfo, PictureMarkerSymbol) {
-
-            var symbol_warning = new PictureMarkerSymbol("/static/images/marker-red.png", 26, 37);
-
-            var pupuptemp = new PopupTemplate({
-                title:"基础信息",
-                content:"{formatted_address}"
-            });
-            var resultsLayer = new GraphicsLayer();
-            const tileInfo = new TileInfo({
+            // 通过瓦片形式加载天地图的
+            // 天地图根据投影分为两种：墨卡托和经纬度
+            // 设定瓦片信息，天地图经纬度地图的切片信息全部使用该信息设定
+            var tileInfo = new TileInfo({
                 dpi: 90.71428571427429, //解析度，即像素
                 rows: 256,
                 cols: 256,
@@ -204,34 +200,34 @@
                 ]
             });
             // 在加载经纬度地图的时候我们需要使用 {subDomain}, {col}, {row}, {level}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别
-            let tiledLayer = new WebTileLayer("http://{subDomain}.tianditu.gov.cn/vec_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", {
+            var tiledLayer = new WebTileLayer("http://{subDomain}.tianditu.gov.cn/vec_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", {
                 subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
-                tileInfo: tileInfo
+                tileInfo: tileInfo,
+                spatialReference: {
+                    wkid: 4326
+                },
             });
-            let annomap = new WebTileLayer("http://{subDomain}.tianditu.gov.cn/cva_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", {
+            var annomap = new WebTileLayer("http://{subDomain}.tianditu.gov.cn/cva_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", {
                 subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
-                tileInfo: tileInfo
-            });
-
-            const tdtBasemap = new Basemap({
-                baseLayers: [tiledLayer, annomap],
-                title: "TDT Basemap",
-                id: "tdtBasemap",
+                tileInfo: tileInfo,
                 spatialReference: {
                     wkid: 4326
                 },
             });
-            const map = new Map({
+            // 天地图经纬度地图及注记作为底图
+            var tdtBasemap = new Basemap({
+                baseLayers: [tiledLayer, annomap],
+                title: "TDT Basemap",
+                id: "tdtBasemap"
+            });
+            // 创建地图数据
+            var map = new Map({
                 basemap: tdtBasemap
             });
-            map.add(resultsLayer);
-
-            const view = new MapView({
+            // 初始化地图视图
+            var view = new MapView({
                 map: map,
                 container: "viewDiv",
-                spatialReference: {
-                    wkid: 4326
-                },
                 zoom: 14,
                 constraints: {
                     lods: tileInfo.lods,
@@ -239,17 +235,24 @@
                 },
                 center: [119.892731, 31.007534] //[119.8087, 30.9700]
             });
+            // 添加搜索小部件到视图
             view.ui.add(search, "top-right");
-
-                //when 
-                view.when(function () {
-                    document.getElementById("searchBtn").addEventListener("click", doSearch);
-                });
-
+            // 地图中添加绘制图层
+            var symbol_warning = new PictureMarkerSymbol("https://apaas3.wodcloud.com/mapstatic/images/marker-red.png", 26, 37);
+            var pupuptemp = new PopupTemplate({
+                title:"基础信息",
+                content:"{formatted_address}"
+            });
+            var resultsLayer = new GraphicsLayer();
+            map.add(resultsLayer);
+            // 视图加载后操作
+            view.when(function () {
+                document.getElementById("searchBtn").addEventListener("click", doSearch);
+            });
             function doSearch() {
                 var searchText = document.getElementById("searchText").value;
-                var key = "d8cea7350e1fdf682d165c698683fd12";
-                var url = "https://restapi.amap.com/v3/geocode/geo?address="+searchText+"&output=JSON&key=d8cea7350e1fdf682d165c698683fd12";
+                var key = "966cdd04fb6b722679bc24c5d630f04d";
+                var url = "https://restapi.amap.com/v3/geocode/geo?address="+searchText+"&output=JSON&key="+key;
                 $.ajax({
                     url: url,
                     type: "GET",
@@ -280,11 +283,10 @@
                                     target: ptPoi
                                 },
                                 {
-                                    duration: 2000,
+                                    duration: 500,
                                     easing: "in-out-expo"
                                 }
                             );
-                            console.log(coord);
                         });
 
                     },
@@ -296,7 +298,6 @@
         });
     </script>
 </head>
-
 <body>
     <div id="viewDiv"></div>
     <div id="search">
@@ -304,5 +305,4 @@
         <button id="searchBtn" type="submit">搜索</button>
     </div>
 </body>
-
 </html>
\ No newline at end of file
diff --git a/static/view/demo/page-multilayer3search.html b/static/view/demo/page-multilayer3search.html
index fe7ffa6..3c9c894 100644
--- a/static/view/demo/page-multilayer3search.html
+++ b/static/view/demo/page-multilayer3search.html
@@ -205,12 +205,18 @@
       var basemap = WebTiledLayer(
         'http://{subDomain}.tianditu.gov.cn/vec_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles', {
           subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
-          tileInfo: tileInfo
+          tileInfo: tileInfo,
+          spatialReference: {
+            wkid: 4326
+          }
         });
       var annomap = WebTiledLayer(
         'http://{subDomain}.tianditu.gov.cn/cva_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles', {
           subDomains: ['t0', 't1', 't2', 't3', 't4'],
-          tileInfo: tileInfo
+          tileInfo: tileInfo,
+          spatialReference: {
+            wkid: 4326
+          }
         });
       var queryLayer = new ArcGISDynamicMapServiceLayer(
         "https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer");
@@ -227,9 +233,9 @@
       initToolbar();
       //新建查询任务与查询对象
       var qtParcel1 = new QueryTask(
-        "https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer/1");
+        "https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/FeatureServer/1");
       var qParcel1 = new Query();
-      var qtArea = new QueryTask("https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer/10");
+      var qtArea = new QueryTask("https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/FeatureServer/10");
       var qArea = new Query();
       //设置查询是否返回几何对象
       qParcel1.returnGeometry = qArea.returnGeometry = true;
@@ -281,6 +287,7 @@
             console.log("query failed.");
           }
         }
+        console.log(results)
         //两次查询的结果
         parcel1 = results[0].features;
         area = results[1].features;
diff --git a/static/view/demo/page-multilayersandfeilds_3search.html b/static/view/demo/page-multilayersandfeilds_3search.html
index 4468ea4..739ca60 100644
--- a/static/view/demo/page-multilayersandfeilds_3search.html
+++ b/static/view/demo/page-multilayersandfeilds_3search.html
@@ -173,12 +173,18 @@
       var basemap = WebTiledLayer(
         'http://{subDomain}.tianditu.gov.cn/vec_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles', {
           subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
-          tileInfo: tileInfo
+          tileInfo: tileInfo,
+          spatialReference: {
+            wkid: 4326
+          }
         });
       var annomap = WebTiledLayer(
         'http://{subDomain}.tianditu.gov.cn/cva_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles', {
           subDomains: ['t0', 't1', 't2', 't3', 't4'],
-          tileInfo: tileInfo
+          tileInfo: tileInfo,
+          spatialReference: {
+            wkid: 4326
+          }
         });
       var queryLayer = new ArcGISDynamicMapServiceLayer(
         "https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer");
diff --git a/static/view/demo/page-pointshine_map.html b/static/view/demo/page-pointshine_map.html
index ff3d66d..3cce6bb 100644
--- a/static/view/demo/page-pointshine_map.html
+++ b/static/view/demo/page-pointshine_map.html
@@ -5,6 +5,7 @@
   <meta charset="utf-8" />
   <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
   <title>Point Shine Map</title>
+  <link rel="stylesheet" href="https://apaas.wodcloud.com/api_4.x/esri/css/main.css" />
   <style>
     html,
     body,
@@ -50,13 +51,13 @@
     }
 
   </style>
-  <link rel="stylesheet" href="https://apaas.wodcloud.com/api_4.x/esri/css/main.css" />
-  <script src="https://apaas.wodcloud.com/mapsamples/static/js/jquery-3.3.1.min.js"></script>
+  <script src="https://apaas.wodcloud.com/mapstatic/js/jquery-3.3.1.min.js"></script>
   <script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
 
   <script>
     $(function () {
       require([
+        "esri/config",
         "esri/Map",
         "esri/WebScene",
         "esri/geometry/Point",
@@ -64,8 +65,9 @@
         "esri/views/MapView",
         "esri/layers/WebTileLayer",
         "esri/layers/support/TileInfo",
-        "esri/layers/FeatureLayer"
-      ], function (Map, WebScene, Point, Basemap, MapView, WebTileLayer, TileInfo, FeatureLayer) {
+        "esri/layers/FeatureLayer",
+        "dojo/domReady!"
+      ], function (ESRICONFIG, Map, WebScene, Point, Basemap, MapView, WebTileLayer, TileInfo, FeatureLayer) {
         // 通过瓦片形式加载天地图的
         // 天地图根据投影分为两种：墨卡托和经纬度
         // 设定瓦片信息，天地图经纬度地图的切片信息全部使用该信息设定
@@ -188,24 +190,33 @@
         // 在加载经纬度地图的时候我们需要使用 {subDomain}, {col}, {row}, {level}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别
         var tiledLayer = new WebTileLayer(
           "http://{subDomain}.tianditu.gov.cn/vec_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", {
-            subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
-            tileInfo: tileInfo
-          });
+          subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
+          tileInfo: tileInfo,
+          spatialReference: {
+            wkid: 4326
+          }
+        });
         var annomap = new WebTileLayer(
           "http://{subDomain}.tianditu.gov.cn/cva_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", {
-            subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
-            tileInfo: tileInfo
-          });
+          subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
+          tileInfo: tileInfo,
+          spatialReference: {
+            wkid: 4326
+          }
+        });
+        // 请求天地图服务跨域的设置
+        ESRICONFIG.request.corsEnabledServers.push(
+          "t0.tianditu.gov.cn", "t1.tianditu.gov.cn", "t2.tianditu.gov.cn", "t3.tianditu.gov.cn",
+          "t4.tianditu.gov.cn", "t5.tianditu.gov.cn", "t6.tianditu.gov.cn", "t7.tianditu.gov.cn"
+        );
+        // 使用本地字体文件
+        ESRICONFIG.fontsUrl = "https://apaas3.wodcloud.com/mapstatic/font";
         // 天地图经纬度地图及注记作为底图
         var tdtBasemap = new Basemap({
           baseLayers: [tiledLayer, annomap],
           title: "TDT Basemap",
-          id: "tdtBasemap",
-          spatialReference: {
-            wkid: 4326
-          },
+          id: "tdtBasemap"
         });
-
         var wglayer = new FeatureLayer({
           url: "https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer/9"
         });
@@ -246,16 +257,14 @@
           }
         });
 
-        var highlightSelect, highlightHover;
-        var hoverPromise;
+        var highlightSelect, highlightHover,hoverPromise;
 
         wglayer.when(function () {
           var stationLayer = wglayer;
           view.whenLayerView(stationLayer).then(function (layerView) {
             var queryStations = stationLayer.createQuery();
             var buttons = document.querySelectorAll("button");
-            for (var i = 0, button = null;
-              (button = buttons[i]); i++) {
+            for (var i = 0, button = null;(button = buttons[i]); i++) {
               button.addEventListener("click", onClick);
               button.addEventListener("mouseover", onMouseOver);
               button.addEventListener("mouseout", onMouseOut);
@@ -264,8 +273,6 @@
             function onClick(event) {
               queryStations.where = "WGMC LIKE'%" + event.target.innerText + "%'";
               stationLayer.queryFeatures(queryStations).then(function (result) {
-                console.log(result);
-
                 if (highlightSelect) {
                   highlightSelect.remove();
                 }
@@ -295,7 +302,6 @@
 
       });
     });
-
   </script>
 </head>
 
diff --git a/static/view/demo/page-simplesearch.html b/static/view/demo/page-simplesearch.html
index 45d6e6f..981c408 100644
--- a/static/view/demo/page-simplesearch.html
+++ b/static/view/demo/page-simplesearch.html
@@ -40,6 +40,7 @@
   <script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
   <script>
     require([
+      "esri/config",
       "esri/Map",
       "esri/Basemap",
       "esri/views/MapView",
@@ -50,7 +51,10 @@
       "esri/tasks/support/Query",
       "esri/symbols/SimpleMarkerSymbol",
       "esri/geometry/Point"
-    ], function (Map, Basemap, MapView, WebTileLayer, TileInfo, GraphicsLayer, QueryTask, Query, SimpleMarkerSymbol, Point) {
+    ], function (ESRICONFIG, Map, Basemap, MapView, WebTileLayer, TileInfo, GraphicsLayer, QueryTask, Query, SimpleMarkerSymbol, Point) {
+      // 通过瓦片形式加载天地图的
+      // 天地图根据投影分为两种：墨卡托和经纬度
+      // 设定瓦片信息，天地图经纬度地图的切片信息全部使用该信息设定
       var tileInfo = new TileInfo({
         dpi: 90.71428571427429, //解析度，即像素
         rows: 256,
@@ -170,22 +174,32 @@
       // 在加载经纬度地图的时候我们需要使用 {subDomain}, {col}, {row}, {level}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别
       var tiledLayer = new WebTileLayer(
         "http://{subDomain}.tianditu.gov.cn/vec_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", {
-          subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
-          tileInfo: tileInfo
-        });
+        subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
+        tileInfo: tileInfo,
+        spatialReference: {
+          wkid: 4326
+        }
+      });
       var annomap = new WebTileLayer(
         "http://{subDomain}.tianditu.gov.cn/cva_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", {
-          subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
-          tileInfo: tileInfo
-        });
+        subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
+        tileInfo: tileInfo,
+        spatialReference: {
+          wkid: 4326
+        }
+      });
+      // 请求天地图服务跨域的设置
+      ESRICONFIG.request.corsEnabledServers.push(
+        "t0.tianditu.gov.cn", "t1.tianditu.gov.cn", "t2.tianditu.gov.cn", "t3.tianditu.gov.cn",
+        "t4.tianditu.gov.cn", "t5.tianditu.gov.cn", "t6.tianditu.gov.cn", "t7.tianditu.gov.cn"
+      );
+      // 使用本地字体文件
+      ESRICONFIG.fontsUrl = "https://apaas.wodcloud.com/mapstatic/font";
       // 天地图经纬度地图及注记作为底图
       var tdtBasemap = new Basemap({
         baseLayers: [tiledLayer, annomap],
         title: "TDT Basemap",
-        id: "tdtBasemap",
-        spatialReference: {
-          wkid: 4326
-        },
+        id: "tdtBasemap"
       });
       var peaksUrl =
         "https://apaasgis.wodcloud.com/server/rest/services/GZ_LYJQZTT/MapServer/2";
@@ -221,9 +235,6 @@
       var view = new MapView({
         map: map,
         container: "viewDiv",
-        spatialReference: {
-          wkid: 4326
-        },
         center: [107, 27],
         zoom: 9,
         constraints: {
diff --git a/static/view/demo/page-sliderZoom.html b/static/view/demo/page-sliderZoom.html
index e00f2b2..71d2991 100644
--- a/static/view/demo/page-sliderZoom.html
+++ b/static/view/demo/page-sliderZoom.html
@@ -28,10 +28,9 @@
       justify-content: center;
       align-items: center;
     }
-
   </style>
+  <script src="https://apaas.wodcloud.com/mapstatic/js/jquery-3.3.1.min.js"></script>
   <script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
-  <script src="https://apaas.wodcloud.com/mapsamples/static/js/jquery-3.3.1.min.js"></script>
 
   <script>
     require([
@@ -164,22 +163,25 @@
       // 在加载经纬度地图的时候我们需要使用 {subDomain}, {col}, {row}, {level}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别
       var tiledLayer = new WebTileLayer(
         "http://{subDomain}.tianditu.gov.cn/vec_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", {
-          subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
-          tileInfo: tileInfo
-        });
+        subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
+        tileInfo: tileInfo,
+        spatialReference: {
+          wkid: 4326
+        }
+      });
       var annomap = new WebTileLayer(
         "http://{subDomain}.tianditu.gov.cn/cva_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", {
-          subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
-          tileInfo: tileInfo
-        });
+        subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
+        tileInfo: tileInfo,
+        spatialReference: {
+          wkid: 4326
+        }
+      });
       // 天地图经纬度地图及注记作为底图
       var tdtBasemap = new Basemap({
         baseLayers: [tiledLayer, annomap],
         title: "TDT Basemap",
-        id: "tdtBasemap",
-        spatialReference: {
-          wkid: 4326
-        },
+        id: "tdtBasemap"
       });
       // 创建地图
       var map = new Map({
@@ -189,9 +191,6 @@
       var view = new MapView({
         map: map,
         container: "viewDiv",
-        spatialReference: {
-          wkid: 4326
-        },
         zoom: 12,
         constraints: {
           lods: tileInfo.lods,
@@ -201,10 +200,10 @@
         },
         center: [106.72, 26.585]
       });
+      // 滑块控制地图级别
       var zoomSlider = document.getElementById("zoom");
       var showZoom = document.getElementById("zoom-value");
       view.when(function () {
-        console.log(view);
         zoomSlider.min = view.constraints.minZoom;
         zoomSlider.max = view.constraints.maxZoom;
         zoomSlider.value = showZoom.innerText = view.zoom;
@@ -236,4 +235,4 @@
   </div>
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/static/view/demo/page-video_web_map.html b/static/view/demo/page-video_web_map.html
index 2f2aea2..7c4b5ab 100644
--- a/static/view/demo/page-video_web_map.html
+++ b/static/view/demo/page-video_web_map.html
@@ -33,9 +33,11 @@
             "esri/WebMap"
         ], function(esriConfig, MapView, WebMap) {
             esriConfig.portalUrl = "https://apaasgis.wodcloud.com/portal";
+            // 使用本地字体文件
+            esriConfig.fontsUrl = "https://apaas.wodcloud.com/mapstatic/font";
             var webmap = new WebMap({
                 portalItem: {
-                    id: "4731db60e99b47c3aed258d488963986"
+                    id: "b4f4797eb32342c5b679082bfbbef553"
                 }
             });
 
@@ -48,6 +50,7 @@
                 view.popup.watch("selectedFeature", function(graphic) {
                     if (graphic && graphic.sourceLayer) {
                         var layerName = graphic.sourceLayer.title;
+                        console(graphic.sourceLayer)
                         switch (layerName) {
                             case "贵州视频监控要素微服务":
                                 var name = graphic.attributes.NAME;
@@ -67,13 +70,13 @@
                 });
             });
             function setContentInfo(code) {
-                var videoDomain = "https://dl.wodcloud.com/video/{0}.mp4";
+                var videoDomain = "https://apaas3.wodcloud.com/mapstatic/video/{0}.mp4";
                 var videoCode = code;
                 var videoSrc = undefined;
                 if (videoCode) {
                     videoSrc = videoDomain.replace("{0}", videoCode);
                 }
-                return "<iframe id='cameraiframe' src='../../iframe/videoplay4test.html?camlist=" + videoCode + "&videosrc=" + videoSrc +
+                return "<iframe id='cameraiframe' src='https://apaas3.wodcloud.com/mapstatic/iframe/videoplay4test.html?camlist=" + videoCode + "&videosrc=" + videoSrc +
                     "&width=476&height=314' name='cameraiframe' frameborder='0' style='width: 476px;height: 314px; overflow: hidden; border:0px;'></iframe>";
             };
         });
-- 
2.26.0