添加地图

src/views/visualization/components/Map.vue

@@ -33,6 +33,8 @@
   import { useVContext } from '../useVContext'
   import { getAgriculturalBasic } from '/@/api/sys/other'
   import { useVisualizationStore } from '/@/store/modules/visualization'
+  import SheepImg from '/@/assets/images/sheep.png'
+  import PigImg from '/@/assets/images/pig.png'
 
   const domImg = document.createElement('img')
   domImg.style.height = '8px'
@@ -44,6 +46,7 @@
   domImgHover.src =
     'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAIAAAAmKNuZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkFDQ0Q2RjYyQTdDRDExRUI4ODUxRDIxRjkzMEExNzg2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkFDQ0Q2RjYzQTdDRDExRUI4ODUxRDIxRjkzMEExNzg2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QUNDRDZGNjBBN0NEMTFFQjg4NTFEMjFGOTMwQTE3ODYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QUNDRDZGNjFBN0NEMTFFQjg4NTFEMjFGOTMwQTE3ODYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6FboimAAAASklEQVR42mIUnL9XtHsDAzXA69IARjWtXJYX7+FCfyQEKeEyMVAVDG7jWCB+RhaihAsybjQqRqNiNCpGo2I0KoZZVDBSt9oGCDAAhYNrvRu3DWEAAAAASUVORK5CYII='
   const img2 = 'image://https://www.makeapie.cn/asset/get/s/data-1619318279159-o6ZbTGoO0.png'
