行政区划查询定位并将选择的行政区划代码存储到store中

src/api/map.js

@@ -32,4 +32,20 @@ export function PoiQuery(data) {
         method: 'post',
         data: data
     })
+}
+
+// 获取行政区划树
+export function GetXzqhTree() {
+    return request({
+        url: '/apply/yzt/xzq/GetXzq',
+        method: 'get'
+    })
+}
+
+// 根据行政区划id获取GEOM WKT
+export function GetXzqhGeom(id) {
+    return request({
+        url: '/apply/yzt/xzq/GetGeom?id=' + id,
+        method: 'get'
+    })
 }

src/components/Combinations/Measure/Measure.vue

@@ -152,7 +152,6 @@ export default {
   //     boxEntity = undefined;
   //   }
   // },
-  // 监听viewer
   mounted() {},
   computed: {
     measureComb: function () {

src/components/Combinations/toolBar/toolBar.scss

@@ -5,7 +5,7 @@
     background: transparent;
     z-index: 100;
     display: flex;
-    background-color: rgba(0, 0, 0, .25);
+    // background-color: rgba(0, 0, 0, .25);
     justify-content: center;
     align-items: center;
     @media (max-width: 750px) {
@@ -56,8 +56,8 @@
     -ms-flex-pack: start;
     justify-content: flex-start;
     position: absolute;
-    top: 8px;
-    right: 280px;
+    top: 13px;
+    right: 218px;
     margin: 5px 0 0 5px;
     // background: url(/static/images/bigscreen/filter-bg.png) no-repeat;
     background-size: cover;
@@ -68,4 +68,15 @@ ul {
     display: flex;
     flex-wrap: nowrap;
     justify-content: space-evenly;
+}
+
+.el-cascader--mini {
+    width: 90px;
+    top: 7px;
+    background: transparent;
+}
+
+/deep/ .el-input__inner {
+    background: transparent !important;
+    color: white !important;
 }

src/components/Combinations/toolBar/toolBar.vue

@@ -2,6 +2,15 @@
   <div v-if="ToolBarShow">
     <!-- <div class="resourceTree" @click="choose(0)"></div> -->
     <div class="toolBar">
+      <el-cascader
+        size="mini"
+        :show-all-levels="false"
+        :options="xzqTreeData"
+        placeholder="行政区"
+        :props="{ checkStrictly: true, expandTrigger: 'hover' }"
+        clearable
+        v-model="xzqTreeValue"
+      ></el-cascader>
       <li
         class="sm-btn sm-tool-btn"
         :title="Resource.Resource"
@@ -10,87 +19,60 @@
         <span class="iconfont icontuceng"></span>
       </li>
 
-      <ul v-if="show">
-        <li
-          class="sm-btn sm-tool-btn"
-          :title="Resource.PoinyQuery"
-          @click="choose(9)"
-        >
-          <i class="el-icon-thumb"></i>
-          <!-- <Icon
-            type="md-information-circle"
-            style="color: #51e9ff !important"
-          /> -->
-        </li>
-        <li
-          class="sm-btn sm-tool-btn"
-          :title="Resource.PlacenameLocation"
-          @click="choose(10)"
-        >
-          <i class="el-icon-place"></i>
-          <!-- <Icon type="logo-xbox" style="color: #51e9ff !important" /> -->
-        </li>
-        <li
-          class="sm-btn sm-tool-btn"
-          :title="Resource.measure"
-          @click="choose(7)"
-        >
-          <span class="iconfont iconliangsuan"></span>
-        </li>
-        <!-- <li
-          class="sm-btn sm-tool-btn"
-          :title="Resource.setBaseLayer"
-          @click="choose(2)"
-        >
-          <span class="iconfont iconditushezhi"></span>
-        </li> -->
-        <li
-          class="sm-btn sm-tool-btn"
-          :title="Resource.clip"
-          @click="choose(4)"
-        >
-          <span class="iconfont iconiEarth-R8-xiugai_caijian"></span>
-        </li>
-        <li
-          class="sm-btn sm-tool-btn"
-          :title="Resource.terrain"
-          @click="choose(5)"
-        >
-          <span class="iconfont icondixing"></span>
-        </li>
-        <!-- <li
-          class="sm-btn sm-tool-btn"
-          :title="Resource.analysis"
-          @click="choose(6)"
-        >
-          <span class="iconfont iconsanweifenxi"></span>
-        </li> -->
-        <li
-          class="sm-btn sm-tool-btn"
-          :title="Resource.onlineEditing"
-          @click="choose(8)"
-        >
-          <span class="iconfont iconzaixianbianji"></span>
-        </li>
-        <li
-          class="sm-btn sm-tool-btn"
-          :title="Resource.analysis"
-          @click="choose(6)"
-        >
-          <span class="iconfont iconsanweifenxi"></span>
-        </li>
-        <li
-          class="sm-btn sm-tool-btn"
-          :title="Resource.sceneOptions"
-          @click="choose(3)"
-        >
-          <i class="el-icon-setting"></i>
-          <!-- <span class="iconfont iconchangjingshezhi"></span> -->
-        </li>
-        <!-- <li class="sm-btn sm-tool-btn" title="城市设计" @click="choose(9)">
-          <span class="iconfont iconVue-sightline"></span>
-        </li> -->
-      </ul>
+      <!-- <ul v-if="show"> -->
+      <li
+        class="sm-btn sm-tool-btn"
+        :title="Resource.PoinyQuery"
+        @click="choose(9)"
+      >
+        <i class="el-icon-thumb"></i>
+      </li>
+      <li
+        class="sm-btn sm-tool-btn"
+        :title="Resource.PlacenameLocation"
+        @click="choose(10)"
+      >
+        <i class="el-icon-place"></i>
+      </li>
+      <li
+        class="sm-btn sm-tool-btn"
+        :title="Resource.measure"
+        @click="choose(7)"
+      >
+        <span class="iconfont iconliangsuan"></span>
+      </li>
+      <li class="sm-btn sm-tool-btn" :title="Resource.clip" @click="choose(4)">
+        <span class="iconfont iconiEarth-R8-xiugai_caijian"></span>
+      </li>
+      <li
+        class="sm-btn sm-tool-btn"
+        :title="Resource.terrain"
+        @click="choose(5)"
+      >
+        <span class="iconfont icondixing"></span>
+      </li>
+      <li
+        class="sm-btn sm-tool-btn"
+        :title="Resource.onlineEditing"
+        @click="choose(8)"
+      >
+        <span class="iconfont iconzaixianbianji"></span>
+      </li>
+      <li
+        class="sm-btn sm-tool-btn"
+        :title="Resource.analysis"
+        @click="choose(6)"
+      >
+        <span class="iconfont iconsanweifenxi"></span>
+      </li>
+      <li
+        class="sm-btn sm-tool-btn"
+        :title="Resource.sceneOptions"
+        @click="choose(3)"
+      >
+        <i class="el-icon-setting"></i>
+      </li>
+      <!-- </ul> -->
       <div
         style="display: none"
         class="sm-tool-btn"
@@ -137,6 +119,7 @@
 
 <script>
 import clickQuery from "../../Query/clickQuery/clickQuery.vue";
+import { GetXzqhTree, GetXzqhGeom } from "@/api/map";
 export default {
   components: { clickQuery },
   name: "ToolBar",
@@ -147,8 +130,14 @@ export default {
       show: true,
       clickShow: false,
       plan: false,
+      xzqTreeData: [],
+      xzqTreeValue: "",
+      curXzqCode: "",
     };
   },
+  created() {
+    this.getXzqTreeData();
+  },
   computed: {
     ToolBarShow: function () {
       return this.sharedState.ToolBarShow;
@@ -156,6 +145,38 @@ export default {
   },
 
   methods: {
+    getXzqGeom() {
+      GetXzqhGeom(this.curXzqCode).then((res) => {
+        viewer.entities.removeAll();
+        let geoms = res.data
+          .substring(res.data.indexOf("(((") + 3, res.data.length - 3)
+          .split(")),((");
+        for (let i = 0; i < geoms.length; i++) {
+          let geom = geoms[i].split(",");
+          let points = [];
+          for (let j = 0; j < geom.length; j++) {
+            points.push(parseFloat(geom[j].split(" ")[0]));
+            points.push(parseFloat(geom[j].split(" ")[1]));
+          }
+          points.push(parseFloat(geom[0].split(" ")[0]));
+          points.push(parseFloat(geom[0].split(" ")[1]));
+          viewer.entities.add({
+            polyline: new Cesium.PolylineGraphics({
+              positions: Cesium.Cartesian3.fromDegreesArray(points),
+              width: 3,
+              material: Cesium.Color.BLUE.withAlpha(0.9),
+              clampToGround: true,
+            }),
+          });
+        }
+        viewer.flyTo(viewer.entities);
+      });
+    },
+    getXzqTreeData() {
+      GetXzqhTree().then((res) => {
+        this.xzqTreeData = res.data;
+      });
+    },
     toggleVisibility() {
       //控制组件界面显隐
       this.show = !this.show;
@@ -175,6 +196,16 @@ export default {
       // }
     },
   },
+  watch: {
+    xzqTreeValue(val) {
+      viewer.entities.removeAll();
+      this.curXzqCode = val[val.length - 1];
+      store.setXzqdm(this.curXzqCode);
+      if (this.curXzqCode) {
+        this.getXzqGeom();
+      }
+    },
+  },
 };
 </script>
 

src/components/Query/clickQuery/clickQuery.vue

@@ -101,6 +101,8 @@ export default {
   created() {
     this.viewer.entities.removeAll();
     this.handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+    this.dataSourceLayer = new Cesium.CustomDataSource("query");
+    this.viewer.dataSources.add(this.dataSourceLayer);
   },
   watch: {
     activeLayerId(val) {
@@ -280,7 +282,6 @@ export default {
                 queryByIDParameters
               );
             }
-            console.log(e);
             if (e && e.totalCount > 0) {
               that.layerList.push(store.state.vectorlayerlist[i]);
               let queryData = [];

src/store/store.js

@@ -1,6 +1,7 @@
 var store2 = {
     debug: true,
     state: {
+        xzqdm: "", //当前选择的行政区代码
         isInitViewer: false,
         // 控制界面显隐，0默认隐藏，1显示
         ToolBarShow: false,
@@ -32,6 +33,10 @@ var store2 = {
     setisInitViewer(newValue) {
         this.state.isInitViewer = newValue;
     },
+
+    setXzqdm(newValue) {
+        this.state.xzqdm = newValue;
+    },
     setVectorLayerList(newValue) {
         this.state.vectorlayerlist = newValue;
     },

src/views/map3d.vue

@@ -242,7 +242,7 @@ export default {
 }
 .timeline {
   position: absolute;
-  right: 87px;
+  right: 53px;
   top: 17px;
   height: 38px;
   line-height: 60px;