1. 选择不同镇域时，地图定位到指定范围; 2. 自定义模型开发提示，创建穿梭框组件

public/static/config/config.js

@@ -34,5 +34,8 @@ var map2DViewer = {
 var treeIdMap = new Map();
 
 // 各镇域中心区域位置
-var streetLocationMap = new Map();
-streetLocationMap.set("浦东新区", [31.209453, 121.555531]);
+var townLocationMap = new Map();
+townLocationMap.set("全部", [31.105589678244445, 121.72894516017521]);
+
+// 各镇域几何体 -- 方便定位
+var townPolygonMap = new Map()

src/components/common/BottomForm/CustomModelDialog.vue

@@ -1,7 +1,7 @@
 <template>
   <el-dialog
     :title="modelTitle ? modelTitle : '自定义模型'"
-    :visible="outerDialogVisible"
+    :visible.sync="outerDialogVisible"
     width="40%"
     center
   >
@@ -20,8 +20,8 @@
         <el-button type="primary" @click="confirm()">确认</el-button>
       </span>
     </el-dialog>
-    <div style="width:100%;height:100%;background:red;">1234</div>
-   <!--  <el-checkbox-group v-model="checkedList">
+    <TreeTransfer />
+    <!--  <el-checkbox-group v-model="checkedList">
       <el-checkbox
         v-for="item in checkArr"
         :key="item"
@@ -55,6 +55,7 @@
   </el-dialog>
 </template>
 <script>
+import TreeTransfer from "../TreeTransfer.vue";
 /**
  * 底部菜单（自定义模型）组件
  * @author: Gao Lu
@@ -62,7 +63,7 @@
  */
 export default {
   name: "CustomModelDialog",
-  components: {},
+  components: { TreeTransfer },
   data() {
     return {
       btnChecked: false,

src/components/common/TreeTransfer.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="transfer-container">
+    开发中 ! ! !
+  </div>
+</template>
+<script>
+/**
+ * 针对树结构的穿梭框组件
+ */
+export default {
+  name: "TreeTransfer",
+  components: {},
+  data() {
+    return {};
+  },
+  mounted() {},
+  methods: {},
+};
+</script>
+<style lang="less" scoped>
+.transfer-container {
+  width: 700px;
+  height: 300px;
+  // border: 1px solid yellow;
+  position: relative;
+  margin: 0 auto;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 25px;
+}
+</style>

src/components/map/MapHolder.vue

@@ -495,7 +495,8 @@ export default {
       center = JSON.parse(JSON.stringify(center)).geometry.coordinates;
       center.reverse();
       // 坐标
-      streetLocationMap.set(name, center);
+      townLocationMap.set(name, center);
+      townPolygonMap.set(name, polygon);
       let wmarker = L.circleMarker(center, {
         radius: 10,
         weight: 1,

src/views/HomeView.vue

@@ -617,11 +617,21 @@ export default {
     // home页面下拉框
     homeSelect(val) {
       console.log(val, "current street");
-      this.$refs.mapLoaderRef.setView(streetLocationMap.get(val), 11);
+      if (val === "全部") {
+        this.$refs.mapLoaderRef.setView(townLocationMap.get(val), 10);
+      } else {
+        let polygon = townPolygonMap.get(val);
+        map2DViewer.map.fitBounds(polygon.getBounds());
+      }
     },
     // 镇域专题下拉框
     specialTownSelect(val) {
-      this.$refs.mapLoaderRef.setView(streetLocationMap.get(val), 11);
+      if (val === "全部") {
+        this.$refs.mapLoaderRef.setView(townLocationMap.get(val), 10);
+      } else {
+        let polygon = townPolygonMap.get(val);
+        map2DViewer.map.fitBounds(polygon.getBounds());
+      }
     },
   },
   created() {