src/views/visualization/components/Map.vue

@@ -33,8 +33,6 @@
   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'
@@ -46,7 +44,6 @@
   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()
@@ -70,165 +67,18 @@
         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],
@@ -236,14 +86,15 @@
             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,
@@ -297,9 +148,18 @@
                 },
               },
               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: {
@@ -307,6 +167,10 @@
                   color: '#fff',
                 },
                 itemStyle: {
+                  // areaColor: {
+                  //   image: domImg,
+                  //   repeat: 'repeat',
+                  // },
                   areaColor: 'rgb(30,54,80 , 0.8)',
                   borderColor: 'rgba(147, 235, 248, 1)',
                   borderWidth: 1,
@@ -454,7 +318,6 @@
       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) {
@@ -469,8 +332,7 @@
 
       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) {
@@ -511,6 +373,7 @@
                 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" />
+              <JK :width="`${addW + 440}px`" height="390px" />
-              <SBYXZT class="mt-10px" :width="`${addW + 440}px`" height="314px" /> -->
+              <SBYXZT class="mt-10px" :width="`${addW + 440}px`" height="314px" />
             </div>
             <div class="">
               <QXSZ :width="`${addW + 440}px`" height="204px" />
@@ -139,6 +139,8 @@
       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)