首页 发现 帮助
注册 登录
castgroup_forest
/
castgroup_bigscreen
7
0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

行政区阅览地图开发

wangcc 2 年之前
父节点
aa0f134292
当前提交
aed144566a
共有 9 个文件被更改，包括 13453 次插入 和 174 次删除
合并视图 显示文件统计
  1. 1 1
      config/index.js
  2. 6 6
      index.html
  3. 12920 0
      package-lock.json
  4. 277 0
      src/components/amap.vue
  5. 9 0
      src/components/header.vue
  6. 216 154
      src/components/map.vue
  7. 12 11
      src/main.js
  8. 2 2
      src/views/index.vue
  9. 10 0
      vue.config.js

+ 1 - 1
config/index.js
查看文件 

@@ -31,7 +31,7 @@ module.exports = {
 
     },
 
     },
 
 
 
     // Various Dev Server settings
 
     // Various Dev Server settings
 
-    host: '0.0.0.0', // can be overwritten by process.env.HOST
 
+    host: '127.0.0.1', // can be overwritten by process.env.HOST
 
     port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
 
     port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
 
     autoOpenBrowser: false,
 
     autoOpenBrowser: false,
 
     errorOverlay: true,
 
     errorOverlay: true,

+ 6 - 6
index.html
查看文件 

@@ -1,19 +1,19 @@
 
 <!--
 
 <!--
 
- * @LastEditors: gcz
 
+ * @LastEditors: wangcc
 
 -->
 
 -->
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html>
 
 <html>
 
+
 
   <head>
 
   <head>
 
     <meta charset="utf-8">
 
     <meta charset="utf-8">
 
     <!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> -->
 
     <!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> -->
 
-    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
     <title>ntbigscreen</title>
 
     <title>ntbigscreen</title>
 
-    <!-- 天地图 -->
 
-    <!-- <script src="http://api.tianditu.gov.cn/api?v=4.0&tk=7e5149a4e4bc98ccf53b9941d5f8ea62"></script> -->
 
-    <!-- <script type="text/javascript" src="http://webapi.amap.com/maps?v=2.0&key=58f9d9f14f2700689ddbc618495693b7"></script> -->
 
   </head>
 
   </head>
 
+
 
   <body>
 
   <body>
 
     <div id="app"></div>
 
     <div id="app"></div>
 
     <!-- built files will be auto injected -->
 
     <!-- built files will be auto injected -->
 
   </body>
 
   </body>
 
-</html>
 
+
 
+</html>

文件差异内容过多而无法显示
+ 12920 - 0
package-lock.json


+ 277 - 0
src/components/amap.vue
查看文件 

@@ -0,0 +1,277 @@
 
+<template>
 
+  <div>
 
+    <div id="container" tabindex="0"></div>
 
+  </div>
 
+</template>
 
+
 
+<script>
 
+import AMapLoader from '@amap/amap-jsapi-loader';
 