+
   export default defineComponent({
     setup() {
       const visualizationStore = useVisualizationStore()
@@ -69,122 +72,155 @@
 
       async function mapNyTypeInit() {
         const _mapNyNxData = (await (await import('./nylx.json')).default) as any
-        console.log(_mapNyNxData)
 
+        const _data = [
+          {
+            value: 1,
+            name: '稻渔综合种养',
+          },
+          {
+            value: 2,
+            name: '优品柑桔种植',
+          },
+          {
+            value: 3,
+            name: '高粱产业',
+          },
+          {
+            value: 4,
+            name: '油茶产业',
+          },
+        ]
         registerMap('lcxz', _mapNyNxData)
         options = {
-          visualMap: {
+          legend: {
-            right: 10,
+            data: [
-            bottom: 300,
-            type: 'piecewise',
-            pieces: [
               {
-                value: 0,
+                icon: `image://${PigImg}`,
-                label: '优质柑桔种植',
+                name: '生猪产业分布点',
-                color: '#2c9a42',
-              },
-              {
-                value: 1,
-                label: '稻鱼综合种养',
-                color: '#d08a00',
-              },
-              {
-                value: 2,
-                label: '高粱产业',
-                color: '#c23c33',
-              },
-              {
-                value: 3,
-                label: '油茶产业',
-                color: '#c23c33',
               },
             ],
-            color: '#fff',
-            textStyle: {
-              color: '#fff',
-            },
-            visibility: 'off',
           },
+          // visualMap: {
+          //   right: 60,
+          //   bottom: 100,
+          //   pieces: [
+          //     {
+          //       value: 1,
+          //       label: '稻渔综合种养',
+          //       color: 'rgb(242,230,230 , 0.7)',
+          //     },
+          //     {
+          //       value: 2,
+          //       label: '优品柑桔种植',
+          //       color: 'rgb(187,216,106 , 0.7)',
+          //     },
+          //     {
+          //       value: 3,
+          //       label: '高粱产业',
+          //       color: 'rgb(238,98,73 , 0.7)',
+          //     },
+          //     {
+          //       value: 4,
+          //       label: '油茶产业',
+          //       color: 'rgb(172,220,243 , 0.7)',
+          //     },
+          //   ],
+          //   color: '#fff',
+          //   textStyle: {
+          //     color: '#fff',
+          //   },
+          //   visibility: 'off',
+          // },
           backgroundColor: 'transparent',
           stateAnimation: {
             duration: 100,
           },
-          // geo: {
+          geo: {
-          //   map: 'lcxz',
+            map: 'lcxz',
-          //   aspectScale: 0.75,
+            aspectScale: 0.75,
-          //   layoutCenter: ['50%', '50.5%'],
+            layoutCenter: ['50%', '50.5%'],
-          //   layoutSize: '100%',
+            layoutSize: '100%',
-          //   silent: true,
+            silent: true,
-          //   roam: false,
+            roam: false,
-          //   z: 0,
+            z: 0,
-          //   label: {
+            label: {
-          //     color: '#fff',
+              color: '#fff',
-          //     show: false,
+              show: false,
-          //   },
+            },
-          //   itemStyle: {
+            itemStyle: {
-          //     areaColor: 'rgba(0, 15, 40, 0.0)',
+              areaColor: 'rgba(0, 15, 40, 0.0)',
-          //     shadowColor: 'rgba(0, 0, 0, 1)',
+              shadowColor: 'rgba(0, 0, 0, 1)',
-          //     shadowBlur: 0,
+              shadowBlur: 0,
-          //     shadowOffsetX: 0,
+              shadowOffsetX: 0,
-          //     shadowOffsetY: 5,
+              shadowOffsetY: 5,
-          //     borderColor: '#fff',
+              borderColor: '#fff',
-          //     borderWidth: 0.1,
+              borderWidth: 0.1,
-          //   },
+            },
-          //   emphasis: {
+            emphasis: {
-          //     itemStyle: {
+              itemStyle: {
-          //       areaColor: '#2AB8FF',
+                areaColor: '#2AB8FF',
-          //       borderWidth: 1,
+                borderWidth: 1,
-          //       color: 'green',
+                color: 'green',
-          //     },
-          //     label: {
-          //       show: false,
-          //     },
-          //   },
-          // },
-          series: [
-            {
-              type: 'map',
-              zoom: 1.1,
-              roam: false,
-              map: 'lcxz',
-              select: {
-                disabled: true,
               },
               label: {
                 show: false,
-                color: '#fff',
-                normal: {
-                  show: false,
-                  textStyle: {
-                    color: '#fff',
-                  },
-                },
-              },
-              itemStyle: {
-                areaColor: {
-                  image: domImg,
-                  repeat: 'repeat',
-                },
-                borderColor: 'rgba(147, 235, 248, 1)',
-                borderWidth: 1,
-                areaColor: 'rgb(30,54,80 , 0.8)',
-              },
-              emphasis: {
-                label: {
-                  show: true,
-                  color: '#fff',
-                },
-                itemStyle: {
-                  areaColor: 'rgb(30,54,80 , 0.8)',
-                  borderColor: 'rgba(147, 235, 248, 1)',
-                  borderWidth: 1,
-                  shadowColor: 'rgba(0, 255, 255, 1)',
-                  shadowBlur: 10,
-                  shadowOffsetX: 0,
-                  shadowOffsetY: 1,
-                },
               },
             },
+          },
+          series: [
+            {
+              type: 'scatter',
+              coordinateSystem: 'geo',
+              tooltip: {
+                trigger: 'item',
+                show: true,
+              },
+              symbol: `image://${PigImg}`,
+              symbolSize: [30, 30],
+              symbolOffset: [0, 0],
+              z: 9999,
+              data: [
+                {
+                  img: `image://${SheepImg}`,
+                  map: '',
+                  name: '羊',
+                  value: ['105.2333', '29.2641'],
+                },
+                {
+                  img: `image://${PigImg}`,
+                  map: '',
+                  name: '猪',
+                  value: ['105.2333', '29.2643'],
+                },
+              ],
+              // data: mapData,
+            },
+            // {
+            //   type: 'map',
+            //   zoom: 1.1,
+            //   name: 'map',
+            //   roam: false,
+            //   map: 'lcxz',
+            //   select: {
+            //     disabled: true,
+            //   },
+            //   label: {
+            //     show: false,
+            //     color: '#fff',
+            //     normal: {
+            //       show: false,
+            //     },
+            //   },
+            //   itemStyle: {
+            //     emphasis: {
+            //       label: {
+            //         show: false,
+            //       },
+            //     },
+            //   },
+            //   data: _data[0],
+            // },
           ],
         }
         setOptions(options)
@@ -200,15 +236,14 @@
             img: 'image://https://www.makeapie.cn/asset/get/s/data-1619059442567-s5l7-f8Eu9.png',
           })
         })
+        console.log(mapData)
+
         registerMap('lcxz', tempMapJSON.value)
         options = {
           backgroundColor: 'transparent',
           stateAnimation: {
             duration: 100,
           },
-          // tooltip: {
-          //   trigger: 'item',
-          // },
           geo: {
             map: 'lcxz',
             aspectScale: 0.75,
@@ -262,18 +297,9 @@
                 },
               },
               itemStyle: {
-                // areaColor: {
-                //   image: domImg,
-                //   repeat: 'repeat',
-                // },
                 borderColor: 'rgba(147, 235, 248, 1)',
                 borderWidth: 1,
                 areaColor: 'rgb(30,54,80 , 0.8)',
-
-                // shadowColor: 'rgba(128, 217, 248, 1)',
-                // shadowOffsetX: -2,
-                // shadowOffsetY: 2,
-                // shadowBlur: 10,
               },
               emphasis: {
                 label: {
@@ -281,10 +307,6 @@
                   color: '#fff',
                 },
                 itemStyle: {
-                  // areaColor: {
-                  //   image: domImg,
-                  //   repeat: 'repeat',
-                  // },
                   areaColor: 'rgb(30,54,80 , 0.8)',
                   borderColor: 'rgba(147, 235, 248, 1)',
                   borderWidth: 1,