地图

src/views/visualization/components/Map.vue

@@ -67,18 +67,132 @@
         mapInit()
       }
 
+      async function mapNyTypeInit() {
+        const _mapNyNxData = (await (await import('./nylx.json')).default) as any
+        console.log(_mapNyNxData)
+
+        registerMap('lcxz', _mapNyNxData)
+        options = {
+          visualMap: {
+            right: 10,
+            bottom: 300,
+            type: 'piecewise',
+            pieces: [
+              {
+                value: 0,
+                label: '优质柑桔种植',
+                color: '#2c9a42',
+              },
+              {
+                value: 1,
+                label: '稻鱼综合种养',
+                color: '#d08a00',
+              },
+              {
+                value: 2,
+                label: '高粱产业',
+                color: '#c23c33',
+              },
+              {
+                value: 3,
+                label: '油茶产业',
+                color: '#c23c33',
+              },
+            ],
+            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: '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,
+                },
+              },
+            },
+          ],
+        }
+        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],
@@ -318,6 +432,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 +447,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 +489,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" />
+              <!-- <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,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)