+export default {
 
+  name: 'amap',
 
+  data() {
 
+    return {
 
+      AMap: null,
 
+      map: null,
 
+      lngLat: [106.628201, 26.646694],
 
+      zoom: 8,
 
+      adcode: '贵州省',
 
+      mapLevel: 'province',
 
+      province: '',
 
+      districtExplorer: null,
 
+      tipMarker: null,
 
+      $tipMarkerContent: null,
 
+      currentAreaNode: null
 
+    };
 
+  },
 
+  mounted() {
 
+    // this.initMAp();
 
+    this.initAMap();
 
+  },
 
+  created() {},
 
+  methods: {
 
+    initAMap() {
 
+      let _this = this;
 
+      window._AMapSecurityConfig = {
 
+        securityJsCode: '4a6a8d8ea053d9aa8f4677ee1179fe57' // 密钥
 
+      };
 
+      AMapLoader.load({
 
+        key: '58f9d9f14f2700689ddbc618495693b7', // 申请好的Web端开发者Key，首次调用 load 时必填
 
+        version: '1.4.15', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
 
+        AMapUI: {
 
+          // 是否加载 AMapUI，缺省不加载
 
+          version: '1.1', // AMapUI 缺省 1.1
 
+          plugins: ['overlay/SimpleMarker'] // 需要加载的 AMapUI ui插件
 
+        }
 
+        // plugins:['AMap.ToolBar','AMap.DistrictSearch','AMap.Object3DLayer','AMap.Object3D'],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
 
+      }).then((AMap) => {
 
+        _this.AMap = AMap;
 
+        _this.map = new AMap.Map('container', {
 
+          //设置地图容器id
 
+          viewMode: '3D', //是否为3D地图模式
 
+          zoom: _this.zoom, //初始化地图级别
 
+          center: _this.lngLat, //初始化地图中心点位置
 
+          pitch: 30,
 
+          layers: [new AMap.TileLayer.Satellite(), new AMap.TileLayer.RoadNet()]
 
+        });
 
+        AMapUI.load(
 
+          ['ui/geo/DistrictExplorer', 'lib/$'],
 
+          function (DistrictExplorer) {
 
+            _this.loadMapData(DistrictExplorer, $);
 
+          }
 
+        );
 
+        this.$nextTick(() => {
 
+          // this.getDistrict()
 
+        });
 
+      });
 
+    },
 
+    getDistrict(adName,mapLevel) {
 
+      let that = this;
 
+      AMap.plugin(['AMap.DistrictSearch'], function () {
 
+        var district = new AMap.DistrictSearch({
 
+          // 返回行政区边界坐标等具体信息
 
+          extensions: 'all',
 
+          // 设置查询行政区级别为 区 （district）
 
+          level: mapLevel,
 
+          //  显示下级行政区级数，1表示返回下一级行政区
 
+          subdistrict: 1
 
+        });
 
+        district.search(adName, function (status, result) {
 
+          console.log(result);
 
+          var outer = [
 
+            new AMap.LngLat(-360, 90, true),
 
+            new AMap.LngLat(-360, -90, true),
 
+            new AMap.LngLat(360, -90, true),
 
+            new AMap.LngLat(360, 90, true)
 
+          ];
 
+          var holes = result.districtList[0].boundaries;
 
+          var pathArray = [outer];
 
+          pathArray.push.apply(pathArray, holes);
 
+          var polygon = new AMap.Polygon({
 
+            pathL: pathArray,
 
+            strokeColor: '#00eeff',
 
+            strokeWeight: 1,
 
+            fillColor: '#1c212a', // 遮罩背景色黑色
 
+            fillOpacity: 0.8
 
+          });
 
+          polygon.setPath(pathArray);
 
+          that.map.add(polygon);
 
+
 
+          // AMap.plugin(['AMap.Object3DLayer', 'AMap.Object3D'], function () {
 
+          //   //object3Dlayer可以看做一个容器,用来放多个3d对象
 
+          //   let object3Dlayer = new AMap.Object3DLayer();
 
+          //   //把object3Dlayer添加到map对象中
 
+          //   that.map.add(object3Dlayer);
 
+          //   var wall = new AMap.Object3D.Wall({
 
+          //     //版块边界线
 
+          //     path: holes,
 
+          //     //墙的高度
 
+          //     height: 80000,
 
+          //     //墙的颜色
 
+          //     color: '#0dcdd1'
 
+          //   });
 
+          //   //wall 有两个面,该属性表示哪个面可见,可选值:back ,front ,both表示两面  默认为front
 
+          //   wall.backOrFront = 'both';
 
+          //   // 是否允许使用透明颜色
 
+          //   wall.transparent = true;
 
+          //   //将wall放到object3Dlayer中
 
+          //   object3Dlayer.add(wall);
 
+          //   console.log('object3Dlayer');
 
+          // });
 
+        });
 
+      });
 
+    },
 
+    loadMapData(DistrictExplorer, $) {
 
+      let that = this;
 
+      //创建一个实例
 
+      that.districtExplorer = window.districtExplorer = new DistrictExplorer({
 
+        eventSupport: true, //打开事件支持
 
+        map: that.map
 
+      });
 
+      //当前聚焦的区域
 
+      this.$tipMarkerContent = $('<div class="tipMarker top"></div>');
 
+      this.tipMarker = new AMap.Marker({
 
+        content: this.$tipMarkerContent.get(0),
 
+        offset: new AMap.Pixel(0, 0),
 
+        bubble: true
 
+      });
 
+      //监听feature的hover事件
 
+      this.districtExplorer.on(
 
+        'featureMouseout featureMouseover',
 
+        (e, feature) => {
 
+          this.toggleHoverFeature(
 
+            feature,
 
+            e.type === 'featureMouseover',
 
+            e.originalEvent ? e.originalEvent.lnglat : null
 
+          );
 
+        }
 
+      );
 
+      var adName = that.adcode; //贵州省
 
+      var mapLevel = that.mapLevel;
 
+      var adcode = '520000'
 
+      //feature被点击
 
+      this.districtExplorer.on('featureClick', (e, feature) => {
 
+        that.map.clearMap();
 
+        const props = feature.properties;
 
+        this.switch2AreaNode(props.adcode);
 
+        mapLevel = props.level
 
+        adName = props.name
 
+        that.getDistrict(adName,mapLevel)
 
+      });
 
+      this.switch2AreaNode(adcode);
 
+      that.getDistrict(adName,mapLevel)
 
+    },
 
+    //根据Hover状态设置相关样式
 
+    toggleHoverFeature(feature, isHover, position) {
 
+      if (feature.properties.subFeatureIndex != null) {
 
+        this.tipMarker.setMap(isHover ? this.map : null);
 
+        if (!feature) {
 
+          return;
 
+        }
 
+        const props = feature.properties;
 
+        if (isHover) {
 
+          //更新提示内容
 
+          this.$tipMarkerContent.html(props.name);
 
+          //更新位置
 
+          this.tipMarker.setPosition(position || props.center);
 
+        }
 
+        //更新相关多边形的样式
 
+        const polys = this.districtExplorer.findFeaturePolygonsByAdcode(
 
+          props.adcode
 
+        );
 
+        polys.forEach((elemnt) => {
 
+          elemnt.setOptions({
 
+            fillOpacity: isHover ? 0.5 : 0
 
+          });
 
+        });
 
+      }
 
+    },
 
+    //绘制某个区域的边界
 
+    renderAreaPolygons(areaNode) {
 
+      //更新地图视野
 
+      if (!this.aReContry) {
 
+        this.map.setBounds(areaNode.getBounds(), null, null, true);
 
+      } else {
 
+        this.map.setZoom(4);
 
+        this.map.setCenter(new AMap.LngLat(103.714129, 38.150339));
 
+      }
 
+      //清除已有的绘制内容
 
+      this.districtExplorer.clearFeaturePolygons();
 
+      //绘制子区域
 
+      this.districtExplorer.renderSubFeatures(areaNode, () => {
 
+        return {
 
+          cursor: 'default',
 
+          bubble: true,
 
+          strokeColor: 'yellow', //线颜色
 
+          strokeOpacity: 1, //线透明度
 
+          strokeWeight: 2, //线宽
 
+          fillOpacity: 0 //填充透明度
 
+        };
 
+      });
 
+      //绘制父区域
 
+      this.districtExplorer.renderParentFeature(areaNode, {
 
+        cursor: 'default',
 
+        bubble: true,
 
+        strokeColor: '#00eeff', //线颜色
 
+        strokeOpacity: 1, //线透明度
 
+        strokeWeight: 2, //线宽
 
+        fillOpacity: 0 //填充透明度
 
+      });
 
+    },
 
+    //切换区域后刷新显示内容
 
+    refreshAreaNode(areaNode) {
 
+      this.districtExplorer.setHoverFeature(null);
 
+      this.renderAreaPolygons(areaNode);
 
+    },
 
+    //切换区域
 
+    switch2AreaNode(adcode, callback) {
 
+      if (
 
+        this.currentAreaNode &&
 
+        '' + this.currentAreaNode.getAdcode() === '' + adcode
 
+      ) {
 
+        return;
 
+      }
 
+      this.loadAreaNode(adcode, (error, areaNode) => {
 
+        if (error) {
 
+          if (callback) {
 
+            callback(error);
 
+          }
 
+          return;
 
+        }
 
+        this.currentAreaNode = areaNode;
 
+        //设置当前使用的定位用节点
 
+        this.districtExplorer.setAreaNodesForLocating([this.currentAreaNode]);
 
+        this.refreshAreaNode(areaNode);
 
+        if (callback) {
 
+          callback(null, areaNode);
 
+        }
 
+      });
 
+    },
 
+    // 加载区域
 
+    loadAreaNode(adcode, callback) {
 
+      this.districtExplorer.loadAreaNode(adcode, (error, areaNode) => {
 
+        if (error) {
 
+          if (callback) {
 
+            callback(error);
 
+          }
 
+          window.console.error(error);
 
+          return;
 
+        }
 
+
 
+        if (callback) {
 
+          callback(null, areaNode);
 
+        }
 
+      });
 
+    }
 
+  }
 
+};
 
