技术支持-示例中心

package.json

@@ -15,7 +15,7 @@
     "ace-builds": "^1.4.11",
     "axios": "^0.19.2",
     "babel-polyfill": "^6.26.0",
-    "codemirror": "^5.45.0",
+    "codemirror": "^5.58.2",
     "compression-webpack-plugin": "^6.0.2",
     "echarts": "^4.8.0",
     "echarts-liquidfill": "^2.0.6",
@@ -29,6 +29,7 @@
     "svg-sprite-loader": "^4.2.6",
     "thread-loader": "^3.0.0",
     "vue": "^2.6.10",
+    "vue-codemirror": "^4.0.6",
     "vue-cropper": "^0.5.2",
     "vue-echarts": "^5.0.0-beta.0",
     "vue-i18n": "^8.17.7",

src/pages/technical-support/demo-center/index.vue

+<template>
+  <div class="demo_container" v-cloak>
+    <div class="demopage_left">
+      <h3 class="demopage_left_title">
+        <img :src="titleIcon" width="20" style="margin-right: 10px" />
+        <span v-text="title"></span>
+      </h3>
+      <div class="demo_menu">
+        <el-tree
+          :data="leftData"
+          :props="defaultProps"
+          default-expand-all
+          icon-class="el-icon-arrow-right"
+          accordion
+          @node-click="handleNodeClick"
+        ></el-tree>
+      </div>
+    </div>
+    <div class="demo_page_right">
+      <div class="apass_breadcrumb">
+        <el-breadcrumb separator="/">
+          <el-breadcrumb-item to="/technical_support">
+            技术支持
+          </el-breadcrumb-item>
+          <el-breadcrumb-item to="/technical_support/demo_center">
+            示例中心
+          </el-breadcrumb-item>
+          <el-breadcrumb-item>
+            {{ typeText }}
+          </el-breadcrumb-item>
+        </el-breadcrumb>
+      </div>
+      <div class="demo_page_right_l" v-if="flag">
+        <div class="paneHeader">
+          <span>源代码编辑器</span>
+          <div class="pull-right">
+            <div class="pull-btn" @click="submitTryit">
+              <div class="pull-icon" id="submitBTN"></div>
+              运行
+            </div>
+            <div class="pull-btn" @click="refresh">
+              <div class="pull-icon" id="refrestBTN"></div>
+              重置
+            </div>
+          </div>
+        </div>
+        <div class="panelCode">
+          <codemirror
+            :value="code"
+            @changes="changes"
+            :options="options"
+          ></codemirror>
+        </div>
+        <div class="fullmap" @click="fullmap">
+          <span class="el-icon-arrow-left"></span>
+        </div>
+      </div>
+      <div :class="flag ? 'demo_page_right_r2' : 'demo_page_right_r1'">
+        <div id="iframewrapper">
+          <iframe frameborder="0" id="iframeResult"></iframe>
+        </div>
+        <div
+          class="closemap"
+          @click="closemap"
+          style="display: block"
+          v-if="!flag"
+        >
+          <i class="el-icon-arrow-right"></i>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import sideNavBar from "@/components/side-nav-bar";
+import { codemirror } from "vue-codemirror";
+require("codemirror/mode/htmlmixed/htmlmixed.js");
+require("codemirror/mode/javascript/javascript.js");
+require("codemirror/mode/css/css.js");
+require("codemirror/mode/xml/xml.js");
+var mixedMode = {
+  name: "htmlmixed",
+  scriptTypes: [
+    {
+      matches: /\/x-handlebars-template|\/x-mustache/i,
+      mode: null,
+    },
+    {
+      matches: /(text|application)\/(x-)?vb(a|script)/i,
+      mode: "vbscript",
+    },
+  ],
+};
+export default {
+  data() {
+    return {
+      titleIcon: require("@/assets/imgs/tool_ic_shili.png"),
+      title: "示例中心",
+      typeText: "arcgis server示例中心",
+      leftData: [],
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+      flag: true,
+      currentName: "2d_base_map",
+      currentBranch: "arcgis_latest",
+      code: "",
+    };
+  },
+  methods: {
+    // 左侧tree选中的节点
+    handleNodeClick(data) {
+      if (data.name) {
+        this.currentName = data.name;
+        this.currentBranch = data.branch;
+        this.changeMap(data.branch, data.name);
+      }
+    },
+    fullmap() {
+      this.flag = false;
+    },
+    closemap() {
+      this.flag = true;
+    },
+    // 修改编辑
+    changes(code) {
+      this.code = code.getValue();
+    },
+    // 运行
+    submitTryit() {
+      var text = this.code;
+      var ifr = document.createElement("iframe");
+      ifr.setAttribute("frameborder", "0");
+      ifr.setAttribute("id", "iframeResult");
+      ifr.setAttribute("width", "100%");
+      ifr.setAttribute("height", "100%");
+      document.getElementById("iframewrapper").innerHTML = "";
+      document.getElementById("iframewrapper").appendChild(ifr);
+
+      var ifrw = ifr.contentWindow
+        ? ifr.contentWindow
+        : ifr.contentDocument.document
+        ? ifr.contentDocument.document
+        : ifr.contentDocument;
+      ifrw.document.open();
+      ifrw.document.write(text);
+      ifrw.document.close();
+    },
+    // 重置
+    refresh() {
+      this.changeMap(this.currentBranch, cuthis.currentName);
+    },
+    //加载配置文件里面的配置数据
+    loadConfigTreeNodeData() {
+      var url = "/apaas/ui/static/view/data/arcgisTreeNode.json";
+      this.$http.get(url).then((res) => {
+        if (res.status == 200) {
+          var data = JSON.parse(res.bodyText).data;
+          this.leftData = data;
+        }
+      });
+    },
+    // 地图
+    changeMap(branch, page) {
+      var url = "";
+      if (branch == "arcgis_latest") {
+        url =
+          "/apaas/ui/static/view/demo/page-" + page + ".html?" + Math.random();
+        this.$http
+          .get(url)
+          .then((response) => {
+            this.code = response.data;
+            var ifr = document.getElementById("iframeResult");
+            //   ifr.src =
+            //     "./static/view/latest/page-" + page + ".html?" + Math.random();
+            ifr.src = url;
+          })
+          .catch(function (response) {
+            console.log(response);
+          });
+      }
+    },
+  },
+  components: {
+    codemirror,
+  },
+  mounted() {
+    this.loadConfigTreeNodeData();
+    this.changeMap(this.currentBranch, this.currentName);
+  },
+  computed: {
+    options() {
+      return {
+        mode: mixedMode,
+        tabSize: 2,
+        lineNumbers: false,
+        lineWrapping: true,
+        smartIndent: true,
+        theme: "cobalt",
+      };
+    },
+  },
+};
+</script>
+
+<style scoped>
+.demo_container {
+  height: calc(100vh - 58px);
+  display: flex;
+  justify-content: flex-start;
+  align-items: stretch;
+}
+.demopage_left {
+  position: relative;
+  width: 250px;
+  height: 100%;
+  background-color: #0d1847;
+}
+
+.demopage_left_title {
+  height: 40px;
+  background-color: #182665;
+  border-radius: 10px;
+  overflow: hidden;
+  margin: 20px 32px 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+
+.demopage_left_title > span {
+  font-size: 16px;
+  color: #c3caf8;
+}
+
+.demo_menu {
+  position: relative;
+  height: calc(100vh - 58px - 40px - 40px);
+  width: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.demo_page_right {
+  box-sizing: border-box;
+  position: relative;
+  width: calc(100vw - 250px);
+  padding: 0px 20px 30px;
+  height: 100%;
+}
+
+.demo_page_right_l {
+  position: relative;
+  width: 495px;
+  height: calc(100% - 46px);
+  z-index: 2;
+}
+
+.paneHeader {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 50px;
+  line-height: 46px;
+  border-top: 4px solid #fa7d0f;
+  border-bottom: 1px solid #1e262d;
+  background: #2a333a;
+  font-size: 16px;
+  padding-left: 10px;
+  box-sizing: border-box;
+  color: #c3caf8;
+  z-index: 9;
+  border-radius: 12px 0 0 0;
+}
+
+.paneHeader .pull-right {
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 49px;
+}
+
+.paneHeader .pull-right .pull-btn {
+  position: relative;
+  float: left;
+  line-height: 46px;
+  border-left: 1px solid #1e262d;
+  vertical-align: middle;
+  font-size: 14px;
+  color: #ffffff;
+  padding-left: 32px;
+  padding-right: 10px;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.paneHeader .pull-right .pull-btn .pull-icon {
+  position: absolute;
+  top: 16px;
+  left: 8px;
+  width: 16px;
+  height: 16px;
+  background-size: contain;
+}
+#submitBTN {
+  background-image: url("~@/assets/imgs/demo_logo.png");
+}
+
+#refrestBTN {
+  background-image: url("~@/assets/imgs/demo_logo.png");
+}
+.panelCode {
+  position: relative;
+  top: 50px;
+  height: calc(100% - 50px);
+  overflow-x: hidden;
+  overflow-y: auto;
+  box-sizing: border-box;
+}
+
+.fullmap {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  margin-top: -30px;
+  width: 14px;
+  height: 60px;
+  background-color: #6f7377;
+  cursor: pointer;
+  z-index: 1002;
+  line-height: 60px;
+  vertical-align: middle;
+  text-align: center;
+  color: #333333;
+  border-radius: 6px 0 0 6px;
+}
+
+.closemap {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  margin-top: -30px;
+  width: 14px;
+  height: 60px;
+  background-color: #6f7377;
+  cursor: pointer;
+  z-index: 1002;
+  line-height: 60px;
+  vertical-align: middle;
+  text-align: center;
+  color: #333333;
+  border-radius: 0 6px 6px 0;
+  display: none;
+}
+
+.demo_page_right_r1 {
+  position: absolute;
+  left: 20px;
+  top: 46px;
+  bottom: 30px;
+  right: 20px;
+  height: calc(100% - 46px - 30px);
+}
+
+.demo_page_right_r2 {
+  position: absolute;
+  left: 515px;
+  top: 46px;
+  bottom: 30px;
+  right: 20px;
+  height: calc(100% - 46px - 30px);
+}
+
+#iframewrapper {
+  height: 100%;
+  position: relative;
+}
+
+#iframeResult {
+  position: absolute;
+  top: 0;
+  border: 0 !important;
+  min-width: 100px;
+  width: 100%;
+  height: 100%;
+}
+</style>
+<style>
+[v-cloak] {
+  display: none;
+}
+.apass_breadcrumb > .el-breadcrumb {
+  padding: 12px 0 11px;
+}
+/* 设置滚动条样式 */
+.demo_menu::-webkit-scrollbar,
+.panelCode::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.panelCode::-webkit-scrollbar {
+  background-color: #333333;
+}
+.demo_menu::-webkit-scrollbar-track-piece,
+.panelCode::-webkit-scrollbar-track-piece {
+  background-color: rgba(255, 255, 255, 0.1);
+  -webkit-border-radius: 6px;
+}
+.demo_menu::-webkit-scrollbar-thumb:vertical,
+.panelCode::-webkit-scrollbar-thumb:vertical {
+  height: 5px;
+  background-color: rgba(255, 255, 255, 0.15);
+  -webkit-border-radius: 6px;
+}
+.demo_menu::-webkit-scrollbar-thumb:horizontal,
+.panelCode::-webkit-scrollbar-thumb:horizontal {
+  width: 5px;
+  background-color: rgba(255, 255, 255, 0.15);
+  -webkit-border-radius: 6px;
+}
+/* 设置左侧样式 */
+.demo_menu .el-tree {
+  background: none;
+  font-family: MicrosoftYaHei-Bold;
+  font-size: 14px;
+  color: #b4c0f5;
+}
+
+.demo_menu .el-tree-node .is-expanded > .el-tree-node__children {
+  background: none;
+  color: #6573ae;
+}
+.demo_menu .el-tree-node__content {
+  height: 48px;
+  position: relative;
+}
+.demo_menu .el-tree-node__content > .el-tree-node__expand-icon {
+  position: absolute;
+  right: 22px;
+  padding: 0;
+}
+.demo_menu .el-tree-node__label {
+  padding-left: 24px;
+}
+.demo_menu .el-tree-node__content:hover {
+  background-color: #182665;
+  color: #e6ebfe;
+}
+
+.demo_menu .el-tree-node:focus > .el-tree-node__content {
+  background-color: #182665;
+  color: #e6ebfe;
+}
+.demo_menu .el-tree-node:focus > .el-tree-node__content .el-tree-node__label {
+  color: #e6ebfe;
+}
+/* 设置codeMirror样式 */
+.vue-codemirror {
+  height: 100%;
+}
+
+/* 设置编辑器里的样式 */
+.cm-s-cobalt.CodeMirror {
+  background: #2a333a;
+  color: white;
+}
+.cm-s-cobalt div.CodeMirror-selected {
+  background: #b36539;
+}
+.cm-s-cobalt .CodeMirror-line::selection,
+.cm-s-cobalt .CodeMirror-line > span::selection,
+.cm-s-cobalt .CodeMirror-line > span > span::selection {
+  background: rgba(179, 101, 57, 0.99);
+}
+.cm-s-cobalt .CodeMirror-line::-moz-selection,
+.cm-s-cobalt .CodeMirror-line > span::-moz-selection,
+.cm-s-cobalt .CodeMirror-line > span > span::-moz-selection {
+  background: rgba(179, 101, 57, 0.99);
+}
+.cm-s-cobalt .CodeMirror-gutters {
+  background: #2a333a;
+  border-right: 1px solid #2a333a;
+}
+.cm-s-cobalt .CodeMirror-guttermarker {
+  color: #ffee80;
+}
+.cm-s-cobalt .CodeMirror-guttermarker-subtle {
+  color: #d0d0d0;
+}
+.cm-s-cobalt .CodeMirror-linenumber {
+  color: #d0d0d0;
+}
+.cm-s-cobalt .CodeMirror-cursor {
+  border-left: 1px solid white;
+}
+
+.cm-s-cobalt span.cm-comment {
+  color: #08f;
+}
+.cm-s-cobalt span.cm-atom {
+  color: #845dc4;
+}
+.cm-s-cobalt span.cm-number,
+.cm-s-cobalt span.cm-attribute {
+  color: #ff80e1;
+}
+.cm-s-cobalt span.cm-keyword {
+  color: #ffee80;
+}
+.cm-s-cobalt span.cm-string {
+  color: #3ad900;
+}
+.cm-s-cobalt span.cm-meta {
+  color: #ff9d00;
+}
+.cm-s-cobalt span.cm-variable-2,
+.cm-s-cobalt span.cm-tag {
+  color: #9effff;
+}
+.cm-s-cobalt span.cm-variable-3,
+.cm-s-cobalt span.cm-def {
+  color: white;
+}
+.cm-s-cobalt span.cm-bracket {
+  color: #d8d8d8;
+}
+.cm-s-cobalt span.cm-builtin,
+.cm-s-cobalt span.cm-special {
+  color: #ff9e59;
+}
+.cm-s-cobalt span.cm-link {
+  color: #845dc4;
+}
+.cm-s-cobalt span.cm-error {
+  color: #9d1e15;
+}
+
+.cm-s-cobalt .CodeMirror-activeline-background {
+  background: #002d57;
+}
+.cm-s-cobalt .CodeMirror-matchingbracket {
+  outline: 1px solid grey;
+  color: white !important;
+}
+</style>

src/router/index.js

@@ -183,6 +183,20 @@ export default new Router({
                 }, // 开发文档管理编辑
               ],
             }, // 开发文档管理
+            {
+              path: "/technical_support/demo_center",
+              name: "technicalSupportDemo",
+              // redirect: "/technical_support/demo_center/index",
+              component: () => import("@/pages/technical-support/demo-center/index"),
+              // children: [
+              //   {
+              //     path: "/technical_support/doc_manage/list",
+              //     name: "technicalSupportDocDetail",
+              //     component: () =>
+              //       import("@/pages/technical-support/doc-manage/list"),
+              //   }, // 示例中心管理列表
+              // ],
+            }, // 示例中心
             {
               path: "/technical_support/answer_center/",
               name: "technicalSupportDoc",

static/view/data/arcgisTreeNode.json

+{
+    "data": [
+        {
+            "label": "arcgis server 地图示例",
+            "children": [
+                {
+                    "label": "二维地图",
+                    "name": "2d_base_map",
+                    "branch": "arcgis_latest"
+                },
+                {
+                    "label": "三维地图",
+                    "name": "3d_base_map",
+                    "branch": "arcgis_latest"
+                },
+                {
+                    "label": "二维地图与三维地图切换",
+                    "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",
+                    "branch": "arcgis_latest"
+                },
+                {
+                    "label": "要素图层显示要素列表",
+                    "name": "featurelayer",
+                    "branch": "arcgis_latest"
+                },
+                {
+                    "label": "地理编码检索",
+                    "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",
+                    "branch": "arcgis_latest"
+                },
+                {
+                    "label": "Geoserver_WMTS服务",
+                    "name": "arcgis_load_geoserver_wmts",
+                    "branch": "arcgis_latest"
+                },
+                {
+                    "label": "单图层查询",
+                    "name": "simplesearch",
+                    "branch": "arcgis_latest"
+                },
+                {
+                    "label": "多图层拉框查询",
+                    "name": "multilayer3search",
+                    "branch": "arcgis_latest"
+                },
+                {
+                    "label": "多图层属性查询",
+                    "name": "multilayer4search",
+                    "branch": "arcgis_latest"
+                },
+                {
+                    "label": "通用多图层多字段查询",
+                    "name": "multilayersandfeilds_3search",
+                    "branch": "arcgis_latest"
+                },
+                {
+                    "label": "视频Webmap",
+                    "name": "video_web_map",
+                    "branch": "arcgis_latest"
+                },
+                {
+                    "label": "图表Webmap",
+                    "name": "echarts_web_map",
+                    "branch": "arcgis_latest"
+                },
+                {
+                    "label": "Webmap test",
+                    "name": "webmap_test",
+                    "branch": "arcgis_latest"
+                },
+                {
+                    "label": "热力图",
+                    "name": "heatmap",
+                    "branch": "arcgis_latest"
+                },
+                {
+                    "label": "图层管理",
+                    "name": "manage_layers",
+                    "branch": "arcgis_latest"
+                },
+                {
+                    "label": "迁徙图",
+                    "name": "migrate",
+                    "branch": "arcgis_latest"
+                },
+                {
+                    "label": "迁徙图2",
+                    "name": "migrate2",
+                    "branch": "arcgis_latest"
+                },
+                {
+                    "label": "公交线路图",
+                    "name": "bus_line",
+                    "branch": "arcgis_latest"
+                },
+                {
+                    "label": "点聚合图",
+                    "name": "flareClusterLayer",
+                    "branch": "arcgis_latest"
+                },
+                {
+                    "label": "运动图层",
+                    "name": "movinglayer",
+                    "branch": "arcgis_latest"
+                },
+                {
+                    "label": "3.x运动图层",
+                    "name": "3.xmovelayer",
+                    "branch": "arcgis_latest"
+                },
+                {
+                    "label": "多图层查询",
+                    "name": "2d_findTaskLayers",
+                    "branch": "arcgis_latest"
+                },
+                {
+                    "label": "画框统计",
+                    "name": "2d_queryStatistic",
+                    "branch": "arcgis_latest"
+                },
+                {
+                    "label": "视频播放",
+                    "name": "2d_videoView",
+                    "branch": "arcgis_latest"
+                },
+                {
+                    "label": "缓冲区分析",
+                    "name": "2d_buffer_analysis",
+                    "branch": "arcgis_latest"
+                },
+                {
+                    "label": "加载本地JSON文件/shapefile文件",
+                    "name": "2d_loadGeometry",
+                    "branch": "arcgis_latest"
+                },
+                {
+                    "label": "要素编辑",
+                    "name": "editFeatures",
+                    "branch": "arcgis_latest"
+                },
+                {
+                    "label": "要素编辑用3.x版本",
+                    "name": "2d_featureEditor3.x",
+                    "branch": "arcgis_latest"
+                },
+                {
+                    "label": "要素编辑用3.x版本_贵州",
+                    "name": "2d_featureEditor3.x_guizhou",
+                    "branch": "arcgis_latest"
+                }
+            ]
+        }
+    ]
+}
\ No newline at end of file

static/view/demo/page-2d_base_heatMapWithEchart.html

+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>用echart渲染热力图</title>
+    <style>
+        html,
+        body,
+        #view {
+            padding: 0;
+            margin: 0;
+            height: 100%;
+            width: 100%;
+        }
+    </style>
+    <link rel="stylesheet" href="https://apaas.wodcloud.com/api_4.x/esri/css/main.css">
+    <script>
+        var dojoConfig = {
+            parseOnLoad: true,
+            packages: [{
+                name: "src",
+                location: location.pathname.replace(/\/[^/]+$/, "") + "/src"
+            }]
+        };
+    </script>
+    <script src="https://apaas.wodcloud.com/mapsamples/static/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/echart/echarts.min.js"></script>
+    <script src="https://apaas.wodcloud.com/mapsamples/static/js/echart/echartsExtent.js"></script>
+    <script>
+        require([
+            "esri/Map",
+            "https://apaas.wodcloud.com/mapsamples/static/js/GaodeLayer.js",
+            "esri/views/SceneView",
+            "esri/views/MapView",
+            "esri/Graphic",
+            "esri/layers/GraphicsLayer",
+            "esri/geometry/Point",
+            "esri/geometry/SpatialReference",
+            "esri/symbols/PictureMarkerSymbol",
+            "dojo/domReady!"
+        ], function (Map, GaodeLayer, SceneView, MapView, Graphic, GraphicsLayer, Point, SpatialReference, PictureMarkerSymbol) {
+            //新建矢量图层
+            var GaodeLayer = new GaodeLayer();
+            //json格式的地理数据
+
+            var map = new Map({
+                layers: [GaodeLayer]
+            });
+
+            var view = new MapView({
+                container: "view",
+                map: map,
+                center: [106.71543991100576, 26.58363100116717],
+                zoom: 10
+            });
+
+        });
+    </script>
+</head>
+
+<body>
+    <div id="view"></div>
+</body>
+
+</html>
\ No newline at end of file

static/view/demo/page-2d_base_heatMapWithEchart_3.x.html

+<!DOCTYPE html>
+<html>
+
+	<head>
+		<meta charset="UTF-8">
+		<title>在ArcGis地图中绘制Echarts热力图</title>
+		<!--
+        	作者：tsq
+        	时间：2018-08-30
+        	描述：在ArcGis地图中绘制Echarts热力图 Demo
+        -->
+		<style type="text/css">
+			html,
+			body,
+			#map {
+				width: 100%;
+				height: 100%;
+				margin: 0;
+				padding: 0;
+			}
+		</style>
+        <!-- <link rel="stylesheet" href="https://js.arcgis.com/3.19/esri/css/esri.css" /> -->
+        <link rel="stylesheet" href="https://apaas.wodcloud.com/api_4.x/esri/css/main.css" />
+        <script type="text/javascript" src="https://apaas.wodcloud.com/mapsamples/static/js/jquery-3.3.1.min.js"></script>
+        <!-- <script type="text/javascript" src="https://apaas.wodcloud.com/mapsamples/static/js/echart/Echarts3Layer.js"></script> -->
+		<!-- <script type="text/javascript" src="js/echarts.min.js"></script> -->
+		<!--
+        	作者：tsq
+        	时间：2018-08-29
+        	描述：echartsExtent.js要在arcgis api前面引用，否则会报错
+        -->
+        <!-- <script type="text/javascript" src="js/echartsExtent.js"></script> -->
+        <script src="https://apaas.wodcloud.com/mapsamples/static/js/echart/echarts.min.js"></script>
+        <script src="https://apaas.wodcloud.com/mapsamples/static/js/echart/echartsExtent.js"></script>
+		<script type="text/javascript">
+			/*
+			 * 这个配置必须写在加载arcgis api之前，否则不能生效
+			 * location是一个绝对路径，第一个斜杠前面会默认添加一级域名，所以后面要填上二级域名等等,
+			 * 比如：http://localhost:8065/index.html，这种只需要写"/js"即可；
+			 * 而http://localhost:8065/EchartsHeatmapInArcgis/index.html这种就需要写"/../js"或者"/EchartsHeatmapInArcgis/js"
+			 */
+			var dojoConfig = {
+				parseOnLoad: true,
+				packages: [{
+					"name": "src",
+					"location": location.pathname.replace(/\/[^/]+$/, '') + "/js"
+				}]
+			};
+		</script>
+        <!-- <script src="https://js.arcgis.com/3.19/"></script> -->
+        <script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
+	</head>
+
+	<body>
+		<div id="map"></div>
+        <script type="text/javascript">
+         // https://apaas.wodcloud.com/mapsamples/static/js/echart/Echarts3Layer.js
+            require(["esri/Map","../../../static/js/echart/Echarts3Layer.js"],function(Map,echartsLayer){
+                var map 
+                var geoCoordMap = {
+				"海门": [121.15, 31.89],
+				"鄂尔多斯": [109.781327, 39.608266],
+				"招远": [120.38, 37.35],
+				"舟山": [122.207216, 29.985295],
+				"齐齐哈尔": [123.97, 47.33],
+				"盐城": [120.13, 33.38],
+				"赤峰": [118.87, 42.28],
+				"青岛": [120.33, 36.07],
+				"乳山": [121.52, 36.89],
+				"金昌": [102.188043, 38.520089],
+				"泉州": [118.58, 24.93],
+				"莱西": [120.53, 36.86],
+				"日照": [119.46, 35.42],
+				"胶南": [119.97, 35.88],
+				"南通": [121.05, 32.08],
+				"拉萨": [91.11, 29.97],
+				"云浮": [112.02, 22.93],
+				"梅州": [116.1, 24.55],
+				"文登": [122.05, 37.2],
+				"上海": [121.48, 31.22],
+				"攀枝花": [101.718637, 26.582347],
+				"威海": [122.1, 37.5],
+				"承德": [117.93, 40.97],
+				"厦门": [118.1, 24.46],
+				"汕尾": [115.375279, 22.786211],
+				"潮州": [116.63, 23.68],
+				"丹东": [124.37, 40.13],
+				"太仓": [121.1, 31.45],
+				"曲靖": [103.79, 25.51],
+				"烟台": [121.39, 37.52],
+				"福州": [119.3, 26.08],
+				"瓦房店": [121.979603, 39.627114],
+				"即墨": [120.45, 36.38],
+				"抚顺": [123.97, 41.97],
+				"玉溪": [102.52, 24.35],
+				"张家口": [114.87, 40.82],
+				"阳泉": [113.57, 37.85],
+				"莱州": [119.942327, 37.177017],
+				"湖州": [120.1, 30.86],
+				"汕头": [116.69, 23.39],
+				"昆山": [120.95, 31.39],
+				"宁波": [121.56, 29.86],
+				"湛江": [110.359377, 21.270708],
+				"揭阳": [116.35, 23.55],
+				"荣成": [122.41, 37.16],
+				"连云港": [119.16, 34.59],
+				"葫芦岛": [120.836932, 40.711052],
+				"常熟": [120.74, 31.64],
+				"东莞": [113.75, 23.04],
+				"河源": [114.68, 23.73],
+				"淮安": [119.15, 33.5],
+				"泰州": [119.9, 32.49],
+				"南宁": [108.33, 22.84],
+				"营口": [122.18, 40.65],
+				"惠州": [114.4, 23.09],
+				"江阴": [120.26, 31.91],
+				"蓬莱": [120.75, 37.8],
+				"韶关": [113.62, 24.84],
+				"嘉峪关": [98.289152, 39.77313],
+				"广州": [113.23, 23.16],
+				"延安": [109.47, 36.6],
+				"太原": [112.53, 37.87],
+				"清远": [113.01, 23.7],
+				"中山": [113.38, 22.52],
+				"昆明": [102.73, 25.04],
+				"寿光": [118.73, 36.86],
+				"盘锦": [122.070714, 41.119997],
+				"长治": [113.08, 36.18],
+				"深圳": [114.07, 22.62],
+				"珠海": [113.52, 22.3],
+				"宿迁": [118.3, 33.96],
+				"咸阳": [108.72, 34.36],
+				"铜川": [109.11, 35.09],
+				"平度": [119.97, 36.77],
+				"佛山": [113.11, 23.05],
+				"海口": [110.35, 20.02],
+				"江门": [113.06, 22.61],
+				"章丘": [117.53, 36.72],
+				"肇庆": [112.44, 23.05],
+				"大连": [121.62, 38.92],
+				"临汾": [111.5, 36.08],
+				"吴江": [120.63, 31.16],
+				"石嘴山": [106.39, 39.04],
+				"沈阳": [123.38, 41.8],
+				"苏州": [120.62, 31.32],
+				"茂名": [110.88, 21.68],
+				"嘉兴": [120.76, 30.77],
+				"长春": [125.35, 43.88],
+				"胶州": [120.03336, 36.264622],
+				"银川": [106.27, 38.47],
+				"张家港": [120.555821, 31.875428],
+				"三门峡": [111.19, 34.76],
+				"锦州": [121.15, 41.13],
+				"南昌": [115.89, 28.68],
+				"柳州": [109.4, 24.33],
+				"三亚": [109.511909, 18.252847],
+				"自贡": [104.778442, 29.33903],
+				"吉林": [126.57, 43.87],
+				"阳江": [111.95, 21.85],
+				"泸州": [105.39, 28.91],
+				"西宁": [101.74, 36.56],
+				"宜宾": [104.56, 29.77],
+				"呼和浩特": [111.65, 40.82],
+				"成都": [104.06, 30.67],
+				"大同": [113.3, 40.12],
+				"镇江": [119.44, 32.2],
+				"桂林": [110.28, 25.29],
+				"张家界": [110.479191, 29.117096],
+				"宜兴": [119.82, 31.36],
+				"北海": [109.12, 21.49],
+				"西安": [108.95, 34.27],
+				"金坛": [119.56, 31.74],
+				"东营": [118.49, 37.46],
+				"牡丹江": [129.58, 44.6],
+				"遵义": [106.9, 27.7],
+				"绍兴": [120.58, 30.01],
+				"扬州": [119.42, 32.39],
+				"常州": [119.95, 31.79],
+				"潍坊": [119.1, 36.62],
+				"重庆": [106.54, 29.59],
+				"台州": [121.420757, 28.656386],
+				"南京": [118.78, 32.04],
+				"滨州": [118.03, 37.36],
+				"贵阳": [106.71, 26.57],
+				"无锡": [120.29, 31.59],
+				"本溪": [123.73, 41.3],
+				"克拉玛依": [84.77, 45.59],
+				"渭南": [109.5, 34.52],
+				"马鞍山": [118.48, 31.56],
+				"宝鸡": [107.15, 34.38],
+				"焦作": [113.21, 35.24],
+				"句容": [119.16, 31.95],
+				"北京": [116.46, 39.92],
+				"徐州": [117.2, 34.26],
+				"衡水": [115.72, 37.72],
+				"包头": [110, 40.58],
+				"绵阳": [104.73, 31.48],
+				"乌鲁木齐": [87.68, 43.77],
+				"枣庄": [117.57, 34.86],
+				"杭州": [120.19, 30.26],
+				"淄博": [118.05, 36.78],
+				"鞍山": [122.85, 41.12],
+				"溧阳": [119.48, 31.43],
+				"库尔勒": [86.06, 41.68],
+				"安阳": [114.35, 36.1],
+				"开封": [114.35, 34.79],
+				"济南": [117, 36.65],
+				"德阳": [104.37, 31.13],
+				"温州": [120.65, 28.01],
+				"九江": [115.97, 29.71],
+				"邯郸": [114.47, 36.6],
+				"临安": [119.72, 30.23],
+				"兰州": [103.73, 36.03],
+				"沧州": [116.83, 38.33],
+				"临沂": [118.35, 35.05],
+				"南充": [106.110698, 30.837793],
+				"天津": [117.2, 39.13],
+				"富阳": [119.95, 30.07],
+				"泰安": [117.13, 36.18],
+				"诸暨": [120.23, 29.71],
+				"郑州": [113.65, 34.76],
+				"哈尔滨": [126.63, 45.75],
+				"聊城": [115.97, 36.45],
+				"芜湖": [118.38, 31.33],
+				"唐山": [118.02, 39.63],
+				"平顶山": [113.29, 33.75],
+				"邢台": [114.48, 37.05],
+				"德州": [116.29, 37.45],
+				"济宁": [116.59, 35.38],
+				"荆州": [112.239741, 30.335165],
+				"宜昌": [111.3, 30.7],
+				"义乌": [120.06, 29.32],
+				"丽水": [119.92, 28.45],
+				"洛阳": [112.44, 34.7],
+				"秦皇岛": [119.57, 39.95],
+				"株洲": [113.16, 27.83],
+				"石家庄": [114.48, 38.03],
+				"莱芜": [117.67, 36.19],
+				"常德": [111.69, 29.05],
+				"保定": [115.48, 38.85],
+				"湘潭": [112.91, 27.87],
+				"金华": [119.64, 29.12],
+				"岳阳": [113.09, 29.37],
+				"长沙": [113, 28.21],
+				"衢州": [118.88, 28.97],
+				"廊坊": [116.7, 39.53],
+				"菏泽": [115.480656, 35.23375],
+				"合肥": [117.27, 31.86],
+				"武汉": [114.31, 30.52],
+				"大庆": [125.03, 46.58]
+			};
+			
+			var geoValue = [{
+					name: "海门",
+					value: 9
+				},
+				{
+					name: "鄂尔多斯",
+					value: 12
+				},
+				{
+					name: "招远",
+					value: 12
+				},
+				{
+					name: "舟山",
+					value: 12
+				},
+				{
+					name: "齐齐哈尔",
+					value: 14
+				},
+				{
+					name: "盐城",
+					value: 15
+				},
+				{
+					name: "赤峰",
+					value: 16
+				},
+				{
+					name: "青岛",
+					value: 18
+				},
+				{
+					name: "乳山",
+					value: 18
+				},
+				{
+					name: "金昌",
+					value: 19
+				},
+				{
+					name: "泉州",
+					value: 21
+				},
+				{
+					name: "莱西",
+					value: 21
+				},
+				{
+					name: "日照",
+					value: 21
+				},
+				{
+					name: "胶南",
+					value: 22
+				},
+				{
+					name: "南通",
+					value: 23
+				},
+				{
+					name: "拉萨",
+					value: 24
+				},
+				{
+					name: "云浮",
+					value: 24
+				},
+				{
+					name: "梅州",
+					value: 25
+				},
+				{
+					name: "文登",
+					value: 25
+				},
+				{
+					name: "上海",
+					value: 25
+				},
+				{
+					name: "攀枝花",
+					value: 25
+				},
+				{
+					name: "威海",
+					value: 25
+				},
+				{
+					name: "承德",
+					value: 25
+				},
+				{
+					name: "厦门",
+					value: 26
+				},
+				{
+					name: "汕尾",
+					value: 26
+				},
+				{
+					name: "潮州",
+					value: 26
+				},
+				{
+					name: "丹东",
+					value: 27
+				},
+				{
+					name: "太仓",
+					value: 27
+				},
+				{
+					name: "曲靖",
+					value: 27
+				},
+				{
+					name: "烟台",
+					value: 28
+				},
+				{
+					name: "福州",
+					value: 29
+				},
+				{
+					name: "瓦房店",
+					value: 30
+				},
+				{
+					name: "即墨",
+					value: 30
+				},
+				{
+					name: "抚顺",
+					value: 31
+				},
+				{
+					name: "玉溪",
+					value: 31
+				},
+				{
+					name: "张家口",
+					value: 31
+				},
+				{
+					name: "阳泉",
+					value: 31
+				},
+				{
+					name: "莱州",
+					value: 32
+				},
+				{
+					name: "湖州",
+					value: 32
+				},
+				{
+					name: "汕头",
+					value: 32
+				},
+				{
+					name: "昆山",
+					value: 33
+				},
+				{
+					name: "宁波",
+					value: 33
+				},
+				{
+					name: "湛江",
+					value: 33
+				},
+				{
+					name: "揭阳",
+					value: 34
+				},
+				{
+					name: "荣成",
+					value: 34
+				},
+				{
+					name: "连云港",
+					value: 35
+				},
+				{
+					name: "葫芦岛",
+					value: 35
+				},
+				{
+					name: "常熟",
+					value: 36
+				},
+				{
+					name: "东莞",
+					value: 36
+				},
+				{
+					name: "河源",
+					value: 36
+				},
+				{
+					name: "淮安",
+					value: 36
+				},
+				{
+					name: "泰州",
+					value: 36
+				},
+				{
+					name: "南宁",
+					value: 37
+				},
+				{
+					name: "营口",
+					value: 37
+				},
+				{
+					name: "惠州",
+					value: 37
+				},
+				{
+					name: "江阴",
+					value: 37
+				},
+				{
+					name: "蓬莱",
+					value: 37
+				},
+				{
+					name: "韶关",
+					value: 38
+				},
+				{
+					name: "嘉峪关",
+					value: 38
+				},
+				{
+					name: "广州",
+					value: 38
+				},
+				{
+					name: "延安",
+					value: 38
+				},
+				{
+					name: "太原",
+					value: 39
+				},
+				{
+					name: "清远",
+					value: 39
+				},
+				{
+					name: "中山",
+					value: 39
+				},
+				{
+					name: "昆明",
+					value: 39
+				},
+				{
+					name: "寿光",
+					value: 40
+				},
+				{
+					name: "盘锦",
+					value: 40
+				},
+				{
+					name: "长治",
+					value: 41
+				},
+				{
+					name: "深圳",
+					value: 41
+				},
+				{
+					name: "珠海",
+					value: 42
+				},
+				{
+					name: "宿迁",
+					value: 43
+				},
+				{
+					name: "咸阳",
+					value: 43
+				},
+				{
+					name: "铜川",
+					value: 44
+				},
+				{
+					name: "平度",
+					value: 44
+				},
+				{
+					name: "佛山",
+					value: 44
+				},
+				{
+					name: "海口",
+					value: 44
+				},
+				{
+					name: "江门",
+					value: 45
+				},
+				{
+					name: "章丘",
+					value: 45
+				},
+				{
+					name: "肇庆",
+					value: 46
+				},
+				{
+					name: "大连",
+					value: 47
+				},
+				{
+					name: "临汾",
+					value: 47
+				},
+				{
+					name: "吴江",
+					value: 47
+				},
+				{
+					name: "石嘴山",
+					value: 49
+				},
+				{
+					name: "沈阳",
+					value: 50
+				},
+				{
+					name: "苏州",
+					value: 50
+				},
+				{
+					name: "茂名",
+					value: 50
+				},
+				{
+					name: "嘉兴",
+					value: 51
+				},
+				{
+					name: "长春",
+					value: 51
+				},
+				{
+					name: "胶州",
+					value: 52
+				},
+				{
+					name: "银川",
+					value: 52
+				},
+				{
+					name: "张家港",
+					value: 52
+				},
+				{
+					name: "三门峡",
+					value: 53
+				},
+				{
+					name: "锦州",
+					value: 54
+				},
+				{
+					name: "南昌",
+					value: 54
+				},
+				{
+					name: "柳州",
+					value: 54
+				},
+				{
+					name: "三亚",
+					value: 54
+				},
+				{
+					name: "自贡",
+					value: 56
+				},
+				{
+					name: "吉林",
+					value: 56
+				},
+				{
+					name: "阳江",
+					value: 57
+				},
+				{
+					name: "泸州",
+					value: 57
+				},
+				{
+					name: "西宁",
+					value: 57
+				},
+				{
+					name: "宜宾",
+					value: 58
+				},
+				{
+					name: "呼和浩特",
+					value: 58
+				},
+				{
+					name: "成都",
+					value: 58
+				},
+				{
+					name: "大同",
+					value: 58
+				},
+				{
+					name: "镇江",
+					value: 59
+				},
+				{
+					name: "桂林",
+					value: 59
+				},
+				{
+					name: "张家界",
+					value: 59
+				},
+				{
+					name: "宜兴",
+					value: 59
+				},
+				{
+					name: "北海",
+					value: 60
+				},
+				{
+					name: "西安",
+					value: 61
+				},
+				{
+					name: "金坛",
+					value: 62
+				},
+				{
+					name: "东营",
+					value: 62
+				},
+				{
+					name: "牡丹江",
+					value: 63
+				},
+				{
+					name: "遵义",
+					value: 63
+				},
+				{
+					name: "绍兴",
+					value: 63
+				},
+				{
+					name: "扬州",
+					value: 64
+				},
+				{
+					name: "常州",
+					value: 64
+				},
+				{
+					name: "潍坊",
+					value: 65
+				},
+				{
+					name: "重庆",
+					value: 66
+				},
+				{
+					name: "台州",
+					value: 67
+				},
+				{
+					name: "南京",
+					value: 67
+				},
+				{
+					name: "滨州",
+					value: 70
+				},
+				{
+					name: "贵阳",
+					value: 71
+				},
+				{
+					name: "无锡",
+					value: 71
+				},
+				{
+					name: "本溪",
+					value: 71
+				},
+				{
+					name: "克拉玛依",
+					value: 72
+				},
+				{
+					name: "渭南",
+					value: 72
+				},
+				{
+					name: "马鞍山",
+					value: 72
+				},
+				{
+					name: "宝鸡",
+					value: 72
+				},
+				{
+					name: "焦作",
+					value: 75
+				},
+				{
+					name: "句容",
+					value: 75
+				},
+				{
+					name: "北京",
+					value: 79
+				},
+				{
+					name: "徐州",
+					value: 79
+				},
+				{
+					name: "衡水",
+					value: 80
+				},
+				{
+					name: "包头",
+					value: 80
+				},
+				{
+					name: "绵阳",
+					value: 80
+				},
+				{
+					name: "乌鲁木齐",
+					value: 84
+				},
+				{
+					name: "枣庄",
+					value: 84
+				},
+				{
+					name: "杭州",
+					value: 84
+				},
+				{
+					name: "淄博",
+					value: 85
+				},
+				{
+					name: "鞍山",
+					value: 86
+				},
+				{
+					name: "溧阳",
+					value: 86
+				},
+				{
+					name: "库尔勒",
+					value: 86
+				},
+				{
+					name: "安阳",
+					value: 90
+				},
+				{
+					name: "开封",
+					value: 90
+				},
+				{
+					name: "济南",
+					value: 92
+				},
+				{
+					name: "德阳",
+					value: 93
+				},
+				{
+					name: "温州",
+					value: 95
+				},
+				{
+					name: "九江",
+					value: 96
+				},
+				{
+					name: "邯郸",
+					value: 98
+				},
+				{
+					name: "临安",
+					value: 99
+				},
+				{
+					name: "兰州",
+					value: 99
+				},
+				{
+					name: "沧州",
+					value: 100
+				},
+				{
+					name: "临沂",
+					value: 103
+				},
+				{
+					name: "南充",
+					value: 104
+				},
+				{
+					name: "天津",
+					value: 105
+				},
+				{
+					name: "富阳",
+					value: 106
+				},
+				{
+					name: "泰安",
+					value: 112
+				},
+				{
+					name: "诸暨",
+					value: 112
+				},
+				{
+					name: "郑州",
+					value: 113
+				},
+				{
+					name: "哈尔滨",
+					value: 114
+				},
+				{
+					name: "聊城",
+					value: 116
+				},
+				{
+					name: "芜湖",
+					value: 117
+				},
+				{
+					name: "唐山",
+					value: 119
+				},
+				{
+					name: "平顶山",
+					value: 119
+				},
+				{
+					name: "邢台",
+					value: 119
+				},
+				{
+					name: "德州",
+					value: 120
+				},
+				{
+					name: "济宁",
+					value: 120
+				},
+				{
+					name: "荆州",
+					value: 127
+				},
+				{
+					name: "宜昌",
+					value: 130
+				},
+				{
+					name: "义乌",
+					value: 132
+				},
+				{
+					name: "丽水",
+					value: 133
+				},
+				{
+					name: "洛阳",
+					value: 134
+				},
+				{
+					name: "秦皇岛",
+					value: 136
+				},
+				{
+					name: "株洲",
+					value: 143
+				},
+				{
+					name: "石家庄",
+					value: 147
+				},
+				{
+					name: "莱芜",
+					value: 148
+				},
+				{
+					name: "常德",
+					value: 152
+				},
+				{
+					name: "保定",
+					value: 153
+				},
+				{
+					name: "湘潭",
+					value: 154
+				},
+				{
+					name: "金华",
+					value: 157
+				},
+				{
+					name: "岳阳",
+					value: 169
+				},
+				{
+					name: "长沙",
+					value: 175
+				},
+				{
+					name: "衢州",
+					value: 177
+				},
+				{
+					name: "廊坊",
+					value: 193
+				},
+				{
+					name: "菏泽",
+					value: 194
+				},
+				{
+					name: "合肥",
+					value: 229
+				},
+				{
+					name: "武汉",
+					value: 273
+				},
+				{
+					name: "大庆",
+					value: 279
+				}
+			];
+			var convertData = function(data) {
+				var res = [];
+				for(var i = 0; i < data.length; i++) {
+					var geoCoord = geoCoordMap[data[i].name];
+					if(geoCoord) {
+						res.push(geoCoord.concat(data[i].value)); 
+					}
+				}
+				return res;
+			};
+
+			var option = {
+				title: {
+					text: '全国主要城市空气质量',
+					subtext: 'data from PM25.in',
+					sublink: 'http://www.pm25.in',
+					left: 'center',
+					textStyle: {
+						color: '#fff'
+					}
+				},
+				backgroundColor: 'rgba(128, 128, 128, 0)',
+				visualMap: {
+					min: 0,
+					max: 2,
+					show: false,
+					seriesIndex: 0,
+					calculable: true,
+					inRange: {
+						color: ['blue', 'blue', 'green', 'yellow', 'red']
+					},
+					textStyle: {
+						color: '#fff'
+					}
+				},
+				geo: {
+					map: '',
+					show: false,
+					label: {
+						emphasis: {
+							show: false
+						}
+					},
+					left: 0,
+					top: 0,
+					right: 0,
+					bottom: 0,
+					roam: false,
+					itemStyle: {
+						normal: {
+							areaColor: '#323c48',
+							borderColor: '#111'
+						},
+						emphasis: {
+							areaColor: '#2a333d'
+						}
+					}
+				},
+				series: [{
+					type: 'heatmap', //effectScatter
+					coordinateSystem: 'geo',
+					data: convertData(geoValue),
+					pointSize: 10,
+					blurSize: 8
+				}]
+			};
+
+			dojo.ready(function() {
+				//创建地图
+				map = new Map('map', {
+					basemap: 'dark-gray',
+					center: [120.15785586158, 30.269122098642],
+					zoom: 5,
+					navigationMode: "css-transform",
+					force3DTransforms: true,
+					logo: false,
+					fitExtent: true,
+					fadeOnZoom: true,
+					slider: false
+				});
+
+				//地图加载完成后初始化Echarts图层
+				dojo.connect(map, 'onLoad', function(themap) {
+					//这里在地图上创建统计图图层，以后统计图的绘制将从这里进入
+					var overlay = new Echarts3Layer(map, echarts);
+					var chartsContainer = overlay.getEchartsContainer();
+					var myChart = overlay.initECharts(chartsContainer);
+					//window.onresize = myChart.onresize;
+					echartsLayer = overlay;
+
+					$(window).on("resize", function() {
+						resize();
+					});
+
+					overlay.setOption(option);
+
+					// setTimeout(function() {
+					// 	clear();
+					// }, 1000);
+				});
+			});
+
+			function resize() {
+				if(echartsLayer) {
+					var myEchart = echartsLayer.getECharts(), //echarts对象
+						$myEchartContainer = $(echartsLayer.getEchartsContainer()), //echarts统计图所在的div
+						myMap = echartsLayer.getMap(); //地图
+					var $myMapContainer = $(myMap.container); //地图所在div
+					var width = $myMapContainer.width(),
+						height = $myMapContainer.height(); //获取地图的宽高
+
+					$myEchartContainer.width(width); //设置统计图容器的宽高为地图容器的宽高
+					$myEchartContainer.height(height);
+
+					myEchart.resize(); //调用echarts的resize方法
+				}
+			}
+
+			function clear() {
+				if(echartsLayer) {
+					var opt = option;
+					opt.series = [{
+						type: 'heatmap',
+						coordinateSystem: 'geo',
+						data: [
+							[]
+						], //传入空数据，以达到清除原有统计图的效果
+						pointSize: 10,
+						blurSize: 8
+					}];
+					echartsLayer.setOption(opt);
+				}
+			}
+
+			function remove() {
+				if(echartsLayer) {
+					var $echartsContainer = $(echartsLayer.getEchartsContainer());
+					//移除图层容器以达到删除统计的效果
+					$echartsContainer.remove();
+				}
+			}
+            })
+			// var map, echartsLayer;
+	
+		</script>
+	</body>
+
+</html>
\ No newline at end of file

static/view/demo/page-2d_base_loadAmap.html

+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>高德地图</title>
+    <style>
+        html,
+        body,
+        #view {
+            padding: 0;
+            margin: 0;
+            height: 100%;
+            width: 100%;
+        }
+    </style>
+    <link rel="stylesheet" href="https://apaas.wodcloud.com/api_4.x/esri/css/main.css">
+    <script>
+        var dojoConfig = {
+            parseOnLoad: true,
+            packages: [{
+                name: "src",
+                location: location.pathname.replace(/\/[^/]+$/, "") + "/src"
+            }]
+        };
+    </script>
+    <script src="https://apaas.wodcloud.com/mapsamples/static/js/jquery-3.3.1.min.js"></script>
+    <script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
+    <script>
+        require([
+            "esri/Map",
+            "https://apaas.wodcloud.com/mapsamples/static/js/GaodeLayer.js",
+            "esri/views/SceneView",
+            "esri/views/MapView",
+            "esri/Graphic",
+            "esri/layers/GraphicsLayer",
+            "esri/geometry/Point",
+            "esri/geometry/SpatialReference",
+            "esri/symbols/PictureMarkerSymbol",
+            "dojo/domReady!"
+        ], function (Map, GaodeLayer, SceneView, MapView, Graphic, GraphicsLayer, Point, SpatialReference, PictureMarkerSymbol) {
+            //新建矢量图层
+            var GaodeLayer = new GaodeLayer();
+            //json格式的地理数据
+
+            var map = new Map({
+                layers: [GaodeLayer, footprintlayer]
+            });
+
+            var view = new MapView({
+                container: "view",
+                map: map,
+                center: [106.71543991100576, 26.58363100116717],
+                zoom: 10
+            });
+
+        });
+    </script>
+</head>
+
+<body>
+    <div id="view"></div>
+</body>
+
+</html>
\ No newline at end of file

static/view/demo/page-2d_base_loadAmapTest.html

+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>高德地图</title>
+    <style>
+        html,
+        body,
+        #view {
+            padding: 0;
+            margin: 0;
+            height: 100%;
+            width: 100%;
+        }
+    </style>
+    <link rel="stylesheet" href="https://apaas.wodcloud.com/api_4.x/esri/css/main.css">
+    <script>
+        var dojoConfig = {
+            parseOnLoad: true,
+            packages: [{
+                name: "src",
+                location: location.pathname.replace(/\/[^/]+$/, "") + "/src"
+            }]
+        };
+    </script>
+    <script src="https://apaas.wodcloud.com/mapsamples/static/js/jquery-3.3.1.min.js"></script>
+    <script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
+    <script>
+        require([
+            "esri/Map",
+            "https://apaas.wodcloud.com/mapsamples/static/js/GaodeLayer.js",
+            "esri/views/SceneView",
+            "esri/views/MapView",
+            "esri/Graphic",
+            "esri/layers/GraphicsLayer",
+            "esri/geometry/Point",
+            "esri/geometry/SpatialReference",
+            "esri/symbols/PictureMarkerSymbol",
+            "esri/layers/BaseTileLayer", "esri/request",
+            "dojo/domReady!"
+        ], function (Map, GaodeLayer, SceneView, MapView, Graphic, GraphicsLayer, Point, SpatialReference, PictureMarkerSymbol, BaseTileLayer, esriRequest) {
+            //新建矢量图层
+            var bsLayer = BaseTileLayer.createSubclass({
+                properties: {
+                    urlTemplate: null,
+                },
+                getTileUrl: function (level, row, col) {
+                    return url = 'http://webrd0' + (col % 4 + 1) + '.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x=' + col + '&y=' + row + '&z=' + level;
+                },
+                fetchTile: function (level, row, col) {
+                    var url = this.getTileUrl(level, row, col);
+                    return esriRequest(url, {
+                        responseType: "image"
+                    })
+                        .then(function (response) {
+                            var image = response.data;
+                            var width = this.tileInfo.size[0];
+                            var height = this.tileInfo.size[0];
+                            var canvas = document.createElement("canvas");
+                            var context = canvas.getContext("2d");
+                            canvas.width = width;
+                            canvas.height = height;
+                            context.drawImage(image, 0, 0, width, height);
+                            return canvas;
+                        }.bind(this));
+                }
+            })
+            var GaodeLayer = new bsLayer();
+            //var GaodeLayer = new GaodeLayer();
+            //json格式的地理数据
+            var map = new Map({
+                layers: [GaodeLayer]
+            });
+            var view = new MapView({
+                container: "view",
+                map: map,
+                center: [106.71543991100576, 26.58363100116717],
+                zoom: 10
+            });
+
+        });
+    </script>
+</head>
+
+<body>
+    <div id="view"></div>
+</body>
+
+</html>
\ No newline at end of file

static/view/demo/page-2d_base_loadSuperMap3.x.html

+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
+    <title>WMTS地图北斗服务3.x</title>
+    <link rel="stylesheet" href="https://apaas.wodcloud.com/api_3.x/esri/css/esri.css">
+
+    <style>
+        html,
+        body,
+        #map {
+            height: 100%;
+            width: 100%;
+            margin: 0;
+            padding: 0;
+        }
+    </style>
+    <script src="https://apaas.wodcloud.com/api_3.x/init.js"></script>
+
+    <script>
+        require([
+            "esri/map",
+            "esri/layers/WMTSLayer",
+            "esri/layers/ArcGISDynamicMapServiceLayer",
+            "esri/layers/WMTSLayerInfo",
+            "esri/geometry/Extent",
+            "esri/layers/TileInfo",
+            "esri/SpatialReference",
+            "dojo/domReady!"
+        ], function (
+            Map,
+            WMTSLayer,
+            ArcGISDynamicMapServiceLayer,
+            WMTSLayerInfo,
+            Extent,
+            TileInfo,
+            SpatialReference
+        ) {
+
+            var map = new Map("map", {
+                center: [116.7, 34.5],
+                zoom: 8
+            });
+
+            var tileInfo = new TileInfo({
+                "dpi": 96,
+                "format": "image/png",
+                "compressionQuality": 0,
+                "spatialReference": new SpatialReference({
+                    "wkid": 4490
+                }),
+                "rows": 256,
+                "cols": 256,
+                "origin": {
+                    "x": -180,
+                    "y": 90
+                },
+                "lods": [
+                    { "level": "0", "scale": 295829355.45, "resolution": 0.703125 },
+                    { "level": "1", "scale": 147914677.725, "resolution": 0.3515625 },
+                    { "level": "2", "scale": 73957338.8625, "resolution": 0.17578125 },
+                    { "level": "3", "scale": 36978669.43125, "resolution": 0.087890625 },
+                    { "level": "4", "scale": 18489334.715625, "resolution": 0.0439453125 },
+                    { "level": "5", "scale": 9244667.3578125, "resolution": 0.02197265625 },
+                    { "level": "6", "scale": 4622333.67890625, "resolution": 0.010986328125 },
+                    { "level": "7", "scale": 2311166.83945312, "resolution": 0.0054931640625 },
+                    { "level": "8", "scale": 1155583.41972656, "resolution": 0.00274658203125 },
+                    { "level": "9", "scale": 577791.709863281, "resolution": 0.001373291015625 },
+                    { "level": "10", "scale": 288895.8549316406, "resolution": 0.0006866455078125 },
+                    { "level": "11", "scale": 144447.9274658203, "resolution": 0.00034332275390625 },
+                    { "level": "12", "scale": 4508.935440959931, "resolution": 0.000171661376953125 },
+                    { "level": "13", "scale": 36111.98186645508, "resolution": 0.0000858306884765625 },
+                    { "level": "14", "scale": 18055.99093322754, "resolution": 0.0000429153442382812 },
+                    { "level": "15", "scale": 9027.99546661377, "resolution": 0.0000214576721191406 },
+                    { "level": "16", "scale": 4513.997733306885, "resolution": 0.0000107288360595703 },
+                    { "level": "17", "scale": 2256.9988666534423, "resolution": 0.00000536441802978515 },
+                    { "level": "18", "scale": 1128.4994333267211, "resolution": 0.00000268220901489257 },
+                    { "level": "19", "scale": 564.2497166633606, "resolution": 0.00000134110450744628 }
+                ]
+            });
+            var tileExtent = new Extent(-180.0, -85.0511287798065, 180.0, 85.05112877980648, new SpatialReference({
+                wkid: 4490
+            }));
+
+            var layerInfo = new WMTSLayerInfo({
+                tileInfo: tileInfo,
+                fullExtent: tileExtent,
+                initialExtent: tileExtent,
+                identifier: "guizhou",
+                tileMatrixSet: "ChinaPublicServices_guizhou",
+                format: "image/png",
+                style: "default"
+            });
+
+            var resourceInfo = {
+                version: "1.0.0",
+                layerInfos: [layerInfo],
+                copyright: ""
+            };
+            var options = {
+                serviceMode: "KVP",
+                resourceInfo: resourceInfo,
+                layerInfo: layerInfo
+            };
+            var wmtsLayer = new WMTSLayer("http://apaas.gy.wodcloud.com/iserver/services/map-guizhou/wmts-china", options);
+            map.addLayer(wmtsLayer);
+            var atmsl = ArcGISDynamicMapServiceLayer("https://apaasgis-zw.wodcloud.com/server/rest/services/GZ_LYJQZTT/MapServer");
+            map.addLayer(atmsl);
+        });
+    </script>
+</head>
+
+<body>
+    <div id="map"></div>
+</body>
+
+</html>
\ No newline at end of file

static/view/demo/page-2d_base_loadSuperMap4.x.html

+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
+    <title>WMTS地图北斗服务4.x</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/mapsamples/static/js/jquery-3.3.1.min.js"></script>
+    <script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
+    <script>
+        require([
+            "esri/Map",
+            "esri/views/MapView",
+            "esri/layers/WebTileLayer",
+            "esri/layers/support/TileInfo",
+            "esri/layers/MapImageLayer",
+            "esri/geometry/SpatialReference",
+            "esri/widgets/DistanceMeasurement2D",
+            "esri/widgets/AreaMeasurement2D",
+            "esri/Graphic",
+            "esri/layers/GraphicsLayer",
+            "esri/geometry/Point",
+            "esri/geometry/SpatialReference",
+            "esri/symbols/PictureMarkerSymbol",
+            "dojo/domReady!"
+        ], function (Map, MapView, WebTileLayer, TileInfo, MapImageLayer, SpatialReference, DistanceMeasurement2D, AreaMeasurement2D, Graphic, GraphicsLayer, Point, SpatialReference, PictureMarkerSymbol) {
+            var tileInfo = new TileInfo({
+                "dpi": 96,
+                "format": "image/png",
+                "compressionQuality": 0,
+                "spatialReference": new SpatialReference(4326),
+                "rows": 256,
+                "cols": 256,
+                "origin": {
+                    "x": -180,
+                    "y": 90
+                },
+                "lods": [
+                    { "level": "0", "scale": 295829355.45, "resolution": 0.703125 },
+                    { "level": "1", "scale": 147914677.725, "resolution": 0.3515625 },
+                    { "level": "2", "scale": 73957338.8625, "resolution": 0.17578125 },
+                    { "level": "3", "scale": 36978669.43125, "resolution": 0.087890625 },
+                    { "level": "4", "scale": 18489334.715625, "resolution": 0.0439453125 },
+                    { "level": "5", "scale": 9244667.3578125, "resolution": 0.02197265625 },
+                    { "level": "6", "scale": 4622333.67890625, "resolution": 0.010986328125 },
+                    { "level": "7", "scale": 2311166.83945312, "resolution": 0.0054931640625 },
+                    { "level": "8", "scale": 1155583.41972656, "resolution": 0.00274658203125 },
+                    { "level": "9", "scale": 577791.709863281, "resolution": 0.001373291015625 },
+                    { "level": "10", "scale": 288895.8549316406, "resolution": 6.866455078125E-4 },
+                    { "level": "11", "scale": 144447.9274658203, "resolution": 3.4332275390625E-4 },
+                    { "level": "12", "scale": 4508.935440959931, "resolution": 1.71661376953125E-4 },
+                    { "level": "13", "scale": 36111.98186645508, "resolution": 8.58306884765625E-5 },
+                    { "level": "14", "scale": 18055.99093322754, "resolution": 4.291534423828125E-5 },
+                    { "level": "15", "scale": 9027.99546661377, "resolution": 2.1457672119140625E-5 },
+                    { "level": "16", "scale": 4513.997733306885, "resolution": 1.0728836059570312E-5 },
+                    { "level": "17", "scale": 2256.9988666534423, "resolution": 5.364418029785156E-6 },
+                    { "level": "18", "scale": 1128.4994333267211, "resolution": 2.682209014892578E-6 },
+                    { "level": "19", "scale": 564.2497166633606, "resolution": 1.341104507446289E-6 }
+                ]
+            });
+
+            var layer = new WebTileLayer(
+                {
+                    // urlTemplate:"http://jgsw.gy.wodcloud.com/iserver/services/map-guizhou/wmts-china/guizhou/default/ChinaPublicServices_guizhou/{level}/{row}/{col}.png",
+                    urlTemplate: "http://jgsw.gy.wodcloud.com/iserver/services/map-guizhou/wmts-china?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=guizhou&STYLE=default&FORMAT=image/png&TILEMATRIXSET=ChinaPublicServices_guizhou&tileMatrix={level}&tileRow={row}&tileCol={col}",
+                    tileInfo: tileInfo,
+                    spatialReference: new SpatialReference(4326),
+                }
+
+            );
+            var url = "https://apaas.wodcloud.com/mapsamples/static/data/JZD_CGCS2000_GK_108_3.json"
+            // var url = "../../data/JZD_CGCS2000_BEIDOU.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 imgaeURL = require("../../../static/images/marker-yellow.png");
+                        // var symbol = new PictureMarkerSymbol(imgaeURL,26, 37);
+                        var attr = {
+                            "name": reportor,
+                            "happenedTime": happenedTime,
+                            "happenedAddress": happenedAddress,
+                            "detail": description
+                        };
+                        var graphic = new Graphic(pt, symbol, attr);
+                        footprintlayer.add(graphic);
+                    }
+                }
+            }
+            // 创建地图
+            var map = new Map();
+            map.add(layer);
+            //map.add(footprintlayer);
+            // 创建二维地图
+            var view = new MapView({
+                container: "viewDiv",
+                map: map,
+                center: [106.72, 26.585],
+                zoom: 10,
+                constraints: {
+                    lods: tileInfo.lods,
+                    snapToZoom: true
+                },
+            });
+
+            // var ml = new MapImageLayer({
+            //     url: "http://apaasgis-zw.wodcloud.com/server/rest/services/GZ_LYJQZTT/MapServer",
+            //     spatialReference: new SpatialReference(4326),
+            // })
+            // map.add(ml);
+
+            var measurementWidget = new DistanceMeasurement2D({
+                view: view
+            });
+            view.ui.add(measurementWidget, "top-right");
+        });
+    </script>
+</head>
+
+<body>
+    <div id="viewDiv"></div>
+</body>
+
+</html>
\ No newline at end of file

static/view/demo/page-2d_base_map.html

+<!DOCTYPE html>
+<html>
+    
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
+    <title>2D Base Map</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/api_4.x/init.js"></script>
+    <script>
+        require([
+            "esri/Map", 
+            "esri/views/MapView"
+        ], function(Map, MapView) {
+            var map = new Map({
+                basemap: "streets"
+            });
+ 
+            var view = new MapView({
+                container: "viewDiv",
+                map: map,
+                zoom: 4,
+                center: [108.3, 33.9]
+            });
+        });
+    </script>
+</head>
+<body>
+    <div id="viewDiv"></div>
+</body>
+
+</html>
\ No newline at end of file

static/view/demo/page-2d_base_popup.html

+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
+    <title>FindTask多图层查询__4.X(缩放到图层的方法已经写，但是没有缩放到图层，查询的原始数据的范围本身有问题)))</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>
+    <style>
+        html,
+        body,
+        #viewDiv {
+            padding: 0;
+            margin: 0;
+            height: 100%;
+            width: 100%;
+        }
+
+        #optionsDiv {
+            background-color: dimgray;
+            color: white;
+            padding: 5px;
+            width: 250px;
+        }
+
+        .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>
+    <script>
+        require([
+            "dojo/promise/all",
+            "esri/layers/WebTileLayer",
+            "esri/Map",
+            "esri/layers/MapImageLayer",
+            "esri/layers/FeatureLayer",
+            "esri/geometry/Point",
+            'esri/views/MapView',
+            "esri/Basemap",
+            "esri/symbols/SimpleMarkerSymbol",
+            "esri/symbols/SimpleLineSymbol",
+            "esri/symbols/SimpleFillSymbol",
+            "esri/layers/GraphicsLayer",
+            "esri/tasks/QueryTask",
+            "esri/tasks/support/Query",
+            "esri/tasks/FindTask",
+            "esri/tasks/support/FindParameters",
+            "dojo/dom"
+        ], function (all, WebTileLayer, Map, MapImageLayer, FeatureLayer, Point, MapView, Basemap, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, GraphicsLayer, QueryTask, Query, FindTask, FindParameters, dom) {
+            var tiandituBaseUrl = "http://{subDomain}.tianditu.gov.cn"; //天地图服务地址
+            var token = "174705aebfe31b79b3587279e211cb9a"; //天地图token
+            //矢量地图(球面墨卡托投影)
+            var tiledLayer = new WebTileLayer({
+                urlTemplate:
+                    tiandituBaseUrl + "/vec_w/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=vec&STYLE=default&FORMAT=tiles&TILEMATRIXSET=w&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=" + token,
+                subDomains:
+                    ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]
+            });
+            //矢量注记(球面墨卡托投影)
+            var tiledLayerAnno = new WebTileLayer({
+                urlTemplate:
+                    tiandituBaseUrl + "/cva_w/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=cva&STYLE=default&FORMAT=tiles&TILEMATRIXSET=w&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=" + token,
+                subDomains:
+                    ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]
+            });
+            // var map = new Map();
+            var tdtBasemap = new Basemap({
+                baseLayers: [tiledLayer, tiledLayerAnno],
+                title: "TDT Basemap",
+                id: "tdtBasemap",
+                spatialReference: {
+                    wkid: 4326
+                },
+            });
+            //叠加要查询的图层
+            mapserverUrl = "http://apaasgis.wodcloud.com/server/rest/services/ZJ_CX_ZZ/MapServer";
+            var mapLayer = new MapImageLayer({
+                url: mapserverUrl
+            });
+            var map = new Map({
+                basemap: tdtBasemap,
+                layers: [mapLayer]
+            });
+            //arcgisserver的View
+            var view = new MapView({
+                container: "viewDiv",
+                map: map,
+                center: [120.06176192500004, 30.996704835000003],
+                scale: 144285.93411071779
+            });
+
+            view.when(function () {
+                view.ui.add("optionsDiv", "top-right");
+                dom.byId("doSeach").addEventListener("click", findTaskExecute);
+            });
+
+            function findTaskExecute() {
+                var findTask = new FindTask({
+                    url: mapserverUrl
+                });
+                var allLayerIds = [1, 2, 3, 5, 10, 11, 12, 13];
+                var seachKey = dom.byId("stateName").value;
+                if (seachKey && seachKey != "") {
+                    var findTaskParameters = new FindParameters();
+                    findTaskParameters.returnGeometry = true;//是否返回几何数据
+                    findTaskParameters.contains = true; //接受模糊查询
+                    findTaskParameters.layerIds = allLayerIds;
+                    findTaskParameters.searchFields = ["NAME", "PCSXQMC", "JJXQMC", "LXMC"];//限定查询的字段，如果不指定此参数，则查询所有的字段
+                    findTaskParameters.searchText = seachKey;
+                    findTask
+                        .execute(findTaskParameters)
+                        .then((res) => {
+                            if (res) {
+                                //如果返回有值
+                                console.log(res);
+                                //对结果进行处理
+                                var featureSource = renderResult(res);
+                                resultsLayer.addMany(featureSource);
+                                //移动地图到结果处(按范围缩放)
+                                // var layer = new FeatureLayer({
+                                //     source: featureSource,  // autocast as a Collection of new Graphic()
+                                // });
+                                //view.goTo(resultsLayer.fullExtent);
+                                map.add(resultsLayer);
+                            } else {
+                                console.log("查询数据失败");
+                            }
+                        })
+                        .catch((error) => {
+                            console.log(error);
+                        });
+                }
+            }
+            //查询结果的样式文件
+            //点样式
+            var pointSymbol = new SimpleMarkerSymbol({
+                style: "circle",
+                color: "red",
+                size: "10"
+            });
+            //线样式
+            var polylineSymbol = new SimpleLineSymbol({
+                type: "simple-line",  // autocasts as new SimpleLineSymbol()
+                color: "lightblue",
+                width: "2px",
+                style: "short-dot"
+            });
+            //面样式
+            var polygonSymbol = new SimpleFillSymbol({
+                color: [255, 0, 0, 0.5]
+            });
+            //弹出层  点
+            var popupPointTemplate = {
+                title: "{名称}",
+                content: "<b>名称:</b> {名称}" + "<br> <b>地址:</b> {地址}"
+            };
+            //弹出层  线
+            var popupPolylineTemplate = {
+                title: "{名称}",
+                content: "<b>名称:</b> {JJXQMC}"
+            };
+            //弹出层  面
+            var popupPolygonTemplate = {
+                title: "{名称}",
+                content: "<b>名称:</b> {JJXQMC}"
+            };
+
+            //查询结果图层
+            var resultsLayer = new GraphicsLayer();
+            function compare(a, b) {
+                return a - b;
+            }
+            //渲染查询的结果
+            function renderResult(res) {
+                //清空上次查询
+                if (resultsLayer) {
+                    resultsLayer.removeAll();
+                }
+                var featureSource = [];
+                var extentArrayX = [];
+                var extentArrayY = [];
+                var pt;
+                if (res.results && res.results.length > 0) {
+                    for (var i = 0; i < res.results.length; i++) {
+                        var featureType = res.results[i].feature.geometry.type;
+                        var feature = res.results[i].feature;
+                        if (featureType == "point") {
+                            //点
+                            feature.symbol = pointSymbol;
+                            feature.popupTemplate = popupPointTemplate;
+                            //注释的代码是求extent的
+                            // extentArrayX.push(feature.geometry.x);
+                            // extentArrayY.push(feature.geometry.y);
+                            var x = res.results[i].feature.geometry.x;
+                            var y = res.results[i].feature.geometry.y;
+                            if (x > 100 && x < 120 && y > 20 && y < 30) {
+                                pt = new Point({
+                                    latitude: y,
+                                    longitude: x
+                                });
+                            }
+                            featureSource.push(feature);
+                        }
+                        else if (featureType == "polyline") {
+                            //线
+                            feature.symbol = polylineSymbol;
+                            feature.popupTemplate = popupPolylineTemplate;
+                            //注释的代码是求extent的
+                            // extentArrayX.push(feature.geometry.extent.xmin);
+                            // extentArrayX.push(feature.geometry.extent.xmax);
+                            // extentArrayY.push(feature.geometry.extent.ymin);
+                            // extentArrayY.push(feature.geometry.extent.ymax);
+                            var x = res.results[i].feature.geometry.extent.xmax;
+                            var y = res.results[i].feature.geometry.extent.ymax;
+                            featureSource.push(feature);
+                        } else if (featureType == "polygon") {
+                            //面
+                            feature.symbol = polygonSymbol;
+                            feature.popupTemplate = popupPolygonTemplate;
+                            //注释的代码是求extent的
+                            // extentArrayX.push(feature.geometry.extent.xmin);
+                            // extentArrayX.push(feature.geometry.extent.xmax);
+                            // extentArrayY.push(feature.geometry.extent.ymin);
+                            // extentArrayY.push(feature.geometry.extent.ymax);
+                            // pt = new Point({
+                            //     latitude: res.results[i].feature.geometry.extent.xmax,
+                            //     longitude: res.results[i].feature.geometry.extent.ymax
+                            // });
+                            featureSource.push(feature);
+                        }
+                    }
+                    //注释的代码是求extent的问题
+                    // extentArrayX.sort(compare);
+                    // extentArrayY.sort(compare);
+                    // var result = [extentArrayX[0], extentArrayY[0], extentArrayX[extentArrayX.length - 1], extentArrayY[extentArrayY.length - 1]]
+                    //缩放到图层
+                    view.goTo({
+                        target: pt,
+                        zoom: 14
+                    });
+                    return featureSource;  //本身就是一个FeatureLayer
+                } else {
+                    return null
+                }
+            }
+            //缩放至图层
+            function zoomToLayer(result) {
+                console.log(result)
+            }
+        });
+    </script>
+</head>
+
+<body>
+    <div id="viewDiv"></div>
+    <!-- <div class="esri-widget" id="optionsDiv">
+        <h2>查询名称</h2>
+        <input type="text" class="esri-widget" id="stateName" value="云岩">
+        <button class="esri-widget" id="doSeach">查询</button>
+        <br />
+    </div> -->
+</body>
+
+</html>
\ No newline at end of file

static/view/demo/page-2d_buffer_analysis.html

+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
+    <title>Buffer</title>
+
+
+    <link rel="stylesheet" href="https://apaas.wodcloud.com/api_3.x/esri/css/esri.css">
+    <!-- <scrip src="https://apaas.wodcloud.com/mapsamples/static/js/echarts.min.js"> -->
+    <style>
+        html,
+        body {
+            height: 100%;
+            width: 100%;
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
+        }
+
+        .mycharts {
+            background: #fff;
+            width: 400px;
+            position: absolute;
+            top: 0px;
+            right: 0px;
+            overflow-y: auto;
+            box-shadow: 0px 2px 20px -5px #1b8cf2;
+        }
+
+        .mycharts .chart_pie {
+            width: 400px;
+            height: 180px;
+        }
+
+        #leftPane {
+            color: #000;
+            width: 250px;
+            padding-bottom: 15px;
+        }
+
+        #map {
+            padding: 0;
+        }
+
+        .details {
+            font-size: 14px;
+            font-weight: 600;
+            padding-bottom: 20px;
+        }
+
+        button {
+            margin: 2px;
+            cursor: pointer;
+        }
+    </style>
+    <script src="https://apaas.wodcloud.com/api_3.x/init.js"></script>
+    <script>
+        var map, tb;
+
+        require(["dojo/dom",
+            "dojo/promise/all",
+            "dojo/_base/array",
+            "dojo/parser",
+            "dojo/query",
+            "dojo/on",
+            "esri/map",
+            "esri/layers/TileInfo",
+            "esri/layers/WebTiledLayer",
+            "esri/basemaps",
+            "esri/layers/ArcGISDynamicMapServiceLayer",
+            "esri/layers/FeatureLayer",
+            "https://apaas.wodcloud.com/mapsamples/static/js/echarts.min.js",
+            "esri/geometry/Point",
+            "esri/Color",
+            "esri/config",
+            "esri/graphic",
+            "esri/geometry/normalizeUtils",
+            "esri/tasks/GeometryService",
+            "esri/tasks/BufferParameters",
+            "esri/toolbars/draw",
+            "esri/symbols/SimpleMarkerSymbol",
+            "esri/symbols/SimpleLineSymbol",
+            "esri/symbols/SimpleFillSymbol",
+            "dijit/layout/BorderContainer",
+            "dijit/layout/ContentPane",
+            "esri/SpatialReference",
+            "dijit/form/Button",
+            "dojo/domReady!"
+        ],
+            function (dom, All, array, parser, query, on, Map, TileInfo, WebTiledLayer, esriBasemaps, ArcGISDynamicMapServiceLayer, FeatureLayer, echarts, Point, Color, esriConfig, Graphic, normalizeUtils, GeometryService, BufferParameters, Draw, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, SpatialReference) {
+                parser.parse();
+                esriConfig.defaults.geometryService = new GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
+                esriConfig.defaults.io.proxyUrl = "/proxy/";
+                esriConfig.defaults.io.alwaysUseProxy = false;
+                //Setup button click handlers
+                on(dom.byId("clearGraphics"), "click", function () {
+                    if (map) {
+                        map.graphics.clear();
+                    }
+                });
+                //click handler for the draw tool buttons
+                query(".tool").on("click", function (evt) {
+                    if (tb) {
+                        tb.activate(evt.target.id);
+                    }
+                });
+                // 在加载经纬度地图的时候我们需要使用 {subDomain}, {col}, {row}, {level}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别
+                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
+                });
+                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', 't5', 't6', 't7'],
+                    tileInfo: tileInfo
+                });
+                map = new Map('map', {
+                    /*地图中心点*/
+                    center: [106.720725933, 26.5453458492],
+                    //center: [12944641.344764, 3577008.310327],
+                    /*地图默认缩放等级*/
+                    zoom: 10,
+                    /*地图最大缩放等级*/
+                    maxZoom: 20,
+                    /*地图最小缩放等级*/
+                    minZoom: 2,
+                    /*关闭缩放按钮*/
+                    slider: false,
+                    /*关闭logo*/
+                    logo: false,
+                    spatialReference: {
+                        wkid: 4490
+                    },
+                });
+
+                // 通过瓦片形式加载天地图的
+                // 天地图根据投影分为两种：墨卡托和经纬度
+                // 设定瓦片信息，天地图经纬度地图的切片信息全部使用该信息设定
+                var tileInfo = new TileInfo({
+                    dpi: 90.71428571427429,
+                    rows: 256,
+                    cols: 256,
+                    compressionQuality: 0,
+                    origin: {
+                        x: -180,
+                        y: 90
+                    },
+                    spatialReference: {
+                        wkid: 4490
+                    },
+                    lods: [{
+                        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: 20,
+                        resolution: 1.341104507446289075e-006,
+                        scale: 563.616930119991375
+                    }]
+                });
+                // mapserverUrl = "https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer";
+                // var mapLayer = new MapImageLayer({
+                //     url: mapserverUrl
+                // });
+                var demographicsLayerURL = "https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer";
+                var demographicsLayerOptions = {
+                    "id": "demographicsLayer",
+                    "opacity": 0.8,
+                    "showAttribution": false
+                };
+                var demographicsLayer = new ArcGISDynamicMapServiceLayer(demographicsLayerURL, demographicsLayerOptions);
+                // map.addLayer(annomap);
+                map.addLayer(demographicsLayer);
+                // map.on("load", initToolbar);  //这一句一定得放在mapaddLayer前面（官网说法不准，应该是map初始化完成后就添加）
+                // map.addLayer(basemap);
+                // map.centerAndZoom(new Point({
+                //     x: 106.720725933,
+                //     y: 26.5453458492,
+                //     spatialReference: {
+                //         wkid: 4326
+                //     }
+                // }), 8);
+                function initToolbar(evtObj) {
+                    console.log("初始化工具");
+                    tb = new Draw(evtObj.map);
+                    tb.on("draw-end", doBuffer);
+                }
+
+                function doBuffer(evtObj) {
+                    tb.deactivate();
+                    var geometry = evtObj.geometry, symbol;
+                    switch (geometry.type) {
+                        case "point":
+                            symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 10, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 1), new Color([0, 255, 0, 0.25]));
+                            break;
+                        case "polyline":
+                            symbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([255, 0, 0]), 1);
+                            break;
+                        case "polygon":
+                            symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_NONE, new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT, new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25]));
+                            break;
+                    }
+                    var graphic = new Graphic(geometry, symbol);
+                    map.graphics.add(graphic);
+                    //setup the buffer parameters
+                    var params = new BufferParameters();
+                    params.distances = [dom.byId("distance").value];
+                    params.outSpatialReference = map.spatialReference;
+                    params.unit = GeometryService[dom.byId("unit").value];
+                    //normalize the geometry 
+                    normalizeUtils.normalizeCentralMeridian([geometry]).then(function (normalizedGeometries) {
+                        var normalizedGeometry = normalizedGeometries[0];
+                        if (normalizedGeometry.type === "polygon") {
+                            //if geometry is a polygon then simplify polygon.  This will make the user drawn polygon topologically correct.
+                            esriConfig.defaults.geometryService.simplify([normalizedGeometry], function (geometries) {
+                                params.geometries = geometries;
+                                esriConfig.defaults.geometryService.buffer(params, showBuffer);
+                            });
+                        } else {
+                            params.geometries = [normalizedGeometry];
+                            esriConfig.defaults.geometryService.buffer(params, showBuffer, showEror);
+                        }
+                    });
+                }
+                //错误打印
+                function showEror(e) {
+                    console.log("打出错误");
+                    console.log(e);
+                }
+                function showBuffer(bufferedGeometries) {
+                    // overlayAnalysis(bufferedGeometries);
+                    var symbol = new SimpleFillSymbol(
+                        SimpleFillSymbol.STYLE_SOLID,
+                        new SimpleLineSymbol(
+                            SimpleLineSymbol.STYLE_SOLID,
+                            new Color([255, 0, 0, 0.65]), 2
+                        ),
+                        new Color([255, 0, 0, 0.35])
+                    );
+                    array.forEach(bufferedGeometries, function (geometry) {
+                        var graphic = new Graphic(geometry, symbol);
+                        overlayAnalysis(geometry);
+                        map.graphics.add(graphic);
+                    });
+                }
+                //缓冲区叠加分析
+                function overlayAnalysis(geometry) {
+                    map.graphics.clear();//清除样式
+                    const query = {
+                        geometry: geometry,
+                        outFields: ["*"],
+                        returnGeometry: true
+                    };
+                    var searchLayer_1 = new FeatureLayer("https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer/1");
+                    var searchLayer_2 = new FeatureLayer("https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer/2");
+                    var searchLayer_3 = new FeatureLayer("https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer/3");
+                    var searchLayer_4 = new FeatureLayer("https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer/5");
+                    var searchLayer_5 = new FeatureLayer("https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer/10");
+                    var searchLayer_6 = new FeatureLayer("https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer/11");
+                    var searchLayer_7 = new FeatureLayer("https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer/12");
+                    var searchLayer_8 = new FeatureLayer("https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer/13");
+                    var searchLayers = [searchLayer_1, searchLayer_2, searchLayer_3, searchLayer_4, searchLayer_5, searchLayer_6, searchLayer_7, searchLayer_8];
+                    var echartsData = [];
+                    var searchRequest = [];
+                    if (searchLayers.length > 0) {
+                        for (var i = 0; i < searchLayers.length; i++) {
+                            // echartsData.push(searchLayers[i].title);
+                            searchRequest.push(searchLayers[i].queryFeatures(query));
+                        }
+                    }
+                    var titleArray = ["公安机构", "旅馆", "网吧终端", "省道", "交警辖区", "派出所辖区", "分局辖区", "市局辖区"];
+                    All(searchRequest).then(res => {
+                        if (res.length > 0) {
+                            for (var i = 0; i < res.length; i++) {
+                                //res[i].title = echartsData[i];
+                                var charData = { "name": "", "value": 0 };
+                                charData.name = titleArray[i];
+                                charData.value = res[i].features.length;
+                                echartsData.push(charData);
+                                console.log("输出echartsData");
+                                //console.log(echartsData);
+                                renderResult(res[i].features)
+                            }
+                            //缩放到缓冲区的范围
+                            //echart的结果
+                            initEChartPie(echartsData);
+                        }
+                    });
+                }
+                //渲染结果
+                function renderResult(data) {
+                    //console.log(data);
+
+                    if (data.length > 0) {
+                        for (var j = 0; j < data.length; j++) {
+                            if (data[j]._layer.geometryType == "esriGeometryPoint") {
+                                data[j].setSymbol(
+                                    new SimpleMarkerSymbol()
+                                        .setColor(new Color([255, 24, 156, 1]))
+                                        .setSize("5")
+                                );
+                                map.graphics.add(data[j]);
+                            }
+                            if (data[j]._layer.geometryType == "esriGeometryPolyline") {
+                                data[j].setSymbol(
+                                    new SimpleLineSymbol({
+                                        type: "simple-line",
+                                        color: "lightblue",
+                                        width: "2px",
+                                        style: "short-dot"
+                                    })
+                                );
+                                map.graphics.add(data[j]);
+                            }
+                            if (data[j]._layer.geometryType == "esriGeometryPolygon") {
+                                data[j].setSymbol(
+                                    new SimpleFillSymbol({
+                                        color: [255, 0, 0, 0.4]
+                                    })
+                                );
+                                map.graphics.add(data[j]);
+                            }
+                        }
+                    }
+
+                }
+                function callbackResult(res) {
+                    console.log("打印输出");
+                    console.log(res);
+                }
+                function showError(e) {
+                    console.log(e);
+                }
+                //初始化echarts表
+                function initEChartPie(dataGov) {
+                    console.log("进入echarts方法111");
+                    var chart_pie_gov = echarts.init(document.getElementById("chart_pie"));
+                    var option_gov = {
+                        tooltip: {
+                            trigger: 'item',
+                            formatter: "{a} <br/>{b}: {c} ({d}%)"
+                        },
+                        series: [
+                            {
+                                name: '查询结果统计',
+                                type: 'pie',
+                                radius: ['50%', '70%'],
+                                label: {
+                                    normal: {
+                                        show: true,
+                                        formatter: "{b}:{c} \n {d}%"
+                                    }
+                                },
+                                data: dataGov
+                            }
+                        ]
+                    };
+                    chart_pie_gov.setOption(option_gov);
+                };
+                window.onload = function () {
+                    map.on("load", initToolbar);
+                }
+            });
+    </script>
+
+</head>
+
+<body class="claro">
+    <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="gutters:'true', design:'sidebar'"
+        style="width:100%;height:100%;">
+
+        <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
+        </div>
+
+        <div id="leftPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'">
+            <div class="details">选择缓冲区类型</div>
+            <button type="button" class="tool" id="point">点</button>
+            <button type="button" class="tool" id="polyline">线</button>
+            <br />
+            <button type="button" class="tool" id="polygon">面</button>
+            <br />
+            <hr />
+            <div><b>缓冲参数</b></div>
+            距离: <input type="text" id="distance" size="5" value="0.1" />
+            <select id="unit" style="width:100px;">
+                <option value="UNIT_DEGREE">度</option>
+                <option value="UNIT_STATUTE_MILE">英里</option>
+                <option value="UNIT_FOOT">英尺</option>
+                <option value="UNIT_KILOMETER">公里</option>
+                <option value="UNIT_METER">米</option>
+                <option value="UNIT_NAUTICAL_MILE">海里</option>
+
+            </select><br />
+            <button type="button" id="clearGraphics">清除缓冲范围</button>
+        </div>
+    </div>
+    <div class="mycharts" id="mycharts">
+        <div class="chart_pie" id="chart_pie"></div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file

static/view/demo/page-2d_csvlayer.html

+<!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>
+    <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/api_4.x/init.js"></script>
+
+    <script>
+        require([
+            "esri/Map",
+            "esri/Basemap",
+            "esri/views/MapView",
+            "esri/layers/WebTileLayer",
+            "esri/layers/support/TileInfo",
+            "esri/layers/CSVLayer",
+            "esri/renderers/SimpleRenderer",
+            "esri/symbols/SimpleMarkerSymbol",
+            "esri/Color"
+        ], function (Map, Basemap, MapView, WebTileLayer, TileInfo, CSVLayer, SimpleRenderer, SimpleMarkerSymbol, Color) {
+            // 通过瓦片形式加载天地图的
+            // 天地图根据投影分为两种：墨卡托和经纬度
+            // 设定瓦片信息，天地图经纬度地图的切片信息全部使用该信息设定
+            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
+                },
+            });
+           
+            // csv文件的url
+            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"
+                }
+            });
+            //csv图层的渲染配置
+            csvLayer.renderer = {
+                type: "simple",  
+                symbol: {
+                    type: "simple-marker", 
+                    size: 8,
+                    color: [245,125,33],
+                    outline: {  
+                        width: 1,
+                        color: "white"
+                    }
+                }
+            };
+
+            // 创建地图数据
+             var map = new Map({
+                basemap: tdtBasemap,
+                layers: [csvLayer]
+            });
+            // 创建二维地图视图
+            var view = new MapView({
+                map: map,
+                container: "viewDiv",
+                spatialReference: {
+                    wkid: 4326
+                },
+                zoom: 4,
+                constraints: {
+                    lods: tileInfo.lods,
+                    snapToZoom: true
+                },
+                center: [108.3, 33.9]
+            });
+        });
+    </script>
+</head>
+
+<body>
+    <div id="viewDiv"></div>
+</body>
+
+</html>
\ No newline at end of file

static/view/demo/page-2d_featureEditor3.x.html

+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
+    <title>3.x编辑数据</title>
+    <link rel="stylesheet" href="https://apaas.wodcloud.com/api_3.x/esri/css/esri.css">
+    <link rel="stylesheet" href="https://apaas.wodcloud.com/api_3.x/dijit/themes/claro/claro.css">
+    <link rel="stylesheet" href="https://apaas.wodcloud.com/api_3.x/esri/css/esri.css">
+    <style>
+        html,
+        body {
+            height: 100%;
+            width: 100%;
+            margin: 0;
+            overflow: hidden;
+        }
+
+        #map {
+            padding: 0;
+        }
+
+        #header {
+            font-size: 1.1em;
+            font-family: sans-serif;
+            padding-left: 1em;
+            padding-top: 4px;
+            color: #660000;
+        }
+
+        .templatePicker {
+            border: none;
+        }
+
+        .dj_ie .infowindow .window .top .right .user .content {
+            position: relative;
+        }
+
+        .dj_ie .simpleInfoWindow .content {
+            position: relative;
+        }
+    </style>
+    <script src="https://apaas.wodcloud.com/api_3.x/init.js"></script>
+    <script>
+        require(["esri/map",
+            "esri/tasks/GeometryService",
+            "esri/layers/ArcGISTiledMapServiceLayer",
+            "esri/layers/FeatureLayer",
+            "esri/Color",
+            "esri/symbols/SimpleMarkerSymbol",
+            "esri/symbols/SimpleLineSymbol",
+            "esri/dijit/editing/Editor",
+            "esri/dijit/editing/TemplatePicker",
+            "esri/config",
+            "dojo/i18n!esri/nls/jsapi",
+            "dojo/_base/array", "dojo/parser", "dojo/keys",
+            "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
+            "dojo/domReady!"], function (Map, GeometryService,
+                ArcGISTiledMapServiceLayer, FeatureLayer,
+                Color, SimpleMarkerSymbol, SimpleLineSymbol,
+                Editor, TemplatePicker,
+                esriConfig, jsapiBundle,
+                arrayUtils, parser, keys) {
+
+
+
+            parser.parse();
+
+            jsapiBundle.toolbars.draw.start = jsapiBundle.toolbars.draw.start + "<br>Press <b>ALT</b> to enable snapping";
+
+            esriConfig.defaults.io.proxyUrl = "/proxy/";
+
+            esriConfig.defaults.geometryService = new GeometryService("http://apaas.mesh.gat.gz/arcgis/rest/services/Utilities/Geometry/GeometryServer");
+
+            map = new Map("map", {
+                basemap: "streets",
+                center: [120.0450645, 31.00552071],
+                zoom: 10
+            });
+
+            map.on("layers-add-result", initEditor);
+
+            //add boundaries and place names
+            // var labels = new ArcGISTiledMapServiceLayer("https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer");
+            // map.addLayer(labels);
+
+            var responsePoints = new FeatureLayer("https://arcgisserver.wodcloud.com/arcgis/rest/services/guizhoutestTwo/FeatureServer/0", {
+                className: "线",
+                mode: FeatureLayer.MODE_ONDEMAND,
+                showAttribution: false,
+                showLabels: true,
+                outFields: ['*']
+            });
+
+            var responsePolys = new FeatureLayer("https://arcgisserver.wodcloud.com/arcgis/rest/services/guizhoutestTwo/FeatureServer/2", {
+                className: "网格",
+                mode: FeatureLayer.MODE_ONDEMAND,
+                showAttribution: false,
+                showLabels: true,
+                outFields: ['*']
+            });
+
+            map.addLayers([responsePolys, responsePoints]);
+
+            function initEditor(evt) {
+                var templateLayers = arrayUtils.map(evt.layers, function (result) {
+                    return result.layer;
+                });
+                var templatePicker = new TemplatePicker({
+                    featureLayers: templateLayers,
+                    grouping: true,
+                    rows: "auto",
+                    columns: 3
+                }, "templateDiv");
+                templatePicker.startup();
+
+                var layers = arrayUtils.map(evt.layers, function (result) {
+                    return { featureLayer: result.layer };
+                });
+                var settings = {
+                    map: map,
+                    templatePicker: templatePicker,
+                    layerInfos: layers,
+                    toolbarVisible: true,
+                    toolbarOptions: {
+                        reshapeVisible: true,
+                        mergeVisible: true,
+                        cutVisible: true,
+                    },
+                    createOptions: {
+                        polylineDrawTools: [Editor.CREATE_TOOL_FREEHAND_POLYLINE],
+                        polygonDrawTools: [Editor.CREATE_TOOL_FREEHAND_POLYGON,
+                        Editor.EDIT_VERTICES,
+                        Editor.CREATE_TOOL_CIRCLE,
+                        Editor.CREATE_TOOL_TRIANGLE,
+                        Editor.CREATE_TOOL_RECTANGLE,
+                        ]
+                    }
+                };
+
+                var params = { settings: settings };
+                var myEditor = new Editor(params, 'editorDiv');
+                //define snapping options
+                var symbol = new SimpleMarkerSymbol(
+                    SimpleMarkerSymbol.STYLE_CROSS,
+                    15,
+                    new SimpleLineSymbol(
+                        SimpleLineSymbol.STYLE_SOLID,
+                        new Color([255, 0, 0, 0.5]),
+                        5
+                    ),
+                    null
+                );
+                map.enableSnapping({
+                    snapPointSymbol: symbol,
+                    tolerance: 20,
+                    snapKey: keys.ALT
+                });
+
+                myEditor.startup();
+            }
+        });
+    </script>
+</head>
+
+<body class="claro">
+    <div id="main" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'"
+        style="width:100%;height:100%;">
+        <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'"
+            style="width: 300px;overflow:hidden;">
+            <div id="templateDiv"></div>
+            <div id="editorDiv"></div>
+        </div>
+        <div data-dojo-type="dijit/layout/ContentPane" id="map" data-dojo-props="region:'center'"></div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file

static/view/demo/page-2d_featureEditor3.x_guizhou.html

+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
+    <title>3.x编辑数据—贵州</title>
+    <link rel="stylesheet" href="http://apaas.mesh.gat.gz/api_3.x/esri/css/esri.css">
+    <link rel="stylesheet" href="http://apaas.mesh.gat.gz/api_3.x/dijit/themes/claro/claro.css">
+    <link rel="stylesheet" href="http://apaas.mesh.gat.gz/api_3.x/esri/css/esri.css">
+    <style>
+        html,
+        body {
+            height: 100%;
+            width: 100%;
+            margin: 0;
+            overflow: hidden;
+        }
+
+        #map {
+            padding: 0;
+        }
+
+        #header {
+            font-size: 1.1em;
+            font-family: sans-serif;
+            padding-left: 1em;
+            padding-top: 4px;
+            color: #660000;
+        }
+
+        .templatePicker {
+            border: none;
+        }
+
+        .dj_ie .infowindow .window .top .right .user .content {
+            position: relative;
+        }
+
+        .dj_ie .simpleInfoWindow .content {
+            position: relative;
+        }
+    </style>
+    <script src="http://apaas.mesh.gat.gz/api_3.x/init.js"></script>
+    <script>
+        // 设定瓦片信息
+        var lods = [];
+        var minScale = 559082264.0287178;
+        var maxResolution = 1.40625;
+        var tempScale = minScale;
+        var tempResolution = maxResolution;
+        for (let i = 0; i <= 18; i++) {
+            let lod = {
+                "level": i,
+                "resolution": tempResolution,
+                "scale": tempScale
+            }
+            if (i >= 0) {
+                lods.push(lod);
+            }
+            tempScale = tempScale / 2;
+            tempResolution = tempResolution / 2;
+        }
+        require(["esri/map",
+            "esri/tasks/GeometryService",
+            "esri/layers/ArcGISTiledMapServiceLayer",
+            "esri/layers/FeatureLayer",
+            "esri/Color",
+            "esri/symbols/SimpleMarkerSymbol",
+            "esri/symbols/SimpleLineSymbol",
+            "esri/dijit/editing/Editor",
+            "esri/dijit/editing/TemplatePicker",
+            "esri/config",
+            "dojo/i18n!esri/nls/jsapi",
+            "dojo/_base/array", "dojo/parser", "dojo/keys",
+            "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
+            "dojo/domReady!"], function (Map, GeometryService,
+                ArcGISTiledMapServiceLayer, FeatureLayer,
+                Color, SimpleMarkerSymbol, SimpleLineSymbol,
+                Editor, TemplatePicker,
+                esriConfig, jsapiBundle,
+                arrayUtils, parser, keys) {
+            //原先的配置
+            parser.parse();
+            jsapiBundle.toolbars.draw.start = jsapiBundle.toolbars.draw.start + "<br>Press <b>ALT</b> to enable snapping";
+            esriConfig.defaults.io.proxyUrl = "/proxy/";
+            esriConfig.defaults.geometryService = new GeometryService("hhttps://arcgisserver.wodcloud.com/arcgis/rest/services/Utilities/Geometry/GeometryServer");
+            // map = new Map("map", {
+            //     basemap: "streets",
+            //     center: [120.0450645, 31.00552071],
+            //     zoom: 10
+            // });
+
+            //加载顺丰底图
+            var map = new Map("map", {
+                /*地图中心点*/
+                center: [106.720725933, 26.5453458492],
+                /*地图默认缩放等级*/
+                zoom: 8,
+                /*地图最大缩放等级*/
+                maxZoom: 18,
+                /*地图最小缩放等级*/
+                minZoom: 3,
+                /*关闭缩放按钮*/
+                // slider: false,
+                /*关闭logo*/
+                logo: false
+            });
+
+            // 设定瓦片信息，aPaaS底图的切片信息全部使用该信息设定
+            var tileInfo = new TileInfo({
+                dpi: 90.71428571427429,
+                rows: 256,
+                cols: 256,
+                compressionQuality: 0,
+                origin: {
+                    x: -180,
+                    y: 90
+                },
+                spatialReference: {
+                    wkid: 4326
+                },
+                lods: lods
+            });
+
+            // aPaaS底图
+            // 在加载经纬度地图的时候我们需要使用 {col}, {row}, {level}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别
+            //                              http://apaas.mesh.gat.gz/guizhou/wmts?token=2ce94f67e58faa24beb7cb8a09780552&service=WMTS&request=GetTile&VERSION=1.0.0&LAYER=sfmap&STYLE=default&TILEMATRIXSET=c&FORMAT=image/png&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}
+            var tiledlayer = WebTiledLayer("http://apaas.mesh.gat.gz/guizhou/wmts?token=2ce94f67e58faa24beb7cb8a09780552&service=WMTS&request=GetTile&VERSION=1.0.0&LAYER=sfmap&STYLE=default&TILEMATRIXSET=c&FORMAT=image/png&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}", {
+                tileInfo: tileInfo
+            });
+            map.addLayer(tiledlayer);
+            map.on("layers-add-result", initEditor);
+            //add boundaries and place names
+            // var labels = new ArcGISTiledMapServiceLayer("https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer");
+            // map.addLayer(labels);
+
+            var responseLines = new FeatureLayer("https://arcgisserver.wodcloud.com/arcgis/rest/services/guizhoutestTwo/FeatureServer/0", {
+                className: "线",
+                mode: FeatureLayer.MODE_ONDEMAND,
+                showAttribution: false,
+                showLabels: true,
+                outFields: ['*']
+            });
+
+            var responsePolys = new FeatureLayer("https://arcgisserver.wodcloud.com/arcgis/rest/services/guizhoutestTwo/FeatureServer/2", {
+                className: "网格",
+                mode: FeatureLayer.MODE_ONDEMAND,
+                showAttribution: false,
+                showLabels: true,
+                outFields: ['*']
+            });
+
+            map.addLayers([responsePolys, responseLines]);
+
+            function initEditor(evt) {
+                var templateLayers = arrayUtils.map(evt.layers, function (result) {
+                    return result.layer;
+                });
+                var templatePicker = new TemplatePicker({
+                    featureLayers: templateLayers,
+                    grouping: true,
+                    rows: "auto",
+                    columns: 3
+                }, "templateDiv");
+                templatePicker.startup();
+
+                var layers = arrayUtils.map(evt.layers, function (result) {
+                    return { featureLayer: result.layer };
+                });
+                var settings = {
+                    map: map,
+                    templatePicker: templatePicker,
+                    layerInfos: layers,
+                    toolbarVisible: true,
+                    toolbarOptions: {
+                        reshapeVisible: true,
+                        mergeVisible: true,
+                        cutVisible: true,
+                    },
+                    createOptions: {
+                        polylineDrawTools: [Editor.CREATE_TOOL_FREEHAND_POLYLINE],
+                        polygonDrawTools: [Editor.CREATE_TOOL_FREEHAND_POLYGON,
+                        Editor.EDIT_VERTICES,
+                        Editor.CREATE_TOOL_CIRCLE,
+                        Editor.CREATE_TOOL_TRIANGLE,
+                        Editor.CREATE_TOOL_RECTANGLE,
+                        ]
+                    }
+                };
+
+                var params = { settings: settings };
+                var myEditor = new Editor(params, 'editorDiv');
+                //define snapping options
+                var symbol = new SimpleMarkerSymbol(
+                    SimpleMarkerSymbol.STYLE_CROSS,
+                    15,
+                    new SimpleLineSymbol(
+                        SimpleLineSymbol.STYLE_SOLID,
+                        new Color([255, 0, 0, 0.5]),
+                        5
+                    ),
+                    null
+                );
+                map.enableSnapping({
+                    snapPointSymbol: symbol,
+                    tolerance: 20,
+                    snapKey: keys.ALT
+                });
+
+                myEditor.startup();
+            }
+        });
+    </script>
+</head>
+
+<body class="claro">
+    <div id="main" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'"
+        style="width:100%;height:100%;">
+        <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'"
+            style="width: 300px;overflow:hidden;">
+            <div id="templateDiv"></div>
+            <div id="editorDiv"></div>
+        </div>
+        <div data-dojo-type="dijit/layout/ContentPane" id="map" data-dojo-props="region:'center'"></div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file

static/view/demo/page-2d_featureEditor3.x_two.html

+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
+    <title>Landuse</title>
+
+    <link rel="stylesheet" href="https://js.arcgis.com/3.30/dijit/themes/claro/claro.css">
+    <link rel="stylesheet" href="https://js.arcgis.com/3.30/esri/css/esri.css">
+    <style>
+        html,
+        body {
+            height: 100%;
+            width: 100%;
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
+        }
+
+        #header {
+            border: solid 2px #462d44;
+            background: #fff;
+            color: #444;
+            -moz-border-radius: 4px;
+            border-radius: 4px;
+            font-family: sans-serif;
+            font-size: 1.1em;
+            padding-left: 20px;
+        }
+
+        #map {
+            padding: 1px;
+            border: solid 2px #444;
+            -moz-border-radius: 4px;
+            border-radius: 4px;
+        }
+
+        #rightPane {
+            border: none;
+            padding: 0;
+            width: 228px;
+        }
+
+        .templatePicker {
+            border: solid 2px #444;
+        }
+    </style>
+
+    <script src="https://js.arcgis.com/3.30/"></script>
+    <script>
+        var map;
+        require([
+            "esri/map",
+            "esri/toolbars/draw",
+            "esri/toolbars/edit",
+            "esri/graphic",
+            "esri/config",
+            "esri/layers/FeatureLayer",
+            "esri/symbols/SimpleMarkerSymbol",
+            "esri/symbols/SimpleLineSymbol",
+            "esri/symbols/SimpleFillSymbol",
+            "esri/dijit/editing/TemplatePicker",
+            "dojo/_base/array",
+            "dojo/_base/event",
+            "dojo/_base/lang",
+            "dojo/parser",
+            "dijit/registry",
+            "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
+            "dijit/form/Button", "dojo/domReady!"
+        ], function (
+            Map, Draw, Edit, Graphic, esriConfig,
+            FeatureLayer,
+            SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,
+            TemplatePicker,
+            arrayUtils, event, lang, parser, registry
+        ) {
+            parser.parse();
+            // refer to "Using the Proxy Page" for more information:  https://developers.arcgis.com/javascript/3/jshelp/ags_proxy.html
+            esriConfig.defaults.io.proxyUrl = "/proxy/";
+            // This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications.
+            esriConfig.defaults.geometryService = new esri.tasks.GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
+
+            map = new Map("map", {
+                basemap: "streets",
+                center: [120.0450645, 31.00552071],
+                zoom: 10
+            });
+
+            map.on("layers-add-result", initEditing);
+
+            var landusePointLayer = new FeatureLayer("https://arcgisserver.wodcloud.com/arcgis/rest/services/guizhoutestTwo/FeatureServer/0", {
+                mode: FeatureLayer.MODE_SNAPSHOT,
+                outFields: ["*"]
+            });
+            var landuseLineLayer = new FeatureLayer("https://arcgisserver.wodcloud.com/arcgis/rest/services/guizhoutestTwo/FeatureServer/1", {
+                mode: FeatureLayer.MODE_SNAPSHOT,
+                outFields: ["*"]
+            });
+            var landusePolygonLayer = new FeatureLayer("https://arcgisserver.wodcloud.com/arcgis/rest/services/guizhoutestTwo/FeatureServer/2", {
+                mode: FeatureLayer.MODE_SNAPSHOT,
+                outFields: ["*"]
+            });
+
+            map.addLayers([landusePolygonLayer, landuseLineLayer, landusePointLayer]);
+
+            function initEditing(evt) {
+                console.log("initEditing", evt);
+                // var map = this;
+                var currentLayer = null;
+                var layers = arrayUtils.map(evt.layers, function (result) {
+                    return result.layer;
+                });
+                console.log("layers", layers);
+
+                var editToolbar = new Edit(map);
+                editToolbar.on("deactivate", function (evt) {
+                    currentLayer.applyEdits(null, [evt.graphic], null);
+                });
+
+                arrayUtils.forEach(layers, function (layer) {
+                    var editingEnabled = false;
+                    layer.on("dbl-click", function (evt) {
+                        event.stop(evt);
+                        if (editingEnabled === false) {
+                            editingEnabled = true;
+                            editToolbar.activate(Edit.EDIT_VERTICES, evt.graphic);
+                        } else {
+                            currentLayer = this;
+                            editToolbar.deactivate();
+                            editingEnabled = false;
+                        }
+                    });
+
+                    layer.on("click", function (evt) {
+                        event.stop(evt);
+                        if (evt.ctrlKey === true || evt.metaKey === true) {  //delete feature if ctrl key is depressed
+                            layer.applyEdits(null, null, [evt.graphic]);
+                            currentLayer = this;
+                            editToolbar.deactivate();
+                            editingEnabled = false;
+                        }
+                    });
+                });
+
+                var templatePicker = new TemplatePicker({
+                    featureLayers: layers,
+                    rows: "auto",
+                    columns: 2,
+                    grouping: true,
+                    style: "height: auto; overflow: auto;"
+                }, "templatePickerDiv");
+
+                templatePicker.startup();
+
+                var drawToolbar = new Draw(map);
+
+                var selectedTemplate;
+                templatePicker.on("selection-change", function () {
+                    if (templatePicker.getSelected()) {
+                        selectedTemplate = templatePicker.getSelected();
+                    }
+                    switch (selectedTemplate.featureLayer.geometryType) {
+                        case "esriGeometryPoint":
+                            drawToolbar.activate(Draw.POINT);
+                            break;
+                        case "esriGeometryPolyline":
+                            drawToolbar.activate(Draw.POLYLINE);
+                            break;
+                        case "esriGeometryPolygon":
+                            drawToolbar.activate(Draw.POLYGON);
+                            break;
+                    }
+                });
+
+                drawToolbar.on("draw-end", function (evt) {
+                    drawToolbar.deactivate();
+                    editToolbar.deactivate();
+                    var newAttributes = lang.mixin({}, selectedTemplate.template.prototype.attributes);
+                    var newGraphic = new Graphic(evt.geometry, null, newAttributes);
+                    selectedTemplate.featureLayer.applyEdits([newGraphic], null, null);
+                });
+            }
+        });
+    </script>
+</head>
+
+<body class="claro">
+    <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="gutters:true, design:'headline'"
+        style="width:100%;height:100%;">
+        <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
+        <div id="rightPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">
+            <div id="templatePickerDiv"></div>
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file

static/view/demo/page-2d_findTaskLayers.html

+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
+    <title>FindTask多图层查询__4.X(缩放到图层的方法已经写，但是没有缩放到图层，查询的原始数据的范围本身有问题)))</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>
+    <style>
+        html,
+        body,
+        #viewDiv {
+            padding: 0;
+            margin: 0;
+            height: 100%;
+            width: 100%;
+        }
+
+        #optionsDiv {
+            background-color: dimgray;
+            color: white;
+            padding: 5px;
+            width: 250px;
+        }
+
+        .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>
+    <script>
+        require([
+            "dojo/promise/all",
+            "esri/layers/WebTileLayer",
+            "esri/Map",
+            "esri/layers/MapImageLayer",
+            "esri/layers/FeatureLayer",
+            "esri/geometry/Point",
+            'esri/views/MapView',
+            "esri/Basemap",
+            "esri/symbols/SimpleMarkerSymbol",
+            "esri/symbols/SimpleLineSymbol",
+            "esri/symbols/SimpleFillSymbol",
+            "esri/layers/GraphicsLayer",
+            "esri/tasks/QueryTask",
+            "esri/tasks/support/Query",
+            "esri/tasks/FindTask",
+            "esri/tasks/support/FindParameters",
+            "dojo/dom"
+        ], function (all, WebTileLayer, Map, MapImageLayer, FeatureLayer, Point, MapView, Basemap, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, GraphicsLayer, QueryTask, Query, FindTask, FindParameters, dom) {
+            var tiandituBaseUrl = "http://{subDomain}.tianditu.gov.cn"; //天地图服务地址
+            var token = "174705aebfe31b79b3587279e211cb9a"; //天地图token
+            //矢量地图(球面墨卡托投影)
+            var tiledLayer = new WebTileLayer({
+                urlTemplate:
+                    tiandituBaseUrl + "/vec_w/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=vec&STYLE=default&FORMAT=tiles&TILEMATRIXSET=w&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=" + token,
+                subDomains:
+                    ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]
+            });
+            //矢量注记(球面墨卡托投影)
+            var tiledLayerAnno = new WebTileLayer({
+                urlTemplate:
+                    tiandituBaseUrl + "/cva_w/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=cva&STYLE=default&FORMAT=tiles&TILEMATRIXSET=w&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=" + token,
+                subDomains:
+                    ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]
+            });
+            // var map = new Map();
+            var tdtBasemap = new Basemap({
+                baseLayers: [tiledLayer, tiledLayerAnno],
+                title: "TDT Basemap",
+                id: "tdtBasemap",
+                spatialReference: {
+                    wkid: 4326
+                },
+            });
+            //叠加要查询的图层
+            //查询图层的地址
+            //mapserverUrl = "https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer";
+            //mapserverUrl = "https://apaasgis-zw.wodcloud.com/server/rest/services/GZ_LYJQZTT/MapServer";
+            mapserverUrl = "https://apaasgis-zw.wodcloud.com/server/rest/services/GZ_LWZTT/MapServer";
+            var mapLayer = new MapImageLayer({
+                url: mapserverUrl
+            });
+
+            //    var featureURL = "https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/FeatureServer";
+            //    var featureLayer = new 
+            var featureLayer = new FeatureLayer({
+                url:
+                    "https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/FeatureServer/6"
+            });
+
+            var map = new Map({
+                basemap: tdtBasemap,
+                layers: [mapLayer]
+            });
+            //arcgisserver的View
+            var view = new MapView({
+                container: "viewDiv",
+                map: map,
+                center: [106.720725933, 26.5453458492],
+                scale: 144285.93411071779
+            });
+
+            view.when(function () {
+                view.ui.add("optionsDiv", "top-right");
+                dom.byId("doSeach").addEventListener("click", findTaskExecute);
+            });
+
+            function findTaskExecute() {
+                var findTask = new FindTask({
+                    url: mapserverUrl
+                });
+                var allLayerIds = [1, 2, 3, 5, 10, 11, 12, 13];
+                var seachKey = dom.byId("stateName").value;
+                if (seachKey && seachKey != "") {
+                    var findTaskParameters = new FindParameters();
+                    findTaskParameters.returnGeometry = true;//是否返回几何数据
+                    findTaskParameters.contains = true; //接受模糊查询
+                    findTaskParameters.layerIds = allLayerIds;
+                    findTaskParameters.searchFields = ["NAME", "PCSXQMC", "JJXQMC", "LXMC"];//限定查询的字段，如果不指定此参数，则查询所有的字段
+                    findTaskParameters.searchText = seachKey;
+                    findTask
+                        .execute(findTaskParameters)
+                        .then((res) => {
+                            if (res) {
+                                //如果返回有值
+                                console.log(res);
+                                //对结果进行处理
+                                var featureSource = renderResult(res);
+                                resultsLayer.addMany(featureSource);
+                                //移动地图到结果处(按范围缩放)
+                                // var layer = new FeatureLayer({
+                                //     source: featureSource,  // autocast as a Collection of new Graphic()
+                                // });
+                                //view.goTo(resultsLayer.fullExtent);
+                                map.add(resultsLayer);
+                            } else {
+                                console.log("查询数据失败");
+                            }
+                        })
+                        .catch((error) => {
+                            console.log(error);
+                        });
+                }
+            }
+            //查询结果的样式文件
+            //点样式
+            var pointSymbol = new SimpleMarkerSymbol({
+                style: "circle",
+                color: "red",
+                size: "10"
+            });
+            //线样式
+            var polylineSymbol = new SimpleLineSymbol({
+                type: "simple-line",  // autocasts as new SimpleLineSymbol()
+                color: "lightblue",
+                width: "2px",
+                style: "short-dot"
+            });
+            //面样式
+            var polygonSymbol = new SimpleFillSymbol({
+                color: [255, 0, 0, 0.5]
+            });
+            //弹出层  点
+            var popupPointTemplate = {
+                title: "{名称}",
+                content: "<b>名称:</b> {名称}" + "<br> <b>地址:</b> {地址}"
+            };
+            //弹出层  线
+            var popupPolylineTemplate = {
+                title: "{名称}",
+                content: "<b>名称:</b> {JJXQMC}"
+            };
+            //弹出层  面
+            var popupPolygonTemplate = {
+                title: "{名称}",
+                content: "<b>名称:</b> {JJXQMC}"
+            };
+
+            //查询结果图层
+            var resultsLayer = new GraphicsLayer();
+            function compare(a, b) {
+                return a - b;
+            }
+            //渲染查询的结果
+            function renderResult(res) {
+                //清空上次查询
+                if (resultsLayer) {
+                    resultsLayer.removeAll();
+                }
+                var featureSource = [];
+                var extentArrayX = [];
+                var extentArrayY = [];
+                var pt;
+                if (res.results && res.results.length > 0) {
+                    for (var i = 0; i < res.results.length; i++) {
+                        var featureType = res.results[i].feature.geometry.type;
+                        var feature = res.results[i].feature;
+                        if (featureType == "point") {
+                            //点
+                            feature.symbol = pointSymbol;
+                            feature.popupTemplate = popupPointTemplate;
+                            //注释的代码是求extent的
+                            // extentArrayX.push(feature.geometry.x);
+                            // extentArrayY.push(feature.geometry.y);
+                            var x = res.results[i].feature.geometry.x;
+                            var y = res.results[i].feature.geometry.y;
+                            if (x > 100 && x < 120 && y > 20 && y < 30) {
+                                pt = new Point({
+                                    latitude: y,
+                                    longitude: x
+                                });
+                            }
+                            featureSource.push(feature);
+                        }
+                        else if (featureType == "polyline") {
+                            //线
+                            feature.symbol = polylineSymbol;
+                            feature.popupTemplate = popupPolylineTemplate;
+                            //注释的代码是求extent的
+                            // extentArrayX.push(feature.geometry.extent.xmin);
+                            // extentArrayX.push(feature.geometry.extent.xmax);
+                            // extentArrayY.push(feature.geometry.extent.ymin);
+                            // extentArrayY.push(feature.geometry.extent.ymax);
+                            var x = res.results[i].feature.geometry.extent.xmax;
+                            var y = res.results[i].feature.geometry.extent.ymax;
+                            featureSource.push(feature);
+                        } else if (featureType == "polygon") {
+                            //面
+                            feature.symbol = polygonSymbol;
+                            feature.popupTemplate = popupPolygonTemplate;
+                            //注释的代码是求extent的
+                            // extentArrayX.push(feature.geometry.extent.xmin);
+                            // extentArrayX.push(feature.geometry.extent.xmax);
+                            // extentArrayY.push(feature.geometry.extent.ymin);
+                            // extentArrayY.push(feature.geometry.extent.ymax);
+                            // pt = new Point({
+                            //     latitude: res.results[i].feature.geometry.extent.xmax,
+                            //     longitude: res.results[i].feature.geometry.extent.ymax
+                            // });
+                            featureSource.push(feature);
+                        }
+                    }
+                    //注释的代码是求extent的问题
+                    // extentArrayX.sort(compare);
+                    // extentArrayY.sort(compare);
+                    // var result = [extentArrayX[0], extentArrayY[0], extentArrayX[extentArrayX.length - 1], extentArrayY[extentArrayY.length - 1]]
+                    //缩放到图层
+                    view.goTo({
+                        target: pt,
+                        zoom: 14
+                    });
+                    return featureSource;  //本身就是一个FeatureLayer
+                } else {
+                    return null
+                }
+            }
+            //缩放至图层
+            function zoomToLayer(result) {
+                console.log(result)
+            }
+        });
+    </script>
+</head>
+
+<body>
+    <div id="viewDiv"></div>
+    <div class="esri-widget" id="optionsDiv">
+        <h2>查询名称</h2>
+        <input type="text" class="esri-widget" id="stateName" value="云岩">
+        <button class="esri-widget" id="doSeach">查询</button>
+        <br />
+    </div>
+</body>
+
+</html>
\ No newline at end of file

static/view/demo/page-2d_loadGeoJson.html

+<!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/layers/MapImageLayer",
+                "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, MapImageLayer, Search, QueryTask, Query,
+                GraphicsLayer, SpatialReference,
+                VectorTileLayer, PictureMarkerSymbol) {
+                // 通过瓦片形式加载天地图的
+                // 天地图根据投影分为两种：墨卡托和经纬度
+                // 设定瓦片信息，天地图经纬度地图的切片信息全部使用该信息设定
+                var tiandituBaseUrl = "http://{subDomain}.tianditu.gov.cn"; //天地图服务地址
+                var token = "174705aebfe31b79b3587279e211cb9a"; //天地图token
+                var highlight;
+                //矢量地图(球面墨卡托投影)
+                var tiledLayer = new WebTileLayer({
+                    urlTemplate:
+                        tiandituBaseUrl + "/vec_w/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=vec&STYLE=default&FORMAT=tiles&TILEMATRIXSET=w&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=" + token,
+                    subDomains:
+                        ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]
+                });
+                //矢量注记(球面墨卡托投影)
+                var tiledLayerAnno = new WebTileLayer({
+                    urlTemplate:
+                        tiandituBaseUrl + "/cva_w/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=cva&STYLE=default&FORMAT=tiles&TILEMATRIXSET=w&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=" + token,
+                    subDomains:
+                        ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]
+                });
+                // var map = new Map();
+                var tdtBasemap = new Basemap({
+                    baseLayers: [tiledLayer, tiledLayerAnno],
+                    title: "TDT Basemap",
+                    id: "tdtBasemap",
+                    spatialReference: {
+                        wkid: 4326
+                    },
+                });
+                //json格式的地理数据
+                var url = "https://apaas.wodcloud.com/mapsamples/static/data/JZD_CGCS2000_GK_108_3.json"
+                // var url = "../../data/JZD_CGCS2000_BEIDOU.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 imgaeURL = require("../../../static/images/marker-yellow.png");
+                            // var symbol = new PictureMarkerSymbol(imgaeURL,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
+                });
+
+                //叠加要查询的图层
+                //查询图层的地址
+                mapserverUrl = "https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer";
+                var mapLayer = new MapImageLayer({
+                    url: mapserverUrl
+                });
+                var map = new Map({
+                    basemap: tdtBasemap,
+                    layers: [footprintlayer]
+                });
+                //arcgisserver的View
+                var view = new MapView({
+                    container: "viewDiv",
+                    map: map,
+                    center: [106.720725933, 26.5453458492],
+                    scale: 144285.93411071779
+                });
+
+                // 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>
\ No newline at end of file

static/view/demo/page-2d_loadGeometry.html

+<!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/mapsamples/static/js/shp.js"></script>
+    <script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
+    <script>
+        require([
+            "dojo/dom",
+            "esri/Map",
+            "esri/views/MapView",
+            "esri/layers/WebTileLayer",
+            "esri/layers/support/TileInfo",
+            "esri/layers/MapImageLayer",
+            "esri/layers/GeoJSONLayer",
+            "esri/geometry/SpatialReference",
+            "esri/widgets/DistanceMeasurement2D",
+            "esri/widgets/AreaMeasurement2D",
+            "esri/Graphic",
+            "esri/layers/GraphicsLayer",
+            "esri/geometry/Polygon",
+            "esri/geometry/Polyline",
+            "esri/geometry/Multipoint",
+            "esri/geometry/Point",
+            "esri/symbols/SimpleMarkerSymbol",
+            "esri/symbols/SimpleLineSymbol",
+            "esri/symbols/SimpleFillSymbol",
+            "dojo/domReady!"
+        ], function (dom, Map, MapView, WebTileLayer, TileInfo, MapImageLayer, GeoJSONLayer, SpatialReference, DistanceMeasurement2D, AreaMeasurement2D, Graphic, GraphicsLayer, Polygon, Polyline, Multipoint, Point, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol) {
+
+            var tileInfo = new TileInfo({
+                "dpi": 96,
+                "format": "image/png",
+                "compressionQuality": 0,
+                "spatialReference": new SpatialReference(4326),
+                "rows": 256,
+                "cols": 256,
+                "origin": {
+                    "x": -180,
+                    "y": 90
+                },
+                "lods": [
+                    { "level": "0", "scale": 295829355.45, "resolution": 0.703125 },
+                    { "level": "1", "scale": 147914677.725, "resolution": 0.3515625 },
+                    { "level": "2", "scale": 73957338.8625, "resolution": 0.17578125 },
+                    { "level": "3", "scale": 36978669.43125, "resolution": 0.087890625 },
+                    { "level": "4", "scale": 18489334.715625, "resolution": 0.0439453125 },
+                    { "level": "5", "scale": 9244667.3578125, "resolution": 0.02197265625 },
+                    { "level": "6", "scale": 4622333.67890625, "resolution": 0.010986328125 },
+                    { "level": "7", "scale": 2311166.83945312, "resolution": 0.0054931640625 },
+                    { "level": "8", "scale": 1155583.41972656, "resolution": 0.00274658203125 },
+                    { "level": "9", "scale": 577791.709863281, "resolution": 0.001373291015625 },
+                    { "level": "10", "scale": 288895.8549316406, "resolution": 6.866455078125E-4 },
+                    { "level": "11", "scale": 144447.9274658203, "resolution": 3.4332275390625E-4 },
+                    { "level": "12", "scale": 4508.935440959931, "resolution": 1.71661376953125E-4 },
+                    { "level": "13", "scale": 36111.98186645508, "resolution": 8.58306884765625E-5 },
+                    { "level": "14", "scale": 18055.99093322754, "resolution": 4.291534423828125E-5 },
+                    { "level": "15", "scale": 9027.99546661377, "resolution": 2.1457672119140625E-5 },
+                    { "level": "16", "scale": 4513.997733306885, "resolution": 1.0728836059570312E-5 },
+                    { "level": "17", "scale": 2256.9988666534423, "resolution": 5.364418029785156E-6 },
+                    { "level": "18", "scale": 1128.4994333267211, "resolution": 2.682209014892578E-6 },
+                    { "level": "19", "scale": 564.2497166633606, "resolution": 1.341104507446289E-6 }
+                ]
+            });
+
+            var layer = new WebTileLayer(
+                {
+                    // urlTemplate:"http://jgsw.gy.wodcloud.com/iserver/services/map-guizhou/wmts-china/guizhou/default/ChinaPublicServices_guizhou/{level}/{row}/{col}.png",
+                    urlTemplate: "http://jgsw.gy.wodcloud.com/iserver/services/map-guizhou/wmts-china?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=guizhou&STYLE=default&FORMAT=image/png&TILEMATRIXSET=ChinaPublicServices_guizhou&tileMatrix={level}&tileRow={row}&tileCol={col}",
+                    tileInfo: tileInfo,
+                    spatialReference: new SpatialReference(4326),
+                }
+
+            );
+            //geojson的格式数据
+            const url =
+                "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson";
+            const template = {
+                title: "Earthquake Info",
+                content: "Magnitude {mag} {type} hit {place} on {time}",
+                fieldInfos: [
+                    {
+                        fieldName: "time",
+                        format: {
+                            dateFormat: "short-date-short-time"
+                        }
+                    }
+                ]
+            };
+
+            const renderer = {
+                type: "simple",
+                field: "mag",
+                symbol: {
+                    type: "simple-marker",
+                    color: "orange",
+                    outline: {
+                        color: "white"
+                    }
+                },
+                visualVariables: [
+                    {
+                        type: "size",
+                        field: "mag",
+                        stops: [
+                            {
+                                value: 2.5,
+                                size: "2px"
+                            },
+                            {
+                                value: 8,
+                                size: "30px"
+                            }
+                        ]
+                    }
+                ]
+            };
+
+            const geojsonLayer = new GeoJSONLayer({
+                url: url,
+                copyright: "USGS Earthquakes",
+                popupTemplate: template,
+                renderer: renderer //optional
+            });
+            // 创建地图
+            // var map = new Map({ layers: [geojsonLayer] });
+            var map = new Map();
+            map.add(layer);
+            // 创建二维地图
+            var view = new MapView({
+                container: "viewDiv",
+                map: map,
+                center: [106.72, 26.585],
+                zoom: 10,
+            });
+            // var ml = new MapImageLayer({
+            //     url: "http://apaasgis-zw.wodcloud.com/server/rest/services/GZ_LYJQZTT/MapServer",
+            //     spatialReference: new SpatialReference(4326),
+            // })
+            //map.add(ml);
+            var measurementWidget = new DistanceMeasurement2D({
+                view: view
+            });
+            view.ui.add(measurementWidget, "top-right");
+            var importGeometry = dom.byId("importGeometry");
+            view.ui.add(importGeometry, "bottom-right");
+
+            //文件的读取与写入
+            var importFile = dom.byId("import");
+            var files = dom.byId("files");
+            importFile.addEventListener("click", function (e) {
+                files.click();
+            })
+            files.addEventListener("change", function (e) {
+                readFile();
+            })
+
+            function readFile() {
+                console.log("进入文件上传方法");
+                var selectedFile = document.getElementById("files").files[0];//获取读取的File对象
+                var windowURL = window.URL || window.webkitURL;
+                var dataURL = windowURL.createObjectURL(selectedFile);
+                //验证所传入的文件格式
+                var type = selectedFile.type;
+                var name = selectedFile.name;//读取选中文件的文件名
+                var size = selectedFile.size;//读取选中文件的大小
+                console.log("文件名:" + name + "大小：" + size);
+                var reader = new FileReader();
+                if (type == "application/json" || type == "application/kml") {
+                    reader.readAsText(selectedFile);//读取文件的内容
+                    reader.onload = function () {
+                        console.log(this.result);//当读取完成之后会回调这个函数，然后此时文件的内容存储到了result中。直接操作即可。
+                        switch (type) {
+                            case "application/json":
+                                var dataType = JSON.parse(this.result).features[0].geometry.type;
+                                parseGeoJSON(dataURL, dataType)
+                                break;
+                            case "application/kml":
+                                var dataType = JSON.parse(this.result).features[0].geometry.type;
+                                parseKML(dataURL, dataType)
+                                break;
+                            default:
+                                break
+                        }
+                    };
+                } else if (type == "application/x-zip-compressed") {
+                    reader.readAsArrayBuffer(selectedFile);
+                    reader.onload = function () {
+                        console.log(this.result);//当读取完成之后会回调这个函数，然后此时文件的内容存储到了result中。直接操作即可。
+                        shp(this.result).then(
+                            function (data) {
+                                console.log("输出shapefile");
+                                console.log(data)
+                                //var shapefileURL = windowURL.createObjectURL(selectedFile);
+                                parseShapefile(data);
+                                //parseShapefile(data)
+                            }).catch(function (e) {
+                                console.log(e);
+                            });
+                    };
+                } else {
+                    alert("请导入符合规范的文件,后缀为.json/.geojson/.zip,(.zip是shapefile的压缩文件)");
+                }
+            };
+
+            //返回样式
+            function returnGeoType(geotype) {
+                switch (geotype) {
+                    case "Point":
+                        return {
+                            type: "simple",
+                            symbol: {
+                                type: "simple-marker",
+                                size: 6,
+                                color: "green",
+                                outline: {
+                                    width: 0.5,
+                                    color: "white"
+                                }
+                            }
+                        };
+                        break;
+                    case "LineString":
+                        return {
+                            type: "simple",
+                            symbol: {
+                                type: "simple-line",
+                                color: [255, 0, 0, 1],
+                                outline: {
+                                    width: 2,
+                                    color: "blue"
+                                }
+                            }
+                        };
+                        break;
+                    case "Polygon":
+                        return {
+                            type: "simple",
+                            symbol: {
+                                type: "simple-fill",
+                                color: [255, 128, 0, 0.4],
+                                outline: {
+                                    width: 1,
+                                    color: "blue"
+                                }
+                            }
+                        };
+                        break;
+                    default:
+                        break
+                }
+            }
+
+            //解析geoJSON
+            function parseGeoJSON(dataURL, dataType) {
+                var geojsonLayer = new GeoJSONLayer({
+                    url: dataURL,
+                    //data: JSON.parse(dataURL),
+                    copyright: "customGeoJSON",
+                    //popupTemplate: template,
+                    renderer: returnGeoType(dataType) //optional
+                });
+                console.log(geojsonLayer);
+                map.add(geojsonLayer);
+            }
+            function parseKML() {
+
+            }
+            var graphiceLayer = new GraphicsLayer();
+            function parseShapefile(data) {
+                if (graphiceLayer) {
+                    graphiceLayer.removeAll();
+                }
+                var features = data.features;
+                var featureType = data.features[0].geometry.type;
+                //点样式
+                var pointSymbol = new SimpleMarkerSymbol({
+                    style: "circle",
+                    color: "red",
+                    size: "10"
+                });
+                //线样式
+                var polylineSymbol = new SimpleLineSymbol({
+                    type: "simple-line",  // autocasts as new SimpleLineSymbol()
+                    color: "blue",
+                    width: "2px",
+                    style: "short-dot"
+                });
+                //面样式
+                var polygonSymbol = new SimpleFillSymbol({
+                    color: [51, 51, 204, 1],
+                })
+
+                //需要上传一个shapefile的压缩文件
+                //先得到上传的数据类型
+                switch (featureType) {
+                    case "Point":
+                        var points = [];
+                        //var ring = [];
+                        for (var i = 0; i < features.length; i++) {
+                            points.push(features[i].geometry.coordinates);
+                        }
+                        var multipoint = new Multipoint({
+                            hasZ: false,
+                            hasM: false,
+                            points: points,
+                        });
+                        var graphic = new Graphic({
+                            geometry: multipoint,
+                            symbol: pointSymbol,
+                        });
+                        view.graphics.add(graphic);
+                        break;
+                    case "LineString":
+                        var paths = [];
+                        //var ring = [];
+                        for (var i = 0; i < features.length; i++) {
+                            paths.push(features[i].geometry.coordinates);
+                        }
+                        var polyline = new Polyline({
+                            hasZ: false,
+                            hasM: false,
+                            paths: paths,
+                            //spatialReference: { wkid: 4326 }
+                        });
+                        var graphic = new Graphic({
+                            geometry: polyline,
+                            symbol: polylineSymbol,
+                        });
+                        view.graphics.add(graphic);
+                        break;
+                    case "Polygon":
+                        var rings = [];
+                        for (var i = 0; i < features.length; i++) {
+                            rings.push(features[i].geometry.coordinates[0]);
+                        }
+                        var polygon = new Polygon({
+                            hasZ: false,
+                            hasM: false,
+                            rings: rings,
+                            //spatialReference: { wkid: 4326 }
+                        });
+                        var graphic = new Graphic({
+                            geometry: polygon,
+                            symbol: polygonSymbol,
+                        });
+                        view.graphics.add(graphic);
+                        break;
+                    default:
+                        break
+                }
+
+            }
+        });
+    </script>
+</head>
+
+<body>
+    <div id="viewDiv"></div>
+    <div id="importGeometry">
+        <input type="file" id="files" style="display:none" />
+        <input type="button" id="import" value="导入文件(支持geoJSON/shapefile)" />
+    </div>
+    <div>
+        <div>天地图</div>
+        <div>高德</div>
+        <div>超图</div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file

static/view/demo/page-2d_loadjson.html

+<!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>

static/view/demo/page-2d_query.html

+<!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>

static/view/demo/page-2d_queryStatistic.html

+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
+    <title>框选查询统计数据--4.x</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>
+    <scrip src="https://apaas.wodcloud.com/mapsamples/static/js/echarts.min.js">
+        <style>
+            html,
+            body,
+            #viewDiv {
+                padding: 0;
+                margin: 0;
+                height: 100%;
+                width: 100%;
+            }
+
+            .mycharts {
+                background: #fff;
+                width: 400px;
+                position: absolute;
+                top: 0px;
+                right: 0px;
+                overflow-y: auto;
+                box-shadow: 0px 2px 20px -5px #1b8cf2;
+            }
+
+            .mycharts .chart_pie {
+                width: 400px;
+                height: 180px;
+            }
+
+            .mycharts .chart_type {
+                width: 400px;
+                height: 180px;
+            }
+
+            h3 {
+                margin: 0 0 5px 0;
+                border-bottom: 1px solid #444;
+            }
+
+            .label {
+                display: inline-block;
+                width: 140px;
+            }
+        </style>
+        <script>
+            require([
+                "dojo/promise/Promise",
+                "dojo/promise/all",
+                "dojo/on",
+                "esri/layers/WebTileLayer",
+                "esri/Map",
+                "esri/layers/MapImageLayer",
+                "esri/layers/FeatureLayer",
+                'esri/views/MapView',
+                "esri/Basemap",
+                "esri/symbols/SimpleMarkerSymbol",
+                "esri/symbols/SimpleFillSymbol",
+                "esri/layers/GraphicsLayer",
+                "esri/Graphic",
+                "esri/tasks/QueryTask",
+                "esri/tasks/support/Query",
+                "esri/tasks/FindTask",
+                "esri/tasks/support/FindParameters",
+                "esri/views/draw/Draw",
+                "esri/symbols/SimpleLineSymbol",
+                "esri/Color",
+                "esri/widgets/Sketch/SketchViewModel",
+                "https://apaas.wodcloud.com/mapsamples/static/js/echarts.min.js",
+                "dojo/dom"
+            ], function (Promise, All, on, WebTileLayer, Map, MapImageLayer, FeatureLayer, MapView, Basemap, SimpleMarkerSymbol, SimpleFillSymbol, GraphicsLayer, Graphic, QueryTask, Query, FindTask, FindParameters, Draw, SimpleLineSymbol, Color, SketchViewModel, echarts, dom) {
+                var tiandituBaseUrl = "http://{subDomain}.tianditu.gov.cn"; //天地图服务地址
+                var token = "174705aebfe31b79b3587279e211cb9a"; //天地图token
+                var highlight;
+                //矢量地图(球面墨卡托投影)
+                var tiledLayer = new WebTileLayer({
+                    urlTemplate:
+                        tiandituBaseUrl + "/vec_w/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=vec&STYLE=default&FORMAT=tiles&TILEMATRIXSET=w&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=" + token,
+                    subDomains:
+                        ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]
+                });
+                //矢量注记(球面墨卡托投影)
+                var tiledLayerAnno = new WebTileLayer({
+                    urlTemplate:
+                        tiandituBaseUrl + "/cva_w/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=cva&STYLE=default&FORMAT=tiles&TILEMATRIXSET=w&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=" + token,
+                    subDomains:
+                        ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]
+                });
+                // var map = new Map();
+                var tdtBasemap = new Basemap({
+                    baseLayers: [tiledLayer, tiledLayerAnno],
+                    title: "TDT Basemap",
+                    id: "tdtBasemap",
+                    spatialReference: {
+                        wkid: 4326
+                    },
+                });
+                //叠加要查询的图层
+                //查询图层的地址
+                mapserverUrl = "https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer";
+                var mapLayer = new MapImageLayer({
+                    url: mapserverUrl
+                });
+                var map = new Map({
+                    basemap: tdtBasemap,
+                    layers: [mapLayer]
+                });
+                //arcgisserver的View
+                var view = new MapView({
+                    container: "viewDiv",
+                    map: map,
+                    center: [106.720725933, 26.5453458492],
+                    scale: 144285.93411071779
+                });
+
+                polygonGraphicsLayer = new GraphicsLayer();
+                map.add(polygonGraphicsLayer);
+                //创建一个画草图的实例
+                sketchViewModel = new SketchViewModel({
+                    view: view,
+                    layer: polygonGraphicsLayer,
+                    pointSymbol: {
+                        type: "simple-marker",
+                        color: [255, 255, 0, 0],
+                        size: "1px",
+                        outline: {
+                            color: "gray",
+                            width: 0
+                        }
+                    }
+                });
+                on(dom.byId("Extent"), "click", function (evt) {
+                    // clearUpSelection();
+                    // view.popup.close();
+                    // ready to draw a polygon
+                    sketchViewModel.create("polygon");
+                    sketchViewModel.on("create", function (event) {
+                        if (event.state === "complete") {
+
+                            console.log("绘制完成");//tag--这个完成的次数？
+                            polygonGraphicsLayer.remove(event.graphic);
+                            selectFeatures(event.graphic.geometry);
+                        }
+                    });
+                });
+                function selectFeatures(geometry, callBack) {
+                    //查询数据   (findTask不能做空间分析，所以多图层的空间叠加分析只能用query)
+                    var searchLayerURL_1 = "https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer/1";
+                    //var searchLayerURLOne = "https://apaasgis.wodcloud.com/server/rest/services/GZ_APAASZTT/FeatureServer";
+                    var searchLayer_1 = new FeatureLayer({
+                        title: "公安机构",
+                        url: searchLayerURL_1
+                    });
+                    var searchLayerURL_2 = "https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer/2";
+                    var searchLayer_2 = new FeatureLayer({
+                        title: "旅馆",
+                        url: searchLayerURL_2
+                    });
+                    var searchLayerURL_3 = "https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer/3";
+                    var searchLayer_3 = new FeatureLayer({
+                        title: "网吧终端",
+                        url: searchLayerURL_3
+                    });
+                    var searchLayerURL_4 = "https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer/10";
+                    var searchLayer_4 = new FeatureLayer({
+                        title: "交警辖区",
+                        url: searchLayerURL_4
+                    });
+                    var searchLayerURL_5 = "https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer/11";
+                    var searchLayer_5 = new FeatureLayer({
+                        title: "派出所辖区",
+                        url: searchLayerURL_5
+                    });
+                    var searchLayerURL_6 = "https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer/12";
+                    var searchLayer_6 = new FeatureLayer({
+                        title: "分局辖区",
+                        url: searchLayerURL_6
+                    });
+                    var searchLayerURL_7 = "https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer/13";
+                    var searchLayer_7 = new FeatureLayer({
+                        title: "市局辖区",
+                        url: searchLayerURL_7
+                    });
+                    view.graphics.removeAll();
+                    //分别查询
+                    var result = [];
+                    var searchLayer = [searchLayer_1, searchLayer_2, searchLayer_3, searchLayer_4, searchLayer_5, searchLayer_6, searchLayer_7];
+                    var resultArray = doSearch(searchLayer, geometry);
+
+                };
+                //将结果渲染
+                function renderResult(resultArray) {
+                    console.log("进入render方法");
+                    var resultDataEcharts = [];
+                    var resultDataGov = [];
+                    if (resultArray.length > 0) {
+                        var pointArrayLength = 0;
+                        var polygonArrayLength = 0;
+                        var polylineArrayLength = 0;
+                        for (var i = 0; i < resultArray.length; i++) {
+                            var searchDataGov = { "name": "", "value": 0 };
+                            var graphic = resultArray[i].features;
+                            if (graphic.length > 0) {
+                                searchDataGov.value = graphic.length;
+                                searchDataGov.name = resultArray[i].title;
+                                resultDataGov.push(searchDataGov);
+                                if (graphic[0].geometry.type == "point") {
+                                    pointArrayLength += graphic.length;
+                                    for (var j = 0; j < graphic.length; j++) {
+                                        var pointSymbol = new SimpleMarkerSymbol({
+                                            style: "circle",
+                                            color: "blue",
+                                            size: "10"
+                                        });
+                                        var pointGraphic = new Graphic({
+                                            geometry: graphic[j].geometry,
+                                            symbol: pointSymbol,
+                                            //attributes: polylineAtt
+                                        });
+                                        view.graphics.add(pointGraphic);
+                                    }
+
+                                } else if (graphic[0].geometry.type == "polygon") {
+                                    polygonArrayLength += graphic.length;
+                                    for (var j = 0; j < graphic.length; j++) {
+                                        var polygonSymbol = new SimpleFillSymbol({
+                                            color: [255, 24, 0, 0.2]
+                                        });
+                                        var polygonGraphic = new Graphic({
+                                            geometry: graphic[j].geometry,
+                                            symbol: polygonSymbol,
+                                            //attributes: polylineAtt
+                                        });
+                                        view.graphics.add(polygonGraphic);
+                                    }
+
+                                } else if (graphic[0].geometry.type == "polyline") {
+                                    polylineArrayLength += graphic.length;
+                                    for (var j = 0; j < graphic.length; j++) {
+                                        var polylineSymbol = new SimpleLineSymbol({
+                                            type: "simple-line",  // autocasts as new SimpleLineSymbol()
+                                            color: "lightblue",
+                                            width: "2px",
+                                            style: "short-dot"
+                                        });
+                                        var polylineGraphic = new Graphic({
+                                            geometry: graphic[j].geometry,
+                                            symbol: polylineSymbol,
+                                            //attributes: polylineAtt
+                                        });
+                                        view.graphics.add(polylineGraphic);
+                                    }
+                                }
+                            }
+                        }
+                        var resultDtaType = [{ "name": "点", "value": pointArrayLength }, { "name": "线", "value": polylineArrayLength }, { "name": "面", "value": polygonArrayLength }];
+                        initEChartPie(resultDataGov, resultDtaType);
+                    }
+                };
+                //查询出结果
+                function doSearch(searchLayers, geometry) {
+                    var echartsData = [];
+                    var searchRequest = [];
+                    const query = {
+                        geometry: geometry,
+                        outFields: ["*"],
+                        returnGeometry: true
+                    };
+                    if (searchLayers.length > 0) {
+                        for (var i = 0; i < searchLayers.length; i++) {
+                            echartsData.push(searchLayers[i].title);
+                            searchRequest.push(searchLayers[i].queryFeatures(query));
+                        }
+                    }
+                    All(searchRequest).then(res => {
+                        if (res.length > 0) {
+                            for (var i = 0; i < res.length; i++) {
+                                res[i].title = echartsData[i];
+                                // var highlight;
+                                // view.whenLayerView(searchLayers[i].source.layer).then(function (layerView) {
+                                //     if (highlight) {
+                                //         highlight.remove();
+                                //     }
+                                //     highlight = layerView.highlight(res[i].features);
+                                // }).catch(function (error) {
+                                //     console.log("打出错误");
+                                //     console.log(error);
+                                // });
+                            }
+                            //渲染结果
+                            renderResult(res);
+                        }
+                    });
+                    //移到查询的位置
+                    view.goTo(geometry.extent.expand(2));
+                }
+                function errorCallback(error) {
+                    console.log("error:", error);
+                }
+                function clearUpSelection() {
+                    view.graphics.removeAll();
+                    grid.clearSelection();
+                };
+                //初始化echarts表
+                function initEChartPie(dataGov, dataType) {
+                    console.log("进入echarts方法111");
+                    var chart_pie_gov = echarts.init(document.getElementById("chart_pie"));
+                    var chart_pie_type = echarts.init(document.getElementById("chart_type"));
+                    var option_gov = {
+                        tooltip: {
+                            trigger: 'item',
+                            formatter: "{a} <br/>{b}: {c} ({d}%)"
+                        },
+                        series: [
+                            {
+                                name: '查询结果统计',
+                                type: 'pie',
+                                radius: ['50%', '70%'],
+                                label: {
+                                    normal: {
+                                        show: true,
+                                        formatter: "{b}:{c} \n {d}%"
+                                    }
+                                },
+                                data: dataGov
+                            }
+                        ]
+                    };
+                    var option_type = {
+                        tooltip: {
+                            trigger: 'item',
+                            formatter: "{a} <br/>{b}: {c} ({d}%)"
+                        },
+                        series: [
+                            {
+                                name: '查询结果统计',
+                                type: 'pie',
+                                radius: ['50%', '70%'],
+                                label: {
+                                    normal: {
+                                        show: true,
+                                        formatter: "{b}:{c} \n {d}%"
+                                    }
+                                },
+                                data: dataType
+                            }
+                        ]
+                    }
+                    chart_pie_gov.setOption(option_gov);
+                    chart_pie_type.setOption(option_type);
+                };
+            });
+        </script>
+</head>
+
+<body>
+    <div id="viewDiv">
+    </div>
+    <div class="mycharts" id="mycharts">
+        <div id="controls">
+            <button id="Extent">画多边形进行查询统计</button>
+        </div>
+        <div class="chart_pie" id="chart_pie"></div>
+        <div class="chart_type" id="chart_type"></div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file

static/view/demo/page-2d_videoView.html

+<!DOCTYPE html>
+<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">
+    <style>
+        html,
+        body,
+        #viewDiv {
+            padding: 0;
+            margin: 0;
+            height: 100%;
+            width: 100%;
+        }
+
+        .esri-view-width-xlarge .esri-popup__main-container {
+            width: 505px;
+        }
+
+        .esri-view-height-xlarge .esri-popup__main-container {
+            max-height: none;
+        }
+
+        .esri-popup__main-container {
+            max-height: none;
+        }
+    </style>
+    <script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
+    <script>
+        require([
+            "esri/config",
+            "esri/views/MapView",
+            "esri/WebMap"
+        ], function (esriConfig, MapView, WebMap) {
+            esriConfig.portalUrl = "https://apaasgis.wodcloud.com/arcgis";
+            var webmap = new WebMap({
+                portalItem: {
+                    id: "54a708b3890a4d1aaff37988697aeaec"
+                }
+            });
+
+            var view = new MapView({
+                map: webmap,
+                container: "viewDiv"
+            });
+
+            view.when(function () {
+                view.popup.watch("selectedFeature", function (graphic) {
+                    if (graphic && graphic.sourceLayer) {
+                        var layerName = graphic.sourceLayer.title;
+                        switch (layerName) {
+                            case "视频监控点":
+                                var name = graphic.attributes.NAME;
+                                var code = graphic.attributes.CODE;
+                                view.popup.open({
+                                    title: name + "(" + code + ")",
+                                    content: setContentInfo(code),
+                                    location: graphic.geometry
+                                });
+                                break;
+                            case "储备库":
+                                break;
+                        }
+                    }
+                });
+            });
+            function setContentInfo(code) {
+                console.log(code);
+                return "<div><video controls width='420'><source src='http://dl.wodcloud.com/video/" + code + ".mp4'  type='video/mp4'></source></video></div>";
+            };
+        });
+    </script>
+</head>
+
+<body>
+    <div id="viewDiv"></div>
+</body>
+
+</html>
\ No newline at end of file

static/view/demo/page-2dto3d.html

+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
+  <title>Switch view from 2D to 3D - 4.12</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%;
+    }
+
+    #infoDiv {
+      position: absolute;
+      top: 15px;
+      left: 60px;
+    }
+
+    #infoDiv input {
+      border: none;
+      box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 2px;
+    }
+  </style>
+  <script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
+  <script>
+    require([
+      "esri/config",
+      "esri/layers/WebTileLayer",
+      "esri/Map",
+      "esri/views/MapView",
+      "esri/views/SceneView",
+      "dojo/domReady!"
+    ], function (ESRICONFIG, WebTileLayer, Map, MapView, SceneView) {
+      // 通过瓦片形式加载天地图
+      // 天地图根据投影分为两种：墨卡托和经纬度，在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"
+      );
+
+      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"
+      });
+      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;
+          appConfig.mapView.container = appConfig.container;
+          appConfig.activeView = appConfig.mapView;
+          switchButton.value = "3D";
+        } else {
+          //如果是2D视图，就将其转换为3D视图
+          appConfig.sceneView.viewpoint = activeViewpoint;
+          appConfig.sceneView.container = appConfig.container;
+          appConfig.activeView = appConfig.sceneView;
+          switchButton.value = "2D";
+        }
+      }
+
+      //创建2D和3D视图
+      function createView(params, type) {
+        var view;
+        var is2D = type === "2d";
+        if (is2D) {
+          view = new MapView(params);
+          return view;
+        } else {
+          view = new SceneView(params);
+        }
+        return view;
+      }
+    });
+
+  </script>
+</head>
+
+<body>
+  <div id="viewDiv"></div>
+  <div id="infoDiv">
+    <input class="esri-component esri-widget--button esri-widget esri-interactive" type="button" id="switch-btn"
+      value="3D" />
+  </div>
+</body>
+
+</html>

static/view/demo/page-3.xmovelayer.html

+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <title>TDT WMTS Map</title>
+  <link rel="stylesheet" href="https://apaas.wodcloud.com/api_3.x/esri/css/esri.css">
+  <style>
+    html,
+    body,
+    #map {
+      height: 100%;
+      width: 100%;
+      margin: 0;
+      padding: 0;
+    }
+
+  </style>
+  <script src="https://apaas.wodcloud.com/api_3.x/init.js"></script>
+  <script src="https://apaas.wodcloud.com/mapsamples/static/js/jquery-3.3.1.min.js"></script>
+  <script>
+    let map, featureLayer, moveLayer, lineLayer, featureCollection, featureCollection2, selectedGraphics, linesymbol,
+      selectedLineGraphic, timer, movecounts;
+    require([
+      "esri/map",
+      "esri/layers/WebTiledLayer",
+      "esri/layers/TileInfo",
+      "esri/layers/FeatureLayer",
+      "esri/layers/GraphicsLayer",
+      "esri/dijit/PopupTemplate",
+      "esri/geometry/Point",
+      "esri/geometry/Polyline",
+      "esri/graphic",
+      "dojo/_base/array",
+      "esri/tasks/query",
+      "esri/symbols/CartographicLineSymbol",
+      "esri/Color",
+      "dojo/domReady!"
+    ], function (Map, WebTiledLayer, TileInfo, FeatureLayer, GraphicsLayer, PopupTemplate, Point, Polyline, Graphic,
+      array,
+      Query, CartographicLineSymbol, Color) {
+      // 创建地图，不设置底图，如果设置底图会造成坐标系无法被转换成 ESPG:4326 (WGS1984)
+      map = new Map('map', {
+        /*地图中心点*/
+        center: [0, 0],
+        /*地图默认缩放等级*/
+        zoom: 8,
+        /*地图最大缩放等级*/
+        maxZoom: 20,
+        /*地图最小缩放等级*/
+        minZoom: 2,
+        /*关闭缩放按钮*/
+        slider: false,
+        /*关闭logo*/
+        logo: false
+      });
+
+      // 通过瓦片形式加载天地图的
+      // 天地图根据投影分为两种：墨卡托和经纬度
+      // 设定瓦片信息，天地图经纬度地图的切片信息全部使用该信息设定
+      var tileInfo = new TileInfo({
+        dpi: 90.71428571427429,
+        rows: 256,
+        cols: 256,
+        compressionQuality: 0,
+        origin: {
+          x: -180,
+          y: 90
+        },
+        spatialReference: {
+          wkid: 4326
+        },
+        lods: [{
+          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: 20,
+          resolution: 1.341104507446289075e-006,
+          scale: 563.616930119991375
+        }]
+      });
+
+      // 在加载经纬度地图的时候我们需要使用 {subDomain}, {col}, {row}, {level}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别
+      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
+        });
+      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
+        });
+      map.addLayer(basemap);
+      map.addLayer(annomap);
+
+      // 设定中心点以及缩放级别，使地图的坐标系修正为 ESPG:4326 (WGS1984),否则地图坐标系为 ESPG:102100 也就是 Web墨卡托 投影的坐标系
+      // 如果希望设置地图中心点，以及缩放级别，请在此处设置，在新建地图时给出的坐标可以随意，但请不要和此处相同
+      map.centerAndZoom(new Point({
+        x: 106.720725933,
+        y: 26.5453458492,
+        spatialReference: {
+          wkid: 4326
+        }
+      }), 8);
+      featureCollection = {
+        "layerDefinition": null,
+        "featureSet": {
+          "features": [],
+          "geometryType": "esriGeometryPoint"
+        }
+      };
+      featureCollection.layerDefinition = {
+        "geometryType": "esriGeometryPoint",
+        "objectIdField": "ObjectID",
+        "drawingInfo": {
+          "renderer": {
+            "type": "simple",
+            "symbol": {
+              "type": "esriPMS",
+              "url": "https://apaas.wodcloud.com/mapsamples/static/images/ic_wxhuoche.png",
+              "contentType": "image/png",
+              "width": 15,
+              "height": 15
+            }
+          }
+        },
+        "fields": [{
+          "name": "vehicle_number",
+          "alias": "vehicle_number",
+          "type": "esriFieldTypeString"
+        }, {
+          "name": "total_mileage",
+          "alias": "total_mileage",
+          "type": "esriFieldTypeString"
+        }, {
+          "name": "recorder_speed",
+          "alias": "recorder_speed",
+          "type": "esriFieldTypeString"
+        }]
+      };
+
+
+      featureCollection2 = {
+        "layerDefinition": null,
+        "features": [],
+        "geometryType": "esriGeometryPolyline"
+      };
+      linesymbol = new CartographicLineSymbol(
+        CartographicLineSymbol.STYLE_SOLID,
+        new Color([255, 0, 0]), 10,
+        CartographicLineSymbol.CAP_ROUND,
+        CartographicLineSymbol.JOIN_MITER, 5
+      );
+      featureCollection2.layerDefinition = {
+        "geometryType": "esriGeometryPolyline",
+        "objectIdField": "ObjectID",
+        "fields": [{
+          "name": "ObjectID",
+          "alias": "ObjectID",
+          "type": "esriFieldTypeOID"
+        }, {
+          "name": "description",
+          "alias": "Description",
+          "type": "esriFieldTypeString"
+        }, ],
+        "drawingInfo": {
+          "renderer": {
+            "type": "simple",
+            "symbol": linesymbol
+          }
+        }
+      };
+      selectedLineGraphic = [];
+
+      var popupTemplate = new PopupTemplate({
+        title: "两客一危车辆",
+        description: "{vehicle_number}"
+      });
+
+      featureLayer = new FeatureLayer(featureCollection, {
+        id: 'flickrLayer',
+        infoTemplate: popupTemplate
+      });
+      moveLayer = new FeatureLayer(featureCollection, {
+        id: 'moveLayer',
+        infoTemplate: popupTemplate
+      });
+
+      lineLayer = new GraphicsLayer();
+
+      map.addLayers([featureLayer, moveLayer, lineLayer]);
+      // map.graphics.add(polylineGraphic);
+
+      $.get(
+        "https://apaas.wodcloud.com/mapsamples/static/data/mapLocation.json",
+        function (data) {
+          var features = [];
+          array.forEach(data.features, function (feature) {
+            var attr = {};
+            attr["vehicle_number"] = feature.properties.vehicle_number;
+            attr["total_mileage"] = feature.properties.total_mileage;
+            attr["recorder_speed"] = feature.properties.recorder_speed;
+            attr["direction"] = feature.properties.direction;
+            var geometry = new Point(feature.geometry.coordinates);
+            var graphic = new Graphic(geometry);
+            graphic.setAttributes(attr);
+            features.push(graphic);
+          });
+          featureLayer.applyEdits(features, null, null);
+        });
+
+      map.on("extent-change", function () {
+        if (timer) {
+          clearInterval(timer);
+        }
+
+        if (map.extent.xmax - map.extent.xmin > 0.5) {
+          featureLayer.show();
+          moveLayer.hide();
+          lineLayer.hide();
+          return
+        }
+
+        featureLayer.hide();
+        moveLayer.show();
+        lineLayer.show();
+        var query = new Query();
+        query.geometry = map.extent;
+        featureLayer.queryFeatures(query, selectInMap);
+      })
+
+      function selectInMap(response) {
+        var features = [];
+        console.log(response.features);
+
+        //深拷贝
+        array.forEach(response.features, function (feature) {
+          var attr = {};
+          attr["vehicle_number"] = feature.attributes.vehicle_number;
+          attr["direction"] = feature.attributes.direction;
+          var geometry = feature.geometry;
+          var graphic = new Graphic(geometry);
+          graphic.setAttributes(attr);
+          features.push(graphic);
+        });
+        // var features = response.features;
+        console.log(features);
+
+
+        map.removeLayer(moveLayer);
+        map.removeLayer(lineLayer);
+        moveLayer = new FeatureLayer(featureCollection, {
+          id: 'moveLayer',
+          infoTemplate: popupTemplate
+        });
+        lineLayer = new GraphicsLayer();
+        map.addLayer(moveLayer);
+        map.addLayer(lineLayer);
+
+        selectedGraphics = [];
+        selectedLineGraphic = [];
+        for (var i = 0; i < features.length; i++) {
+          feature = features[i];
+          if (map.extent.contains(feature.geometry)) {
+            selectedGraphics.push(feature);
+            var linegeometry = new Polyline({
+              "paths": [
+                [
+                  [feature.geometry.x, feature.geometry.y],
+                ]
+              ],
+              "spatialReference": {
+                "wkid": 4326
+              }
+            })
+            var polylineGraphic = new Graphic(linegeometry, linesymbol);
+            selectedLineGraphic.push(polylineGraphic)
+          }
+        }
+        movecounts = 0;
+        if (timer) {
+          clearInterval(timer);
+        }
+        timer = setInterval(() => {
+          lineLayer.clear();
+          for (var i = 0; i < selectedGraphics.length; i++) {
+            var angle =
+              ((2 * Math.PI) / 360) * selectedGraphics[i].attributes.direction;
+            if (movecounts == 50) {
+              selectedGraphics[i].geometry.x -= 0.025 * Math.sin(angle);
+              selectedGraphics[i].geometry.y -= 0.025 * Math.cos(angle);
+              selectedLineGraphic[i].geometry.paths[0] = selectedLineGraphic[i].geometry.paths[0].slice(0, 1);
+            } else {
+              selectedGraphics[i].geometry.x += 0.0005 * Math.sin(angle);
+              selectedGraphics[i].geometry.y += 0.0005 * Math.cos(angle);
+              selectedLineGraphic[i].geometry.paths[0].push([selectedGraphics[i].geometry.x, selectedGraphics[i]
+                .geometry.y
+              ])
+            }
+            lineLayer.add(selectedLineGraphic[i])
+
+          }
+          lineLayer.redraw();
+          moveLayer.applyEdits(selectedGraphics, null, null);
+          if (movecounts == 50) {
+            movecounts = 0;
+          }
+          movecounts++;
+        }, 200);
+      }
+    });
+
+  </script>
+</head>
+
+<body>
+  <div id="map"></div>
+</body>
+
+</html>

static/view/demo/page-3d_base_map.html

+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
+  <title>3D Base Map</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/api_4.x/init.js"></script>
+  <script>
+    require([
+      "esri/Map",
+      "esri/views/SceneView",
+      "esri/layers/WebTileLayer",
+      "esri/config",
+      "esri/geometry/Point",
+      "dojo/domReady!"
+    ], function (Map, SceneView, WebTileLayer, ESRICONFIG, Point) {
+      // 通过瓦片形式加载天地图
+      // 天地图根据投影分为两种：墨卡托和经纬度，在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"
+      );
+      var map = new Map({
+        ground: "world-elevation"
+      });
+      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() {
+        setTimeout(view.goTo({
+          target: pt,
+          zoom: 10,
+          tilt: 0,
+          heading: 0
+        }), 4000)
+      })
+    });
+
+  </script>
+</head>
+
+<body>
+  <div id="viewDiv"></div>
+</body>
+
+</html>

static/view/demo/page-3d_csvlayer.html

+<!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>
+  <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/api_4.x/init.js"></script>
+  <script>
+    require([
+      "esri/config",
+      "esri/layers/WebTileLayer",
+      "esri/Map",
+      "esri/views/SceneView",
+      "esri/layers/CSVLayer",
+      "esri/renderers/SimpleRenderer",
+      "esri/symbols/SimpleMarkerSymbol",
+      "esri/Color",
+      "dojo/domReady!"
+    ], function (ESRICONFIG, WebTileLayer, Map, SceneView, CSVLayer, SimpleRenderer, SimpleMarkerSymbol, Color) {
+      // 通过瓦片形式加载天地图
+      // 天地图根据投影分为两种：墨卡托和经纬度，在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"
+      );
+
+      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"
+          }]
+        }
+      };
+
+      var map = new Map({
+        ground: "world-elevation"
+      });
+      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
+      });
+    });
+
+  </script>
+</head>
+
+<body>
+  <div id="viewDiv"></div>
+</body>
+
+</html>

static/view/demo/page-arcgis_load_geoserver_wmts.html

+<!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

static/view/demo/page-basic_web_map.html

+<!DOCTYPE html>
+<html>
+    
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
+    <title>Portal Web Map</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/api_4.x/init.js"></script>
+    <script>
+        require([
+            "esri/config",
+            "esri/views/MapView",
+            "esri/WebMap"
+        ], function(esriConfig, MapView, WebMap) {
+            //使用portal门户的地图资源
+            esriConfig.portalUrl = "https://apaasgis.wodcloud.com/arcgis";
+            var webmap = new WebMap({
+                portalItem: {
+                    id: "54a708b3890a4d1aaff37988697aeaec"
+                }
+            });
+
+            var view = new MapView({
+                map: webmap,
+                container: "viewDiv"
+            });
+        });
+    </script>
+</head>
+<body>
+    <div id="viewDiv"></div>
+</body>
+
+</html>
\ No newline at end of file

static/view/demo/page-buffer.html

+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
+    <title>Query features from a FeatureLayer - 4.11</title>
+
+    <!-- Windows IIS 运行配置 -->
+    <!-- <script src="/mapsamples/static/js/jquery-3.3.1.min.js"></script>
+    <script src="/mapsamples/static/config/mapconfig.js"></script> -->
+    <!-- <script src="/api_4.x/init.js"></script> -->
+    <!-- <script src="https://js.arcgis.com/4.11/"></script> -->
+    <!-- <script src="/api_4.x/init.js"></script> -->
+    <!---------------------------------------------------------------->
+    <script src="https://apaas.wodcloud.com/mapsamples/static/js/jquery-3.3.1.min.js"></script>
+    <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>
+
+    <style>
+        html,
+        body,
+        #viewDiv {
+            height: 100%;
+            width: 100%;
+            margin: 0;
+            padding: 0;
+        }
+
+        #infoDiv {
+            background-color: white;
+            color: black;
+            padding: 6px;
+            width: 400px;
+        }
+
+        #results {
+            font-weight: bolder;
+        }
+    </style>
+
+    <script>
+        require([
+            "esri/Map",
+            "esri/Basemap",
+            "esri/views/MapView",
+            "esri/layers/WebTileLayer",
+            "esri/layers/support/TileInfo",
+            "esri/layers/FeatureLayer",
+            "esri/layers/GraphicsLayer",
+            "esri/geometry/geometryEngine",
+            "esri/Graphic"
+        ], function (
+            Map,
+            Basemap,
+            MapView,
+            WebTileLayer,
+            TileInfo,
+            FeatureLayer,
+            GraphicsLayer,
+            geometryEngine,
+            Graphic
+        ) {
+            var footprintUrl = "https://geoserver.deekong.com/arcgis/rest/services/GA_TRACK_DEMO/FeatureServer/0";
+            var poiUrl = "https://geoserver.deekong.com/arcgis/rest/services/YJ_EXPOSION/FeatureServer/1";
+            var lineUrl = "https://geoserver.deekong.com/arcgis/rest/services/YJ_EXPOSION/FeatureServer/0"
+
+            var wellBuffer, wellsGeometries, magnitude;
+
+            var wellTypeSelect = document.getElementById("well-type");
+            var magSlider = document.getElementById("mag");
+            var distanceSlider = document.getElementById("distance");
+            var queryQuakes = document.getElementById("query-quakes");
+
+            var lineLayer = new FeatureLayer({
+                url: lineUrl,
+                outFields: ["*"],
+                visible: true
+            });
+
+            var poiLayer = new FeatureLayer({
+                url: poiUrl,
+                outFields: ["*"],
+                visible: true
+            });
+
+            var renderer = {
+                type: "simple",
+                symbol: {
+                    type: "simple-marker",
+                    outline: {
+                        color: [128, 128, 128],
+                        width: 0.5
+                    }
+                },
+            };
+
+            var resultsLayer = new GraphicsLayer();
+            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,
+                layers: [lineLayer, poiLayer, resultsLayer]
+            });
+            var view = new MapView({
+                map: map,
+                container: "viewDiv",
+                spatialReference: {
+                    wkid: 4326
+                },
+                center: [116.3, 40],
+                zoom: 11,
+                constraints: {
+                    lods: tileInfo.lods,
+                    snapToZoom: true
+                }
+            });
+
+            view.when(function () {
+                var wellsGeometries;
+                lineLayer.queryFeatures().then(function (results) {
+                    console.log(results);
+                    wellsGeometries = results.features.map(function (feature) {
+                        return feature.geometry;
+                    });
+                    return wellsGeometries;
+                });
+            })
+                .then(createBuffer(wellsGeometries))
+
+
+            function createBuffer() {
+                var bufferDistance = parseInt(1000);
+                console.log("buffer distance:" + bufferDistance);
+                console.log(wellsGeometries);
+                var wellBuffers = geometryEngine.buffer(
+                    wellsGeometries,
+                    [bufferDistance],
+                    "meters",
+                    true
+                );
+                wellBuffer = wellBuffers[0];
+
+                // add the buffer to the view as a graphic
+                var bufferGraphic = new Graphic({
+                    geometry: wellBuffer,
+                    symbol: {
+                        type: "simple-fill", // autocasts as new SimpleFillSymbol()
+                        outline: {
+                            width: 1.5,
+                            color: [255, 0, 0, 0.5]
+                        },
+                        style: "none"
+                    }
+                });
+                view.graphics.removeAll();
+                view.graphics.add(bufferGraphic);
+            }
+        });
+
+    </script>
+</head>
+
+<body>
+    <div id="viewDiv"></div>
+</body>
+
+</html>
\ No newline at end of file

static/view/demo/page-bus_line.html

+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <title>公交车路线</title>
+
+  <style>
+    html,
+    body {
+      padding: 0;
+      margin: 0;
+      height: 100%;
+      width: 100%;
+    }
+
+    .container {
+      display: flex;
+      height: 100%;
+      flex-direction: row;
+    }
+
+    .container>div {
+      flex: 1 1 auto;
+      width: 50%;
+      height: 100%;
+    }
+
+  </style>
+
+
+  <script src="https://apaas.wodcloud.com/mapsamples/static/js/echarts.min.js"></script>
+
+  <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="https://apaas.wodcloud.com/mapsamples/static/js/jquery-3.3.1.min.js"></script>
+  <script>
+    var map, view, option;
+    require([
+      "esri/Map",
+      "esri/Basemap",
+      "https://apaas.wodcloud.com/mapsamples/static/js/4EchartsLayer.js",
+      "esri/views/MapView",
+      "esri/layers/WebTileLayer",
+      "esri/layers/support/TileInfo",
+      "dojo/domReady!"
+    ], function (
+      Map, Basemap, echartsLayer, MapView, WebTileLayer, TileInfo
+    ) {
+      // 通过瓦片形式加载天地图的
+      // 天地图根据投影分为两种：墨卡托和经纬度
+      let 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"]
+      });
+      let 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"]
+      });
+      // 天地图经纬度地图及注记作为底图
+      var tdtBasemap = new Basemap({
+        baseLayers: [tiledlayer, annolayer],
+        title: "TDT Basemap",
+        id: "tdtBasemap",
+      });
+      // 创建地图
+      map = new Map({
+        basemap: tdtBasemap
+      });
+      //创建二维地图
+      view = new MapView({
+        map: map,
+        container: "map",
+        zoom: 10,
+        center: [116.3304, 39.8707]
+      });
+
+      $.get("https://apaas.wodcloud.com/mapsamples/static/data/lines-bus.json", function (data) {
+        var hStep = 300 / (data.length - 1);
+        var busLines = [].concat.apply([], data.map(function (busLine, idx) {
+          var prevPt;
+          var points = [];
+          for (var i = 0; i < busLine.length; i += 2) {
+            var pt = [busLine[i], busLine[i + 1]];
+            if (i > 0) {
+              pt = [
+                prevPt[0] + pt[0],
+                prevPt[1] + pt[1]
+              ];
+            }
+            prevPt = pt;
+
+            points.push([pt[0] / 1e4, pt[1] / 1e4]);
+          }
+          return {
+            coords: points,
+            lineStyle: {
+              normal: {
+                color: echarts.color.modifyHSL('#5A94DF', Math.round(hStep * idx))
+              }
+            }
+          };
+        }))
+        option = {
+          series: [{
+            type: 'lines',
+            coordinateSystem: 'arcgis',
+            polyline: true,
+            data: busLines,
+            silent: true,
+            lineStyle: {
+              normal: {
+                // color: '#c23531',
+                // color: 'rgb(200, 35, 45)',
+                opacity: 0.2,
+                width: 1
+              }
+            },
+            progressiveThreshold: 500,
+            progressive: 200
+          }, {
+            type: 'lines',
+            coordinateSystem: 'arcgis',
+            polyline: true,
+            data: busLines,
+            lineStyle: {
+              normal: {
+                width: 0
+              }
+            },
+            effect: {
+              constantSpeed: 20,
+              show: true,
+              trailLength: 0.1,
+              symbolSize: 1.5
+            },
+            zlevel: 1
+          }]
+        }
+        var chart = new echartsLayer(view, echarts, option);
+      });
+    });
+
+  </script>
+</head>
+
+<body class="tundra">
+  <div class="container">
+    <div id="map"></div>
+  </div>
+</body>
+
+</html>

static/view/demo/page-echarts_web_map.html

+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
+    <title>Portal Web Map</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%;
+        }
+
+        .mycharts {
+            background: #fff;
+            width: 400px;
+            position: absolute;
+            top: 0px;
+            right: 0px;
+            overflow-y: auto;
+            box-shadow: 0px 2px 20px -5px #1b8cf2;
+        }
+
+        .mycharts .chart_pie {
+            width: 400px;
+            height: 170px;
+        }
+    </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/js/echarts.min.js"></script>
+    <script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
+    <script>
+        require([
+            "esri/config",
+            "esri/views/MapView",
+            "esri/WebMap"
+        ], function (esriConfig, MapView, WebMap) {
+            esriConfig.portalUrl = "https://apaasgis.wodcloud.com/arcgis";
+            var webmap = new WebMap({
+                portalItem: {
+                    id: "54a708b3890a4d1aaff37988697aeaec"
+                }
+            });
+
+            var view = new MapView({
+                map: webmap,
+                container: "viewDiv"
+            });
+
+            var echartsData = [
+                { "value": 164, "name": "黔南州" },
+                { "value": 160, "name": "贵阳" },
+                { "value": 80, "name": "六盘水" },
+                { "value": 255, "name": "遵义" },
+                { "value": 125, "name": "安顺" },
+                { "value": 201, "name": "毕节" },
+                { "value": 168, "name": "铜仁" },
+                { "value": 115, "name": "黔西南州" },
+                { "value": 115, "name": "黔东南州" }
+            ]
+            view.when(function () {
+                initEChartPie(echartsData);
+            });
+
+            function initEChartPie(data) {
+                var chart_pie = echarts.init(document.getElementById("chart_pie"));
+                var option = {
+                    tooltip: {
+                        trigger: 'item',
+                        formatter: "{a} <br/>{b}: {c} ({d}%)"
+                    },
+                    series: [
+                        {
+                            name: '摄像头数量',
+                            type: 'pie',
+                            radius: ['50%', '70%'],
+                            label: {
+                                normal: {
+                                    show: true,
+                                    formatter: "{b}:{c} \n {d}%"
+                                }
+                            },
+                            data: data
+                        }
+                    ]
+                };
+                chart_pie.setOption(option);
+            };
+        });
+    </script>
+</head>
+
+<body>
+    <div id="viewDiv"></div>
+    <div class="mycharts" id="mycharts">
+        <div class="chart_pie" id="chart_pie"></div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file

static/view/demo/page-editFeatures.html

+<!DOCTYPE html>
+<html>
+    
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
+    <title>Edit features</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/api_4.x/init.js"></script>
+    <script>
+        require([
+                "esri/Map",
+                "esri/views/MapView",
+                "esri/layers/FeatureLayer",
+                "esri/layers/MapImageLayer",
+                "esri/widgets/Editor"
+            ], function(Map, MapView, FeatureLayer, MapImageLayer, Editor) {
+            
+                //添加ArcGIS Server FeatureService服务，调用点层,所有数组字段
+                let point = new FeatureLayer({
+                url: "https://arcgisserver.wodcloud.com/arcgis/rest/services/GZ_FEATURE_EDITABLE/FeatureServer/0",
+                mode: FeatureLayer.MODE_ONDEMAND,
+                outFields: ["*"],
+                });
+                //添加ArcGIS Server FeatureService服务，调用线层,所有数组字段
+                let line = new FeatureLayer({
+                url: "https://arcgisserver.wodcloud.com/arcgis/rest/services/GZ_FEATURE_EDITABLE/FeatureServer/1",
+                mode: FeatureLayer.MODE_ONDEMAND,
+                outFields: ["*"],
+                });
+                //添加ArcGIS Server FeatureService服务，调用面层,所有数组字段
+                let polygon = new FeatureLayer({
+                url: "https://arcgisserver.wodcloud.com/arcgis/rest/services/GZ_FEATURE_EDITABLE/FeatureServer/2",
+                mode: FeatureLayer.MODE_ONDEMAND,
+                outFields: ["*"],
+                });
+
+                let mymap = new Map({   
+                basemap: "topo",
+                layers: [point,line,polygon]
+                });
+
+                let myview = new MapView({
+                container: "viewDiv",
+                map: mymap,
+                center: [116.3, 39.9],
+                zoom: 9
+                });
+
+
+                let editor = new Editor({
+                view: myview,
+                layerInfos: [{
+                    layer: point,line,polygon,
+                    deleteEnabled: false 
+                }],
+                });
+
+                // 在视图右上角添加小部件
+                myview.ui.add(editor, "top-right");
+                });
+
+    </script>
+</head>
+<body>
+    <div id="viewDiv"></div>
+</body>
+
+</html>
\ No newline at end of file

static/view/demo/page-featurelayer.html

+<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,
+    #sceneDiv {
+      height: 100%;
+      width: 100%;
+      margin: 0;
+      padding: 0;
+      font-family: sans-serif;
+    }
+
+    .panel-container {
+      position: relative;
+      width: 100%;
+      height: 100%;
+    }
+
+    .panel-side {
+      padding: 2px;
+      box-sizing: border-box;
+      width: 300px;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      right: 0;
+      color: #fff;
+      background-color: rgba(0, 0, 0, 0.6);
+      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">
+      <h3>网吧终端</h3>
+      <ul id="nyc_graphics">
+        <li>Loading&hellip;</li>
+      </ul>
+    </div>
+    <div id="sceneDiv"></div>
+  </div>
+</body>
+
+</html>

static/view/demo/page-flareClusterLayer.html

+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+
+  <title>Flare Cluster Layer Example</title>
+
+
+  <link href="//fonts.googleapis.com/css?family=Abel" rel="stylesheet">
+  <link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/css/main.css">
+
+  <style>
+    html,
+    body {
+      height: 100%;
+      width: 100%;
+      margin: 0;
+      padding: 0;
+      font-family: abel, Arial, Calibri;
+      overflow: hidden;
+    }
+
+    #container,
+    .view {
+      width: 100%;
+      height: 100%;
+      padding: 0;
+      margin: 0;
+      position: relative;
+    }
+
+    .view.hidden {
+      position: absolute;
+      z-index: -10;
+    }
+
+
+    /* top menu */
+    #top-menu {
+      -webkit-box-shadow: 2px 3px 22px 0px rgba(173, 173, 173, 0.75);
+      -moz-box-shadow: 2px 3px 22px 0px rgba(173, 173, 173, 0.75);
+      box-shadow: 2px 3px 22px 0px rgba(173, 173, 173, 0.75);
+      position: absolute;
+      left: 10px;
+      top: 10px;
+      padding: 0 10px;
+      height: 45px;
+      width: auto;
+      background: rgba(46, 68, 94, 0.8);
+      z-index: 2001;
+      color: #FFF;
+    }
+
+
+
+    #top-menu .section {
+      display: inline-block;
+      height: 100%;
+      padding: 0 5px;
+    }
+
+
+    #top-menu .separator {
+      height: 100%;
+      width: 3px;
+      border-right: 1px solid #d0d0d0;
+      padding: 0;
+    }
+
+    #top-menu .button {
+      display: inline-block;
+      height: 100%;
+      color: #FFF;
+      margin: 0 5px;
+      background: none;
+      border: none;
+      cursor: pointer;
+      width: 85px;
+      padding: 0;
+    }
+
+    #top-menu .button.active {
+      font-weight: bold;
+      background: rgba(0, 0, 0, 0.1);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+    }
+
+
+    #top-menu .button:focus {
+      outline: none;
+    }
+
+    #top-menu .button:hover {
+      opacity: 0.7;
+      transition: opacity 0.4s;
+    }
+
+    #top-menu select {
+      font-size: 1em;
+      height: 60%;
+      font-family: abel, Arial;
+    }
+
+    @media (min-width: 320px) and (max-width: 639px) {
+      #top-menu #title-text {
+        display: none;
+      }
+
+      #top-menu .button {
+        width: 75px;
+        margin: 0;
+      }
+    }
+
+    #api-link {
+      position: absolute;
+      bottom: 20px;
+      left: 10px;
+      font-weight: bold;
+    }
+
+    /* Set up some css rules to animate things */
+
+    /* Some rules to change the appearance of clusters and it's text when activated */
+
+    /* Scale up the clusters when activated */
+    .cluster-group.activated {
+      transform-origin: center;
+      transform: scale(1.2);
+      transition: transform linear 0.4s;
+    }
+
+    /* Change the appearance of clusters when activated */
+    .cluster-group.activated .cluster {
+      stroke: rgba(255, 255, 255, 1);
+      stroke-width: 2;
+      transition: all ease 1s;
+    }
+
+    .cluster-group.activated .cluster-text {
+      fill: #000;
+      font-weight: bold;
+      transition: all ease 1s;
+    }
+
+
+    /* hide flares by default */
+    .flare-group {
+      opacity: 0;
+    }
+
+
+    /* animate display of flares */
+    .flare-group.activated {
+      opacity: 1;
+      transition: opacity linear 0.06s;
+    }
+
+    /* this just chains the display of flares to occur one after the other using transition delay - could be a better way to do this natively but using SASS or LESS this would be much more concise */
+    .flare-group.activated:nth-of-type(1) {
+      transition-delay: 0.06s;
+    }
+
+    .flare-group.activated:nth-of-type(2) {
+      transition-delay: 0.12s;
+    }
+
+    .flare-group.activated:nth-of-type(3) {
+      transition-delay: 0.18s;
+    }
+
+    .flare-group.activated:nth-of-type(4) {
+      transition-delay: 0.24s;
+    }
+
+    .flare-group.activated:nth-of-type(5) {
+      transition-delay: 0.30s;
+    }
+
+    .flare-group.activated:nth-of-type(6) {
+      transition-delay: 0.36s;
+    }
+
+    .cluster-group .flare-group.activated:nth-of-type(7) {
+      transition-delay: 0.42s;
+    }
+
+    .flare-group.activated:nth-of-type(8) {
+      transition-delay: 0.48s;
+    }
+
+
+    /*
+            Cross browser notes on the example CSS animations:
+            IE/Edge: These POS's don't support transforms on svg elements using css, so the css transform animations won't work.
+        */
+
+  </style>
+
+
+  <script>
+    var dojoConfig = {
+      async: true,
+      tlmSiblingOfDojo: false,
+      packages: [{
+        name: "fcl",
+        location: location.pathname.replace(/\/[^/]+$/, '') + "/fcl"
+      }],
+      has: {
+        "esri-promise-compatibility": 1 // enable native promises and remove the warning about using when() instead of then(). https://developers.arcgis.com/javascript/latest/guide/release-notes/index.html#improved-compatibility-with-javascript-promises
+      }
+    };
+
+  </script>
+  <script src="https://apaas.wodcloud.com/mapsamples/static/js/jquery-3.3.1.min.js"></script>
+  <script src="https://js.arcgis.com/4.12/"></script>
+
+  <script type="text/javascript">
+    var map,
+      mapView,
+      sceneView,
+      activeView,
+      graphics,
+      clusterLayer;
+
+    //set some defaults
+    var maxSingleFlareCount = 8;
+    var areaDisplayMode = "activated";
+
+    require(["esri/Map",
+        "esri/Color",
+        "esri/Basemap",
+        "esri/config",
+        "esri/views/MapView",
+        "esri/layers/WebTileLayer",
+        "esri/layers/support/TileInfo",
+        "esri/views/SceneView",
+        "esri/geometry/Extent",
+        "esri/geometry/SpatialReference",
+        "esri/geometry/Point",
+        "esri/PopupTemplate",
+        "esri/layers/GraphicsLayer",
+        "esri/Graphic",
+        "esri/symbols/SimpleMarkerSymbol",
+        "esri/symbols/SimpleLineSymbol",
+        "esri/symbols/SimpleFillSymbol",
+        "esri/symbols/TextSymbol",
+        "esri/symbols/TextSymbol3DLayer",
+        "esri/symbols/Font",
+        "esri/renderers/ClassBreaksRenderer",
+        "esri/core/watchUtils",
+        "esri/geometry/support/webMercatorUtils",
+        "https://apaas.wodcloud.com/mapsamples/static/js/FlareClusterLayer_v4.js",
+        "dojo",
+        "dojo/ready",
+        "dojo/json",
+        "dojo/dom",
+        "dojo/on",
+        "dojo/dom-attr",
+        "dojo/dom-class",
+        "dojo/text!./data.json"
+      ],
+      function (Map, Color, Basemap, ESRICONFIG, MapView, WebTileLayer, TileInfo, SceneView, Extent, SpatialReference,
+        Point,
+        PopupTemplate, GraphicsLayer,
+        Graphic, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, TextSymbol, TextSymbol3DLayer, Font,
+        ClassBreaksRenderer,
+        watchUtils, webMercatorUtils, fcl, dojo, ready, JSON, dom, on, domAttr, domClass, data) {
+
+        ready(function () {
+          var options;
+          //   var url = "https://apaas.wodcloud.com/mapsamples/static/data/data.json"
+          //   $.get(url, function (data) {
+          //     console.log(data);
+          //     setdata(response);
+          //   });
+          // 通过瓦片形式加载天地图
+          // 天地图根据投影分为两种：墨卡托和经纬度，在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"
+          );
+
+          document.getElementById("area-mode").value = areaDisplayMode;
+
+          map = new Map();
+          map.layers.add(tiledLayer);
+          map.layers.add(annolayer);
+          mapView = new MapView({
+            map: map,
+            container: "views",
+            center: [133, -25],
+            zoom: 4,
+            ui: {
+              components: ["compass", "zoom"]
+            }
+          });
+          mapView.ui.move("zoom", "bottom-right");
+          mapView.ui.move("compass", "bottom-right");
+
+          // default map view to be active
+          activeView = mapView;
+          setActiveViewClasses(activeView);
+
+          sceneView = new SceneView({
+            map: map,
+            center: [133, -25],
+            zoom: 4,
+            ui: {
+              components: ["compass", "zoom"]
+            }
+          });
+          sceneView.ui.move("zoom", "bottom-right");
+          sceneView.ui.move("compass", "bottom-right");
+
+          //load up the dummy data
+          var allData = JSON.parse(data);
+
+          mapView.when(function (e) {
+            console.log('map view loaded');
+            if (activeView === mapView) {
+              initLayer(allData);
+            }
+          }, function (err) {
+            console.error("failed to load MapView " + e);
+          });
+
+        });
+
+        function initLayer(data) {
+
+          //init the layer, more options are available and explained in the cluster layer constructor
+
+          //set up a class breaks renderer to render different symbols based on the cluster count. Use the required clusterCount property to break on.
+          var defaultSym = new SimpleMarkerSymbol({
+            size: 6,
+            color: "#FF0000",
+            outline: null
+          });
+
+          var renderer = new ClassBreaksRenderer({
+            defaultSymbol: defaultSym
+          });
+          renderer.field = "clusterCount";
+
+          var smSymbol = new SimpleMarkerSymbol({
+            size: 22,
+            outline: new SimpleLineSymbol({
+              color: [221, 159, 34, 0.8]
+            }),
+            color: [255, 204, 102, 0.8]
+          });
+          var mdSymbol = new SimpleMarkerSymbol({
+            size: 24,
+            outline: new SimpleLineSymbol({
+              color: [82, 163, 204, 0.8]
+            }),
+            color: [102, 204, 255, 0.8]
+          });
+          var lgSymbol = new SimpleMarkerSymbol({
+            size: 28,
+            outline: new SimpleLineSymbol({
+              color: [41, 163, 41, 0.8]
+            }),
+            color: [51, 204, 51, 0.8]
+          });
+          var xlSymbol = new SimpleMarkerSymbol({
+            size: 32,
+            outline: new SimpleLineSymbol({
+              color: [200, 52, 59, 0.8]
+            }),
+            color: [250, 65, 74, 0.8]
+          });
+
+          renderer.addClassBreakInfo(0, 19, smSymbol);
+          renderer.addClassBreakInfo(20, 150, mdSymbol);
+          renderer.addClassBreakInfo(151, 1000, lgSymbol);
+          renderer.addClassBreakInfo(1001, Infinity, xlSymbol);
+
+          var areaRenderer;
+
+          // if area display mode is set. Create a renderer to display cluster areas. Use SimpleFillSymbols as the areas are polygons
+          var defaultAreaSym = new SimpleFillSymbol({
+            style: "solid",
+            color: [0, 0, 0, 0.2],
+            outline: new SimpleLineSymbol({
+              color: [0, 0, 0, 0.3]
+            })
+          });
+
+          areaRenderer = new ClassBreaksRenderer({
+            defaultSymbol: defaultAreaSym
+          });
+          areaRenderer.field = "clusterCount";
+
+          var smAreaSymbol = new SimpleFillSymbol({
+            color: [255, 204, 102, 0.4],
+            outline: new SimpleLineSymbol({
+              color: [221, 159, 34, 0.8],
+              style: "dash"
+            })
+          });
+          var mdAreaSymbol = new SimpleFillSymbol({
+            color: [102, 204, 255, 0.4],
+            outline: new SimpleLineSymbol({
+              color: [82, 163, 204, 0.8],
+              style: "dash"
+            })
+          });
+          var lgAreaSymbol = new SimpleFillSymbol({
+            color: [51, 204, 51, 0.4],
+            outline: new SimpleLineSymbol({
+              color: [41, 163, 41, 0.8],
+              style: "dash"
+            })
+          });
+          var xlAreaSymbol = new SimpleFillSymbol({
+            color: [250, 65, 74, 0.4],
+            outline: new SimpleLineSymbol({
+              color: [200, 52, 59, 0.8],
+              style: "dash"
+            })
+          });
+
+          areaRenderer.addClassBreakInfo(0, 19, smAreaSymbol);
+          areaRenderer.addClassBreakInfo(20, 150, mdAreaSymbol);
+          areaRenderer.addClassBreakInfo(151, 1000, lgAreaSymbol);
+          areaRenderer.addClassBreakInfo(1001, Infinity, xlAreaSymbol);
+
+          // Set up another class breaks renderer to style the flares individually
+          var flareRenderer = new ClassBreaksRenderer({
+            defaultSymbol: renderer.defaultSymbol
+          });
+          flareRenderer.field = "clusterCount";
+
+          var smFlareSymbol = new SimpleMarkerSymbol({
+            size: 14,
+            color: [255, 204, 102, 0.8],
+            outline: new SimpleLineSymbol({
+              color: [221, 159, 34, 0.8]
+            })
+          });
+          var mdFlareSymbol = new SimpleMarkerSymbol({
+            size: 14,
+            color: [102, 204, 255, 0.8],
+            outline: new SimpleLineSymbol({
+              color: [82, 163, 204, 0.8]
+            })
+          });
+          var lgFlareSymbol = new SimpleMarkerSymbol({
+            size: 14,
+            color: [51, 204, 51, 0.8],
+            outline: new SimpleLineSymbol({
+              color: [41, 163, 41, 0.8]
+            })
+          });
+          var xlFlareSymbol = new SimpleMarkerSymbol({
+            size: 14,
+            color: [250, 65, 74, 0.8],
+            outline: new SimpleLineSymbol({
+              color: [200, 52, 59, 0.8]
+            })
+          });
+
+          flareRenderer.addClassBreakInfo(0, 19, smFlareSymbol);
+          flareRenderer.addClassBreakInfo(20, 150, mdFlareSymbol);
+          flareRenderer.addClassBreakInfo(151, 1000, lgFlareSymbol);
+          flareRenderer.addClassBreakInfo(1001, Infinity, xlFlareSymbol);
+
+          // set up a popup template
+          var popupTemplate = new PopupTemplate({
+            title: "{name}",
+            content: [{
+              type: "fields",
+              fieldInfos: [{
+                  fieldName: "facilityType",
+                  label: "Facility Type",
+                  visible: true
+                },
+                {
+                  fieldName: "postcode",
+                  label: "Post Code",
+                  visible: true
+                },
+                {
+                  fieldName: "isOpen",
+                  label: "Opening Hours",
+                  visible: true
+                }
+              ]
+            }]
+          });
+
+
+          options = {
+            id: "flare-cluster-layer",
+            clusterRenderer: renderer,
+            areaRenderer: areaRenderer,
+            flareRenderer: flareRenderer,
+            singlePopupTemplate: popupTemplate,
+            spatialReference: new SpatialReference({
+              "wkid": 4326
+            }),
+            subTypeFlareProperty: "facilityType",
+            singleFlareTooltipProperty: "name",
+            displaySubTypeFlares: true,
+            maxSingleFlareCount: maxSingleFlareCount,
+            clusterRatio: 75,
+            clusterAreaDisplay: areaDisplayMode,
+            data: data
+          }
+
+          clusterLayer = new fcl.FlareClusterLayer(options);
+          map.add(clusterLayer);
+
+          clusterLayer.on("draw-complete", function () {
+            //console.log('draw complete event callback');
+          });
+
+        }
+
+        function clearLayer() {
+          map.remove(clusterLayer);
+          clusterLayer = null;
+        }
+
+        //setup some event handlers to react to change of options
+
+        on(dom.byId("map-view-select"), "click", function (evt) {
+          setActiveView(mapView);
+        });
+
+        on(dom.byId("scene-view-select"), "click", function (evt) {
+          setActiveView(sceneView);
+        });
+
+        on(dom.byId("area-mode"), "change", function (evt) {
+          clusterLayer.clusterAreaDisplay = this.value;
+          clusterLayer.draw();
+        });
+
+        function setdata(response) {
+          if (response.features) {
+            options.data = response.features;
+          } else {
+            alert("读取数据失败")
+          }
+        }
+
+        function setActiveView(view) {
+          if (view === activeView) return; // it's already active
+
+          var viewpoint = activeView.viewpoint.clone();
+          var container = activeView.container;
+          activeView.container = null;
+
+          if (view === mapView) {
+            mapView.viewpoint = viewpoint;
+            mapView.container = container;
+            mapView.rotation = 0;
+            activeView = mapView;
+          } else {
+            sceneView.viewpoint = viewpoint;
+            sceneView.container = container;
+            activeView = sceneView;
+          }
+
+          setActiveViewClasses(view);
+
+          activeView.when(() => {
+            //when switching views force a redraw
+            if (clusterLayer) {
+              clusterLayer.draw(view);
+            }
+          });
+        }
+
+        function setActiveViewClasses(view) {
+          if (view === mapView) {
+            domClass.add(dom.byId("map-view-select"), "active");
+            domClass.remove(dom.byId("scene-view-select"), "active");
+          } else {
+            domClass.add(dom.byId("scene-view-select"), "active");
+            domClass.remove(dom.byId("map-view-select"), "active");
+          }
+        }
+
+      });
+
+  </script>
+
+
+</head>
+
+
+<body>
+
+  <div id="container">
+
+    <div class="view" id="views">
+    </div>
+
+    <div id="top-menu">
+      <div class="section text">
+        <span id="title-text">Flare Cluster Layer - </span>API v4.12
+      </div>
+
+      <span class="separator"></span>
+
+      <div class="section">
+        <button id="map-view-select" class="button">Map View</button>
+        <button id="scene-view-select" class="button"> Scene View</button>
+      </div>
+      <span class="separator"></span>
+
+      <div class="section">
+        Area mode:
+        <select id="area-mode">
+          <option value="">None</option>
+          <option value="activated">Hover</option>
+          <option value="always">Always</option>
+        </select>
+      </div>
+
+    </div>
+  </div>
+
+</body>
+
+</html>

static/view/demo/page-fz_map.html

+<!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

static/view/demo/page-geocoding.html

+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
+    <title>2D Base Map</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%;
+        }
+
+        .search-container {
+            float: right;
+            font-size: 15px
+        }
+
+        input[type=text] {
+            padding: 6px;
+            margin-top: 8px;
+            font-size: 17px;
+            border: none;
+        }
+
+        .search-container button {
+            float: right;
+            padding: 6px 10px;
+            margin-top: 8px;
+            margin-right: 16px;
+            background: #ddd;
+            font-size: 34px;
+            border: none;
+            cursor: pointer;
+        }
+
+        .search-container button:hover {
+            background: #ccc;
+        }
+
+        @media screen and (max-width: 600px) {
+            .search-container {
+                float: none;
+            }
+
+            input[type=text],
+            .search-container button {
+                float: none;
+                display: block;
+                text-align: left;
+                width: 100%;
+                margin: 0;
+                padding: 10px;
+            }
+
+            input[type=text] {
+                border: 1px solid #ccc;
+            }
+        }
+    </style>
+    <script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
+    <script>
+        require([
+            "esri/Map",
+            "esri/Graphic",
+            "esri/Basemap",
+            "esri/geometry/Point",
+            "esri/views/MapView",
+            "esri/PopupTemplate",
+            "esri/layers/WebTileLayer",
+            "esri/layers/GraphicsLayer",
+            "esri/layers/MapImageLayer",
+            "esri/layers/support/TileInfo",
+            "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({
+                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}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别
+            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", {
+                subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
+                tileInfo: tileInfo
+            });
+            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", {
+                subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
+                tileInfo: tileInfo
+            });
+
+            const tdtBasemap = new Basemap({
+                baseLayers: [tiledLayer, annomap],
+                title: "TDT Basemap",
+                id: "tdtBasemap",
+                spatialReference: {
+                    wkid: 4326
+                },
+            });
+            const map = new Map({
+                basemap: tdtBasemap
+            });
+            map.add(resultsLayer);
+
+            const view = new MapView({
+                map: map,
+                container: "viewDiv",
+                spatialReference: {
+                    wkid: 4326
+                },
+                zoom: 14,
+                constraints: {
+                    lods: tileInfo.lods,
+                    snapToZoom: true
+                },
+                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);
+                });
+
+            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";
+                $.ajax({
+                    url: url,
+                    type: "GET",
+                    success: function (result) {
+                        if (result.success == 0) {
+                            return;
+                        }
+                        result.geocodes.forEach(function (item) {
+                            var coord = item.location.split(',').map(function (val) {
+                                return parseFloat(val);
+                            });
+                            var ptPoi = new Point({
+                                latitude: coord[1],
+                                longitude: coord[0],
+                                spatialReference: {
+                                    wkid: 4326
+                                },
+                            });
+                            var warning_graphic = new Graphic({
+                                geometry: ptPoi,
+                                symbol: symbol_warning,
+                                attributes:item,
+                                popupTemplate: pupuptemp
+                            });
+                            resultsLayer.add(warning_graphic);
+                            view.goTo(
+                                {
+                                    target: ptPoi
+                                },
+                                {
+                                    duration: 2000,
+                                    easing: "in-out-expo"
+                                }
+                            );
+                            console.log(coord);
+                        });
+
+                    },
+                    error: function (error) {
+                        console.log("error ${error}");
+                    }
+                })
+            }
+        });
+    </script>
+</head>
+
+<body>
+    <div id="viewDiv"></div>
+    <div id="search">
+        <input type="text" placeholder="Search.." name="search" id="searchText">
+        <button id="searchBtn" type="submit">搜索</button>
+    </div>
+</body>
+
+</html>
\ No newline at end of file

static/view/demo/page-geoserver_tms.html

+<!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}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别
+      let tileInfo2 = new TileInfo({
+        'dpi': 90.71428571427429, //解析度，即像素
+        // 'size': 256,
+        'rows': 256,
+        'cols': 256,
+        // 'format':"png",
+        'compressionQuality': 0,
+        'origin': {
+          'x': -180,
+          'y': 135.6
+        },
+        // 'fullExtent' : [113.3619204711914,22.15763153076172,115.14614852905273,23.1],
+        'spatialReference': {
+          'wkid': 4326
+        },
+        'lods': [{
+            'level': 0,
+            'resolution': 0.703125,
+            'scale': 279541132.0143589
+          },
+          {
+            'level': 1,
+            'resolution': 0.3515625,
+            'scale': 139770566.00717944
+          },
+          {
+            'level': 2,
+            'resolution': 0.17578125,
+            'scale': 69885283.00358972
+          },
+          {
+            'level': 3,
+            'resolution': 0.087890625,
+            'scale': 34942641.50179486
+          },
+          {
+            'level': 4,
+            'resolution': 0.0439453125,
+            'scale': 17471320.75089743
+          },
+          {
+            'level': 5,
+            'resolution': 0.02197265625,
+            'scale': 8735660.375448715
+          },
+          {
+            'level': 6,
+            'resolution': 0.010986328125,
+            'scale': 4367830.1877243575
+          },
+          {
+            'level': 7,
+            'resolution': 0.0054931640625,
+            'scale': 2183915.0938621787
+          },
+          {
+            'level': 8,
+            'resolution': 0.00274658203125,
+            'scale': 1091957.5469310894
+          },
+          {
+            'level': 9,
+            'resolution': 0.001373291015625,
+            'scale': 545978.7734655447
+          },
+          {
+            'level': 10,
+            'resolution': 0.0006866455078125,
+            'scale': 272989.38673277234
+          },
+          {
+            'level': 11,
+            'resolution': 0.00034332275390625,
+            'scale': 136494.69336638617
+          },
+          {
+            'level': 12,
+            'resolution': 0.000171661376953125,
+            'scale': 68247.34668319309
+          },
+          {
+            'level': 13,
+            'resolution': 8.58306884765625e-005,
+            'scale': 34123.67334159654
+          },
+          {
+            'level': 14,
+            'resolution': 4.291534423828125e-005,
+            'scale': 17061.83667079827
+          },
+          {
+            'level': 15,
+            'resolution': 2.1457672119140625e-005,
+            'scale': 8530.918335399136
+          },
+          {
+            'level': 16,
+            'resolution': 1.0728836059570313e-005,
+            'scale': 4265.459167699568
+          },
+          {
+            'level': 17,
+            'resolution': 5.364418029785156E-6,
+            'scale': 2132.729583849784
+          },
+          {
+            'level': 18,
+            'resolution': 2.682209014892578E-6,
+            'scale': 1066.364791924892
+          },
+          {
+            'level': 19,
+            'resolution': 1.341104507446289E-6,
+            'scale': 533.182395962446
+          },
+          {
+            'level': 20,
+            'resolution': 6.705522537231445E-7,
+            'scale': 266.591197981223
+          },
+          {
+            'level': 21,
+            'resolution': 3.3527612686157227E-7,
+            'scale': 133.2955989906115
+          }
+        ]
+      })
+      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
+        },
+      });
+      let geoserverlayer0 = new WebTileLayer(
+        'http://218.19.252.203:20240/geoserver/gwc/service/tms/1.0.0/shenzhen%3Ashenzhenwgb@EPSG%3A4326@png/{level}/{col}/{row}.png', {
+          tileInfo: tileInfo2,
+        //   fullExtent:[113.3619204711914,22.15763153076172,115.14614852905273,23.1]
+        })
+    //   let geoserverlayer1 = new WebTileLayer(
+    //     'http://218.19.252.203:20240/geoserver/gwc/service/tms/1.0.0/shenzhen%3AWorkGridLayer@EPSG%3A4326@png/{level}/{col}/{row}.png', {
+    //       tileInfo: tileInfo2
+    //     })
+    //   let geoserverlayer2 = new WebTileLayer(
+    //     'http://218.19.252.203:20240/geoserver/gwc/service/tms/1.0.0/shenzhen%3AWgbLoudong@EPSG%3A4326@png/{level}/{col}/{row}.png', {
+    //       tileInfo: tileInfo2
+    //     })
+      // 创建地图
+      var map = new Map({
+        // basemap: tdtBasemap,
+        //,geoserverlayer1,geoserverlayer2
+        layers: [geoserverlayer0]
+      });
+      // 创建二维地图
+      var view = new MapView({
+        map: map,
+        container: "viewDiv",
+        spatialReference: {
+          wkid: 4326
+        },
+        zoom: 12,
+        constraints: {
+          lods: tileInfo.lods,
+          snapToZoom: true
+        },
+        center: [114.05457, 22.54635]
+      });
+    });
+
+  </script>
+</head>
+
+<body>
+  <div id="viewDiv"></div>
+</body>
+
+</html>

static/view/demo/page-heatmap.html

+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
+
+  <title>Visualize points with a heatmap - 4.12</title>
+
+  <style>
+    html,
+    body,
+    #viewDiv {
+      padding: 0;
+      margin: 0;
+      height: 100%;
+      width: 100%;
+    }
+
+  </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>
+    var map, view;
+    require([
+      "esri/Map",
+      "esri/Basemap",
+      "esri/views/MapView",
+      "esri/layers/WebTileLayer",
+      "esri/layers/support/TileInfo",
+      "esri/layers/FeatureLayer",
+      "esri/widgets/Legend",
+      "esri/widgets/LayerList",
+      "esri/renderers/smartMapping/creators/heatmap"
+    ], function (Map, Basemap, MapView, WebTileLayer, TileInfo, FeatureLayer, Legend, LayerList,
+      heatmapRendererCreator) {
+      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 template = {
+        title: "{place}",
+        content: [{
+          type: "fields",
+          fieldInfos: [{
+              fieldName: "TYPE",
+              label: "类型",
+              format: {
+                places: 0,
+                digitSeparator: true
+              }
+            },
+            {
+              fieldName: "ADDRESS",
+              label: "地址 ",
+              format: {
+                places: 0,
+                digitSeparator: true
+              }
+            },
+          ]
+        }]
+      };
+
+      //热力图原理，热力图反映热力点对周围的影响程度，在地图上以像素为单位进行展示
+      //每个像素点上面的影响（权值）=每个热力点赋给它的影响的总和
+      //每个热力点的影响 = 热力点自身权重（field属性字段确定的，属性值越大，值越大）*距离反比系数（离热力点越远，其上的影响越小，系数越小）
+      const heatmaplayer = new FeatureLayer({
+        url: "https://apaasgis.wodcloud.com/server/rest/services/GZ_JTQJ/MapServer/11",
+        outFields: ["*"],
+        popupTemplate: template,
+      });
+      // 创建地图
+      map = new Map({
+        basemap: tdtBasemap,
+        layers: [heatmaplayer]
+      });
+
+      view = new MapView({
+        container: "viewDiv",
+        spatialReference: {
+          wkid: 4326
+        },
+        zoom: 7,
+        constraints: {
+          lods: tileInfo.lods,
+          snapToZoom: true
+        },
+        center: [106.6587, 26.3644],
+        map: map
+      });
+      heatmaplayer.queryFeatures().then(function (results) {
+        var maxcount = 0;
+        for (var index in results.features) {
+          if (
+            maxcount < results.features[index].attributes.total_coun
+          ) {
+            maxcount = results.features[index].attributes.total_coun;
+          }
+        }
+        console.log(maxcount);
+        var renderer = {
+          type: "heatmap",
+          field: "total_coun", //热力点的权值字段，如果为空则每个热力点自身权重一样
+          blurRadius: 10, //热力点的影响范围单位px，超过此范围的按权值按0计算
+          //颜色区间，变化范围，ratio = 热力点的权值/maxPixelIntensity
+          colorStops: [{
+              ratio: 0,
+              color: "rgba(0, 0, 255, 0)" //透明度为0，否则地图将会被热力图遮盖
+            },
+            {
+              ratio: 0.1,
+              color: "royalblue"
+            },
+            {
+              ratio: 0.3,
+              color: "cyan"
+            },
+            {
+              ratio: 0.5,
+              color: "lime"
+            },
+            {
+              ratio: 0.7,
+              color: "yellow"
+            },
+            {
+              ratio: 1,
+              color: "red"
+            }
+          ],
+          //像素点的最高权值，当其权值超过100时，按100计算
+          maxPixelIntensity: maxcount,
+          minPixelIntensity: 0
+        };
+        heatmaplayer.renderer = renderer;
+      });
+      view.ui.add(
+        new Legend({
+          view: view
+        }),
+        "bottom-left"
+      );
+      var list = new LayerList({
+        view: view,
+      });
+      view.ui.add(
+        new LayerList({
+          view: view
+        }), "top-right");
+      console.log(list);
+
+    });
+
+  </script>
+</head>
+
+<body>
+  <div id="viewDiv"></div>
+</body>
+
+</html>

static/view/demo/page-linebuffer.html

+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
+    <title>缓冲区分析</title>
+
+    <style>
+        html,
+        body,
+        #viewDiv {
+            padding: 0;
+            margin: 0;
+            height: 100%;
+            width: 100%;
+        }
+
+        #optionsDiv {
+            padding: 8px;
+        }
+
+        #info {
+            background-color: black;
+            opacity: 0.75;
+            color: red;
+            font-size: 18pt;
+            padding: 8px;
+        }
+    </style>
+    <script src="https://apaas.wodcloud.com/mapsamples/static/js/jquery-3.3.1.min.js"></script>
+    <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/tasks/QueryTask",
+            "esri/tasks/support/Query",
+            "esri/Graphic",
+            "esri/widgets/Legend",
+            "esri/layers/GraphicsLayer",
+            "esri/geometry/geometryEngine",
+            "esri/layers/FeatureLayer",
+            "esri/symbols/PictureMarkerSymbol"
+        ], function (Map, Basemap, MapView, WebTileLayer, TileInfo, QueryTask, Query, Graphic, Legend, GraphicsLayer, geometryEngine, FeatureLayer, 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 isBuffered = false;
+            var wellsGeometries;
+            var tunnelBuffers;
+            var wellTypeSelect = document.getElementById("well-type");
+            var distanceSlider = document.getElementById("distance");
+            var lineUrl = "https://geoserver.deekong.com/arcgis/rest/services/YJ_EXPOSION/FeatureServer/0"
+            var pointUrl = "https://geoserver.deekong.com/arcgis/rest/services/YJ_EXPOSION/FeatureServer/1"
+
+            var symbol_ranqichubei = new PictureMarkerSymbol("https://apaas.wodcloud.com/mapsamples/static/images/symbol-ranqichubei.jpg", 26, 26);
+            var symbol_ranqigongqi = new PictureMarkerSymbol("https://apaas.wodcloud.com/mapsamples/static/images/symbol-ranqigongqi.jpg", 26, 26);
+            var symbol_youku = new PictureMarkerSymbol("https://apaas.wodcloud.com/mapsamples/static/images/symbol-youku.jpg", 26, 26);
+            var symbol_youqizhan = new PictureMarkerSymbol("https://apaas.wodcloud.com/mapsamples/static/images/symbol-youqizhan.jpg", 26, 26);
+            var symbol_warning = new PictureMarkerSymbol("https://apaas.wodcloud.com/mapsamples/static/images/marker-red.png", 26, 37);
+            var symbol_yellow = new PictureMarkerSymbol("https://apaas.wodcloud.com/mapsamples/static/images/marker-yellow.png", 26, 37);
+            var warning_graphic;
+
+            const bldRenderer = {
+                //油库、加油加气站、燃气供气场站、燃气储备站
+                //化工厂
+                type: "unique-value", 
+                legendOptions: {
+                    title: "类型"
+                },
+                defaultSymbol: symbol_ranqichubei,
+                defaultLabel: "燃气储备站",
+                field: "type",
+                uniqueValueInfos: [
+                    {
+                        value: "燃气供气站", 
+                        symbol: symbol_ranqigongqi,
+                        label: "燃气供气站"
+                    },
+                    {
+                        value: "加油加气站", 
+                        symbol: symbol_youqizhan,
+                        label: "加油加气站"
+                    },
+                    {
+                        value: "油库", 
+                        symbol: symbol_youku,
+                        label: "油库"
+                    }
+                ]
+            };
+            var template_bld = {
+                title: "{name}",
+                content: "{type}"
+            };
+            var template_warning = {
+                title:"预警信息",
+                content:"今日凌晨化工厂发生爆炸！化工厂附近有多条天然气管道，直径为1016mm的天然气管道可能成为风险源，请各方注意高度防范！"
+            }
+            const tunnelLayer = new FeatureLayer({
+                url: lineUrl,
+                outFields: ["*"],
+                visible: false
+            });
+            const buildinglayer = new FeatureLayer({
+                url: pointUrl,
+                renderer: bldRenderer,
+                outFields: ["*"],
+                popupTemplate: template_bld,
+                visible: false
+            });
+            var resultsLayer = new GraphicsLayer();
+            const map = new Map({
+                basemap: tdtBasemap,
+                layers: [tunnelLayer, buildinglayer, resultsLayer]
+            });
+            var qTask = new QueryTask({
+                url: lineUrl
+            });
+            var params = new Query({
+                returnGeometry: true,
+                outFields: ["*"]
+            });
+
+            // 创建二维地图
+            var view = new MapView({
+                map: map,
+                container: "viewDiv",
+                spatialReference: {
+                    wkid: 4326
+                },
+                zoom: 11,
+                constraints: {
+                    lods: tileInfo.lods,
+                    snapToZoom: true
+                },
+                center: [116.3, 40],
+            });
+            const legend = new Legend({
+                view: view,
+                layerInfos: [
+                    {
+                        layer: buildinglayer,
+                        title: "易燃易爆建筑分布"
+                    },
+                    {
+                        layer: tunnelLayer,
+                        title: "燃气管道分布"
+                    }
+                ]
+            });
+            view.ui.add(legend, "bottom-left");
+            view.ui.add(info, "top-right");
+
+            document.getElementById("name").innerHTML = "化工桥化工厂";
+            document.getElementById("category").innerHTML = "化工厂";
+
+            view.when(function () {
+                view.ui.add("optionsDiv", "bottom-right");
+                document.getElementById("doBtn").addEventListener("click", doQuery);
+                document.getElementById("tunelBtn").addEventListener("click", showTunel);
+                document.getElementById("bldBtn").addEventListener("click", showBuilding);
+
+                tunnelLayer.queryFeatures().then(function (results) {
+                    wellsGeometries = results.features.map(function (feature) {
+                        return feature.geometry;
+                    });
+                });
+                buildinglayer.queryFeatures().then(getValues)
+                    .then(getUniqueValues)
+                    .then(addToSelect);
+
+                buildinglayer.queryFeatures().then(function (response) {
+                    response.features.forEach(function (item, i) {
+                        if (item.attributes.name == "化工桥化工厂") {
+                            warning_graphic = new Graphic({
+                                geometry: item.geometry,
+                                symbol: symbol_warning,
+                                popupTemplate : template_warning
+                            })
+                        }
+                    });
+                    resultsLayer.add(warning_graphic);
+                })
+            }).catch(function (error) {
+                console.log(error.message);
+            })
+
+            function showTunel() {
+                tunnelLayer.visible = true;
+            }
+            function showBuilding() {
+                buildinglayer.visible = true;
+                if (isBuffered && tunnelLayer.visible) {
+                    inBufferQuery(tunnelBuffers);
+                }
+            }
+            function doQuery() {
+                resultsLayer.removeAll();
+                tunnelLayer.definitionExpression = "type = '管道'";
+                createBuffer(wellsGeometries);
+            }
+
+            function createBuffer(geometries) {
+                resultsLayer.removeAll();
+                var bufferDistance = parseInt(distanceSlider.value)*5;
+                tunnelBuffers = geometryEngine.geodesicBuffer(
+                    geometries[0],
+                    bufferDistance,
+                    "meters",
+                    true
+                );
+                var bufferGraphic = new Graphic({
+                    geometry: tunnelBuffers,
+                    symbol: {
+                        type: "simple-fill", 
+                        color: [227, 139, 79, 0.3],
+                        outline: {
+                            color: [255, 255, 255],
+                            width: 1
+                        }
+                    }
+                });
+                isBuffered = true;
+                if( tunnelLayer.visible){
+                    resultsLayer.add(bufferGraphic);
+                }
+                if (buildinglayer.visible) {
+                    inBufferQuery(tunnelBuffers);
+                }
+                resultsLayer.add(warning_graphic);
+            }
+
+            function inBufferQuery(buffergeometry) {
+                var query1 = buildinglayer.createQuery();
+                query1.outSpatialReference = { wkid: 4326 };
+                query1.returnGeometry = true;
+                buildinglayer.queryFeatures(query1)
+                    .then(function (results) {
+                        var inbufferGeometries = results.features.map(function (feature1) {
+                            if (feature1.attributes.name != "化工桥化工厂") {
+                                if (geometryEngine.contains(buffergeometry, feature1.geometry)) {
+                                    return feature1.geometry;
+                                }
+                            }
+                        });
+                        inbufferGeometries.forEach(function (geom, i) {
+                            if (geom) {
+                                resultsLayer.add(new Graphic({
+                                    geometry: geom,
+                                    symbol: symbol_yellow
+                                }))
+                            }
+                        })
+                    });
+
+                
+            };
+            function getValues(response) {
+                var features = response.features;
+                var values = features.map(function (feature) {
+                    return feature.attributes.type;
+                });
+
+                return values;
+            }
+
+            function getUniqueValues(values) {
+
+                var uniqueValues = ["全部"];
+                values.forEach(function (item, i) {
+                    if (
+                        (uniqueValues.length < 1 || uniqueValues.indexOf(item) === -1) &&
+                        item !== ""
+                    ) {
+                        uniqueValues.push(item);
+                    }
+                });
+                return uniqueValues;
+            }
+            function addToSelect(values) {
+                values.sort();
+                values.forEach(function (value) {
+                    var option = document.createElement("option");
+                    option.text = value;
+                    wellTypeSelect.add(option);
+                });
+            }
+            function queryForWellGeometries() {
+                var buildingQuery = buildinglayer.createQuery();
+                buildinglayer.queryFeatures(buildingQuery).then(function (response) {
+                    response.features.forEach(function (item, i) {
+                        item.visible = true;
+                    })
+                })
+            }
+            function setWellsDefinitionExpression(newValue) {
+
+
+                if (!buildinglayer.visible) {
+                    buildinglayer.visible = true;
+                }
+                if (newValue == "全部") {
+                    buildinglayer.visible = true;
+                    buildinglayer.definitionExpression = "id > -1";
+                }
+                else {
+                    buildinglayer.definitionExpression = "type = '" + newValue + "'";
+                }
+
+                return queryForWellGeometries();
+            }
+            distanceSlider.addEventListener("input", function () {
+                document.getElementById("distance-value").innerText =
+                    distanceSlider.value;
+            });
+            distanceSlider.addEventListener("change", function () {
+                createBuffer(wellsGeometries);
+            });
+            wellTypeSelect.addEventListener("change", function () {
+                var type = event.target.value;
+                setWellsDefinitionExpression(type);
+                createBuffer(wellsGeometries);
+            });
+        });
+
+    </script>
+</head>
+
+<body>
+    <div id="viewDiv"></div>
+    <div id="info">
+        <span id="title">警报</span> <br />
+        <span id="category"></span> <br />
+        <span id="name"></span>
+    </div>
+    <div class="esri-widget" id="optionsDiv">
+        易燃易爆建筑类型:
+        <select id="well-type">全部</select>
+        <br />
+        <br>
+        缓冲区宽度:
+        <input id="distance" type="range" min="10" max="300" step="10" value="300" />&nbsp; <span
+            id="distance-value">300</span> 倍管径 <br />
+        <br>
+        <label for=""><span></span></label> <button class="esri-widget" id="tunelBtn">天然气管道（直径1016mm）查询</button> <span></span>
+        <button class="esri-widget" id="bldBtn">高后果区等级识别</button> <br />
+        <!-- <label for=""><span></span></label> <button class="esri-widget" id="tunelBtn">易燃爆建筑显示</button> <br /> -->
+        <!-- <span></span><button>易燃爆建筑显示</button> -->
+        <br>
+        <label for=""><span></span></label> <button class="esri-widget" id="doBtn">天然气管道高后果区分析</button> <br />
+        <br>
+    </div>
+</body>
+
+</html>
\ No newline at end of file

static/view/demo/page-manage_layers.html

+<html>
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
+
+  <title>Visualize points with a heatmap - 4.12</title>
+
+  <style>
+    html,
+    body,
+    #viewDiv {
+      padding: 0;
+      margin: 0;
+      height: 100%;
+      width: 100%;
+    }
+
+  </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>
+    var map, view;
+    require([
+      "esri/Map",
+      "esri/Basemap",
+      "esri/views/MapView",
+      "esri/layers/WebTileLayer",
+      "esri/layers/support/TileInfo",
+      "esri/layers/MapImageLayer",
+      "esri/widgets/LayerList",
+      "esri/renderers/smartMapping/creators/heatmap"
+    ], function (Map, Basemap, MapView, WebTileLayer, TileInfo, MapImageLayer, LayerList,
+      heatmapRendererCreator) {
+      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 mapserverlayer = new MapImageLayer({
+        url: "https://apaasgis.wodcloud.com/server/rest/services/GZ_JTQJ/MapServer",
+        id: "GZ_JTQJ",
+        sublayers: [{
+            id: 0,
+            title: "车检器",
+            visible: false,
+            source: {
+              mapLayerId: 0
+            },
+            popupTemplate: {
+              
+              title: "车检器",
+              content: [{
+                type: "fields",
+                fieldInfos: [{
+                    fieldName: "device_nam",
+                    label: "设备名称：",
+                    visible: true,
+                    format: {
+                      digitSeparator: true,
+                      places: 0
+                    }
+                  },
+                  {
+                    fieldName: "device_cod",
+                    label: "设备编号：",
+                    visible: true,
+                    format: {
+                      digitSeparator: true,
+                      places: 0
+                    }
+                  },
+                  {
+                    fieldName: "route_name",
+                    label: "所属道路；",
+                    visible: true,
+                    format: {
+                      digitSeparator: true,
+                      places: 0
+                    }
+                  },
+                  {
+                    fieldName: "road_sec_n",
+                    label: "所属路段：",
+                    visible: true,
+                    format: {
+                      digitSeparator: true,
+                      places: 0
+                    }
+                  }
+                ]
+              }]
+            }
+          },
+          {
+            id: 1,
+            title: "气象监测仪",
+            visible: false,
+            source: {
+              mapLayerId: 1
+            },
+            popupTemplate: {
+              
+              title: "气象监测仪",
+              content: [{
+                type: "fields",
+                fieldInfos: [{
+                    fieldName: "device_nam",
+                    label: "设备名称：",
+                    visible: true,
+                    format: {
+                      digitSeparator: true,
+                      places: 0
+                    }
+                  },
+                  {
+                    fieldName: "device_id",
+                    label: "设备编号：",
+                    visible: true,
+                    format: {
+                      digitSeparator: true,
+                      places: 0
+                    }
+                  },
+                  {
+                    fieldName: "factors_co",
+                    label: "要素采集：",
+                    visible: true,
+                    format: {
+                      digitSeparator: true,
+                      places: 0
+                    }
+                  },
+                  {
+                    fieldName: "route_name",
+                    label: "所属道路：",
+                    visible: true,
+                    format: {
+                      digitSeparator: true,
+                      places: 0
+                    }
+                  },
+                  {
+                    fieldName: "owner_name",
+                    label: "管理单位：",
+                    visible: true,
+                    format: {
+                      digitSeparator: true,
+                      places: 0
+                    }
+                  },
+                  {
+                    fieldName: "mount_time",
+                    label: "安装时间：",
+                    visible: true,
+                    format: {
+                      digitSeparator: true,
+                      places: 0
+                    }
+                  }
+                ]
+              }]
+            }
+          },
+          {
+            id: 2,
+            title: "交调设备",
+            visible: false,
+            source: {
+              mapLayerId: 2
+            },
+            popupTemplate: {
+              
+              title: "交调设备",
+              content: [{
+                type: "fields",
+                fieldInfos: [{
+                    fieldName: "station_ca",
+                    label: "交调站类别：",
+                    visible: true,
+                    format: {
+                      digitSeparator: true,
+                      places: 0
+                    }
+                  },
+                  {
+                    fieldName: "station_ty",
+                    label: "交调站类型：",
+                    visible: true,
+                    format: {
+                      digitSeparator: true,
+                      places: 0
+                    }
+                  },
+                  {
+                    fieldName: "route_name",
+                    label: "所属道路：",
+                    visible: true,
+                    format: {
+                      digitSeparator: true,
+                      places: 0
+                    }
+                  },
+                  {
+                    fieldName: "section_na",
+                    label: "所属路段：",
+                    visible: true,
+                    format: {
+                      digitSeparator: true,
+                      places: 0
+                    }
+                  },
+                  {
+                    fieldName: "owner_name",
+                    label: "管理单位：",
+                    visible: true,
+                    format: {
+                      digitSeparator: true,
+                      places: 0
+                    }
+                  }
+                ]
+              }]
+            }
+          },
+          {
+            id: 3,
+            title: "服务区",
+            visible: false,
+            source: {
+              mapLayerId: 3
+            },
+            popupTemplate: {
+              
+              title: "服务区",
+              content: [{
+                type: "fields",
+                fieldInfos: [{
+                    fieldName: "service_ar",
+                    label: "服务区名称：",
+                    visible: true,
+                    format: {
+                      digitSeparator: true,
+                      places: 0
+                    }
+                  },
+                  {
+                    fieldName: "maintenanc",
+                    label: "管理单位：",
+                    visible: true,
+                    format: {
+                      digitSeparator: true,
+                      places: 0
+                    }
+                  },
+                  {
+                    fieldName: "route_name",
+                    label: "所属道路：",
+                    visible: true,
+                    format: {
+                      digitSeparator: true,
+                      places: 0
+                    }
+                  },
+                  {
+                    fieldName: "service_co",
+                    label: "服务内容：",
+                    visible: true,
+                    format: {
+                      digitSeparator: true,
+                      places: 0
+                    }
+                  }
+                ]
+              }]
+            }
+          },
+          {
+            id: 4,
+            title: "火车站",
+            visible: false,
+            source: {
+              mapLayerId: 4
+            },
+            popupTemplate: {
+              
+              title: "火车站",
+              content: [{
+                type: "fields",
+                fieldInfos: [{
+                    fieldName: "name_zh",
+                    label: "火车站名称：",
+                    visible: true,
+                    format: {
+                      digitSeparator: true,
+                      places: 0
+                    }
+                  },
+                  {
+                    fieldName: "address",
+                    label: "详细地址：",
+                    visible: true,
+                    format: {
+                      digitSeparator: true,
+                      places: 0
+                    }
+                  }
+                ]
+              }]
+            }
+          },
+          {
+            id: 5,
+            title: "事件监测仪",
+            visible: false,
+            source: {
+              mapLayerId: 5
+            },
+            popupTemplate: {
+              
+              title: "事件监测仪",
+              content: [{
+                type: "fields",
+                fieldInfos: [{
+                    fieldName: "device_nam",
+                    label: "设备名称：",
+                    visible: true,
+                    format: {
+                      digitSeparator: true,
+                      places: 0
+                    }
+                  },
+                  {
+                    fieldName: "route_name",
+                    label: "所属道路：",
+                    visible: true,
+                    format: {
+                      digitSeparator: true,
+                      places: 0
+                    }
+                  },
+                  {
+                    fieldName: "ddbh",
+                    label: "设备编码：",
+                    visible: true,
+                    format: {
+                      digitSeparator: true,
+                      places: 0
+                    }
+                  }
+                ]
+              }]
+            }
+          },
+          {
+            id: 6,
+            title: "情报板",
+            visible: false,
+            source: {
+              mapLayerId: 6
+            },
+            popupTemplate: {
+              
+              title: "情报板",
+              content: [{
+                type: "fields",
+                fieldInfos: [{
+                    fieldName: "board_name",
+                    label: "设备名称：",
+                    visible: true,
+                    format: {
+                      digitSeparator: true,
+                      places: 0
+                    }
+                  },
+                  {
+                    fieldName: "route_name",
+                    label: "所属道路：",
+                    visible: true,
+                    format: {
+                      digitSeparator: true,
+                      places: 0
+                    }
+                  },
+                  {
+                    fieldName: "pile_numbe",
+                    label: "桩号：",
+                    visible: true,
+                    format: {
+                      digitSeparator: true,
+                      places: 0
+                    }
+                  }
+                ]
+              }]
+            }
+          },
+
+          {
+            id: 7,
+            title: "港口",
+            visible: false,
+            source: {
+              mapLayerId: 7
+            },
+            popupTemplate: {
+              
+              title: "港口",
+              content: [{
+                type: "fields",
+                fieldInfos: [{
+                    fieldName: "PORT_NAME",
+                    label: "港口名称：",
+                    visible: true,
+                    format: {
+                      digitSeparator: true,
+                      places: 0
+                    }
+                  },
+                  {
+                    fieldName: "UNIT_NAME",
+                    label: "管理单位：",
+                    visible: true,
+                    format: {
+                      digitSeparator: true,
+                      places: 0
+                    }
+                  },
+                  {
+                    fieldName: "YARD_AREA",
+                    label: "港口面积：",
+                    visible: true,
+                    format: {
+                      digitSeparator: true,
+                      places: 0
+                    }
+                  }
+                ]
+              }]
+            }
+          },
+          {
+            id: 8,
+            title: "客运站",
+            visible: true,
+            source: {
+              mapLayerId: 8
+            },
+            popupTemplate: {
+              
+              title: "客运站",
+              content: [{
+                type: "fields",
+                fieldInfos: [{
+                    fieldName: "name_zh",
+                    label: "客运站名称：",
+                    visible: true,
+                    format: {
+                      digitSeparator: true,
+                      places: 0
+                    }
+                  },
+                  {
+                    fieldName: "level",
+                    label: "客运站等级：",
+                    visible: true,
+                    format: {
+                      digitSeparator: true,
+                      places: 0
+                    }
+                  },
+                  {
+                    fieldName: "address",
+                    label: "详细地址：",
+                    visible: true,
+                    format: {
+                      digitSeparator: true,
+                      places: 0
+                    }
+                  }
+                ]
+              }]
+            }
+          },
+
+          {
+            id: 9,
+            title: "隧道",
+            visible: false,
+            source: {
+              mapLayerId: 9
+            },
+            popupTemplate: {
+              
+              title: "隧道",
+              content: [{
+                type: "fields",
+                fieldInfos: [{
+                    fieldName: "tunnel_nam",
+                    label: "隧道名称：",
+                    visible: true,
+                    format: {
+                      digitSeparator: true,
+                      places: 0
+                    }
+                  },
+                  {
+                    fieldName: "tunnel_len",
+                    label: "隧道全长：",
+                    visible: true,
+                    format: {
+                      digitSeparator: true,
+                      places: 0
+                    }
+                  },
+                  {
+                    fieldName: "tunnel_wid",
+                    label: "隧道宽度：",
+                    visible: true,
+                    format: {
+                      digitSeparator: true,
+                      places: 0
+                    }
+                  },
+                  {
+                    fieldName: "tunnel_hei",
+                    label: "隧道高度：",
+                    visible: true,
+                    format: {
+                      digitSeparator: true,
+                      places: 0
+                    }
+                  },
+                  {
+                    fieldName: "route_name",
+                    label: "所属道路：",
+                    visible: true,
+                    format: {
+                      digitSeparator: true,
+                      places: 0
+                    }
+                  },
+                  {
+                    fieldName: "tunnel_lev",
+                    label: "隧道等级：",
+                    visible: true,
+                    format: {
+                      digitSeparator: true,
+                      places: 0
+                    }
+                  },
+                  {
+                    fieldName: "is_below_w",
+                    label: "是否水下：",
+                    visible: true,
+                    format: {
+                      digitSeparator: true,
+                      places: 0
+                    }
+                  },
+                  {
+                    fieldName: "bulid_year",
+                    label: "修建时间：",
+                    visible: true,
+                    format: {
+                      digitSeparator: true,
+                      places: 0
+                    }
+                  },
+                  {
+                    fieldName: "bulid_unit",
+                    label: "修建单位：",
+                    visible: true,
+                    format: {
+                      digitSeparator: true,
+                      places: 0
+                    }
+                  }
+                ]
+              }]
+            }
+          },
+          {
+            id: 10,
+            title: "桥梁",
+            visible: false,
+            source: {
+              mapLayerId: 10
+            },
+            popupTemplate: {
+              
+              title: "桥梁",
+              content: [{
+                type: "fields",
+                fieldInfos: [{
+                    fieldName: "bridege_na",
+                    label: "桥梁名称：",
+                    visible: true,
+                    format: {
+                      digitSeparator: true,
+                      places: 0
+                    }
+                  },
+                  {
+                    fieldName: "bridege_al",
+                    label: "桥梁全长：",
+                    visible: true,
+                    format: {
+                      digitSeparator: true,
+                      places: 0
+                    }
+                  },
+                  {
+                    fieldName: "bridege_00",
+                    label: "桥梁宽度：",
+                    visible: true,
+                    format: {
+                      digitSeparator: true,
+                      places: 0
+                    }
+                  },
+                  {
+                    fieldName: "bulid_year",
+                    label: "修建时间：",
+                    visible: true,
+                    format: {
+                      digitSeparator: true,
+                      places: 0
+                    }
+                  },
+                  {
+                    fieldName: "collision_",
+                    label: "防护类型：",
+                    visible: true,
+                    format: {
+                      digitSeparator: true,
+                      places: 0
+                    }
+                  },
+                  {
+                    fieldName: "design_loa",
+                    label: "桥梁道路等级：",
+                    visible: true,
+                    format: {
+                      digitSeparator: true,
+                      places: 0
+                    }
+                  },
+                  {
+                    fieldName: "material_s",
+                    label: "桥梁材质：",
+                    visible: true,
+                    format: {
+                      digitSeparator: true,
+                      places: 0
+                    }
+                  },
+                  {
+                    fieldName: "route_name",
+                    label: "所属道路：",
+                    visible: true,
+                    format: {
+                      digitSeparator: true,
+                      places: 0
+                    }
+                  },
+                  {
+                    fieldName: "supervise_",
+                    label: "管理单位：",
+                    visible: true,
+                    format: {
+                      digitSeparator: true,
+                      places: 0
+                    }
+                  }
+                ]
+              }]
+            }
+          },
+          {
+            id: 11,
+            title: "收费站",
+            visible: false,
+            source: {
+              mapLayerId: 11
+            },
+            popupTemplate: {
+              
+              title: "收费站",
+              content: [{
+                type: "fields",
+                fieldInfos: [{
+                    fieldName: "toll_name",
+                    label: "收费站名称：",
+                    visible: true,
+                    format: {
+                      digitSeparator: true,
+                      places: 0
+                    }
+                  },
+                  {
+                    fieldName: "route_name",
+                    label: "所属道路：",
+                    visible: true,
+                    format: {
+                      digitSeparator: true,
+                      places: 0
+                    }
+                  }
+                ]
+              }]
+            }
+          },
+          {
+            id: 12,
+            title: "摄像头",
+            visible: false,
+            source: {
+              mapLayerId: 12
+            },
+            popupTemplate: {
+              
+              title: "摄像头",
+              content: [{
+                type: "fields",
+                fieldInfos: [{
+                    fieldName: "sbmc",
+                    label: "设备名称：",
+                    visible: true,
+                    format: {
+                      digitSeparator: true,
+                      places: 0
+                    }
+                  },
+                  {
+                    fieldName: "sbbm",
+                    label: "设备编号：",
+                    visible: true,
+                    format: {
+                      digitSeparator: true,
+                      places: 0
+                    }
+                  },
+                  {
+                    fieldName: "lxmc",
+                    label: "所属道路：",
+                    visible: true,
+                    format: {
+                      digitSeparator: true,
+                      places: 0
+                    }
+                  },
+                  {
+                    fieldName: "ldmc",
+                    label: "所属路段：",
+                    visible: true,
+                    format: {
+                      digitSeparator: true,
+                      places: 0
+                    }
+                  }
+                ]
+              }]
+            }
+          },
+          {
+            id: 13,
+            title: "机场",
+            visible: false,
+            source: {
+              mapLayerId: 13
+            },
+            popupTemplate: {
+              
+              title: "机场",
+              content: [{
+                type: "fields",
+                fieldInfos: [{
+                    fieldName: "name_zh",
+                    label: "机场名称：",
+                    visible: true,
+                    format: {
+                      digitSeparator: true,
+                      places: 0
+                    }
+                  },
+                  {
+                    fieldName: "address",
+                    label: "详细地址：",
+                    visible: true,
+                    format: {
+                      digitSeparator: true,
+                      places: 0
+                    }
+                  }
+                ]
+              }]
+            }
+          }
+        ]
+      });
+      // 创建地图
+      map = new Map({
+        basemap: tdtBasemap,
+        layers: [mapserverlayer]
+      });
+
+      view = new MapView({
+        container: "viewDiv",
+        spatialReference: {
+          wkid: 4326
+        },
+        zoom: 7,
+        constraints: {
+          lods: tileInfo.lods,
+          snapToZoom: true
+        },
+        center: [106.6587, 26.3644],
+        map: map
+      });
+
+      var list = new LayerList({
+        view: view,
+      });
+      view.ui.add(
+        new LayerList({
+          view: view
+        }), "top-right");
+      console.log(list);
+
+    });
+
+  </script>
+</head>
+
+<body>
+  <div id="viewDiv"></div>
+</body>
+
+</html>

static/view/demo/page-migrate.html

+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <title>模拟人口迁徙</title>
+
+  <style>
+    html,
+    body {
+      padding: 0;
+      margin: 0;
+      height: 100%;
+      width: 100%;
+    }
+
+    .container {
+      display: flex;
+      height: 100%;
+      flex-direction: row;
+    }
+
+    .container>div {
+      flex: 1 1 auto;
+      width: 50%;
+      height: 100%;
+    }
+  </style>
+
+
+  <script src="https://apaas.wodcloud.com/mapsamples/static/js/echarts.min.js"></script>
+
+  <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>
+    var __DEV__ = false;
+    var geoCoordMap = {
+      '海门': [121.15, 31.89],
+      '鄂尔多斯': [109.781327, 39.608266],
+      '招远': [120.38, 37.35],
+      '舟山': [122.207216, 29.985295],
+      '齐齐哈尔': [123.97, 47.33],
+      '盐城': [120.13, 33.38],
+      '赤峰': [118.87, 42.28],
+      '青岛': [120.33, 36.07],
+      '乳山': [121.52, 36.89],
+      '金昌': [102.188043, 38.520089],
+      '泉州': [118.58, 24.93],
+      '莱西': [120.53, 36.86],
+      '日照': [119.46, 35.42],
+      '胶南': [119.97, 35.88],
+      '南通': [121.05, 32.08],
+      '拉萨': [91.11, 29.97],
+      '云浮': [112.02, 22.93],
+      '梅州': [116.1, 24.55],
+      '文登': [122.05, 37.2],
+      '上海': [121.48, 31.22],
+      '攀枝花': [101.718637, 26.582347],
+      '威海': [122.1, 37.5],
+      '承德': [117.93, 40.97],
+      '厦门': [118.1, 24.46],
+      '汕尾': [115.375279, 22.786211],
+      '潮州': [116.63, 23.68],
+      '丹东': [124.37, 40.13],
+      '太仓': [121.1, 31.45],
+      '曲靖': [103.79, 25.51],
+      '烟台': [121.39, 37.52],
+      '福州': [119.3, 26.08],
+      '瓦房店': [121.979603, 39.627114],
+      '即墨': [120.45, 36.38],
+      '抚顺': [123.97, 41.97],
+      '玉溪': [102.52, 24.35],
+      '张家口': [114.87, 40.82],
+      '阳泉': [113.57, 37.85],
+      '莱州': [119.942327, 37.177017],
+      '湖州': [120.1, 30.86],
+      '汕头': [116.69, 23.39],
+      '昆山': [120.95, 31.39],
+      '宁波': [121.56, 29.86],
+      '湛江': [110.359377, 21.270708],
+      '揭阳': [116.35, 23.55],
+      '荣成': [122.41, 37.16],
+      '连云港': [119.16, 34.59],
+      '葫芦岛': [120.836932, 40.711052],
+      '常熟': [120.74, 31.64],
+      '东莞': [113.75, 23.04],
+      '河源': [114.68, 23.73],
+      '淮安': [119.15, 33.5],
+      '泰州': [119.9, 32.49],
+      '南宁': [108.33, 22.84],
+      '营口': [122.18, 40.65],
+      '惠州': [114.4, 23.09],
+      '江阴': [120.26, 31.91],
+      '蓬莱': [120.75, 37.8],
+      '韶关': [113.62, 24.84],
+      '嘉峪关': [98.289152, 39.77313],
+      '广州': [113.23, 23.16],
+      '延安': [109.47, 36.6],
+      '太原': [112.53, 37.87],
+      '清远': [113.01, 23.7],
+      '中山': [113.38, 22.52],
+      '昆明': [102.73, 25.04],
+      '寿光': [118.73, 36.86],
+      '盘锦': [122.070714, 41.119997],
+      '长治': [113.08, 36.18],
+      '深圳': [114.07, 22.62],
+      '珠海': [113.52, 22.3],
+      '宿迁': [118.3, 33.96],
+      '咸阳': [108.72, 34.36],
+      '铜川': [109.11, 35.09],
+      '平度': [119.97, 36.77],
+      '佛山': [113.11, 23.05],
+      '海口': [110.35, 20.02],
+      '江门': [113.06, 22.61],
+      '章丘': [117.53, 36.72],
+      '肇庆': [112.44, 23.05],
+      '大连': [121.62, 38.92],
+      '临汾': [111.5, 36.08],
+      '吴江': [120.63, 31.16],
+      '石嘴山': [106.39, 39.04],
+      '沈阳': [123.38, 41.8],
+      '苏州': [120.62, 31.32],
+      '茂名': [110.88, 21.68],
+      '嘉兴': [120.76, 30.77],
+      '长春': [125.35, 43.88],
+      '胶州': [120.03336, 36.264622],
+      '银川': [106.27, 38.47],
+      '张家港': [120.555821, 31.875428],
+      '三门峡': [111.19, 34.76],
+      '锦州': [121.15, 41.13],
+      '南昌': [115.89, 28.68],
+      '柳州': [109.4, 24.33],
+      '三亚': [109.511909, 18.252847],
+      '自贡': [104.778442, 29.33903],
+      '吉林': [126.57, 43.87],
+      '阳江': [111.95, 21.85],
+      '泸州': [105.39, 28.91],
+      '西宁': [101.74, 36.56],
+      '宜宾': [104.56, 29.77],
+      '呼和浩特': [111.65, 40.82],
+      '成都': [104.06, 30.67],
+      '大同': [113.3, 40.12],
+      '镇江': [119.44, 32.2],
+      '桂林': [110.28, 25.29],
+      '张家界': [110.479191, 29.117096],
+      '宜兴': [119.82, 31.36],
+      '北海': [109.12, 21.49],
+      '西安': [108.95, 34.27],
+      '金坛': [119.56, 31.74],
+      '东营': [118.49, 37.46],
+      '牡丹江': [129.58, 44.6],
+      '遵义': [106.9, 27.7],
+      '绍兴': [120.58, 30.01],
+      '扬州': [119.42, 32.39],
+      '常州': [119.95, 31.79],
+      '潍坊': [119.1, 36.62],
+      '重庆': [106.54, 29.59],
+      '台州': [121.420757, 28.656386],
+      '南京': [118.78, 32.04],
+      '滨州': [118.03, 37.36],
+      '贵阳': [106.71, 26.57],
+      '无锡': [120.29, 31.59],
+      '本溪': [123.73, 41.3],
+      '克拉玛依': [84.77, 45.59],
+      '渭南': [109.5, 34.52],
+      '马鞍山': [118.48, 31.56],
+      '宝鸡': [107.15, 34.38],
+      '焦作': [113.21, 35.24],
+      '句容': [119.16, 31.95],
+      '北京': [116.46, 39.92],
+      '徐州': [117.2, 34.26],
+      '衡水': [115.72, 37.72],
+      '包头': [110, 40.58],
+      '绵阳': [104.73, 31.48],
+      '乌鲁木齐': [87.68, 43.77],
+      '枣庄': [117.57, 34.86],
+      '杭州': [120.19, 30.26],
+      '淄博': [118.05, 36.78],
+      '鞍山': [122.85, 41.12],
+      '溧阳': [119.48, 31.43],
+      '库尔勒': [86.06, 41.68],
+      '安阳': [114.35, 36.1],
+      '开封': [114.35, 34.79],
+      '济南': [117, 36.65],
+      '德阳': [104.37, 31.13],
+      '温州': [120.65, 28.01],
+      '九江': [115.97, 29.71],
+      '邯郸': [114.47, 36.6],
+      '临安': [119.72, 30.23],
+      '兰州': [103.73, 36.03],
+      '沧州': [116.83, 38.33],
+      '临沂': [118.35, 35.05],
+      '南充': [106.110698, 30.837793],
+      '天津': [117.2, 39.13],
+      '富阳': [119.95, 30.07],
+      '泰安': [117.13, 36.18],
+      '诸暨': [120.23, 29.71],
+      '郑州': [113.65, 34.76],
+      '哈尔滨': [126.63, 45.75],
+      '聊城': [115.97, 36.45],
+      '芜湖': [118.38, 31.33],
+      '唐山': [118.02, 39.63],
+      '平顶山': [113.29, 33.75],
+      '邢台': [114.48, 37.05],
+      '德州': [116.29, 37.45],
+      '济宁': [116.59, 35.38],
+      '荆州': [112.239741, 30.335165],
+      '宜昌': [111.3, 30.7],
+      '义乌': [120.06, 29.32],
+      '丽水': [119.92, 28.45],
+      '洛阳': [112.44, 34.7],
+      '秦皇岛': [119.57, 39.95],
+      '株洲': [113.16, 27.83],
+      '石家庄': [114.48, 38.03],
+      '莱芜': [117.67, 36.19],
+      '常德': [111.69, 29.05],
+      '保定': [115.48, 38.85],
+      '湘潭': [112.91, 27.87],
+      '金华': [119.64, 29.12],
+      '岳阳': [113.09, 29.37],
+      '长沙': [113, 28.21],
+      '衢州': [118.88, 28.97],
+      '廊坊': [116.7, 39.53],
+      '菏泽': [115.480656, 35.23375],
+      '合肥': [117.27, 31.86],
+      '武汉': [114.31, 30.52],
+      '大庆': [125.03, 46.58]
+    };
+
+    require([
+      "esri/Map",
+      "esri/Basemap",
+      "https://apaas.wodcloud.com/mapsamples/static/js/4EchartsLayer.js",
+      "esri/views/MapView",
+      "esri/layers/WebTileLayer",
+      "esri/layers/support/TileInfo",
+      "dojo/domReady!"
+    ], function (
+      Map, Basemap, echartsLayer, MapView, WebTileLayer, TileInfo
+    ) {
+      // 通过瓦片形式加载天地图的
+      // 天地图根据投影分为两种：墨卡托和经纬度
+      // 设定瓦片信息，天地图经纬度地图的切片信息全部使用该信息设定
+      let 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"]
+      });
+      let 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"]
+      });
+      // 天地图经纬度地图及注记作为底图
+      var tdtBasemap = new Basemap({
+        baseLayers: [tiledlayer, annolayer],
+        title: "TDT Basemap",
+        id: "tdtBasemap",
+      });
+      // 创建地图
+      var map = new Map({
+        basemap: tdtBasemap
+      });
+      //创建二维地图
+      var view = new MapView({
+        map: map,
+        container: "map",
+        zoom: 4,
+        center: [106.720725933, 26.5453458492]
+      });
+
+      var BJData = [
+        [{
+          name: '北京'
+        }, {
+          name: '上海',
+          value: 95
+        }],
+        [{
+          name: '北京'
+        }, {
+          name: '广州',
+          value: 90
+        }],
+        [{
+          name: '北京'
+        }, {
+          name: '大连',
+          value: 80
+        }],
+        [{
+          name: '北京'
+        }, {
+          name: '南宁',
+          value: 70
+        }],
+        [{
+          name: '北京'
+        }, {
+          name: '南昌',
+          value: 60
+        }],
+        [{
+          name: '北京'
+        }, {
+          name: '拉萨',
+          value: 50
+        }],
+        [{
+          name: '北京'
+        }, {
+          name: '长春',
+          value: 40
+        }],
+        [{
+          name: '北京'
+        }, {
+          name: '包头',
+          value: 30
+        }],
+        [{
+          name: '北京'
+        }, {
+          name: '重庆',
+          value: 20
+        }],
+        [{
+          name: '北京'
+        }, {
+          name: '常州',
+          value: 10
+        }]
+      ];
+
+      var SHData = [
+        [{
+          name: '上海'
+        }, {
+          name: '包头',
+          value: 95
+        }],
+        [{
+          name: '上海'
+        }, {
+          name: '昆明',
+          value: 90
+        }],
+        [{
+          name: '上海'
+        }, {
+          name: '广州',
+          value: 80
+        }],
+        [{
+          name: '上海'
+        }, {
+          name: '郑州',
+          value: 70
+        }],
+        [{
+          name: '上海'
+        }, {
+          name: '长春',
+          value: 60
+        }],
+        [{
+          name: '上海'
+        }, {
+          name: '重庆',
+          value: 50
+        }],
+        [{
+          name: '上海'
+        }, {
+          name: '长沙',
+          value: 40
+        }],
+        [{
+          name: '上海'
+        }, {
+          name: '北京',
+          value: 30
+        }],
+        [{
+          name: '上海'
+        }, {
+          name: '丹东',
+          value: 20
+        }],
+        [{
+          name: '上海'
+        }, {
+          name: '大连',
+          value: 10
+        }]
+      ];
+
+      var GZData = [
+        [{
+          name: '广州'
+        }, {
+          name: '福州',
+          value: 95
+        }],
+        [{
+          name: '广州'
+        }, {
+          name: '太原',
+          value: 90
+        }],
+        [{
+          name: '广州'
+        }, {
+          name: '长春',
+          value: 80
+        }],
+        [{
+          name: '广州'
+        }, {
+          name: '重庆',
+          value: 70
+        }],
+        [{
+          name: '广州'
+        }, {
+          name: '西安',
+          value: 60
+        }],
+        [{
+          name: '广州'
+        }, {
+          name: '成都',
+          value: 50
+        }],
+        [{
+          name: '广州'
+        }, {
+          name: '常州',
+          value: 40
+        }],
+        [{
+          name: '广州'
+        }, {
+          name: '北京',
+          value: 30
+        }],
+        [{
+          name: '广州'
+        }, {
+          name: '北海',
+          value: 20
+        }],
+        [{
+          name: '广州'
+        }, {
+          name: '海口',
+          value: 10
+        }]
+      ];
+
+      var planePath =
+        'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
+
+      view.when(function () {
+        var convertData = function (data) {
+          var res = [];
+          for (var i = 0; i < data.length; i++) {
+            var dataItem = data[i];
+            var fromCoord = geoCoordMap[dataItem[0].name];
+            var toCoord = geoCoordMap[dataItem[1].name];
+            if (fromCoord && toCoord) {
+              res.push({
+                fromName: dataItem[0].name,
+                toName: dataItem[1].name,
+                coords: [fromCoord, toCoord],
+                value: dataItem[1].value
+              });
+            }
+          }
+          return res;
+        };
+
+        var color = ['#a6c84c', '#ffa022', '#46bee9'];
+        var series = [];
+        [
+          ['北京', BJData],
+          ['上海', SHData],
+          ['广州', GZData]
+        ].forEach(function (item, i) {
+          series.push(
+            {
+              name: item[0] + ' Top10',
+              type: 'lines',
+              coordinateSystem: 'arcgis',
+              zlevel: 1,
+              effect: {
+                show: true,
+                period: 6,
+                trailLength: 0.7,
+                color: '#fff',
+                symbolSize: 3
+              },
+              lineStyle: {
+                normal: {
+                  color: color[i],
+                  width: 0,
+                  curveness: 0.2
+                }
+              },
+              data: convertData(item[1])
+            }, {
+            name: item[0] + ' Top10',
+            type: 'lines',
+            coordinateSystem: 'arcgis',
+            zlevel: 2,
+            symbol: ['none', 'arrow'],
+            symbolSize: 10,
+            effect: {
+              show: true,
+              period: 6,
+              trailLength: 0,
+              symbol: planePath,
+              symbolSize: 15
+            },
+            lineStyle: {
+              normal: {
+                color: color[i],
+                width: 1,
+                opacity: 0.6,
+                curveness: 0.2
+              }
+            },
+            data: convertData(item[1])
+          },
+            {
+              name: item[0] + ' Top10',
+              type: 'effectScatter',
+              coordinateSystem: 'arcgis',
+              symbol: 'circle',
+              zlevel: 2,
+              rippleEffect: {
+                brushType: 'fill',
+                scale: 4
+              },
+              // label: {
+              //   normal: {
+              //     show: true,
+              //     position: 'right',
+              //     formatter: '{b}'
+              //   }
+              // },
+              symbolSize: 5,
+              itemStyle: {
+                normal: {
+                  color: color[i]
+                }
+              },
+              data: item[1].map(function (dataItem) {
+                return {
+                  name: dataItem[1].name,
+                  value: geoCoordMap[dataItem[1].name].concat([
+                    dataItem[1].value
+                  ])
+                };
+              })
+            },
+          );
+        });
+
+        var option = {
+          title: {
+            text: '模拟迁徙',
+            left: 'center',
+            textStyle: {
+              color: '#fff'
+            }
+          },
+          series: series
+        };
+        console.log(series);
+        option.series.push({
+          name: ' Top10',
+          type: 'effectScatter',
+          coordinateSystem: 'arcgis',
+          symbol: 'circle',
+          zlevel: 2,
+          rippleEffect: {
+            brushType: 'fill',
+            scale: 4
+          },
+          // label: {
+          //   normal: {
+          //     show: true,
+          //     position: 'right',
+          //     formatter: '{b}'
+          //   }
+          // },
+          symbolSize: 10,
+          itemStyle: {
+            normal: {
+              color: '#46bee9'
+            }
+          },
+          data: []
+        })
+        var chart = new echartsLayer(view, echarts, option);
+        // view.on('click', event => {
+        //   let pt = view.toMap(event)
+        //   // console.log(pt);
+        //   // option.series[]
+        //   option.series[option.series.length - 1].data = [{ value: [pt.longitude, pt.latitude] }]
+        //   console.log(option.series);
+        //   chart.setChartOption(option)
+        //   console.log(chart);
+
+        // })
+        view.on('pointer-move', event => {
+          let pt = view.toMap(event)
+          option.series[option.series.length - 1].data = [{ value: [pt.longitude, pt.latitude] }]
+          chart.setChartOption(option)
+        })
+      });
+    });
+
+  </script>
+</head>
+
+<body class="tundra">
+  <div class="container">
+    <div id="map"></div>
+  </div>
+</body>
+
+</html>
\ No newline at end of file

static/view/demo/page-migrate2.html

+<html>
+
+<head>
+  <meta charset="utf-8">
+  <title>模拟人口迁徙</title>
+
+  <style>
+    html,
+    body {
+      padding: 0;
+      margin: 0;
+      height: 100%;
+      width: 100%;
+    }
+
+    .container {
+      display: flex;
+      height: 100%;
+      flex-direction: row;
+    }
+
+    .container>div {
+      flex: 1 1 auto;
+      width: 50%;
+      height: 100%;
+    }
+
+  </style>
+
+
+  <script src="https://apaas.wodcloud.com/mapsamples/static/js/echarts.min.js"></script>
+
+  <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>
+    var __DEV__ = false;
+    var geoCoordMap = {
+      '海门': [121.15, 31.89],
+      '鄂尔多斯': [109.781327, 39.608266],
+      '招远': [120.38, 37.35],
+      '舟山': [122.207216, 29.985295],
+      '齐齐哈尔': [123.97, 47.33],
+      '盐城': [120.13, 33.38],
+      '赤峰': [118.87, 42.28],
+      '青岛': [120.33, 36.07],
+      '乳山': [121.52, 36.89],
+      '金昌': [102.188043, 38.520089],
+      '泉州': [118.58, 24.93],
+      '莱西': [120.53, 36.86],
+      '日照': [119.46, 35.42],
+      '胶南': [119.97, 35.88],
+      '南通': [121.05, 32.08],
+      '拉萨': [91.11, 29.97],
+      '云浮': [112.02, 22.93],
+      '梅州': [116.1, 24.55],
+      '文登': [122.05, 37.2],
+      '上海': [121.48, 31.22],
+      '攀枝花': [101.718637, 26.582347],
+      '威海': [122.1, 37.5],
+      '承德': [117.93, 40.97],
+      '厦门': [118.1, 24.46],
+      '汕尾': [115.375279, 22.786211],
+      '潮州': [116.63, 23.68],
+      '丹东': [124.37, 40.13],
+      '太仓': [121.1, 31.45],
+      '曲靖': [103.79, 25.51],
+      '烟台': [121.39, 37.52],
+      '福州': [119.3, 26.08],
+      '瓦房店': [121.979603, 39.627114],
+      '即墨': [120.45, 36.38],
+      '抚顺': [123.97, 41.97],
+      '玉溪': [102.52, 24.35],
+      '张家口': [114.87, 40.82],
+      '阳泉': [113.57, 37.85],
+      '莱州': [119.942327, 37.177017],
+      '湖州': [120.1, 30.86],
+      '汕头': [116.69, 23.39],
+      '昆山': [120.95, 31.39],
+      '宁波': [121.56, 29.86],
+      '湛江': [110.359377, 21.270708],
+      '揭阳': [116.35, 23.55],
+      '荣成': [122.41, 37.16],
+      '连云港': [119.16, 34.59],
+      '葫芦岛': [120.836932, 40.711052],
+      '常熟': [120.74, 31.64],
+      '东莞': [113.75, 23.04],
+      '河源': [114.68, 23.73],
+      '淮安': [119.15, 33.5],
+      '泰州': [119.9, 32.49],
+      '南宁': [108.33, 22.84],
+      '营口': [122.18, 40.65],
+      '惠州': [114.4, 23.09],
+      '江阴': [120.26, 31.91],
+      '蓬莱': [120.75, 37.8],
+      '韶关': [113.62, 24.84],
+      '嘉峪关': [98.289152, 39.77313],
+      '广州': [113.23, 23.16],
+      '延安': [109.47, 36.6],
+      '太原': [112.53, 37.87],
+      '清远': [113.01, 23.7],
+      '中山': [113.38, 22.52],
+      '昆明': [102.73, 25.04],
+      '寿光': [118.73, 36.86],
+      '盘锦': [122.070714, 41.119997],
+      '长治': [113.08, 36.18],
+      '深圳': [114.07, 22.62],
+      '珠海': [113.52, 22.3],
+      '宿迁': [118.3, 33.96],
+      '咸阳': [108.72, 34.36],
+      '铜川': [109.11, 35.09],
+      '平度': [119.97, 36.77],
+      '佛山': [113.11, 23.05],
+      '海口': [110.35, 20.02],
+      '江门': [113.06, 22.61],
+      '章丘': [117.53, 36.72],
+      '肇庆': [112.44, 23.05],
+      '大连': [121.62, 38.92],
+      '临汾': [111.5, 36.08],
+      '吴江': [120.63, 31.16],
+      '石嘴山': [106.39, 39.04],
+      '沈阳': [123.38, 41.8],
+      '苏州': [120.62, 31.32],
+      '茂名': [110.88, 21.68],
+      '嘉兴': [120.76, 30.77],
+      '长春': [125.35, 43.88],
+      '胶州': [120.03336, 36.264622],
+      '银川': [106.27, 38.47],
+      '张家港': [120.555821, 31.875428],
+      '三门峡': [111.19, 34.76],
+      '锦州': [121.15, 41.13],
+      '南昌': [115.89, 28.68],
+      '柳州': [109.4, 24.33],
+      '三亚': [109.511909, 18.252847],
+      '自贡': [104.778442, 29.33903],
+      '吉林': [126.57, 43.87],
+      '阳江': [111.95, 21.85],
+      '泸州': [105.39, 28.91],
+      '西宁': [101.74, 36.56],
+      '宜宾': [104.56, 29.77],
+      '呼和浩特': [111.65, 40.82],
+      '成都': [104.06, 30.67],
+      '大同': [113.3, 40.12],
+      '镇江': [119.44, 32.2],
+      '桂林': [110.28, 25.29],
+      '张家界': [110.479191, 29.117096],
+      '宜兴': [119.82, 31.36],
+      '北海': [109.12, 21.49],
+      '西安': [108.95, 34.27],
+      '金坛': [119.56, 31.74],
+      '东营': [118.49, 37.46],
+      '牡丹江': [129.58, 44.6],
+      '遵义': [106.9, 27.7],
+      '绍兴': [120.58, 30.01],
+      '扬州': [119.42, 32.39],
+      '常州': [119.95, 31.79],
+      '潍坊': [119.1, 36.62],
+      '重庆': [106.54, 29.59],
+      '台州': [121.420757, 28.656386],
+      '南京': [118.78, 32.04],
+      '滨州': [118.03, 37.36],
+      '贵阳': [106.71, 26.57],
+      '无锡': [120.29, 31.59],
+      '本溪': [123.73, 41.3],
+      '克拉玛依': [84.77, 45.59],
+      '渭南': [109.5, 34.52],
+      '马鞍山': [118.48, 31.56],
+      '宝鸡': [107.15, 34.38],
+      '焦作': [113.21, 35.24],
+      '句容': [119.16, 31.95],
+      '北京': [116.46, 39.92],
+      '徐州': [117.2, 34.26],
+      '衡水': [115.72, 37.72],
+      '包头': [110, 40.58],
+      '绵阳': [104.73, 31.48],
+      '乌鲁木齐': [87.68, 43.77],
+      '枣庄': [117.57, 34.86],
+      '杭州': [120.19, 30.26],
+      '淄博': [118.05, 36.78],
+      '鞍山': [122.85, 41.12],
+      '溧阳': [119.48, 31.43],
+      '库尔勒': [86.06, 41.68],
+      '安阳': [114.35, 36.1],
+      '开封': [114.35, 34.79],
+      '济南': [117, 36.65],
+      '德阳': [104.37, 31.13],
+      '温州': [120.65, 28.01],
+      '九江': [115.97, 29.71],
+      '邯郸': [114.47, 36.6],
+      '临安': [119.72, 30.23],
+      '兰州': [103.73, 36.03],
+      '沧州': [116.83, 38.33],
+      '临沂': [118.35, 35.05],
+      '南充': [106.110698, 30.837793],
+      '天津': [117.2, 39.13],
+      '富阳': [119.95, 30.07],
+      '泰安': [117.13, 36.18],
+      '诸暨': [120.23, 29.71],
+      '郑州': [113.65, 34.76],
+      '哈尔滨': [126.63, 45.75],
+      '聊城': [115.97, 36.45],
+      '芜湖': [118.38, 31.33],
+      '唐山': [118.02, 39.63],
+      '平顶山': [113.29, 33.75],
+      '邢台': [114.48, 37.05],
+      '德州': [116.29, 37.45],
+      '济宁': [116.59, 35.38],
+      '荆州': [112.239741, 30.335165],
+      '宜昌': [111.3, 30.7],
+      '义乌': [120.06, 29.32],
+      '丽水': [119.92, 28.45],
+      '洛阳': [112.44, 34.7],
+      '秦皇岛': [119.57, 39.95],
+      '株洲': [113.16, 27.83],
+      '石家庄': [114.48, 38.03],
+      '莱芜': [117.67, 36.19],
+      '常德': [111.69, 29.05],
+      '保定': [115.48, 38.85],
+      '湘潭': [112.91, 27.87],
+      '金华': [119.64, 29.12],
+      '岳阳': [113.09, 29.37],
+      '长沙': [113, 28.21],
+      '衢州': [118.88, 28.97],
+      '廊坊': [116.7, 39.53],
+      '菏泽': [115.480656, 35.23375],
+      '合肥': [117.27, 31.86],
+      '武汉': [114.31, 30.52],
+      '大庆': [125.03, 46.58]
+    };
+    var map,view,scatterData,lineData;
+    require([
+      "esri/Map",
+      "esri/Basemap",
+      "https://apaas.wodcloud.com/mapsamples/static/js/4EchartsLayer.js",
+      "esri/views/MapView",
+      "esri/layers/WebTileLayer",
+      "esri/layers/support/TileInfo",
+      "dojo/domReady!"
+    ], function (
+      Map, Basemap, echartsLayer, MapView, WebTileLayer, TileInfo
+    ) {
+      // 通过瓦片形式加载天地图的
+      // 天地图根据投影分为两种：墨卡托和经纬度
+      let 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"]
+      });
+      let 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"]
+      });
+      // 天地图经纬度地图及注记作为底图
+      var tdtBasemap = new Basemap({
+        baseLayers: [tiledlayer, annolayer],
+        title: "TDT Basemap",
+        id: "tdtBasemap",
+      });
+      // 创建地图
+      map = new Map({
+        basemap: tdtBasemap
+      });
+      //创建二维地图
+      view = new MapView({
+        map: map,
+        container: "map",
+        zoom: 4,
+        center: [108.4766, 32.4801]
+      });
+
+      var BJData = [
+        [{
+          name: '北京'
+        }, {
+          name: '上海',
+          value: 95
+        }],
+        [{
+          name: '北京'
+        }, {
+          name: '广州',
+          value: 90
+        }],
+        [{
+          name: '北京'
+        }, {
+          name: '大连',
+          value: 80
+        }],
+        [{
+          name: '北京'
+        }, {
+          name: '南宁',
+          value: 70
+        }],
+        [{
+          name: '北京'
+        }, {
+          name: '南昌',
+          value: 60
+        }],
+        [{
+          name: '北京'
+        }, {
+          name: '拉萨',
+          value: 50
+        }],
+        [{
+          name: '北京'
+        }, {
+          name: '长春',
+          value: 40
+        }],
+        [{
+          name: '北京'
+        }, {
+          name: '包头',
+          value: 30
+        }],
+        [{
+          name: '北京'
+        }, {
+          name: '重庆',
+          value: 20
+        }],
+        [{
+          name: '北京'
+        }, {
+          name: '常州',
+          value: 10
+        }]
+      ];
+      scatterData = [];
+      lineData = [];
+      view.when(function () {
+        for (var i = 0; i < BJData.length; i++) {
+          var dataItem = BJData[i];
+          var fromCoord = geoCoordMap[dataItem[0].name];
+          var toCoord = geoCoordMap[dataItem[1].name];
+          if (fromCoord && toCoord) {
+            scatterData.push({
+              name: dataItem[1].name,
+              count: dataItem[1].value,
+              value: toCoord
+            });
+            lineData.push({
+              name: dataItem[0].name,
+              count: dataItem[1].value,
+              dest: dataItem[1].name,
+              coords: [fromCoord, toCoord]
+            });
+          }
+        }
+
+        var OD_Color = ["#00F8FF", "#00FF00", "#FFF800", "#FF0000"];
+        //颜色设置
+        var getColor = function (param) {
+          var factor = param.data.count;
+          var index;
+          if (factor >= 0 && factor < 30) {
+            index = 0;
+          } else if (factor >= 30 && factor < 60) {
+            index = 1;
+          } else if (factor >= 60 && factor < 90) {
+            index = 2;
+          } else {
+            index = 3;
+          }
+          return OD_Color[index];
+        };
+        var series = [{
+            name: "bgLine",
+            type: "lines",
+            coordinateSystem: "arcgis",
+            zlevel: 1,
+            // symbol: ['none', 'arrow'],
+            // symbolSize: 10,
+            lineStyle: {
+              normal: {
+                color: getColor,
+                width: 2,
+                opacity: 0.5,
+                curveness: 0.2
+              }
+            },
+            data: lineData
+          },
+          {
+            name: "scatter",
+            type: "effectScatter",
+            coordinateSystem: "arcgis",
+            zlevel: 2,
+            rippleEffect: {
+              scale: 50,
+              brushType: "stroke"
+            },
+            label: {
+              normal: {
+                show: true,
+                position: "right",
+                formatter: "{b}"
+              }
+            },
+            symbolSize: 0.2,
+            itemStyle: {
+              normal: {
+                show: true,
+                color: getColor
+              }
+            },
+            data: scatterData
+          },
+          {
+            name: "sLine",
+            type: "lines",
+            coordinateSystem: "arcgis",
+            zlevel: 3,
+            effect: {
+              show: true,
+              period: 6,
+              trailLength: 0.4,
+              symbolSize: 2
+            },
+            lineStyle: {
+              normal: {
+                color: getColor,
+                width: 0,
+                curveness: 0.2
+              }
+            },
+            data: lineData
+          },
+          {
+            name: "lLine",
+            type: "lines",
+            coordinateSystem: "arcgis",
+            zlevel: 4,
+            effect: {
+              show: true,
+              period: 6,
+              trailLength: 0.4,
+              opacity: 0.1,
+              symbolSize: 10
+            },
+            lineStyle: {
+              normal: {
+                color: getColor,
+                width: 0,
+                curveness: 0.2
+              }
+            },
+            data: lineData
+          }
+        ];
+        //组装option
+        var option = {
+          tooltip: {
+            trigger: "item",
+            backgroundColor: "rgba(0,0,0,1)",
+            formatter: function (param) {
+              return (
+                param.data.name +
+                "->" +
+                param.data.dest +
+                ": " +
+                Math.ceil(param.data.count)
+              );
+            }
+          },
+          series: series
+        };
+
+        var chart = new echartsLayer(view, echarts, option);
+
+      });
+    });
+
+  </script>
+</head>
+
+<body class="tundra">
+  <div class="container">
+    <div id="map"></div>
+  </div>
+</body>
+
+</html>

static/view/demo/page-movinglayer.html

+<!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 src="https://apaas.wodcloud.com/mapsamples/static/js/jquery-3.3.1.min.js"></script>
+
+  <script>
+    let map,
+      view,
+      trafficlayer,
+      selectedGraphics,
+      selectedLineGraphic,
+      movelayer,
+      linemovelayer,
+      progress = 0,
+      symbol,
+      movecounts,
+      state = false,
+      timer,
+      polylineSymbol,
+      graphics;
+    require([
+      "esri/Map",
+      "esri/Basemap",
+      "esri/TimeExtent",
+      "esri/layers/support/TimeInfo",
+      "esri/views/MapView",
+      "esri/layers/WebTileLayer",
+      "esri/layers/support/TileInfo",
+      "esri/layers/MapImageLayer",
+      "esri/layers/FeatureLayer",
+      "esri/views/layers/FeatureLayerView",
+      "esri/geometry/Point",
+      "esri/geometry/Polyline",
+      "esri/geometry/SpatialReference",
+      "esri/symbols/SimpleMarkerSymbol",
+      "esri/layers/GraphicsLayer",
+      "esri/Graphic",
+      "esri/symbols/PictureMarkerSymbol",
+      "esri/core/watchUtils",
+      "dojo/domReady!"
+    ], function (Map,
+      Basemap,
+      TimeExtent,
+      TimeInfo,
+      MapView,
+      WebTileLayer,
+      TileInfo,
+      MapImageLayer,
+      FeatureLayer,
+      FeatureLayerView,
+      Point,
+      Polyline,
+      SpatialReference,
+      SimpleMarkerSymbol,
+      GraphicsLayer,
+      Graphic,
+      PictureMarkerSymbol,
+      watchUtils, ) {
+      // 通过瓦片形式加载天地图的
+      // 天地图根据投影分为两种：墨卡托和经纬度
+      // 设定瓦片信息，天地图经纬度地图的切片信息全部使用该信息设定
+      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-5,
+            scale: 36071.483527679447
+          },
+          {
+            level: 15,
+            levelValue: 15,
+            resolution: 4.291534423828125e-5,
+            scale: 18035.741763839724
+          },
+          {
+            level: 16,
+            levelValue: 16,
+            resolution: 2.1457672119140625e-5,
+            scale: 9017.8708819198619
+          },
+          {
+            level: 17,
+            levelValue: 17,
+            resolution: 1.0728836059570313e-5,
+            scale: 4508.9354409599309
+          },
+          {
+            level: 18,
+            levelValue: 18,
+            resolution: 5.3644180297851563e-6,
+            scale: 2254.4677204799655
+          },
+          {
+            level: 19,
+            levelValue: 19,
+            resolution: 2.68220901489257815e-6,
+            scale: 1127.23386023998275
+          },
+          {
+            level: 20,
+            levelValue: 2,
+            resolution: 1.341104507446289075e-6,
+            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
+          }
+        }
+      );
+      var tdtBasemap = new Basemap({
+        baseLayers: [tiledLayer, annomap],
+        title: "TDT Basemap",
+        id: "tdtBasemap",
+        spatialReference: {
+          wkid: 4326
+        }
+      });
+      map = new Map({
+        basemap: tdtBasemap
+      });
+
+      view = new MapView({
+        map: map,
+        container: "viewDiv",
+        spatialReference: {
+          wkid: 4326
+        },
+        zoom: 7,
+        constraints: {
+          lods: tileInfo.lods,
+          snapToZoom: true
+        },
+        center: [105.613895, 25.646009]
+      });
+      view.ui.remove("zoom");
+      view.ui._removeComponents(["attribution"]);
+      view.popup.dockOptions = {
+        breakpoint: false,
+        position: "top-center"
+      };
+      polylineSymbol = {
+        type: "simple-line", // autocasts as SimpleLineSymbol()
+        color: [226, 119, 40],
+        width: 4
+      }
+      $.get("https://apaas.wodcloud.com/trans/api/realTimeTraffic/mapLocation", function (data) {
+        trafficlayer = new GraphicsLayer();
+        movelayer = new GraphicsLayer();
+        linemovelayer = new GraphicsLayer();
+        if (!data.features || !data.features.length) {
+          console.log("no data");
+          return;
+        }
+        var wkid = data.crs.properties.name.split("EPSG::")[1];
+        var features = data.features;
+        for (var i = 0; i < features.length; i++) {
+          var feature = features[i];
+          if (feature) {
+            var properties = feature.properties;
+            var lon =
+              feature.geometry.coordinates[0][0] ||
+              feature.geometry.coordinates[0];
+            var lat =
+              feature.geometry.coordinates[0][1] ||
+              feature.geometry.coordinates[1];
+            var pt = new Point({
+              x: lon,
+              y: lat,
+              spatialReference: view.spatialReference
+            });
+            symbol = new PictureMarkerSymbol("https://apaas.wodcloud.com/minemapapi/image/jtqj3/ic_wxhuoche.png",
+              15, 15);
+            // var symbol = {
+            //   type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
+            //   color: [0, 0, 139],
+            //   outline: {
+            //     color: [255, 255, 255],
+            //     width: 1.5
+            //   }
+            // };
+            var attr = properties;
+            var popupTemplate = {
+              title: "两客一危车辆",
+              content: [{
+                type: "fields",
+                fieldInfos: [{
+                    fieldName: "vehicle_number",
+                    label: "车牌号：",
+                    visible: true,
+                    format: {
+                      digitSeparator: true,
+                      places: 0
+                    }
+                  },
+                  {
+                    fieldName: "total_mileage",
+                    label: "总里程：",
+                    visible: true,
+                    format: {
+                      digitSeparator: true,
+                      places: 0
+                    }
+                  },
+                  {
+                    fieldName: "recorder_speed",
+                    label: "当前速度",
+                    visible: true,
+                    format: {
+                      digitSeparator: true,
+                      places: 0
+                    }
+                  }
+                ]
+              }]
+            };
+            var graphic = new Graphic(pt, symbol, attr, popupTemplate);
+            trafficlayer.add(graphic);
+          }
+        }
+        map.add(trafficlayer);
+        map.add(movelayer);
+        map.add(linemovelayer);
+        watchUtils.when(view, "stationary", updateOverviewExtent);
+      });
+
+      function updateOverviewExtent() {
+        trafficlayer.visible = true;
+        console.log("extent", view.zoom);
+        graphics = trafficlayer.graphics.clone();
+        if (timer) {
+          clearInterval(timer);
+        }
+        movelayer.removeAll();
+        linemovelayer.removeAll();
+        selectedGraphics =[];
+        selectedLineGraphic = [];
+        
+
+        if (graphics && view.zoom >= 11) {
+          selectedGraphics =[];
+          selectedLineGraphic = [];
+          for (var i = 0, total = graphics.items.length; i < total; i++) {
+            if (view.extent.contains(graphics.items[i].geometry)) {
+              selectedGraphics.push(graphics.items[i]);
+              console.log("i:",i)
+              var polyline = {
+                type: "polyline",
+                paths: []
+              }
+              polyline.paths[0] = new Array();
+              polyline.paths[0].push([graphics.items[i].geometry.x, graphics.items[i].geometry.y])
+              var polylineGraphic = new Graphic({
+                geometry: polyline,
+                symbol: polylineSymbol,
+              });
+              selectedLineGraphic.push(polylineGraphic)
+            }
+          }
+        }
+
+        if (selectedGraphics.length > 0) {
+          trafficlayer.visible = false;
+          movelayer.visible = true;
+          movecounts = 0;
+          if (timer) {
+            clearInterval(timer);
+          }
+          timer = setInterval(() => {
+            movelayer.removeAll();
+            linemovelayer.removeAll();
+            for (var i = 0; i < selectedGraphics.length; i++) {
+              var angle =
+                ((2 * Math.PI) / 360) * selectedGraphics[i].attributes.direction;
+              if (movecounts == 50) {
+                selectedGraphics[i].geometry.x -= 0.025 * Math.sin(angle);
+                selectedGraphics[i].geometry.y -= 0.025 * Math.cos(angle);
+                selectedLineGraphic[i].geometry.paths[0] = selectedLineGraphic[i].geometry.paths[0].slice(0, 1)
+              } else {
+                selectedGraphics[i].geometry.x += 0.0005 * Math.sin(angle);
+                selectedGraphics[i].geometry.y += 0.0005 * Math.cos(angle);
+                selectedLineGraphic[i].geometry.paths[0].push([selectedGraphics[i].geometry.x, selectedGraphics[i].geometry.y
+                ])
+              }
+              var graphic = selectedGraphics[i].clone();
+              graphic.symbol.angle = graphic.attributes.direction - 90;
+              movelayer.add(graphic);
+
+              var lineGraphic = selectedLineGraphic[i].clone();
+              linemovelayer.add(lineGraphic);
+            }
+            if (movecounts == 50) {
+              movecounts = 0;
+            }
+            movecounts++;
+          }, 200);
+        }
+      }
+    });
+
+  </script>
+</head>
+
+<body>
+  <div id="viewDiv"></div>
+</body>
+
+</html>

static/view/demo/page-multilayer3search.html

+<!DOCTYPE html>
+<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_3.x/esri/css/esri.css">
+  <style>
+    html,
+    body,
+
+    #map {
+      height: 100%;
+      width: 100%;
+      margin: 0;
+      padding: 0;
+    }
+
+    #controls {
+      position: absolute;
+      height: 100px;
+      font-family: arial;
+      bottom: 10px;
+      margin: 5px;
+      padding: 5px;
+      z-index: 40;
+      background: #fff;
+      color: #444;
+      width: 440px;
+      left: 10px;
+      -moz-box-shadow: 0 0 5px #888;
+      -webkit-box-shadow: 0 0 5px #888;
+      box-shadow: 0 0 5px #888;
+    }
+
+    h3 {
+      margin: 0 0 5px 0;
+      border-bottom: 1px solid #444;
+    }
+
+    .label {
+      display: inline-block;
+      width: 140px;
+    }
+
+  </style>
+
+  <script src="https://apaas.wodcloud.com/api_3.x/init.js"></script>
+  <script>
+    require([
+      "dojo/promise/all", 
+      "esri/Color", 
+      "dojo/_base/array", 
+      "dojo/dom", 
+      "dojo/on",
+      "esri/map", 
+      "esri/toolbars/draw", 
+      "esri/layers/WebTiledLayer",
+       "esri/layers/TileInfo",
+      "esri/geometry/Point",
+      "esri/geometry/Extent",
+      "esri/symbols/SimpleFillSymbol", 
+      "esri/symbols/SimpleLineSymbol",
+      "esri/symbols/SimpleMarkerSymbol",
+      "esri/graphic",
+      "esri/layers/ArcGISDynamicMapServiceLayer",
+      "esri/tasks/query",
+      "esri/tasks/QueryTask",
+      "dojo/domReady!"
+    ], function (
+      all, Color, arrayUtils, dom, on,
+      Map, Draw, WebTiledLayer, TileInfo, Point, Extent,
+      SimpleFillSymbol, SimpleLineSymbol, SimpleMarkerSymbol, Graphic,
+      ArcGISDynamicMapServiceLayer,
+      Query, QueryTask
+    ) {
+
+      var map = new Map('map', {
+        /*地图中心点*/
+        center: [0, 0],
+        /*地图默认缩放等级*/
+        zoom: 8,
+        /*地图最大缩放等级*/
+        maxZoom: 20,
+        /*地图最小缩放等级*/
+        minZoom: 2,
+        /*关闭logo*/
+        logo: false
+      });
+
+      // 通过瓦片形式加载天地图的
+      // 天地图根据投影分为两种：墨卡托和经纬度            // 设定瓦片信息，天地图经纬度地图的切片信息全部使用该信息设定
+      var tileInfo = new TileInfo({
+        dpi: 90.71428571427429,
+        rows: 256,
+        cols: 256,
+        compressionQuality: 0,
+        origin: {
+          x: -180,
+          y: 90
+        },
+        spatialReference: {
+          wkid: 4326
+        },
+        lods: [{
+          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: 20,
+          resolution: 1.341104507446289075e-006,
+          scale: 563.616930119991375
+        }]
+      });
+
+      // 在加载经纬度地图的时候我们需要使用 {subDomain}, {col}, {row}, {level}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别
+      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
+        });
+      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
+        });
+      var queryLayer = new ArcGISDynamicMapServiceLayer(
+        "https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer");
+      map.addLayer(basemap);
+      map.addLayer(annomap);
+      map.addLayer(queryLayer);
+      map.centerAndZoom(new Point({
+        x: 106.720725933,
+        y: 26.5453458492,
+        spatialReference: {
+          wkid: 4326
+        }
+      }), 10);
+      initToolbar();
+      //新建查询任务与查询对象
+      var qtParcel1 = new QueryTask(
+        "https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer/1");
+      var qParcel1 = new Query();
+      var qtArea = new QueryTask("https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer/10");
+      var qArea = new Query();
+      //设置查询是否返回几何对象
+      qParcel1.returnGeometry = qArea.returnGeometry = true;
+      qParcel1.outFields = qArea.outFields = ["*"];
+
+
+      function initToolbar() {
+        //新建绘图对象
+        tb = new Draw(map);
+        //监听绘制完成事件，将绘制的图形添加到地图中
+        tb.on("draw-end", addGraphic);
+        on(dom.byId("Extent"), "click", function (evt) {
+          //选择矩形框的画笔
+          var tool = evt.target.id.toLowerCase();
+          //绘制时，地图不移动
+          map.disableMapNavigation();
+          //激活画笔进行绘制
+          tb.activate(tool);
+        });
+      }
+
+      function addGraphic(evt) {
+        tb.deactivate();
+        map.enableMapNavigation();
+        var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
+          new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,
+            new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25])
+        );
+        map.graphics.add(new Graphic(evt.geometry, symbol));
+        executeQueries(evt);
+      }
+
+      function executeQueries(evt) {
+        var promise;
+        //空间查询，查询出几何要素内的所有要素
+        qParcel1.geometry = qArea.geometry = evt.geometry;
+        parcel1 = qtParcel1.execute(qParcel1);
+        area = qtArea.execute(qArea);
+        //异步处理两个查询
+        promises = all([parcel1, area]);
+        //完成后处理结果
+        promises.then(handleQueryResults);
+      }
+
+      function handleQueryResults(results) {
+        var parcel1, area;
+        for (var i; i < results.length; i++) {
+          if (!results[i].hasOwnProperty("features")) {
+            console.log("query failed.");
+          }
+        }
+        //两次查询的结果
+        parcel1 = results[0].features;
+        area = results[1].features;
+        map.graphics.clear();
+
+        arrayUtils.forEach(parcel1, function (feat) {
+          feat.setSymbol(
+            new SimpleMarkerSymbol()
+            .setColor(new Color([255, 0, 0, 1]))
+            .setSize("5")
+          );
+          map.graphics.add(feat);
+        });
+        arrayUtils.forEach(area, function (feat) {
+          feat.setSymbol(
+            new SimpleFillSymbol()
+            .setColor(new Color([255, 0, 0, 0.5]))
+            .setOutline(null)
+          );
+          map.graphics.add(feat);
+        });
+        dom.byId("results").innerHTML = "公安机构个数:  " + parcel1.length + "个" +
+          "<br />贵阳市派出所辖区个数:  " + area.length + "个";
+      }
+    });
+
+  </script>
+</head>
+
+<body class="tundra">
+  <div id="map">
+    <div id="controls">
+      <h3>多图层查询</h3>
+      <button id="Extent">开始进行拉框查询</button>
+      <div id="results">查询结果 </div>
+    </div>
+  </div>
+</body>
+
+</html>

static/view/demo/page-multilayer4search.html

+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
+    <title>multilayer search 4.</title>
+
+    <style>
+        html,
+        body,
+        #viewDiv {
+            padding: 0;
+            margin: 0;
+            height: 100%;
+            width: 100%;
+        }
+
+        #optionsDiv {
+            background-color: dimgray;
+            color: white;
+            padding: 5px;
+            width: 250px;
+        }
+
+        .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>
+        require([
+            "dojo/promise/all",
+            "esri/Map",
+            "esri/Basemap",
+            "esri/views/MapView",
+            "esri/layers/WebTileLayer",
+            "esri/layers/support/TileInfo",
+            "esri/layers/MapImageLayer",
+            "esri/layers/GraphicsLayer",
+            "esri/tasks/QueryTask",
+            "esri/tasks/support/Query",
+            "esri/tasks/FindTask",
+            "esri/tasks/support/FindParameters",
+            "esri/symbols/SimpleMarkerSymbol",
+            "esri/symbols/SimpleFillSymbol",
+            "esri/geometry/Point",
+            "esri/geometry/SpatialReference",
+            "esri/Graphic",
+        ], function (all, Map, Basemap, MapView, WebTileLayer, TileInfo, MapImageLayer, GraphicsLayer, QueryTask, Query,
+            FindTask, FindParameters, SimpleMarkerSymbol, SimpleFillSymbol, Point, SpatialReference, Graphic) {
+            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
+                },
+            });
+
+            polygonUrl = "https://apaasgis.wodcloud.com/server/rest/services/GZ_WGZTT/MapServer/0";
+            mapserverUrl = "https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer";
+            var pointSymbol = new SimpleMarkerSymbol({
+                style: "circle",
+                color: "blue",
+                size: "10"
+            });
+
+            var polygonSymbol = new SimpleFillSymbol({
+                color: [255, 0, 0, 0.5]
+            });
+
+            var popupTemplate = {
+                title: "{NAME}",
+                content: "<b>名称:</b> {NAME}"
+            };
+            var popupTemplate2 = {
+                title: "{名称}",
+                content: "<b>名称:</b> {名称}" +
+                    "<br> <b>地址:</b> {地址}"
+
+            };
+
+            var resultsLayer = new GraphicsLayer();
+
+            var qTask = new QueryTask({
+                url: polygonUrl
+            });
+            var qTask2 = new FindTask({
+                url: mapserverUrl
+            });
+
+            var params = new Query({
+                returnGeometry: true,
+                outFields: ["*"]
+            });
+            var findparams = new FindParameters({
+                layerIds: [1],
+                searchFields: ["NAME"],
+                returnGeometry: true
+            });
+
+            var layer = new MapImageLayer({
+                url: mapserverUrl
+            });
+            // 创建地图
+            var map = new Map({
+                basemap: tdtBasemap,
+                layers: [resultsLayer, layer]
+            });
+            // 创建二维地图
+            var view = new MapView({
+                map: map,
+                container: "viewDiv",
+                spatialReference: {
+                    wkid: 4326
+                },
+                center: [107, 27],
+                zoom: 9,
+                constraints: {
+                    lods: tileInfo.lods,
+                    snapToZoom: true
+                },
+                popup: {
+                    dockEnabled: true,
+                    dockOptions: {
+                        position: "top-right",
+                        breakpoint: false
+                    }
+                }
+            });
+            view.when(function () {
+                view.ui.add("optionsDiv", "top-right");
+                document.getElementById("doBtn").addEventListener("click", doQuery);
+            });
+
+            var value = document.getElementById("stateName");
+
+            function doQuery() {
+                resultsLayer.removeAll();
+                params.where =
+                    "WGMC LIKE '%" + value.value + "%'";
+                findparams.searchText = value.value;
+                promise = all([qTask.execute(params), qTask2.execute(findparams)]);
+                promise
+                    .then(getResults)
+                    .catch(promiseRejected);
+            }
+
+            function getResults(results) {
+                if (!results[0].hasOwnProperty("features")) {
+                    console.log("qtask query failed.");
+                }
+                var polygonResults = results[0].features.map(function (feature) {
+                    feature.symbol = polygonSymbol;
+                    feature.popupTemplate = popupTemplate;
+                    return feature;
+                });
+
+                var pointResults = results[1].results.map(function (feature) {
+                    var pt = new Point({
+                        "x": feature.feature.geometry.x,
+                        "y": feature.feature.geometry.y,
+                        "spatialReference": new SpatialReference(4326)
+                    });
+                    var symbol = pointSymbol;
+                    var attr = feature.feature.attributes;
+                    var graphic = new Graphic(pt, symbol, attr);
+                    graphic.popupTemplate = popupTemplate2;
+                    return graphic;
+                });
+
+                resultsLayer.addMany(polygonResults);
+                resultsLayer.addMany(pointResults);
+
+                //移动地图到结果处
+                view.goTo(pointResults[0]).then(function () {
+                    view.popup.open({
+                        features: pointResults,
+                        featureMenuOpen: true,
+                        updateLocationEnabled: true
+                    });
+                });
+            }
+
+            function promiseRejected(error) {
+                console.error("Promise rejected: ", error.message);
+            }
+        });
+
+    </script>
+</head>
+
+<body>
+    <div id="viewDiv"></div>
+    <div class="esri-widget" id="optionsDiv">
+        <h2>查询名称</h2>
+        <input type="text" class="esri-widget" id="stateName" value="云岩">
+        <button class="esri-widget" id="doBtn">查询</button>
+        <br />
+    </div>
+</body>
+
+</html>
\ No newline at end of file

static/view/demo/page-multilayersandfeilds_3search.html

+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <title>通用查询</title>
+  <link rel="stylesheet" href="https://apaas.wodcloud.com/api_3.x/esri/css/esri.css">
+  <style>
+    html,
+    body,
+    #map {
+      height: 100%;
+      width: 100%;
+      margin: 0;
+      padding: 0;
+    }
+
+    #optionsDiv {
+      position: absolute;
+      font-family: arial;
+      height: 25px;
+      right: 50px;
+      margin: 5px;
+      padding: 10px;
+      top: 10px;
+      width: 230px;
+      z-index: 40;
+    }
+    
+
+  </style>
+  <script src="https://apaas.wodcloud.com/api_3.x/init.js"></script>
+  <script>
+    require([
+      "esri/map",
+      "esri/layers/WebTiledLayer",
+      "esri/layers/TileInfo",
+      "esri/geometry/Point",
+      "esri/layers/ArcGISDynamicMapServiceLayer",
+      "esri/tasks/query", "esri/tasks/QueryTask",
+      "esri/graphic", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol",
+      "esri/symbols/SimpleFillSymbol", "esri/Color", "esri/dijit/PopupTemplate",
+      "dojo/domReady!"
+    ], function (Map, WebTiledLayer, TileInfo, Point, ArcGISDynamicMapServiceLayer, Query, QueryTask,
+      Graphic, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, Color, PopupTemplate) {
+      // 创建地图，不设置底图，如果设置底图会造成坐标系无法被转换成 ESPG:4326 (WGS1984)
+      var map = new Map('map', {
+        /*地图中心点*/
+        center: [0, 0],
+        /*地图默认缩放等级*/
+        zoom: 8,
+        /*地图最大缩放等级*/
+        maxZoom: 20,
+        /*地图最小缩放等级*/
+        minZoom: 2,
+        /*关闭logo*/
+        logo: false
+      });
+
+      // 通过瓦片形式加载天地图的
+      // 天地图根据投影分为两种：墨卡托和经纬度            // 设定瓦片信息，天地图经纬度地图的切片信息全部使用该信息设定
+      var tileInfo = new TileInfo({
+        dpi: 90.71428571427429,
+        rows: 256,
+        cols: 256,
+        compressionQuality: 0,
+        origin: {
+          x: -180,
+          y: 90
+        },
+        spatialReference: {
+          wkid: 4326
+        },
+        lods: [{
+          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: 20,
+          resolution: 1.341104507446289075e-006,
+          scale: 563.616930119991375
+        }]
+      });
+
+      // 在加载经纬度地图的时候我们需要使用 {subDomain}, {col}, {row}, {level}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别
+      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
+        });
+      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
+        });
+      var queryLayer = new ArcGISDynamicMapServiceLayer(
+        "https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer");
+      map.addLayer(basemap);
+      map.addLayer(annomap);
+      map.addLayer(queryLayer);
+      // 设定中心点以及缩放级别，使地图的坐标系修正为 ESPG:4326 (WGS1984),否则地图坐标系为 ESPG:102100 也就是 Web墨卡托 投影的坐标系
+      // 如果希望设置地图中心点，以及缩放级别，请在此处设置，在新建地图时给出的坐标可以随意，但请不要和此处相同
+      map.centerAndZoom(new Point({
+        x: 106.720725933,
+        y: 26.5453458492,
+        spatialReference: {
+          wkid: 4326
+        }
+      }), 8);
+      var searchBtn = document.getElementById("doBtn");
+      searchBtn.addEventListener("click", doQuery);
+      document.onkeydown = function (e) {
+        var theEvent = window.event || e;
+        var code = theEvent.keyCode || theEvent.which;
+        if (code == 13) {
+            searchBtn.click();
+        }
+      }
+      var input = document.getElementById("inputText");
+      //每个图层查询的字段
+      var fields = [
+        ["CATEGORYNAME", "REPORTORNAME", "ADDRESS", "DESCRIBE_"],
+        ["NAME", "ADDRESS", "TYPE"],
+        ["NAME", "ADRESS", "SSQY", "GXDWMC"],
+        ["NAME", "ADRESS", "SSQY"],
+        ["NAME"],
+        ["LXMC"],
+        ["LXMC"],
+        ["LXMC"],
+        ["LXMC"],
+        ["WGMC"],
+        ["PCSXQMC"],
+        ["XQFJXQMC"],
+        ["SZJXQMC"]
+      ]
+
+      function doQuery() {
+        map.graphics.clear();
+        console.log(map.graphics);
+        map.infoWindow.hide();
+        var length = queryLayer.layerInfos.length;
+        if (!input.value) {
+          alert("输入不为空！");
+          return;
+        }
+        //遍历查询每一个图层
+        for (var i = 0; i < length; i++) {
+          var url = "https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer/" + i;
+          query = new Query();
+          query.outFields = fields[i];
+          query.where = buildWherePart(input.value, fields[i]);
+          query.returnGeometry = true;
+          var task = new QueryTask(url)
+          task.execute(query, getResults, errback)
+        }
+      }
+
+      function buildWherePart(txt, fields) {
+        if (txt && fields) {
+          var where = "1=1";
+          var wheres = [];
+          for (var i = 0; i < fields.length; i++) {
+            var field = fields[i];
+            if (field) {
+              wheres.push(field + " LIKE '%" + txt + "%'");
+            }
+          }
+          if (wheres.length > 0) {
+            where += " AND (";
+            for (var i = 0; i < wheres.length; i++) {
+              where += (i == 0) ? wheres[i] : " OR " + wheres[i];
+            }
+            where += ")";
+          }
+          return where;
+        }
+        return;
+      }
+
+      function getResults(results) {
+        if (results.features.length > 0) {
+          feature = results.features[0];
+          //根据查询结果的类型，创建不同的符号
+          switch (results.geometryType) {
+            case "esriGeometryPoint":
+              var symbol = new SimpleMarkerSymbol({
+                "color": [0, 0, 255, 255],
+                "size": 15
+              });
+              var pt = new Point(feature.geometry.x, feature.geometry.y)
+              break;
+            case "esriGeometryPolyline":
+              var symbol = new SimpleLineSymbol(
+                SimpleLineSymbol.STYLE_DASH,
+                new Color([0, 0, 255]),
+                8
+              );
+              var pt = new Point(feature.geometry.paths[0][0][0], feature.geometry.paths[0][0][1])
+              break;
+            case "esriGeometryPolygon":
+              var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
+                new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,
+                  new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25])
+              );
+              var pt = new Point(feature.geometry.rings[0][0][0], feature.geometry.rings[0][0][1])
+              break;
+          }
+          //可视化查询结果，并绑定弹出窗口
+          for (var i = 0; i < results.features.length; i++) {
+            feature = results.features[i]
+            var content = ""
+            for (feild in results.fieldAliases) {
+              content += results.fieldAliases[feild] + "：" + feature.attributes[feild] + "<br>"
+            }
+            var infoTemplate = new PopupTemplate("");
+            infoTemplate.setTitle("详细信息");
+            infoTemplate.setContent(content);
+            map.graphics.add(new Graphic(feature.geometry, symbol, null, infoTemplate));
+          }
+          map.centerAndZoom(pt, 10)
+        }
+
+      }
+      //查询错误反馈
+      function errback(err) {
+        console.log("查询错误", err);
+      }
+    });
+
+  </script>
+
+</head>
+
+<body>
+  <div id="map"></div>
+  <div id="optionsDiv">
+    <input type="text" id="inputText" value="七十三警务室">
+    <button id="doBtn">查询</button>
+  </div>
+</body>
+
+</html>

static/view/demo/page-ol_load_geoserver_wmts.html

+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <title>wmts_test</title>
+    <link rel="stylesheet" href="https://apaas.wodcloud.com/mapsamples/static/js/openlayer4.6.4/css/ol.css"
+        type="text/css">
+    <script src="https://apaas.wodcloud.com/mapsamples/static/js/openlayer4.6.4/ol.js"></script>
+    <style type="text/css">
+        body {
+            height: 100%;
+        }
+
+        html {
+            height: 100%;
+        }
+
+        #map {
+            width: 100%;
+            height: 100%;
+            margin: 0;
+            padding: 0;
+        }
+
+        #switchBaseMap {
+            position: fixed;
+            width: 50px;
+            height: 50px;
+            top: 20px;
+            left: 20px;
+        }
+
+        #switchBaseMap img {
+            width: auto;
+            height: auto;
+        }
+
+        #diqiu {
+            display: none;
+        }
+
+        #ditu {
+            display: block;
+        }
+    </style>
+
+</head>
+
+<body>
+    <div id="map"></div>
+    <div id="switchBaseMap">
+        <img id="diqiu" src="../../images/diqiu.png" />
+        <img id="ditu" src="../../images/ditu.png" />
+    </div>
+    <script>
+
+        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";
+            tileLayer.setVisible(true);
+            ARCGISLAYER.setVisible(true);
+            gaodeMap.setVisible(false);
+        }
+
+        //点击diqiu图标
+        document.getElementById("diqiu").onclick = () => {
+            document.getElementById("ditu").style.display = "none";
+            document.getElementById("diqiu").style.display = "block";
+            tileLayer.setVisible(false);
+            ARCGISLAYER.setVisible(true);
+            gaodeMap.setVisible(true);
+        }
+        var matrixIds = ['EPSG:4326:0', 'EPSG:4326:1', 'EPSG:4326:2',
+            'EPSG:4326:3', 'EPSG:4326:4', 'EPSG:4326:5', 'EPSG:4326:6',
+            'EPSG:4326:7', 'EPSG:4326:8', 'EPSG:4326:9', 'EPSG:4326:10',
+            'EPSG:4326:11', 'EPSG:4326:12', 'EPSG:4326:13', 'EPSG:4326:14',
+            'EPSG:4326:15', 'EPSG:4326:16', 'EPSG:4326:17', 'EPSG:4326:18'];
+
+        var resolutions = [0.703125, 0.3515625, 0.17578125,
+            0.087890625, 0.0439453125, 0.02197265625,
+            0.010986328125, 0.0054931640625, 0.00274658203125,
+            0.001373291015625, 6.866455078125E-4, 3.4332275390625E-4,
+            1.71661376953125E-4, 8.58306884765625E-5, 4.291534423828125E-5,
+            2.1457672119140625E-5, 1.0728836059570312E-5, 5.364418029785156E-6,
+            2.682209014892578E-6]
+
+        var tilegrid = new ol.tilegrid.WMTS({
+            extent: [-180.0, -90.0, 180.0, 90.0],
+            tileSize: [256, 256],
+            origin: [-180.0, 90.0],
+            resolutions: resolutions,
+            matrixIds: matrixIds
+        });
+
+        var projection = new ol.proj.Projection({
+            code: 'EPSG:4326',
+            units: 'degrees',
+            axisOrientation: 'neu'
+        });
+        //广州给的wmts服务的图层
+        var tileSource = new ol.source.WMTS({
+            url: 'http://218.19.252.203:20052/geoserver/gwc/service/wmts',
+            layer: "chanzhou:jichutu",
+            format: "image/png",
+            matrixSet: "EPSG:4326",
+            projection: projection,
+            tileGrid: tilegrid
+
+        });
+        var tileLayer = new ol.layer.Tile({
+            opacity: 0.7,
+            source: tileSource,
+            wrapX: false,
+        });
+        //arcgisserver的图层
+        let url = "https://apaasgis.wodcloud.com/server/rest/services/SZ_POINT_TEST/MapServer";
+        let ARCGISLAYER = new ol.layer.Image({
+            source: new ol.source.ImageArcGISRest({
+                ratio: 1,
+                params: {},
+                url: url
+            })
+        })
+
+        //高德的图层
+        let gaodeMap = new ol.layer.Tile({
+            source: new ol.source.XYZ({
+                url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
+            })
+        });
+        var View = new ol.View({
+            center: [114.05457, 22.54635],
+            projection: "EPSG:4326",
+            zoom: 12,
+            maxZoom: 18,
+            minZoom: 2
+
+        })
+        var map = new ol.Map({
+            layers: [tileLayer, gaodeMap, ARCGISLAYER],
+            view: View,
+            target: 'map',
+        });
+    </script>
+</body>
+
+</html>
\ No newline at end of file

static/view/demo/page-ol_tms_mapserver.html

+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <title>Tiled ArcGIS MapServer</title>
+  <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
+  <link rel="stylesheet" href="https://apaas.wodcloud.com/mapsamples/static/js/openlayer4.6.4/css/ol.css"
+    type="text/css">
+  <script src="https://apaas.wodcloud.com/mapsamples/static/js/openlayer4.6.4/ol.js"></script>
+  <style>
+    .map {
+      width: 100%;
+      height: 100%;
+    }
+
+    body {
+      height: 100%;
+    }
+
+    html {
+      height: 100%;
+    }
+
+  </style>
+</head>
+
+<body>
+  <div id="map" class="map"></div>
+  <script>
+    const OSM = new ol.layer.Tile({
+      source: new ol.source.OSM()
+    })
+    //基础地图信息--开始
+    //设置坐标
+    let projectionBase = new ol.proj.Projection({
+      code: 'EPSG:4326',
+      units: 'degrees',
+      axisOrientation: 'neu'
+    });
+    //设置每一级别比例尺
+    let resolutionsBase = [0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125, 0.02197265625, 0.010986328125,
+      0.0054931640625, 0.00274658203125, 0.001373291015625, 6.866455078125E-4, 3.4332275390625E-4,
+      1.71661376953125E-4, 8.58306884765625E-5, 4.291534423828125E-5, 2.1457672119140625E-5, 1.0728836059570312E-5,
+      5.364418029785156E-6, 2.682209014892578E-6, 1.341104507446289E-6, 6.705522537231445E-7, 3.3527612686157227E-7
+    ];
+    //设置origin
+    let originBase = [-180.0, -90.0];
+    let mCenterBase = [114.05457, 22.54635]; //地图中心点-经纬度坐标
+    // 地图范围
+
+    let fullExtentBase = [113.3619204711914, 22.15763153076172, 115.14614852905273, 23.1]; //原始范围
+
+    //创建地图图层
+    let BaseLayer = new ol.layer.Tile({
+      source: new ol.source.XYZ({
+        tileGrid: new ol.tilegrid.TileGrid({
+          tileSize: 256,
+          origin: originBase,
+          maxExtent: fullExtentBase,
+          resolutions: resolutionsBase
+        }),
+        projection: projectionBase,
+        tileUrlFunction: function (xyz, obj1, obj2) {
+          let level = xyz[0]
+          let col = xyz[1]
+          let row = xyz[2]
+          let url =
+            "http://218.19.252.203:20240/geoserver/gwc/service/tms/1.0.0/shenzhen%3Ashenzhenwgb@EPSG%3A4326@png/" +
+            level + "/" + col + "/" + row + ".png";
+          return url;
+        }
+      })
+    })
+    let url = "https://apaasgis.wodcloud.com/server/rest/services/SZ_POINT_TEST/MapServer";
+    let ARCGISLAYER = new ol.layer.Image({
+      source: new ol.source.ImageArcGISRest({
+        ratio: 1,
+        params: {},
+        url: url
+      })
+    })
+    let GAODELAYER = new ol.layer.Tile({
+      source: new ol.source.XYZ({
+        url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
+      })
+    });
+    let layers0 = [GAODELAYER, ARCGISLAYER]
+    let layers1 = [BaseLayer, ARCGISLAYER]
+    //基础地图信息--结束
+    let map = new ol.Map({
+      layers: layers0,
+      target: 'map',
+      view: new ol.View({
+        projection: 'EPSG:3857',
+        center: ol.proj.fromLonLat([114.05457, 22.54635]),
+        zoom: 12
+      })
+    });
+    let isGaode = true;
+    map.on("click", () => {
+      console.log("click");
+      console.log(map.getLayers());
+      if (isGaode) {
+        map.removeLayer(GAODELAYER)
+        map.removeLayer(ARCGISLAYER)
+        map.addLayer(BaseLayer)
+        map.addLayer(ARCGISLAYER)
+      } else {
+        map.removeLayer(BaseLayer)
+        map.removeLayer(ARCGISLAYER)
+        map.addLayer(GAODELAYER)
+        map.addLayer(ARCGISLAYER)
+      }
+      isGaode = !isGaode;
+    })
+
+  </script>
+</body>
+
+</html>

static/view/demo/page-peoplecluster.html

+<!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 {
+      background-color: dimgray;
+      color: white;
+      padding: 10px;
+      width: 350px;
+    }
+
+    .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/mapsamples/static/js/jquery-3.3.1.min.js"></script>
+  <script src="https://apaas.wodcloud.com/api_4.x/init.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: "{BUS_REPORTORNAME}, {BUS_ADDRESS} ",
+        fieldInfos: [{
+          fieldName: "st_name",
+          label: "站点名称",
+          format: {
+            places: 0,
+            digitSeperator: true
+          }
+        }],
+        content: "</b> <b> 姓名： <b> {BUS_REPORTORNAME}" +
+          "<br><b>地址 ：</b> {BUS_ADDRESS}" +
+          "<br><b>时间 : {BUS_HAPPENTIME}" +
+          "</b> {BUS_DESCRIBE} "
+      };
+
+      var stationUrl = "https://apaasgis.wodcloud.com/arcgis/rest/services/TRACK_DEMO/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
+        },
+        center: [109, 38],
+        zoom: 6,
+        constraints: {
+          lods: tileInfo.lods,
+          snapToZoom: true
+        },
+        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 trac_catalog = document.getElementById("valSelect");
+
+      function doQuery() {
+        resultsLayer.removeAll();
+        params.where = "BUS_CATEGORYNAME='" + trac_catalog.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.x,
+            "y": feature.geometry.y,
+            "spatialReference": new SpatialReference(4326)
+          });
+          var symbol = new PictureMarkerSymbol("/images/marker-red.png", 26, 37);
+          var attr = {
+            "BUS_CATEGORYNAME": feature.attributes.BUS_CATEGORYNAME,
+            "BUS_HAPPENTIME": feature.attributes.BUS_HAPPENTIME,
+            "BUS_REPORTTIME": feature.attributes.BUS_REPORTTIME,
+            "BUS_REPORTORNAME": feature.attributes.BUS_REPORTORNAME,
+            "BUS_ADDRESS": feature.attributes.BUS_ADDRESS,
+            "BUS_DESCRIBE": feature.attributes.BUS_DESCRIBE
+          };
+          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 + " results found!";
+      }
+
+      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>
+      <option value="网吧">网吧</option>
+    </select>
+    <br><br>
+    <button class="esri-widget" id="doBtn">检索</button> <br />
+    <h2>过滤条件</h2>
+    <p><span id="printResults"></span></p>
+  </div>
+</body>
+
+</html>

static/view/demo/page-pointshine_map.html

+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
+  <title>Point Shine Map</title>
+  <style>
+    html,
+    body,
+    #viewDiv {
+      padding: 0;
+      margin: 0;
+      height: 100%;
+      width: 100%;
+    }
+
+    #paneDiv {
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      padding: 20px 0;
+      z-index: 1;
+      text-align: center;
+    }
+
+    button {
+      background: white;
+      padding: 7px;
+      border: 1px solid #005e95;
+      font-size: 0.9em;
+      margin: 5px;
+      color: #005e95;
+    }
+
+    button:hover {
+      background: #005e95;
+      color: white;
+      cursor: pointer;
+    }
+
+    .operatePanel {
+      position: absolute;
+      top: 0px;
+      right: 0px;
+      width: 130px;
+      height: 100px;
+      border: 1px solid #0d1721;
+      background: #ffffff;
+    }
+
+  </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/api_4.x/init.js"></script>
+
+  <script>
+    $(function () {
+      require([
+        "esri/Map",
+        "esri/WebScene",
+        "esri/geometry/Point",
+        "esri/Basemap",
+        "esri/views/MapView",
+        "esri/layers/WebTileLayer",
+        "esri/layers/support/TileInfo",
+        "esri/layers/FeatureLayer"
+      ], function (Map, WebScene, Point, 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
+          },
+        });
+
+        var wglayer = new FeatureLayer({
+          url: "https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer/9"
+        });
+        // 创建地图
+        var map = new Map({
+          basemap: tdtBasemap,
+          layers: [wglayer]
+        });
+        // 创建二维地图
+        var view = new MapView({
+          map: map,
+          container: "viewDiv",
+          spatialReference: {
+            wkid: 4326
+          },
+          center: [106.7, 26.6],
+          zoom: 13,
+          constraints: {
+            lods: tileInfo.lods,
+            snapToZoom: true
+          },
+          popup: {
+            dockEnabled: true,
+            dockOptions: {
+              position: "top-right",
+              breakpoint: false
+            }
+          },
+          highlightOptions: {
+            color: [255, 0, 0],
+            fillOpacity: 1
+          },
+          environment: {
+            atmosphereEnabled: true,
+            atmosphere: {
+              quality: "high"
+            }
+          }
+        });
+
+        var highlightSelect, highlightHover;
+        var 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++) {
+              button.addEventListener("click", onClick);
+              button.addEventListener("mouseover", onMouseOver);
+              button.addEventListener("mouseout", onMouseOut);
+            }
+
+            function onClick(event) {
+              queryStations.where = "WGMC LIKE'%" + event.target.innerText + "%'";
+              stationLayer.queryFeatures(queryStations).then(function (result) {
+                console.log(result);
+
+                if (highlightSelect) {
+                  highlightSelect.remove();
+                }
+                highlightSelect = layerView.highlight(result.features);
+              });
+            }
+
+            function onMouseOver(event) {
+              queryStations.where = "WGMC LIKE　'%" + event.target.innerText + "%'";
+              hoverPromise = stationLayer.queryFeatures(queryStations);
+              hoverPromise.then(function (result) {
+                if (highlightHover) {
+                  highlightHover.remove();
+                }
+                highlightHover = layerView.highlight(result.features);
+              });
+            }
+
+            function onMouseOut(event) {
+              hoverPromise.cancel();
+              if (highlightHover) {
+                highlightHover.remove();
+              }
+            }
+          });
+        });
+
+      });
+    });
+
+  </script>
+</head>
+
+<body>
+  <div id="viewDiv"></div>
+  <div id="paneDiv">
+    <h3>站点选择</h3>
+    <button>观山</button> <button>经开</button>
+    <button>云岩</button> <button>南明</button>
+  </div>
+</body>
+
+</html>

static/view/demo/page-simplesearch.html

+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
+  <title>simple search</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%;
+    }
+
+    #optionsDiv {
+      background-color: dimgray;
+      color: white;
+      padding: 5px;
+      width: 250px;
+    }
+
+    .esri-popup .esri-popup-header .esri-title {
+      font-size: 18px;
+      font-weight: bolder;
+    }
+
+    .esri-popup .esri-popup__footer {
+      visibility: hidden;
+    }
+
+    .esri-popup .esri-popup-body .esri-popup-content {
+      font-size: 14px;
+    }
+
+  </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/GraphicsLayer",
+      "esri/tasks/QueryTask",
+      "esri/tasks/support/Query",
+      "esri/symbols/SimpleMarkerSymbol",
+      "esri/geometry/Point"
+    ], function (Map, Basemap, MapView, WebTileLayer, TileInfo, GraphicsLayer, QueryTask, Query, SimpleMarkerSymbol, Point) {
+      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 peaksUrl =
+        "https://apaasgis.wodcloud.com/server/rest/services/GZ_LYJQZTT/MapServer/2";
+
+      var pointSymbol = new SimpleMarkerSymbol({
+        style: "circle",
+        color: "blue",
+        size: "8px"
+      });
+
+      var popupTemplate = {
+        title: "{NAME}",
+        content: "<b>名称:</b> {NAME}" +
+          "<br><b>地址:</b> {ADDRESS}"
+      };
+
+      var resultsLayer = new GraphicsLayer();
+
+      var qTask = new QueryTask({
+        url: peaksUrl
+      });
+
+      var params = new Query({
+        returnGeometry: true,
+        outFields: ["*"]
+      });
+
+      var map = new Map({
+        basemap: tdtBasemap,
+        layers: [resultsLayer] 
+      });
+
+      var view = new MapView({
+        map: map,
+        container: "viewDiv",
+        spatialReference: {
+          wkid: 4326
+        },
+        center: [107, 27],
+        zoom: 9,
+        constraints: {
+          lods: tileInfo.lods,
+          snapToZoom: true
+        },
+        popup: {
+          dockEnabled: true,
+          dockOptions: {
+            position: "top-right",
+            breakpoint: false
+          }
+        }
+      });
+
+      view.when(function () {
+        view.ui.add("optionsDiv", "top-right");
+        document.getElementById("doBtn").addEventListener("click", doQuery);
+      });
+
+      var value = document.getElementById("stateName");
+
+      function doQuery() {
+        resultsLayer.removeAll();
+        params.where =
+          "NAME=" + "'" + value.value + "'";
+        qTask
+          .execute(params)
+          .then(getResults)
+          .catch(promiseRejected);
+      }
+
+      function getResults(response) {
+        var peakResults = response.features.map(function (feature) {
+          feature.symbol = pointSymbol;
+          feature.popupTemplate = popupTemplate;
+          return feature;
+        });
+
+        resultsLayer.addMany(peakResults);
+
+        var pt = new Point({
+          latitude: peakResults[0].geometry.y,
+          longitude: peakResults[0].geometry.x
+        });
+
+        view.goTo(pt);
+        view.popup.open({
+          features: peakResults,
+          featureMenuOpen: true,
+          location: pt
+        });
+
+        document.getElementById("printResults").innerHTML =
+          peakResults.length + " results found!";
+      }
+
+      function promiseRejected(error) {
+        console.error("Promise rejected: ", error.message);
+      }
+    });
+
+  </script>
+</head>
+
+<body>
+  <div id="viewDiv"></div>
+  <div class="esri-widget" id="optionsDiv">
+    <h2>查询名称</h2>
+    <input type="text" class="esri-widget" id="stateName" value="青岩古镇">
+    <button class="esri-widget" id="doBtn">查询</button>
+    <br />
+    <p><span id="printResults"></span></p>
+  </div>
+</body>
+
+</html>

static/view/demo/page-sliderZoom.html

+<!DOCTYPE html>
+<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" />
+  <style>
+    html,
+    body,
+    #viewDiv {
+      height: 100%;
+      width: 100%;
+      margin: 0;
+      padding: 0;
+    }
+
+    #zoom {
+      height: 27px;
+      width: 200px;
+    }
+
+    #zoom-value {
+      width: 32px;
+      height: 32px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+  </style>
+  <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([
+      "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://{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
+      });
+      // 创建二维地图
+      var view = new MapView({
+        map: map,
+        container: "viewDiv",
+        spatialReference: {
+          wkid: 4326
+        },
+        zoom: 12,
+        constraints: {
+          lods: tileInfo.lods,
+          snapToZoom: true,
+          minZoom: 3,
+          maxZoom: 18
+        },
+        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;
+        view.ui.add("optionsDiv", "top-left");
+        view.ui.add("zoom-value", "top-left");
+        zoomSlider.addEventListener("input", function () {
+          showZoom.innerText = zoomSlider.value;
+        });
+        zoomSlider.addEventListener("change", function () {
+          view.zoom = zoomSlider.value
+        });
+        view.watch("zoom", function () {
+          zoomSlider.value = view.zoom
+          showZoom.innerText = parseInt(view.zoom)
+        });
+      })
+    })
+
+  </script>
+</head>
+
+<body>
+  <div id="viewDiv"></div>
+  <div class="esri-widget" id="optionsDiv">
+    &nbsp;<input id="zoom" type="range" orient="vertical" min="3" max="18" step="1" value="18" />&nbsp;
+  </div>
+  <div class="esri-widget" id="zoom-value">
+    <span>18</span>
+  </div>
+</body>
+
+</html>

static/view/demo/page-tdt_wmts_map.html

+<!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://{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
+            });
+            // 创建二维地图
+            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

static/view/demo/page-test.html

+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Geoserver TMS</title>
+    <link rel="stylesheet" href="https://apaas.wodcloud.com/mapsamples/static/js/ol4.6.5/ol.css" type="text/css">
+    <script src="https://apaas.wodcloud.com/mapsamples/static/js/ol4.6.5/ol.js"></script>
+    <script src="http://mapv.baidu.com/build/mapv.min.js"></script>
+
+    <style>
+        .map {
+            width: 100%;
+            height: 100%;
+        }
+
+        body {
+            height: 100%;
+        }
+
+        html {
+            height: 100%;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="map" class="map"></div>
+    <script>
+
+
+        let GAODELAYER = new ol.layer.Tile({
+            source: new ol.source.XYZ({
+                url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
+            })
+        });
+
+        let layers1 = [GAODELAYER]
+        //基础地图信息--结束
+        let map = new ol.Map({
+            layers: layers1,
+            target: 'map',
+            view: new ol.View({
+                projection: 'EPSG:4326',
+                //center: ol.proj.fromLonLat([114.05457, 22.54635]),
+                center: [114.05457, 22.54635],
+                zoom: 12
+            })
+        });
+
+
+        // 构造mapv的图层
+        var lineLayer = new mapv.OpenlayersLayer(map, dataSet, options);
+
+    </script>
+</body>
+
+</html>
\ No newline at end of file

static/view/demo/page-test2.html

+<!--********************************************************************
+* Copyright© 2000 - 2019 SuperMap Software Co.Ltd. All rights reserved.
+*********************************************************************-->
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="UTF-8">
+    <title data-i18n="resources.title_WMTSLayer"></title>
+    <script type="text/javascript" src="../js/include-web.js"></script>
+    <script type="text/javascript" src="../../dist/openlayers/include-openlayers.js"></script>
+</head>
+<style type="text/css">
+    body {
+        height: 100%;
+    }
+
+    html {
+        height: 100%;
+    }
+
+    #map {
+        width: 100%;
+        height: 100%;
+        margin: 0px;
+        padding: 0px;
+    }
+</style>
+
+<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%">
+    <div id="map" style="width: 100%;height:100%"></div>
+    <script type="text/javascript">
+        // var resolutions = new Array(20);
+        // var matrixIds = new Array(20);
+        // for (var z = 0; z < 20; ++z) {
+        //     resolutions[z] = 0.703125 / Math.pow(2, z);
+        //     matrixIds[z] = z;
+        // }
+
+        var resolutions = new Array(17);
+        var matrixIds = new Array(17);
+        for (var z = 0; z < 17; ++z) {
+            resolutions[z] = 156543.033928041 / Math.pow(2, z);
+            matrixIds[z] = z;
+        }
+        // var map = new ol.Map({
+        //     target: 'map',
+        //     controls: ol.control.defaults({ attributionOptions: { collapsed: false } })
+        //         .extend([new ol.supermap.control.Logo()]),
+        //     view: new ol.View({
+        //         center: [106.72, 26.585],
+        //         zoom: 10,
+        //         projection: "EPSG:4326",
+        //     }),
+        //     layers: [new ol.layer.Tile({
+        //         opacity: 0.7,
+        //         //spatialReference: projectionBase,
+        //         source: new ol.source.WMTS({
+        //             url: (window.isLocal ? window.server : "http://jgsw.gy.wodcloud.com") + "/iserver/services/map-guizhou/wmts-china",
+        //             layer: 'guizhou',
+        //             matrixSet: 'ChinaPublicServices_guizhou',
+        //             format: 'image/png',
+        //             tileGrid: new ol.tilegrid.WMTS({
+        //                 //origin: [-2.0037508342787E7, 2.0037508342787E7],
+        //                 origin: [-180, 90],
+        //                 //origin: [11864178.63,508342787E7, 2.0037508342787E7, 2.0037508342787E7],
+        //                 extend: [103.72713192, 24.71038704, 109.46254608, 29.08170198],
+        //                 resolutions: resolutions,
+        //                 matrixIds: matrixIds
+        //             }),
+        //             style: 'default',
+        //             attributions: new ol.Attribution({
+        //                 html: "Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> with <span>© <a href='http://iclient.supermap.io' target='_blank'>SuperMap iClient</a></span>"
+        //             })
+        //         })
+        //     }),
+        //     new ol.layer.Image({
+        //         source: new ol.source.ImageArcGISRest({
+        //             ratio: 1,
+        //             params: {},
+        //             url: "https://apaasgis-zw.wodcloud.com/server/rest/services/GZ_LYJQZTT/MapServer"
+        //         })
+        //     })]
+        // });
+
+
+        var map = new ol.Map({
+            target: 'map',
+            controls: ol.control.defaults({ attributionOptions: { collapsed: false } })
+                .extend([new ol.supermap.control.Logo()]),
+            view: new ol.View({
+                center: [0, 0],
+                zoom: 0,
+
+            }),
+            layers: [new ol.layer.Tile({
+                opacity: 0.7,
+                source: new ol.source.WMTS({
+                    url: (window.isLocal ? window.server : "http://support.supermap.com.cn:8090") + "/iserver/services/map-china400/wmts100",
+                    layer: 'China',
+                    matrixSet: 'GoogleMapsCompatible_China',
+                    format: 'image/png',
+                    tileGrid: new ol.tilegrid.WMTS({
+                        origin: [-2.0037508342787E7, 2.0037508342787E7],
+                        extent: [-2.0037508342787E7, -2.0037508342787E7, 2.0037508342787E7, 2.0037508342787E7],
+                        resolutions: resolutions,
+                        matrixIds: matrixIds
+                    }),
+                    style: 'default',
+                    attributions: new ol.Attribution({
+                        html: "Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> with <span>© <a href='http://iclient.supermap.io' target='_blank'>SuperMap iClient</a></span>"
+                    })
+                })
+            }),
+            new ol.layer.Image({
+                source: new ol.source.ImageArcGISRest({
+                    ratio: 1,
+                    params: {},
+                    url: "https://apaasgis-zw.wodcloud.com/server/rest/services/GZ_LYJQZTT/MapServer"
+                })
+            })
+            ]
+        });
+    </script>
+</body>
+
+</html>
\ No newline at end of file

static/view/demo/page-test3.html

+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <title>mapV</title>
+    <!-- <link href="../script/ol4/ol.css" rel="stylesheet" />
+    <script src="../script/ol4/ol.js"></script> -->
+    <link rel="stylesheet" href="https://apaas.wodcloud.com/mapsamples/static/js/ol4.6.5/ol.css" type="text/css">
+    <script src="https://apaas.wodcloud.com/mapsamples/static/js/ol4.6.5/ol.js"></script>
+    <script src="http://mapv.baidu.com/build/mapv.min.js"></script>
+    <script src="../../js/jquery-3.3.1.min.js"></script>
+    <style type="text/css">
+        body,
+        #map {
+            border: 0px;
+            margin: 0px;
+            padding: 0px;
+            width: 100%;
+            height: 100%;
+            font-size: 13px;
+            overflow: hidden;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="map"></div>
+    <script>
+        var projection = new ol.proj.Projection({
+            code: 'EPSG:4326',
+            units: 'degrees'
+        });
+
+        function getNavmapLayer() {
+            return new ol.layer.Tile({
+                source: new ol.source.XYZ({
+                    url: 'http://webrd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8'//7,8
+                }),
+                projection: projection
+            });
+        }
+        var navlayer = getNavmapLayer();
+        map = new ol.Map({
+            controls: ol.control.defaults({
+                attribution: false
+            }),
+            target: 'map',
+            layers: [navlayer],
+            view: new ol.View({
+                projection: projection,
+                center: [116.456, 40.251],
+                zoom: 4
+            })
+        });
+        var coordinate = [116.456, 40.251];
+
+        $.get('../../data/egisData/china.json', function (geojson) {
+
+            var geojsonOptions = {
+                gradient: {
+                    0: 'rgba(55, 50, 250, 0.4)',
+                    1: 'rgba(55, 50, 250, 1)'
+                },
+                max: 354551,
+                draw: 'intensity'
+            }
+
+            var geojsonDataSet = mapv.geojson.getDataSet(geojson);
+
+            var to = '北京';
+
+            var qianxi = new mapv.DataSet([
+                {
+                    from: '河北',
+                    count: 354551,
+                    to: to,
+                },
+                {
+                    from: '天津',
+                    count: 97323,
+                    to: to,
+                },
+                {
+                    from: '山东',
+                    count: 28664,
+                    to: to,
+                },
+                {
+                    from: '山西',
+                    count: 16650,
+                    to: to,
+                },
+                {
+                    from: '辽宁',
+                    count: 14379,
+                    to: to,
+                },
+                {
+                    from: '河南',
+                    count: 10980,
+                    to: to,
+                },
+                {
+                    from: '内蒙古自治区',
+                    count: 9603,
+                    to: to,
+                },
+                {
+                    from: '江苏',
+                    count: 4536,
+                    to: to,
+                },
+                {
+                    from: '上海',
+                    count: 3556,
+                    to: to,
+                },
+                {
+                    from: '广东',
+                    count: 2600,
+                    to: to,
+                },
+            ]);
+
+            var qianxiData = qianxi.get();
+
+            var lineData = [];
+            var pointData = [];
+            var textData = [];
+            var timeData = [];
+
+            var citys = {}
+
+            for (var i = 0; i < qianxiData.length; i++) {
+                var fromCenter = mapv.utilCityCenter.getCenterByCityName(qianxiData[i].from);
+                var toCenter = mapv.utilCityCenter.getCenterByCityName(qianxiData[i].to);
+                if (!fromCenter || !toCenter) {
+                    continue;
+                }
+                citys[qianxiData[i].from] = qianxiData[i].count;
+                citys[qianxiData[i].to] = 100;
+                pointData.push(
+                    {
+                        geometry: {
+                            type: 'Point',
+                            coordinates: [fromCenter.lng, fromCenter.lat]
+                        }
+                    }
+                );
+                pointData.push(
+                    {
+                        geometry: {
+                            type: 'Point',
+                            coordinates: [toCenter.lng, toCenter.lat]
+                        }
+                    }
+                );
+                textData.push(
+                    {
+                        geometry: {
+                            type: 'Point',
+                            coordinates: [fromCenter.lng, fromCenter.lat]
+                        },
+                        text: qianxiData[i].from
+                    }
+                );
+                textData.push(
+                    {
+                        geometry: {
+                            type: 'Point',
+                            coordinates: [toCenter.lng, toCenter.lat]
+                        },
+                        text: qianxiData[i].to
+                    }
+                );
+
+                var curve = mapv.utilCurve.getPoints([fromCenter, toCenter]);
+
+                for (j = 0; j < curve.length; j++) {
+                    timeData.push({
+                        geometry: {
+                            type: 'Point',
+                            coordinates: curve[j]
+                        },
+                        count: 1,
+                        time: j
+                    });
+                }
+
+                lineData.push({
+                    geometry: {
+                        type: 'LineString',
+                        coordinates: curve
+                        //coordinates: [[fromCenter.lng, fromCenter.lat], [toCenter.lng, toCenter.lat]]
+                    },
+                    count: 30 * Math.random()
+                });
+
+            }
+
+            var data = geojsonDataSet.get({
+                filter: function (item) {
+
+                    if (!citys[item.name]) {
+                        return false;
+                    }
+
+                    item.count = citys[item.name];
+                    return true;
+                }
+            });
+            geojsonDataSet = new mapv.DataSet(data);
+
+            var mapvLayer = new mapv.OpenlayersLayer(map, geojsonDataSet, geojsonOptions);
+
+            var textDataSet = new mapv.DataSet(textData);
+
+            var textOptions = {
+                draw: 'text',
+                font: '14px Arial',
+                fillStyle: 'white',
+                shadowColor: 'yellow',
+                shadowBlue: 10,
+                zIndex: 11,
+                shadowBlur: 10
+            }
+
+            var textMapvLayer = new mapv.OpenlayersLayer(map, textDataSet, textOptions);
+
+            var lineDataSet = new mapv.DataSet(lineData);
+
+            var lineOptions = {
+                strokeStyle: 'rgba(255, 250, 50, 0.8)',
+                shadowColor: 'rgba(255, 250, 50, 1)',
+                shadowBlur: 20,
+                lineWidth: 2,
+                zIndex: 100,
+                draw: 'simple'
+            }
+
+            var lineLayer = new mapv.OpenlayersLayer(map, lineDataSet, lineOptions);
+
+            var pointOptions = {
+                fillStyle: 'rgba(254,175,3,0.7)',
+                shadowColor: 'rgba(55, 50, 250, 0.5)',
+                shadowBlur: 10,
+                size: 5,
+                zIndex: 10,
+                draw: 'simple'
+            }
+
+
+            var pointDataSet = new mapv.DataSet(pointData);
+
+            var pointLayer = new mapv.OpenlayersLayer(map, pointDataSet, pointOptions);
+
+
+            var timeDataSet = new mapv.DataSet(timeData);
+
+            console.log(timeData);
+
+            var timeOptions = {
+                fillStyle: 'rgba(255, 250, 250, 0.5)',
+                zIndex: 200,
+                size: 2.5,
+                animation: {
+                    type: 'time',
+                    stepsRange: {
+                        start: 0,
+                        end: 50
+                    },
+                    trails: 10,
+                    duration: 2,
+                },
+                draw: 'simple'
+            }
+
+            var mapvLayer = new mapv.OpenlayersLayer(map, timeDataSet, timeOptions);
+
+        });
+
+
+    </script>
+</body>
+
+</html>
\ No newline at end of file

static/view/demo/page-video_web_map.html

+<!DOCTYPE html>
+<html>
+    
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
+    <title>Portal Web Map</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%;
+        }
+        .esri-view-width-xlarge .esri-popup__main-container {
+            width: 505px;
+        }
+        .esri-view-height-xlarge .esri-popup__main-container {
+            max-height: none;
+        }
+        .esri-popup__main-container {
+            max-height: none;
+        }
+    </style>
+    <script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
+    <script>
+        require([
+            "esri/config",
+            "esri/views/MapView",
+            "esri/WebMap"
+        ], function(esriConfig, MapView, WebMap) {
+            esriConfig.portalUrl = "https://apaasgis.wodcloud.com/portal";
+            var webmap = new WebMap({
+                portalItem: {
+                    id: "4731db60e99b47c3aed258d488963986"
+                }
+            });
+
+            var view = new MapView({
+                map: webmap,
+                container: "viewDiv"
+            });
+
+            view.when(function() {
+                view.popup.watch("selectedFeature", function(graphic) {
+                    if (graphic && graphic.sourceLayer) {
+                        var layerName = graphic.sourceLayer.title;
+                        switch (layerName) {
+                            case "贵州视频监控要素微服务":
+                                var name = graphic.attributes.NAME;
+                                var code = graphic.attributes.CODE;
+                                var mycontent = setContentInfo(code);
+                                openpopup(name, code, mycontent);
+                                break;
+                        }
+                        function openpopup(name, code, mycontent) {
+                            view.popup.open({
+                                title: name + "(" + code + ")",
+                                content: mycontent,
+                                location: graphic.geometry
+                            });
+                        }
+                    }
+                });
+            });
+            function setContentInfo(code) {
+                var videoDomain = "https://dl.wodcloud.com/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 +
+                    "&width=476&height=314' name='cameraiframe' frameborder='0' style='width: 476px;height: 314px; overflow: hidden; border:0px;'></iframe>";
+            };
+        });
+    </script>
+</head>
+<body>
+    <div id="viewDiv"></div>
+</body>
+
+</html>
\ No newline at end of file

static/view/demo/page-webmap_test.html

+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport"
+          content="initial-scale=1,maximum-scale=1,user-scalable=no" />
+    <title>WebMap TEST</title>
+
+    <style>
+        html,
+        body {
+            padding: 0;
+            margin: 0;
+            height: 100%;
+            width: 100%;
+            overflow: hidden;
+        }
+
+        #viewDiv {
+            position: absolute;
+            right: 0;
+            left: 0;
+            top: 60px;
+            bottom: 0;
+        }
+
+        .header {
+            position: absolute;
+            top: 0;
+            width: 100%;
+            height: 10%;
+        }
+
+        .btns {
+            margin: 0 auto;
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+            align-items: center;
+            overflow: auto;
+        }
+
+        .btn-switch {
+            flex-grow: 4;
+            background-color: rgba(34, 111, 14, 0.5);
+            color: #fff;
+            margin: 1px;
+            width: 50%;
+            padding: 20px;
+            overflow: auto;
+            text-align: center;
+            cursor: pointer;
+        }
+
+        .active-map {
+            color: #fff;
+            background-color: rgba(34, 111, 14, 1);
+        }
+    </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>
+        require(["esri/config", "esri/views/MapView", "esri/WebMap", "esri/widgets/LayerList", "esri/widgets/BasemapToggle", "esri/renderers/smartMapping/creators/heatmap", "esri/layers/FeatureLayer", "esri/layers/GraphicsLayer"], function (esriConfig, MapView, WebMap, LayerList, BasemapToggle, heatmapRendererCreator, FeatureLayer, GraphicsLayer) {
+            esriConfig.portalUrl = "https://apaasgis.wodcloud.com/arcgis";
+            var webmapids = [
+              "f329af1e6e05490fa44cc0104c5a89ef",
+              "54a708b3890a4d1aaff37988697aeaec",
+            ];
+            /************************************************************
+             * Create multiple WebMap instances
+             ************************************************************/
+            var webmaps = webmapids.map(function (webmapid) {
+                return new WebMap({
+                    portalItem: {
+                        // autocasts as new PortalItem()
+                        id: webmapid
+                    }
+                });
+            });
+            console.log(webmaps);
+            /************************************************************
+             * Initialize the View with the first WebMap
+             ************************************************************/
+            var view = new MapView({
+                map: webmaps[0],
+                container: "viewDiv"
+            });
+
+            var list = new LayerList({
+                view: view,
+            });
+            view.ui.add(
+              new LayerList({
+                  view: view
+              }), "top-right");
+            // console.log(list);
+            var basemapToggle = new BasemapToggle({
+                view: view, // view that provides access to the map's 'topo' basemap
+                nextBasemap: "gray" // allows for toggling to the 'hybrid' basemap
+            });
+
+            // Add widget to the top right corner of the view
+            view.ui.add(basemapToggle, "bottom-right");
+            var foundLayer = webmaps[0].allLayers.find(function (layer) {
+                console.log(layer);
+                return layer.title === "旅游景区要素微服务 - 5A景区";
+            });
+
+            view.map.load()
+                .then(function () {
+                    // load the basemap to get its layers created
+                    return view.map.basemap.load();
+                })
+               .then(function () {
+                   // grab all the layers and load them
+                   var allLayers = view.map.allLayers;
+                   var promises = allLayers.map(function (layer) {
+                       return layer.load();
+                   });
+                   return Promise.all(promises.toArray());
+               })
+                .then(function (layers) {
+                    var fl1 = layers.find(function (layer) {
+                        return layer.title === "旅游景区要素微服务 - 3A景区";
+                    });
+                    var renderer = {
+                        type: "heatmap",
+                        colorStops: [
+                          { color: "rgba(0, 0, 255, 0)", ratio: 0 },
+                          { color: "royalblue", ratio: 0.1 },
+                          { color: "cyan", ratio: 0.3 },
+                          { color: "lime", ratio: 0.5 },
+                          { color: "yellow", ratio: 0.7 },
+                          { color: "red", ratio: 1 }
+                        ],
+                        maxPixelIntensity: 25,
+                        minPixelIntensity: 0
+                    };
+                    fl1.renderer = renderer;
+                    var fl2 = layers.find(function (layer) {
+                        return layer.title === "旅游景区要素微服务 - 4A景区";
+                    });
+                    fl1.title = "3A景区"
+                    view.map.layers.add(fl1);
+                    view.map.layers.remove(fl2);
+                    var fl = new FeatureLayer({ url: "https://apaasgis.wodcloud.com/server/rest/services/GZ_APAASZTT/FeatureServer/1", title: "摄像头图层" });
+                    var gl = new GraphicsLayer({title:"绘制图层"});
+                    view.map.add(fl, 2);
+                    view.map.add(gl);
+                    // each layer load promise resolves with the layer
+                    console.log("all " + layers.length + " layers loaded");
+                })
+                .catch(function (error) {
+                    console.error(error);
+                });
+
+
+            document
+              .querySelector(".btns")
+              .addEventListener("click", function (event) {
+                  /************************************************************
+                   * On a button click, change the map of the View
+                   ************************************************************/
+                  var id = event.target.getAttribute("data-id");
+                  if (id) {
+                      var webmap = webmaps[id];
+                      view.map = webmap;
+                      var nodes = document.querySelectorAll(".btn-switch");
+                      for (var idx = 0; idx < nodes.length; idx++) {
+                          var node = nodes[idx];
+                          var mapIndex = node.getAttribute("data-id");
+                          if (mapIndex === id) {
+                              node.classList.add("active-map");
+                          } else {
+                              node.classList.remove("active-map");
+                          }
+                      }
+                  }
+              });
+        });
+    </script>
+</head>
+
+<body>
+    <section class="header esri-widget">
+        <div class="btns">
+            <div class="btn-switch active-map" data-id="0">旅游</div>
+            <div class="btn-switch" data-id="1">视频</div>
+        </div>
+    </section>
+    <div id="viewDiv" class="esri-widget"></div>
+</body>
+</html>
\ No newline at end of file

yarn.lock

@@ -2144,7 +2144,7 @@ coa@^2.0.2:
     chalk "^2.4.1"
     q "^1.1.2"
 
-codemirror@^5.45.0:
+codemirror@^5.41.0, codemirror@^5.58.2:
   version "5.58.2"
   resolved "https://registry.npm.taobao.org/codemirror/download/codemirror-5.58.2.tgz#ed54a1796de1498688bea1cdd4e9eeb187565d1b"
   integrity sha1-7VSheW3hSYaIvqHN1OnusYdWXRs=
@@ -2842,6 +2842,11 @@ detect-node@^2.0.4:
   resolved "https://registry.npm.taobao.org/detect-node/download/detect-node-2.0.4.tgz#014ee8f8f669c5c58023da64b8179c083a28c46c"
   integrity sha1-AU7o+PZpxcWAI9pkuBecCDooxGw=
 
+diff-match-patch@^1.0.0:
+  version "1.0.5"
+  resolved "https://registry.npm.taobao.org/diff-match-patch/download/diff-match-patch-1.0.5.tgz?cache=0&sync_timestamp=1600349125335&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdiff-match-patch%2Fdownload%2Fdiff-match-patch-1.0.5.tgz#abb584d5f10cd1196dfc55aa03701592ae3f7b37"
+  integrity sha1-q7WE1fEM0Rlt/FWqA3AVkq4/ezc=
+
 diffie-hellman@^5.0.0:
   version "5.0.3"
   resolved "https://registry.npm.taobao.org/diffie-hellman/download/diffie-hellman-5.0.3.tgz#40e8ee98f55a2149607146921c63e1ae5f3d2875"
@@ -7656,6 +7661,14 @@ vm-browserify@^1.0.1:
   resolved "https://registry.npm.taobao.org/vm-browserify/download/vm-browserify-1.1.2.tgz?cache=0&sync_timestamp=1572870837170&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvm-browserify%2Fdownload%2Fvm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
   integrity sha1-eGQcSIuObKkadfUR56OzKobl3aA=
 
+vue-codemirror@^4.0.6:
+  version "4.0.6"
+  resolved "https://registry.npm.taobao.org/vue-codemirror/download/vue-codemirror-4.0.6.tgz#b786bb80d8d762a93aab8e46f79a81006f0437c4"
+  integrity sha1-t4a7gNjXYqk6q45G95qBAG8EN8Q=
+  dependencies:
+    codemirror "^5.41.0"
+    diff-match-patch "^1.0.0"
+
 vue-cropper@^0.5.2:
   version "0.5.5"
   resolved "https://registry.npm.taobao.org/vue-cropper/download/vue-cropper-0.5.5.tgz?cache=0&sync_timestamp=1594808353939&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-cropper%2Fdownload%2Fvue-cropper-0.5.5.tgz#9bd1ba563c7faa268abd52fb2af4c6c28d33c962"