地图自定义弹窗

babel.config.js

@@ -1,5 +1,15 @@
+// const webpack = require("webpack");
 module.exports = {
-  presets: [
-    '@vue/cli-plugin-babel/preset'
-  ]
-}
+  presets: ["@vue/cli-plugin-babel/preset"],
+  // resolve: {
+  //   alias: {
+  //     jquery: "jquery",
+  //   },
+  // },
+  // plugins: [
+  //   new webpack.ProvidePlugin({
+  //     $: "jquery",
+  //     jQuery: "jquery",
+  //   }),
+  // ],
+};

package.json

@@ -12,6 +12,7 @@
     "deep-clone": "^3.0.3",
     "echarts": "^5.4.0",
     "element-ui": "^2.15.10",
+    "jquery": "^3.6.1",
     "vue": "^2.6.14",
     "vue-router": "^3.5.1",
     "vuex": "^3.6.2"

public/static/plugins/js/leaflet1.3.1/leaflet.css

@@ -464,13 +464,15 @@
 	margin-bottom: 20px;
 	}
 .leaflet-popup-content-wrapper {
-	padding: 1px;
+	/* padding: 1px; */
 	text-align: left;
 	border-radius: 12px;
 	}
 .leaflet-popup-content {
-	margin: 13px 19px;
 	line-height: 1.4;
+	min-width: 300px;
+	height: 320px;
+	min-height: 320px;
 	}
 .leaflet-popup-content p {
 	margin: 18px 0;

src/assets/global.css

@@ -204,3 +204,13 @@ th {
   background: linear-gradient(0deg, #4279d2 0%, #0942c0 100%);
   border: 1px solid #74ffff;
 }
+
+/* leaflet 弹窗样式修改 */
+.leaflet-popup-content-wrapper,
+.leaflet-popup-tip {
+  background: transparent;
+}
+
+.leaflet-popup-tip {
+  background: #002f56;;
+}

src/components/map/MapHolder.vue

@@ -1,18 +1,35 @@
 <template>
-  <div id="map2DViewer"></div>
+  <div id="map2DViewer">
+    <!-- <LabelCasePopup
+      v-show="true"
+      style="position: fixed; left: 40%; top: 30%; z-index: 99999"
+    /> -->
+    <CaseAuditPopup
+      v-show="auditPopupShow"
+      :status="auditPopupStatus"
+      ref="auditPopup"
+    />
+  </div>
 </template>
 <script>
 import publicFun from "@/utils/publicFunction.js";
 import { get } from "@/utils/request";
+import CaseAuditPopup from "@/components/popup/CaseAuditPopup.vue";
+import LabelCasePopup from "@/components/popup/LabelCasePopup.vue";
 export default {
   name: "MapHolder",
+  components: { CaseAuditPopup, LabelCasePopup },
   data() {
     return {
       JLControlShowStatus: false,
       town: "祝桥镇,南汇新城镇,川沙新镇,老港镇,惠南镇,航头镇,泥城镇,书院镇,新场镇,大团镇,唐镇,曹路镇,宣桥镇,张江镇,合庆镇,周浦镇,康桥镇,三林镇,高桥镇,高东镇,金桥镇,北蔡镇,万祥镇,高行镇",
+      auditPopupShow: false,
+      auditPopupStatus: "normal",
     };
   },
   mounted() {
+    // let a = new Vue()
+    // console.log(a,"print Vue");
     // 监听全局事件总线中的卷帘对比事件（JLControl）
     this.$bus.$on("JLControl", () => {
       this.JLControl();
@@ -26,13 +43,16 @@ export default {
 
     //地图初始化
     this.mapInit();
+    // 可视化区域图
     this.getJSonData();
 
     // 地图常用渲染方法
     // console.log(this.$store.state.mapMethodsCollection,"methods");
-    this.$store.state.mapMethodsCollection.set("RENDER",{
-      drawPolygon:this.drawPolygon
-    })
+    this.$store.state.mapMethodsCollection.set("RENDER", {
+      addPolygonLayer: this.addPolygonLayer,
+      setView: this.setView,
+      deletePolygonLayer: this.deletePolygonLayer,
+    });
   },
   beforeDestroyed() {
     // 当容器销毁时，需要停止监听该事件
@@ -43,6 +63,48 @@ export default {
     this.$bus.$off("labelCaseEvent");
   },
   methods: {
+    // 弹窗修改
+    createDynamicDiv(str) {
+      // 根据ref获取组件的dom元素
+      let html = this.$refs.auditPopup.$el.innerHTML;
+      if (html) {
+        let div = document.createElement("div");
+        div.id = str + "_id";
+        // 动态创建div后赋值模板样式
+        div.innerHTML = html;
+        $(() => {
+          // 修改弹窗宽高
+          $(`#${str}_id`).css("width", "300px");
+          $(`#${str}_id`).css("height", "320px");
+          if ($(`#${str}_id a`)) {
+            $(`#${str}_id a`).click((e) => {
+              console.log(e, "a label");
+            });
+          }
+          // input添加点击事件
+          if ($(`#${str}_id input`)[1]) {
+            $(`#${str}_id input`).click((e) => {
+              switch (e.target.defaultValue) {
+                case "修改":
+                  this.modifyBtnEvent();
+                  break;
+                case "确认":
+                  this.confirmBtnEvent();
+                  break;
+              }
+            });
+          }
+        });
+        return div;
+      }
+    },
+    modifyBtnEvent() {
+      console.log("用户点击了地图中的修改按钮！");
+    },
+    confirmBtnEvent() {
+      console.log("用户点击地图中的确认按钮");
+    },
+
     // 卷帘对比
     JLControl() {
       console.log("用户点击了卷帘对比菜单!");
@@ -62,7 +124,7 @@ export default {
         attributionControl: false,
         zoomControl: false,
         minZoom: 10,
-        maxZoom: 15,
+        maxZoom: 17,
       }).setView(systemConfig.mapViewer.center, systemConfig.mapViewer.zoom);
 
       //添加默认图层
@@ -97,7 +159,7 @@ export default {
       }
     },
     setView: function (coord, zoom) {
-      console.log(coord, "位置");
+      // console.log(coord, "位置");
       let center = L.latLng(coord[0], coord[1]);
       map2DViewer.map.setView(center, zoom);
     },
@@ -161,8 +223,52 @@ export default {
         return "#00ffd5";
       }
     },
-    drawPolygon(cid, color, show) {
-      console.log("drawPolygon");
+    // 综合分析 - 图层绘制面
+    addPolygonLayer(data, cid, color) {
+      // cid -- 'yongjiu'
+      console.log(data, cid, color);
+      data.map((feature) => {
+        let polygonData = JSON.parse(JSON.stringify(feature));
+        let coordinates = polygonData.geometry.coordinates[0];
+        let infos = polygonData.properties;
+        let polygon = L.polygon(coordinates, {
+          color: color,
+          weight: 3,
+          fillColor: color,
+          opacity: 1,
+          fillOpacity: 0.4,
+        }).addTo(map2DViewer.map);
+        map2DViewer.polygons[`${cid}_layer`].push(polygon);
+        polygon.infos = infos;
+        // this.createDynamicDiv()
+        // polygon.bindPopup(
+        //   "<div style='color:red'>Hello world! I am a popup.</div>",
+        //   infos
+        // );
+        polygon.on("click", (e) => {
+          // console.log(e, "polygon");
+          this.auditPopupShow = true;
+
+          let popup = L.popup({ maxWidth: 700, maxHeight: 600 })
+            .setLatLng(e.latlng)
+            .setContent(this.createDynamicDiv("cid"));
+          // .openOn(map2DViewer.map);
+          this.auditPopupShow = false;
+          popup.openOn(map2DViewer.map);
+          // let b = $(`#cid_id`);
+          // console.log(b, "b");
+          // let a = $(`#cid_id`).children("input");
+          // console.log(a, "input");
+        });
+      });
+      console.log(map2DViewer.polygons[`${cid}_layer`]);
+    },
+
+    //综合分析 - 标记疑点 - 删除面
+    deletePolygonLayer(layer) {
+      map2DViewer.polygons[layer].forEach((polygon) => {
+        map2DViewer.map.removeLayer(polygon);
+      });
     },
   },
 };

src/components/popup/CaseAuditPopup.vue

@@ -1,7 +1,66 @@
 <template>
-  <div class="case-audit"></div>
+  <MenuCard class="case-audit" :menuData="menuData">
+    <div class="case-audit-inner">
+      <div class="top-law">
+        <a style="cursor: pointer">》点此查看相关法律法规&nbsp;&nbsp;</a>
+      </div>
+      <!-- 未激活疑点审计 -->
+      <div v-if="status === 'normal'" class="center-table" style="height: 91%">
+        <div
+          class="center-table-item-normal"
+          v-for="item in tableArr"
+          :key="item.id"
+        >
+          <div class="leftcell">{{ item.name }}</div>
+          <div class="rightcell">{{ item.content }}</div>
+        </div>
+      </div>
+      <!-- 激活疑点审计 -->
+      <div v-if="status === 'special'" class="center-table">
+        <div
+          class="center-table-item-special"
+          v-for="item in tableArr"
+          :key="item.id"
+        >
+          <div class="leftcell">{{ item.name }}</div>
+          <div class="rightcell">{{ item.content }}</div>
+        </div>
+        <div class="center-table-item-special">
+          <div class="leftcell">疑点性质</div>
+          <div class="rightcell">
+            <select class="select-box">
+              <option value="isTrue">疑点</option>
+              <option value="isFalse">非疑点</option>
+            </select>
+            <!-- <NewSelect
+              style="width: 120px; height: 30px"
+              v-model="selectVal"
+              :options="selectOptions"
+              :value="selectVal"
+            /> -->
+          </div>
+        </div>
+      </div>
+      <div v-if="status === 'special'" class="footer-btn">
+        <input
+          class="audit-popup-btn"
+          type="button"
+          value="修改"
+          @click="modifyEvent"
+        />
+        <input
+          class="audit-popup-btn"
+          type="button"
+          value="确认"
+          @click="confirmEvent"
+        />
+      </div>
+    </div>
+  </MenuCard>
 </template>
 <script>
+import MenuCard from "@/components/layout/MenuCard.vue";
+import NewSelect from "@/components/common/NewSelect.vue";
 /**
  * 疑点审计弹窗
  *
@@ -9,11 +68,143 @@
  */
 export default {
   name: "CaseAuditPopup",
-  components: {},
-  methods: {},
+  components: { MenuCard, NewSelect },
+  data() {
+    return {
+      menuData: {
+        type: "chart",
+        title: "属性",
+        boxWidth: "300",
+        boxHeight: "320",
+      },
+      // status: "special",
+      tableArr: [
+        { id: 1, name: "版本", content: "2017年部" },
+        { id: 2, name: "面积", content: "888.4567" },
+        { id: 3, name: "性质", content: "林地 硬化地表" },
+        { id: 4, name: "异常", content: "疑似基本农田被侵占" },
+      ],
+      selectVal: "疑点",
+      selectOptions: [
+        { value: "疑点", label: "疑点" },
+        { value: "非疑点", label: "非疑点" },
+      ],
+    };
+  },
+  props:['status'],
+  methods: {
+    modifyEvent() {
+      console.log("modify");
+    },
+    confirmEvent() {
+      console.log("confirm");
+    },
+  },
 };
 </script>
 <style lang="less" scoped>
 .case-audit {
+  cursor: auto;
+  &-inner {
+    width: 100%;
+    height: 100%;
+    .top-law {
+      width: 100%;
+      height: 10%;
+      font-size: 16px;
+      font-family: PingFang SC;
+      font-weight: 300;
+      font-style: italic;
+      text-decoration: underline;
+      display: flex;
+      justify-content: flex-end;
+      color: #4dc3ff;
+    }
+    .center-table {
+      width: 100%;
+      height: 70%;
+      // border: 1px solid #818ca4;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      color: rgba(230, 230, 230, 1);
+      font-size: 15px;
+      &-item-normal,
+      &-item-special {
+        width: 100%;
+        border-top: 1px solid #818ca4;
+        border-left: 1px solid #818ca4;
+        &:last-child {
+          border-bottom: 1px solid #818ca4;
+        }
+        display: flex;
+        .leftcell {
+          width: 35%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-right: 1px solid #818ca4;
+        }
+        .rightcell {
+          width: 65%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-right: 1px solid #818ca4;
+          .select-box {
+            width: 120px;
+            height: 30px;
+            border: 1px solid #818ca4;
+            border-radius: 4px;
+            background: transparent;
+            color: rgba(230, 230, 230, 1);
+            cursor: pointer;
+            &:focus {
+              border: none;
+              border-radius: 1px;
+            }
+            option {
+              background-color: rgba(0, 39, 77, 0.8);
+              box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
+              border: 1px solid rgba(47, 184, 255, 0.7);
+            }
+          }
+        }
+      }
+      &-item-normal {
+        height: 23%;
+      }
+      &-item-special {
+        height: 17%;
+      }
+    }
+    .footer-btn {
+      margin: 0 auto;
+      width: 50%;
+      height: 20%;
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      font-size: 15px;
+      input {
+        width: 60px;
+        height: 30px;
+        border-radius: 3px;
+        border: none;
+        color: #fff;
+        cursor: pointer;
+      }
+      input:nth-child(1) {
+        background: rgba(129, 140, 164, 1);
+      }
+      input:nth-child(2) {
+        background-image: linear-gradient(
+          to top,
+          rgba(79, 172, 254, 1),
+          rgba(0, 242, 254, 1)
+        );
+      }
+    }
+  }
 }
 </style>

src/components/popup/LabelCasePopup.vue

@@ -1,7 +1,35 @@
 <template>
-  <div class="label-case"></div>
+  <MenuCard class="label-case" :menuData="menuData">
+    <div class="label-case-inner">
+      <div class="top">
+        <div class="top-title">标记点分类 :</div>
+        <NewSelect
+          v-model="selectVal"
+          :options="selectOptions"
+          :value="selectVal"
+        />
+      </div>
+      <div class="center">
+        <div class="center-title">描述:</div>
+        <div>
+          <el-input
+            type="textarea"
+            :rows="5"
+            placeholder="请输入详细信息"
+            v-model="textarea"
+          ></el-input>
+        </div>
+      </div>
+      <div class="footer">
+        <input type="button" value="删除" @click="modifyEvent" />
+        <input type="button" value="保存" @click="confirmEvent" />
+      </div>
+    </div>
+  </MenuCard>
 </template>
 <script>
+import MenuCard from "@/components/layout/MenuCard.vue";
+import NewSelect from "@/components/common/NewSelect.vue";
 /**
  * 标记疑点 - 辅助录入属性弹窗
  * @author: Gao Lu
@@ -9,11 +37,102 @@
  */
 export default {
   name: "LabelCasePopup",
-  components: {},
-  methods: {},
+  components: { MenuCard, NewSelect },
+  data() {
+    return {
+      menuData: {
+        type: "chart",
+        title: "添加标记",
+        boxWidth: "436",
+        boxHeight: "341",
+      },
+      selectVal: "土地资源",
+      selectOptions: [
+        {
+          value: "土地资源",
+          label: "土地资源",
+        },
+        {
+          value: "林业资源",
+          label: "林业资源",
+        },
+        {
+          value: "水资源",
+          label: "水资源",
+        },
+      ],
+      textarea: "",
+    };
+  },
+  methods: {
+    modifyEvent() {
+      console.log("modify");
+    },
+    confirmEvent() {
+      console.log("confirm");
+    },
+  },
 };
 </script>
 <style lang="less" scoped>
 .label-case {
+  cursor: auto;
+  &-inner {
+    width: 90%;
+    height: 100%;
+    font-size: 16px;
+    font-family: PingFang SC;
+    font-weight: 300;
+    color: #e6e6e6;
+    margin: 0 auto;
+    // line-height: 36px;
+    .top {
+      height: 15%;
+      display: flex;
+      align-items: center;
+      &-title {
+        width: 30%;
+      }
+    }
+    .center {
+      height: 65%;
+      &-title {
+        line-height: 40px;
+      }
+      /deep/ .el-textarea__inner {
+        color: #f2f6fc;
+        font-family: PingFang SC;
+        font-weight: 300;
+        color: #e6e6e6;
+        font-size: 16px;
+      }
+    }
+    .footer {
+      margin: 0 auto;
+      width: 50%;
+      height: 20%;
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      input {
+        width: 60px;
+        height: 30px;
+        border-radius: 3px;
+        border: none;
+        cursor: pointer;
+        color: #e6e6e6;
+      }
+      input:nth-child(1) {
+        background: rgba(129, 140, 164, 1);
+      }
+      input:nth-child(2) {
+        background-image: linear-gradient(
+          to top,
+          rgba(79, 172, 254, 1),
+          rgba(0, 242, 254, 1)
+        );
+      }
+    }
+  }
 }
 </style>

src/config/common.js

@@ -260,28 +260,28 @@ export const treeModel = [
     type: "所有图层",
     children: [
       {
-        id: publicFun.buildGuid(),
+        id: publicFun.buildGuid("defaultLayer"),
         type: "永久基本农田",
         cid: "yongjiu",
         color: "#f99531",
         children: [],
       },
       {
-        id: publicFun.buildGuid(),
+        id: publicFun.buildGuid("defaultLayer"),
         type: "一般耕地",
         cid: "yiban",
         color: "#f9fb4b",
         children: [],
       },
       {
-        id: publicFun.buildGuid(),
+        id: publicFun.buildGuid("defaultLayer"),
         type: "建设用地减量化",
         cid: "jianshe",
         color: "#4ac013",
         children: [],
       },
       {
-        id: publicFun.buildGuid(),
+        id: publicFun.buildGuid("defaultLayer"),
         type: "带征地",
         cid: "daizheng",
         color: "#41ebfa",
@@ -476,22 +476,23 @@ export const waterLabelData = {
  */
 export const defaultLayers = {
   永久基本农田: {
-    id: publicFun.buildGuid(),
+    id: publicFun.buildGuid("defaultLayer"),
     cid: "yongjiu",
     color: "#f99531",
+    url: "",
   },
   一般耕地: {
-    id: publicFun.buildGuid(),
+    id: publicFun.buildGuid("defaultLayer"),
     cid: "yiban",
     color: "#f9fb4b",
   },
   建设用地减量化: {
-    id: publicFun.buildGuid(),
+    id: publicFun.buildGuid("defaultLayer"),
     cid: "jianshe",
     color: "#4ac013",
   },
   带征地: {
-    id: publicFun.buildGuid(),
+    id: publicFun.buildGuid("defaultLayer"),
     cid: "daizheng",
     color: "#41ebfa",
   },

src/main.js

@@ -1,20 +1,28 @@
-import Vue from 'vue'
-import App from './App.vue'
-import router from './router'
-import store from './store'
-import ElementUI from 'element-ui'
-import 'element-ui/lib/theme-chalk/index.css'
+import Vue from "vue";
+import App from "./App.vue";
+import router from "./router";
+import store from "./store";
+import ElementUI from "element-ui";
+import "element-ui/lib/theme-chalk/index.css";
 // 添加字体（优设标题黑）
-import './assets/font/font.css';
-import "./assets/global.css"
+import "./assets/font/font.css";
+import "./assets/global.css";
+
+import $ from "jquery";
 
 Vue.config.productionTip = false;
 
-Vue.use(ElementUI)
+Vue.use(ElementUI);
 Vue.prototype.$store = store;
 // 根据菜单index，和已选中的菜单返回是否相同
 Vue.prototype.$ifMenu = (menuIndex, subMenuIndex) => {
-  if (store.state.navSelect !== undefined && store.state.navSelect.index == menuIndex && (subMenuIndex !== "" ? store.state.navSelect.subIndex === subMenuIndex : true)) {
+  if (
+    store.state.navSelect !== undefined &&
+    store.state.navSelect.index == menuIndex &&
+    (subMenuIndex !== ""
+      ? store.state.navSelect.subIndex === subMenuIndex
+      : true)
+  ) {
     return true;
   } else {
     return false;
@@ -23,13 +31,13 @@ Vue.prototype.$ifMenu = (menuIndex, subMenuIndex) => {
 // 根据左侧菜单选中暂存index，与传入的菜单index对比，返回状态（主要使用于MenuCard组件type为imageMenu的元素，《疑点分析》下的子菜单）
 Vue.prototype.$ifLeftMenu = (leftMenuIndex) => {
   return store.state.leftMenuIndex == leftMenuIndex;
-}
+};
 new Vue({
   router,
   store,
-  render: h => h(App),
+  render: (h) => h(App),
   // 全局事件总线
   beforeCreate() {
-    Vue.prototype.$bus = this
-  }
-}).$mount('#app')
+    Vue.prototype.$bus = this;
+  },
+}).$mount("#app");

src/views/ComprehensiveAnalysis.vue

@@ -159,6 +159,7 @@ import Legend from "@/components/map/Legend.vue";
 import publicFun from "@/utils/publicFunction.js";
 import { treeModel, defaultLayers } from "@/config/common";
 import AttributePopup from "@/components/popup/AttributePopup.vue";
+import { get } from "@/utils/request";
 export default {
   name: "ComprehensiveAnalysis",
   components: {
@@ -274,7 +275,15 @@ export default {
       };
     });
   },
-  mounted() {},
+  mounted() {
+    // this.$nextTick(() => {
+    //   let center = [31.074402645978726, 121.72935492296206]
+    //   let zoom = 16;
+    //   this.$store.state.mapMethodsCollection
+    //     .get("RENDER")
+    //     .setView(center, zoom);
+    // });
+  },
   methods: {
     // 回退事件
     backEvent() {
@@ -313,20 +322,48 @@ export default {
       }
     },
     handleCheckChange(data, checked) {
+      let guid = data.id;
       if (checked) {
         this.showRightBox = true;
         this.rightPanelTitle = data.label;
         this.originalData[data.label] = this.rightPanelDataMap.get(data.label);
+        // 激活当前展开面板
         this.activeNames = ["myLabel", data.label];
-        // 渲染当前模块下的面图层
-        console.log(data,"test");
-        // map2DViewer.layers[data.label] = defaultLayers[data.label]
-        this.$store.state.mapMethodsCollection
-          .get("RENDER")
-          .drawPolygon("", "", "");
+
+        // 选中所有图层
+        if (guid.indexOf("defaultLayer") > -1) {
+          // 渲染当前模块下的面图层
+          let cid = defaultLayers[data.label].cid;
+          let color = defaultLayers[data.label].color;
+          get(`./static/json/${cid}.json`).then((geoJson) => {
+            map2DViewer.polygons[`${cid}_layer`] = [];
+
+            // 地图定位
+            let firstPolygon = JSON.parse(JSON.stringify(geoJson[0]));
+            let coordinates = firstPolygon.geometry.coordinates[0][0][0];
+            this.$store.state.mapMethodsCollection
+              .get("RENDER")
+              .setView(coordinates, 16);
+
+            this.$store.state.mapMethodsCollection
+              .get("RENDER")
+              .addPolygonLayer(geoJson, cid, color);
+          });
+        }
       } else {
+        // 设置右侧折叠面板item数量
         delete this.originalData[data.label];
+        // 只激活我的标记
         this.activeNames = ["myLabel"];
+
+        // 目前仅针对所有图层栏的默认图层
+        if (guid.indexOf("defaultLayer") > -1) {
+          let layer = `${defaultLayers[data.label].cid}_layer`;
+          this.$store.state.mapMethodsCollection
+            .get("RENDER")
+            .deletePolygonLayer(layer);
+          delete map2DViewer.polygons[layer];
+        }
       }
       this.legendTitle = Object.keys(this.originalData);
       this.legendIcon = this.legendTitle.map((v) => {