+</script>
 
+
 
+<style  lang='scss' scoped>
 
+#container {
 
+  width: 100%;
 
+  height: 100vh;
 
+  /deep/ .tdt-pane {
 
+    z-index: auto;
 
+  }
 
+}
 
+</style>

+ 9 - 0
src/components/header.vue
查看文件 

@@ -1,3 +1,12 @@
 
+<!--
 
+ * @Description: 
+ * @Author: wangcc
 
+ * @Date: 2022-06-14 18:11:54
 
+ * @LastEditors: wangcc
 
+ * @LastEditTime: 2022-06-14 18:11:56
 
+ * @FilePath: \castgroup_bigscreen\src\components\header.vue
 
+ * @Copyright: Copyright (c) 2016~2022 by wangcc, All Rights Reserved. 
+-->
 
 <!--
 
 <!--
 
  * @LastEditors: gcz
 
  * @LastEditors: gcz
 
 -->
 
 -->

+ 216 - 154
src/components/map.vue
查看文件 

@@ -1,3 +1,12 @@
 
+<!--
 
+ * @Description: 
+ * @Author: wangcc
 
+ * @Date: 2022-06-10 11:51:36
 
+ * @LastEditors: wangcc
 
+ * @LastEditTime: 2022-06-14 18:02:29
 
+ * @FilePath: \castgroup_bigscreen\src\components\map.vue
 
