添加地图

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()
@@ -67,18 +70,165 @@
         mapInit()
       }
 
+      async function mapNyTypeInit() {
+        const _mapNyNxData = (await (await import('./nylx.json')).default) as any
+
+        const _data = [
+          {
+            value: 1,
+            name: '稻渔综合种养',
+          },
+          {
+            value: 2,
+            name: '优品柑桔种植',
+          },
+          {
+            value: 3,
+            name: '高粱产业',
+          },
+          {
+            value: 4,
+            name: '油茶产业',
+          },
+        ]
+        registerMap('lcxz', _mapNyNxData)
+        options = {
+          legend: {
+            data: [
+              {
+                icon: `image://${PigImg}`,
+                name: '生猪产业分布点',
+              },
+            ],
+          },
+          // 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: {
+            map: 'lcxz',
+            aspectScale: 0.75,
+            layoutCenter: ['50%', '50.5%'],
+            layoutSize: '100%',
+            silent: true,
+            roam: false,
+            z: 0,
+            label: {
+              color: '#fff',
+              show: false,
+            },
+            itemStyle: {
+              areaColor: 'rgba(0, 15, 40, 0.0)',
+              shadowColor: 'rgba(0, 0, 0, 1)',
+              shadowBlur: 0,
+              shadowOffsetX: 0,
+              shadowOffsetY: 5,
+              borderColor: '#fff',
+              borderWidth: 0.1,
+            },
+            emphasis: {
+              itemStyle: {
+                areaColor: '#2AB8FF',
+                borderWidth: 1,
+                color: 'green',
+              },
+              label: {
+                show: false,
+              },
+            },
+          },
+          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)
+      }
+
       function mapInit() {
         const mapData: any = []
-
-        // baseData.value.map(({ name, address_lng, address_lat, areas, id }) => {
         baseData.value.map((e: any) => {
-          // mapData.push({
-          //   name: name,
-          //   value: [address_lng, address_lat],
-          //   datas: areas,
-          //   id: id,
-          //   img: 'image://https://www.makeapie.cn/asset/get/s/data-1619059442567-s5l7-f8Eu9.png',
-          // })
           mapData.push({
             ...e,
             value: [e.address_lng, e.address_lat],
@@ -86,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,
@@ -148,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: {
@@ -167,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,
@@ -318,6 +454,7 @@
       async function getData() {
         const _resData = await getAgriculturalBasic({ type: 2 })
         const _mapData = (await (await import('./lcxz1.json')).default) as any
+
         _mapData.features.reduce((p, c) => {
           const item = _resData.find((e) => e.name == c.properties.name)
           if (item) {
@@ -332,7 +469,8 @@
 
       let tempName: any = null
       onMounted(async () => {
-        await getData()
+        // await getData()
+        await mapNyTypeInit()
         getInstance()?.on('mousemove', (e) => {
           // const arr = options.series[3].data
           // if (e.seriesType == 'map' && arr.length) {
@@ -373,7 +511,6 @@
                 type: 'FeatureCollection',
                 features: temp,
               })
-              // mapInit()
             }
           }
         })

src/views/visualization/index.vue

@@ -33,8 +33,8 @@
           </div>
           <div class="flex">
             <div class="mr-10px">
-              <JK :width="`${addW + 440}px`" height="390px" />
-              <SBYXZT class="mt-10px" :width="`${addW + 440}px`" height="314px" />
+              <!-- <JK :width="`${addW + 440}px`" height="390px" />
+              <SBYXZT class="mt-10px" :width="`${addW + 440}px`" height="314px" /> -->
             </div>
             <div class="">
               <QXSZ :width="`${addW + 440}px`" height="204px" />
@@ -139,8 +139,6 @@
       const addW = computed(() => (isScroll.value ? 10 : 0))
 
       async function getWarning() {
-        console.log('=====================')
-
         const ids = localStorage.getItem('warning_id')?.split(',') ?? []
         const { data } = await getWarningLogs({ per_page: 10, page: 1, status: 0 })
         const fliterData = data.filter((e) => ids.findIndex((id) => e.id == id) < 0)