feat: 地图信息窗体

mm/mm.config.js

@@ -393,6 +393,9 @@ module.exports = async (util) => {
       'base|10': [
         {
           'id|+1': 1,
+          区域编码(){
+            return getAdcode(this.id)
+          },
           名称: `@county()@ctitle()基地`,
           温度: [`@integer(0, 20)`, `@integer(20, 40)`],
           天气: `@pick(多云, 少云, 晴, 雨, 雪, 雾, 暴雨)`,
@@ -444,3 +447,50 @@ function wrapApiData({ data, code = 200 }) {
     data,
   }
 }
+
+
+function getAdcode(index) {
+  const list = [
+    {
+      "name": "碧江区",
+      "adcode": 520602
+    },
+    {
+      "name": "万山区",
+      "adcode": 520603
+    },
+    {
+      "name": "江口县",
+      "adcode": 520621
+    },
+    {
+      "name": "玉屏侗族自治县",
+      "adcode": 520622
+    },
+    {
+      "name": "石阡县",
+      "adcode": 520623
+    },
+    {
+      "name": "思南县",
+      "adcode": 520624
+    },
+    {
+      "name": "印江土家族苗族自治县",
+      "adcode": 520625
+    },
+    {
+      "name": "德江县",
+      "adcode": 520626
+    },
+    {
+      "name": "沿河土家族自治县",
+      "adcode": 520627
+    },
+    {
+      "name": "松桃苗族自治县",
+      "adcode": 520628
+    }
+  ]
+  return list[index % list.length].adcode
+}

src/http/index.js

@@ -3,7 +3,7 @@ import util from '@/util/index.js'
 import dayjs from 'dayjs'
 
 const api = window.axios.create({
-  timeout: 10000, // 请求超时
+  timeout: 1000 * 30, // 请求超时
   baseURL: config.baseApi,
 })
 

src/util/index.js

@@ -57,7 +57,20 @@ function autoVueFn(autoList = [], opt) {
   ]
 }
 
+/**
+ * 根据区域 code 获取区域 id
+ * @param {} vm 
+ * @param {*} code 
+ * @returns 
+ */
+async function code2base(vm, code) {
+  const list = await vm.$http.get(`/api/base`) || []
+  const item = list.find(item => String(item.区域编码) === String(code)) || list[0] || {}
+  return item
+}
+
 export default {
+  code2base,
   autoVueFn,
   isType,
 }

src/views/page1/index.vue

@@ -186,12 +186,13 @@ export default {
   },
   mounted() {},
   methods: {
-    toView(data) {
-      console.log(data)
+    async toView(code) {
+      const {id, 区域编码} = await this.$util.code2base(this, code) || {}
       this.$router.push({
         path: `/page3`,
         query: {
-          id: data,
+          id,
+          code: 区域编码,
         },
       })
     },

src/views/page2/cmap.vue

@@ -1,6 +1,12 @@
 <template>
   <div>
-    <div ref="testx">一些测试</div>
+    <div class="input-card content-window-card" ref="infoBox" v-if="infoBoxData" v-show="infoBoxData">
+      <div style="padding:7px 0px 0px 0px;">
+        <h4>{{infoBoxData.properties.name}}</h4>
+        <p class="input-item">完成率: {{ infoBoxData.baseItem.完成率 }}%</p>
+        <p class="input-item">移栽面积 {{ infoBoxData.baseItem.面积 }}平方米 移栽数量 {{ infoBoxData.baseItem.已种植 }}</p>
+      </div>
+    </div>
     <div id="container" class="g-bg1"></div>
   </div>
 </template>
@@ -14,10 +20,12 @@ window.map = {}
 export default {
   components: {},
   data() {
-    return {}
+    return {
+      infoBoxData: undefined,
+    }
   },
   computed: {},
-  async created() {},
+  async created() { },
   mounted() {
     this.initAMap()
   },
@@ -26,6 +34,18 @@ export default {
   },
   methods: {
     async initAMap() {
+      const vm = this
+      let infoWindow
+      //在指定位置打开信息窗体
+      function openInfo() {
+        const item = vm.infoBoxData
+        const { center } = item.properties
+        infoWindow = new AMap.InfoWindow({
+          content: vm.$refs.infoBox,
+        });
+
+        infoWindow.open(map, center || map.getCenter());
+      }
       window._AMapSecurityConfig = {
         securityJsCode: `a2017cdc059be6c03b430a3185098003`,
       }
@@ -34,17 +54,8 @@ export default {
         version: `2.0`, // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
         plugins: [`AMap.Scale`], // 需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
       })
-        .then((AMap) => {
+        .then(async (AMap) => {
           function addPolygon(data) {
-            const { name, center } = data.properties
-            let content = [
-              `<div class='info_box_contant'> ` + name + ` </div>`,
-            ]
-            const infoWindow = new AMap.InfoWindow({
-              isCustom: true, // 使用自定义窗体
-              content: content.join(`<br>`),
-              offset: new AMap.Pixel(0, -25),
-            })
             const path = data.geometry.coordinates
             let polygon = new AMap.Polygon({
               path: path,
@@ -61,18 +72,8 @@ export default {
             polygon.on(`mouseover`, (e) => {
               // 如果缩放过大还变色, 万一人家是想看放大后的详细地点, 变色后反而不方便
               if (window.map.getZoom() <= 11) {
-                infoWindow.open(window.map, center)
-                $(`.info_box_contant`).on({
-                  mouseover() {
-                    console.log(`mouseover`)
-                    infoWindow.open(window.map, center)
-                    $(`.info_box_contant`).show()
-                  },
-                  mouseleave() {
-                    console.log(`mouseleave`)
-                    $(`.info_box_contant`).hide()
-                  },
-                })
+                vm.infoBoxData = data
+                openInfo()
                 polygon.setOptions({
                   fillOpacity: 0.7,
                   fillColor: `#7bccc4`,
@@ -87,7 +88,6 @@ export default {
                 fillOpacity: 0,
                 fillColor: `#ccebc5`,
               })
-              // infoWindow.close()
             })
             window.map.add(polygon)
           }
@@ -132,10 +132,20 @@ export default {
             // zooms: [16, 20],
           })
           window.map.setFeatures([`point`]) // 单一种类要素显示
-          let list = mapOfTongren.features.map((item) => item)
+          const baseList = await this.$http.get(`/api/base`)
+          let list = mapOfTongren.features.map((item) => {
+            const baseItem = baseList.find((baseItem) => String(baseItem.区域编码) === String(item.properties.adcode)) || {}
+            item.baseItem = baseItem
+            return item 
+          })
           list.forEach((item) => {
             addPolygon(item)
           })
+          const item = list[0]
+          this.infoBoxData = item
+          this.$nextTick(() => {
+            openInfo()
+          })
         })
         .catch((e) => {
           console.log(e)
@@ -151,6 +161,29 @@ export default {
 }
 </script>
 
+<style label="less">
+.custom-input-card {
+  width: 18rem;
+}
+
+.custom-input-card .btn:last-child {
+  margin-left: 1rem;
+}
+
+.content-window-card {
+  color: #000;
+  position: relative;
+  width: 23rem;
+  padding: 0.75rem 0 0 1.25rem;
+  box-shadow: none;
+  bottom: 0;
+  left: 0;
+}
+
+.content-window-card p {
+  height: 2rem;
+}
+</style>
 <style lang="less" scoped>
 #container {
   position: absolute;