+ * @Copyright: Copyright (c) 2016~2022 by wangcc, All Rights Reserved. 
+-->
 
 <!--
 
 <!--
 
  * @LastEditors: gcz
 
  * @LastEditors: gcz
 
 -->
 
 -->
 
@@ -6,84 +15,88 @@
 
     <div id="container"></div>
 
     <div id="container"></div>
 
     <div id="mask"></div>
 
     <div id="mask"></div>
 
     <div class="yun-wrap">
 
     <div class="yun-wrap">
 
-      <img class="yun yun1" src="../assets/img/云1.png" alt="" />
 
+      <img class="yun yun1" src="../assets/img/云1.png" alt />
 
     </div>
 
     </div>
 
     <div class="yun-wrap">
 
     <div class="yun-wrap">
 
-      <img class="yun yun2" src="../assets/img/云2.png" alt="" />
 
+      <img class="yun yun2" src="../assets/img/云2.png" alt />
 
     </div>
 
     </div>
 
     <div class="yun-wrap">
 
     <div class="yun-wrap">
 
-      <img class="yun yun3" src="../assets/img/云3.png" alt="" />
 
+      <img class="yun yun3" src="../assets/img/云3.png" alt />
 
     </div>
 
     </div>
 
-    
   </div>
 
   </div>
 
 </template>
 
 </template>
 
 
 
 <script>
 
 <script>
 
 import AMapLoader from '@amap/amap-jsapi-loader';
 
 import AMapLoader from '@amap/amap-jsapi-loader';
 
-import {mapMutations, mapGetters} from 'vuex';
 
+import { mapMutations, mapGetters } from 'vuex';
 
 export default {
 
 export default {
 
-  name: "",
 
+  name: '',
 
   components: {},
 
   components: {},
 
   data() {
 
   data() {
 
     return {
 
     return {
 
-      AMap:null,
 
-      map:null,
 
-      lngLat:[106.628201,26.646694],
 
-      zoom:9,
 
-      adcode:'520000',
 
-      mapLevel:'province',
 
-      province:'',
 
-      cityList:[],//市
 
-      districtList:[],//区县
 
-      streetList:[],//街道,乡
 
+      AMap: null,
 
+      map: null,
 
+      lngLat: [106.628201, 26.646694],
 
+      zoom: 9,
 
+      adcode: '520000',
 
+      mapLevel: 'province',
 
+      province: '',
 
+      cityList: [], //市
 
+      districtList: [], //区县
 
+      streetList: [] //街道,乡
 
     };
 
     };
 
   },
 
   },
 
   watch: {
 
   watch: {
 
     vuexSelectCity: {
 
     vuexSelectCity: {
 
-        handler: function() {
 
-            // console.log('vuexSelectCity',this.vuexSelectCity);
 
-            // console.log('vuexCityList',this.vuexCityList);
 
-            // this.vuexCityList.forEach(element => {
 
-            //   if(this.vuexSelectCity==element.value){
 
-            //     this.mapLevel= element.level
 
-            //   }
 
-            // });
 
-            this.mapLevel= 'city';
 
-            this.adcode = this.vuexSelectCity;
 
-            this.getMap(this.AMap);
 
-        },
 
-        deep: true
 
+      handler: function () {
 
+        // console.log('vuexSelectCity',this.vuexSelectCity);
 
+        // console.log('vuexCityList',this.vuexCityList);
 
+        // this.vuexCityList.forEach(element => {
 
+        //   if(this.vuexSelectCity==element.value){
 
+        //     this.mapLevel= element.level
 
+        //   }
 
+        // });
 
+        this.mapLevel = 'city';
 
+        this.adcode = this.vuexSelectCity;
 
+        this.getMap(this.AMap);
 
+      },
 
+      deep: true
 
     },
 
     },
 
     vuexSelectDistrict: {
 
     vuexSelectDistrict: {
 
-        handler: function() {
 
-          console.log('vuexSelectDistrict',this.vuexSelectDistrict);
 
-          if(this.vuexSelectDistrict){
 
-            this.mapLevel= 'district';
 
-            this.adcode = this.vuexSelectDistrict;
 
-            this.getMap(this.AMap);
 
-          } 
-        },
 
-        deep: true
 
+      handler: function () {
 
+        console.log('vuexSelectDistrict', this.vuexSelectDistrict);
 
+        if (this.vuexSelectDistrict) {
 
+          this.mapLevel = 'district';
 
+          this.adcode = this.vuexSelectDistrict;
 
+          this.getMap(this.AMap);
 
+        }
 
+      },
 
+      deep: true
 
     },
 
     },
 
     vuexSelectStreet: {
 
     vuexSelectStreet: {
 
-        handler: function() {
 
-          console.log('vuexSelectStreet',this.vuexSelectStreet);
 
-          if(this.vuexSelectStreet){
 
-            this.mapLevel= 'street';
 
-            this.adcode = this.vuexSelectStreet;
 
-            this.getMap(this.AMap);
 
-          } 
-        },
 
-        deep: true
 
-    },
 
+      handler: function () {
 
+        console.log('vuexSelectStreet', this.vuexSelectStreet);
 
+        if (this.vuexSelectStreet) {
 
+          this.mapLevel = 'street';
 
+          this.adcode = this.vuexSelectStreet;
 
+          this.getMap(this.AMap);
 
+        }
 
+      },
 
+      deep: true
 
+    }
 
   },
 
   },
 
   computed: {
 
   computed: {
 
-      // 引入getters中的计算属性，需要在 computed 中引入
 
-      ...mapGetters(['vuexCityList','vuexDistrictList','vuexStreetList','vuexSelectCity','vuexSelectDistrict','vuexSelectStreet'])
 
-  },
 
-  created() {
 
-    
+    // 引入getters中的计算属性，需要在 computed 中引入
 
+    ...mapGetters([
 
+      'vuexCityList',
 
+      'vuexDistrictList',
 
+      'vuexStreetList',
 
+      'vuexSelectCity',
 
+      'vuexSelectDistrict',
 
+      'vuexSelectStreet'
 
+    ])
 
   },
 
   },
 
+  created() {},
 
   mounted() {
 
   mounted() {
 
     this.initMap();
 
     this.initMap();
 
     // setTimeout(() => {
 
     // setTimeout(() => {
 
@@ -91,34 +104,45 @@ export default {
 
     // }, 1000);
 
     // }, 1000);
 
   },
 
   },
 
   methods: {
 
   methods: {
 
-    ...mapMutations(['changeCityList','changeDistrictList','changeStreetList']),
 
+    ...mapMutations([
 
+      'changeCityList',
 
+      'changeDistrictList',
 
+      'changeStreetList'
 
+    ]),
 
     initMap() {
 
     initMap() {
 
       window._AMapSecurityConfig = {
 
       window._AMapSecurityConfig = {
 
-        securityJsCode: '4a6a8d8ea053d9aa8f4677ee1179fe57',  // 密钥
 
+        securityJsCode: '4a6a8d8ea053d9aa8f4677ee1179fe57' // 密钥
 
       };
 
       };
 
       AMapLoader.load({
 
       AMapLoader.load({
 
-            key:"58f9d9f14f2700689ddbc618495693b7",             // 申请好的Web端开发者Key，首次调用 load 时必填
 
-            version:"1.4.15",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
 
-            // plugins:['AMap.ToolBar','AMap.DistrictSearch','AMap.Object3DLayer','AMap.Object3D'],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
 
-        }).then((AMap)=>{
 
-          this.AMap= AMap;
 
-            this.map = new AMap.Map("container",{  //设置地图容器id
 
-                viewMode:"3D",    //是否为3D地图模式
 
-                zoom:this.zoom,           //初始化地图级别
 
-                center:this.lngLat, //初始化地图中心点位置
 
-                layers: [new AMap.TileLayer.Satellite(), new AMap.TileLayer.RoadNet()],
 
-                // mapStyle: 'amap://styles/db9efe6a1745ac24b7269b862f359536'
 
-            });
 
-            this.$nextTick(()=>{
 
-              this.getMap(AMap);
 
-            })
 
-            // this.map.on('complete', () => {
 
-            //   console.log('map complete');
 
-            //   this.getMap(AMap);
 
-            // })
 
-        }).catch(e=>{
 
-            console.log(e);
 
+        key: '58f9d9f14f2700689ddbc618495693b7', // 申请好的Web端开发者Key，首次调用 load 时必填
 
+        version: '1.4.15' // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
 
+        // plugins:['AMap.ToolBar','AMap.DistrictSearch','AMap.Object3DLayer','AMap.Object3D'],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
 
+      })
 
+        .then((AMap) => {
 
+          this.AMap = AMap;
 
+          this.map = new AMap.Map('container', {
 
+            //设置地图容器id
 
+            viewMode: '3D', //是否为3D地图模式
 
+            pitch: 30,
 
+            zoom: this.zoom, //初始化地图级别
 
+            center: this.lngLat, //初始化地图中心点位置
 
+            layers: [
 
+              new AMap.TileLayer.Satellite(),
 
+              new AMap.TileLayer.RoadNet()
 
+            ]
 
+            // mapStyle: 'amap://styles/db9efe6a1745ac24b7269b862f359536'
 
+          });
 
+          this.$nextTick(() => {
 
+            this.getMap(AMap);
 
+          });
 
+          // this.map.on('complete', () => {
 
+          //   console.log('map complete');
 
+          //   this.getMap(AMap);
 
+          // })
 
         })
 
         })
 
+        .catch((e) => {
 
+          console.log(e);
 
+        });
 
     },
 
     },
 
     getMap(AMap) {
 
     getMap(AMap) {
 
       let that = this;
 
       let that = this;
 
@@ -133,33 +157,70 @@ export default {
 
           level: that.mapLevel,
 
           level: that.mapLevel,
 
           //  显示下级行政区级数，1表示返回下一级行政区
 
           //  显示下级行政区级数，1表示返回下一级行政区
 
           subdistrict: 1
 
           subdistrict: 1
 
-        })
 
+        });
 
 
 
-        district.search(that.adcode, function(status, result) {
 
-          console.log('result',result);
 
+        district.search(that.adcode, function (status, result) {
 
+            that.map.clearMap();
 
+            var outer = [
 
+              new AMap.LngLat(-360, 90, true),
 
+              new AMap.LngLat(-360, -90, true),
 
+              new AMap.LngLat(360, -90, true),
 
+              new AMap.LngLat(360, 90, true)
 
+            ];
 
+            // console.log(result);
 
+            var holes = result.districtList[0].boundaries;
 
+            // that.lngLat = [
 
+            //   result.districtList[0].center.lng,
 
+            //   result.districtList[0].center.lat
 
+            // ];
 
+            var pathArray = [outer];
 
+            pathArray.push.apply(pathArray, holes);
 
+            var polygon = new AMap.Polygon({
 
+              map: that.map,
 
+              path: pathArray,
 
+              strokeColor: '#00eeff',
 
+              strokeWeight: 1,
 
+              fillColor: '#1c212a', // 遮罩背景色黑色
 
+              fillOpacity: 0.8
 
+            });
 
+            polygon.setPath(pathArray);
 
+            that.map.add(polygon);
 
+          console.log('result', result);
 
           let districtList = result.districtList[0].districtList;
 
           let districtList = result.districtList[0].districtList;
 
           switch (that.mapLevel) {
 
           switch (that.mapLevel) {
 
             case 'province':
 
             case 'province':
 
-              console.log('province districtList',districtList);
 
+              console.log('province districtList', districtList);
 
               let cityList = [];
 
               let cityList = [];
 
-              districtList.forEach(element => {
 
-                cityList.push({label:element.name,value:element.adcode,level:element.level})
 
+              districtList.forEach((element) => {
 
+                cityList.push({
 
+                  label: element.name,
 
+                  value: element.adcode,
 
+                  level: element.level
 
+                });
 
               });
 
               });
 
               that.changeCityList(cityList);
 
               that.changeCityList(cityList);
 
               break;
 
               break;
 
             case 'city':
 
             case 'city':
 
-              console.log('city districtList',districtList);
 
+              console.log('city districtList', districtList);
 
               let districtLists = [];
 
               let districtLists = [];
 
-              districtList.forEach(element => {
 
-                districtLists.push({label:element.name,value:element.adcode,level:element.level})
 
+              districtList.forEach((element) => {
 
+                districtLists.push({
 
+                  label: element.name,
 
+                  value: element.adcode,
 
+                  level: element.level
 
+                });
 
               });
 
               });
 
               that.changeDistrictList(districtLists);
 
               that.changeDistrictList(districtLists);
 
               break;
 
               break;
 
             case 'street':
 
             case 'street':
 
-              console.log('street districtList',districtList);
 
+              console.log('street districtList', districtList);
 
               let streetLists = [];
 
               let streetLists = [];
 
-              districtList.forEach(element => {
 
-                streetLists.push({label:element.name,value:element.adcode,level:element.level})
 
+              districtList.forEach((element) => {
 
+                streetLists.push({
 
+                  label: element.name,
 
+                  value: element.adcode,
 
+                  level: element.level
 
+                });
 
               });
 
               });
 
               that.changeStreetList(districtLists);
 
               that.changeStreetList(districtLists);
 
               break;
 
               break;
 
@@ -168,77 +229,75 @@ export default {
 
           }
 
           }
 
 
 
           // console.log('result.districtList',result.districtList);
 
           // console.log('result.districtList',result.districtList);
 
-          if(!result.districtList){
 
-            return
 
+          if (!result.districtList) {
 
+            return;
 
           }
 
           }
 
+
 
           // console.log('map',that.map);
 
           // console.log('map',that.map);
 
-            // 获取边界信息
 
-            var bounds = result.districtList[0].boundaries
 
-            var polygons = []
 
-            if (bounds) {
 
-              that.map.clearMap();
 
-              for (var i = 0, l = bounds.length; i < l; i++) {
 
-              //生成行政区划polygon
 
-              var polygon = new AMap.Polygon({
 
-                map: that.map,
 
-                strokeWeight: 1,
 
-                path: bounds[i],
 
-                fillOpacity: 0.7,
 
-                fillColor: '#CCF3FF',
 
-                strokeColor: '#CC66CC'
 
-              })
 
-              // console.log('polygon',polygon);
 
-              polygons.push(polygon)
 
-            }
 
+          // 获取边界信息
 
+          // var bounds = result.districtList[0].boundaries;
 
+          // var polygons = [];
 
+          // if (bounds) {
 
+          //   that.map.clearMap();
 
+          //   //   for (var i = 0, l = bounds.length; i < l; i++) {
 
+          //   //   //生成行政区划polygon
 
+          //   //   var polygon = new AMap.Polygon({
 
+          //   //     map: that.map,
 
+          //   //     strokeWeight: 1,
 
+          //   //     path: bounds[i],
 
+          //   //     fillOpacity: 0.7,
 
+          //   //     fillColor: '#CCF3FF',
 
+          //   //     strokeColor: '#CC66CC'
 
+          //   //   })
 
+          //   //   // console.log('polygon',polygon);
 
+          //   //   polygons.push(polygon)
 
+          //   // }
 
 
 
-            // 地图自适应
 
-            that.map.setFitView()
 
-            // console.log('AMap.Object3DLayer',AMap.Object3DLayer);
 
-            AMap.plugin(['AMap.Object3DLayer','AMap.Object3D'], function () {
 
-              // console.log('2222');
 
-              //object3Dlayer可以看做一个容器,用来放多个3d对象
 
-              let object3Dlayer = new AMap.Object3DLayer();
 
-              //把object3Dlayer添加到map对象中
 
-              that.map.add(object3Dlayer);
 
-              var wall = new AMap.Object3D.Wall({
 
-                //版块边界线
 
-                  path: bounds,
 
-                  //墙的高度
 
-                  height: 80000,
 
-                  //墙的颜色
 
-                  color: "#0dcdd1",
 
-              });
 
-              //wall 有两个面,该属性表示哪个面可见,可选值:back ,front ,both表示两面  默认为front
 
-              wall.backOrFront = 'both';
 
-              // 是否允许使用透明颜色
 
-              wall.transparent = true;
 
-          //将wall放到object3Dlayer中
 
-              object3Dlayer.add(wall);
 
-              console.log('object3Dlayer');
 
-            })
 
-            
-          }
 
-        })
 
-      })
 
-    },
 
-    
-    
-  },
 
+          //   // 地图自适应
 
+          //   that.map.setFitView();
 
+          //   // console.log('AMap.Object3DLayer',AMap.Object3DLayer);
 
+          // AMap.plugin(['AMap.Object3DLayer', 'AMap.Object3D'], function () {
 
+          //   // console.log('2222');
 
+          //   //object3Dlayer可以看做一个容器,用来放多个3d对象
 
+          //   let object3Dlayer = new AMap.Object3DLayer();
 
+          //   //把object3Dlayer添加到map对象中
 
+          //   that.map.add(object3Dlayer);
 
+          //   var wall = new AMap.Object3D.Wall({
 
+          //     //版块边界线
 
+          //     path: bounds,
 
+          //     //墙的高度
 
+          //     height: 80000,
 
+          //     //墙的颜色
 
+          //     color: '#0dcdd1'
 
+          //   });
 
+          //   //wall 有两个面,该属性表示哪个面可见,可选值:back ,front ,both表示两面  默认为front
 
+          //   wall.backOrFront = 'both';
 
+          //   // 是否允许使用透明颜色
 
+          //   wall.transparent = true;
 
+          //   //将wall放到object3Dlayer中
 
+          //   object3Dlayer.add(wall);
 
+          //   console.log('object3Dlayer');
 
+          // });
 
+          // }
 
+        });
 
+      });
 
+    }
 
+  }
 
 };
 
 };
 
 </script>
 
 </script>
 
 
 
 <style lang='scss' scoped>
 
 <style lang='scss' scoped>
 
-#container{
 
+#container {
 
   width: 100%;
 
   width: 100%;
 
   height: 100vh;
 
   height: 100vh;
 
-  /deep/ .tdt-pane{
 
+  /deep/ .tdt-pane {
 
     z-index: auto;
 
     z-index: auto;
 
   }
 
   }
 
 }
 
 }
 
-#mask{
 
+#mask {
 
   width: 100%;
 
   width: 100%;
 
   height: 100vh;
 
   height: 100vh;
 
-  box-shadow:inset 0px 0px 10vw 8vw rgba(38,80,179,0.54);
 
+  box-shadow: inset 0px 0px 10vw 8vw rgba(38, 80, 179, 0.54);
 
   position: fixed;
 
   position: fixed;
 
   left: 0;
 
   left: 0;
 
   right: 0;
 
   right: 0;
 
@@ -252,26 +311,29 @@ export default {
 
   }
 
   }
 
   34% {
 
   34% {
 
     // opacity: 1;
 
     // opacity: 1;
 
-    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) translate3d(34vw,0px, 0px);
 
+    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1)
 
+      translate3d(34vw, 0px, 0px);
 
   }
 
   }
 
   67% {
 
   67% {
 
-      // opacity: 1;
 
-      transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) translate3d(67vw,0px, 0px);
 
+    // opacity: 1;
 
+    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1)
 
+      translate3d(67vw, 0px, 0px);
 
   }
 
   }
 
   100% {
 
   100% {
 
-      // opacity: 0;
 
-      transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) translate3d(160vw,0px, 0px);
 
+    // opacity: 0;
 
+    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1)
 
+      translate3d(160vw, 0px, 0px);
 
   }
 
   }
 
 }
 
 }
 
 
 
-.yun-wrap{
 
+.yun-wrap {
 
   position: fixed;
 
   position: fixed;
 
   left: 0;
 
   left: 0;
 
   top: 350px;
 
   top: 350px;
 
   width: 100vw;
 
   width: 100vw;
 
   pointer-events: none;
 
   pointer-events: none;
 
 }
 
 }
 
-.yun{
 
+.yun {
 
   position: fixed;
 
   position: fixed;
 
   left: -500px;
 
   left: -500px;
 
   animation-name: imageAnimation_32630606;
 
   animation-name: imageAnimation_32630606;
 
@@ -283,12 +345,12 @@ export default {
 
   filter: none;
 
   filter: none;
 
   pointer-events: none;
 
   pointer-events: none;
 
 }
 
 }
 
-.yun2{
 
+.yun2 {
 
   bottom: 20px;
 
   bottom: 20px;
 
   animation-duration: 90s;
 
   animation-duration: 90s;
 
   animation-delay: 10s;
 
   animation-delay: 10s;
 
 }
 
 }
 
-.yun3{
 
+.yun3 {
 
   top: 100px;
 
   top: 100px;
 
   animation-duration: 120s;
 
   animation-duration: 120s;
 
   animation-delay: 15s;
 
   animation-delay: 15s;

+ 12 - 11
src/main.js
查看文件 

@@ -3,32 +3,33 @@
 
  */
 
  */
 
 // The Vue build version to load with the `import` command
 
 // The Vue build version to load with the `import` command
 
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 
-import Vue from 'vue'
 
-import App from './App'
 
-import router from './router'
 
+import Vue from "vue";
 
+import App from "./App";
 
+import router from "./router";
 
 
 
-import store from './store';
 
+import store from "./store";
 
 
 
-import dataV from '@jiaminghi/data-view'
 
+import dataV from "@jiaminghi/data-view";
 
 
 
 // 引入全局样式文件
 
 // 引入全局样式文件
 
-import '@/assets/scss/index.scss'
 
+import "@/assets/scss/index.scss";
 
 
 
 import { Select, Option, Input } from 'element-ui';
 
 import { Select, Option, Input } from 'element-ui';
 
 import 'element-ui/lib/theme-chalk/index.css';
 
 import 'element-ui/lib/theme-chalk/index.css';
 
+
 
 Vue.use(Select);
 
 Vue.use(Select);
 
 Vue.use(Option);
 
 Vue.use(Option);
 
 Vue.use(Input);
 
 Vue.use(Input);
 
 
 
-Vue.use(dataV)
 
+Vue.use(dataV);
 
 
 
-Vue.config.productionTip = false
 
+Vue.config.productionTip = false;
 
 
 
 /* eslint-disable no-new */
 
 /* eslint-disable no-new */
 
 new Vue({
 
 new Vue({
 
-  el: '#app',
 
+  el: "#app",
 
   router,
 
   router,
 
   store,
 
   store,
 
   components: { App },
 
   components: { App },
 
-  template: '<App/>'
 
-})
 
+  template: "<App/>"
 
+});

+ 2 - 2
src/views/index.vue
查看文件 

@@ -1,5 +1,5 @@
 
 <!--
 
 <!--
 
- * @LastEditors: gcz
 
+ * @LastEditors: wangcc
 
 -->
 
 -->
 
 <template>
 
 <template>
 
   <div class=''>
 
   <div class=''>
 
@@ -59,7 +59,7 @@
 
 </template>
 
 </template>
 
 
 
 <script>
 
 <script>
 
-  import Map from "../components/map.vue";
 
+  import Map from "../components/amap.vue";
 
   import Header from "../components/header";
 
   import Header from "../components/header";
 
   import MyEcharts from "../components/echarts";
 
   import MyEcharts from "../components/echarts";
 
   import Numerical from "../components/numerical";
 
   import Numerical from "../components/numerical";

+ 10 - 0
vue.config.js
查看文件 

@@ -28,3 +28,13 @@
 
 //         }
 
 //         }
 
 //     }
 
 //     }
 
 // }
 
 // }
 
+module.exports = {
 
+  publicPath: './',
 
+  configureWebpack: {
 
+    externals: {
 
+      AMap: "AMap",
 
+      AMapUI: "AMapUI"
 
+    }
 
+  }
 
+}
 
+