修改地图

src/views/base/base-data/base.data.ts

@@ -81,6 +81,31 @@ export const accountFormSchema: FormSchema[] = [
       return !!values.id
     },
   },
+  // {
+  //   field: 'is_blank',
+  //   label: '是否外部链接',
+  //   required: false,
+  //   component: 'Switch',
+  //   componentProps: {
+  //     checkedChildren: 1,
+  //     unCheckedChildren: 0,
+  //   },
+  //   // render: ({ model, field }) => {
+  //   //   console.log();
+
+  //   //   return model[field] ? '是' : '否'
+  //   // },
+  // },
+  // {
+  //   field: 'blank_url',
+  //   label: '外部链接',
+  //   required: false,
+  //   component: 'Input',
+  //   ifShow: ({ values }) => {
+  //     return !!values.is_blank
+  //   },
+  // },
+
   {
     field: 'industry_key',
     label: '产业类型',

src/views/visualization/components/Map.vue

@@ -35,6 +35,7 @@
   import { useVisualizationStore } from '/@/store/modules/visualization'
   import SheepImg from '/@/assets/images/sheep.png'
   import PigImg from '/@/assets/images/pig.png'
+  import { forEach } from 'lodash-es'
 
   const domImg = document.createElement('img')
   domImg.style.height = '8px'
@@ -90,26 +91,49 @@
           {
             value: 1,
             label: '稻渔综合种养',
-            color: 'rgb(242,230,230 , 0.7)',
+            color: 'rgb(30,54,80 , 0.8)',
             type: 'map',
+            data: [
+              {
+                value: [105.198605, 29.280154],
+              },
+            ],
           },
           {
             value: 2,
             label: '优品柑桔种植',
-            color: 'rgb(187,216,106 , 0.7)',
+            color: 'rgb(54,89,114,0.8)',
             type: 'map',
+            data: [
+              {
+                value: [105.383917, 29.387026],
+              },
+              {
+                value: [105.194187, 29.364692],
+              },
+            ],
           },
           {
             value: 3,
             label: '高粱产业',
-            color: 'rgb(238,98,73 , 0.7)',
+            color: 'rgba(147, 235, 248, 0.2)',
             type: 'map',
+            data: [
+              {
+                value: [105.116049, 29.388207],
+              },
+            ],
           },
           {
             value: 4,
             label: '油茶产业',
-            color: 'rgb(172,220,243 , 0.7)',
+            color: 'rgb(172,220,243 , 0.4)',
             type: 'map',
+            data: [
+              {
+                value: [105.386462, 29.317352],
+              },
+            ],
           },
           {
             value: 5,
@@ -120,12 +144,7 @@
               {
                 map: '',
                 name: '猪',
-                value: ['105.283094', '29.234786'],
+                value: [105.292327, 29.401826],
-              },
-              {
-                map: '',
-                name: '猪',
-                value: ['105.338434', '29.388883'],
               },
             ],
           },
@@ -138,17 +157,7 @@
               {
                 map: '',
                 name: '羊',
-                value: ['105.287507', '29.339408'],
+                value: [105.195498, 29.420684],
-              },
-              {
-                map: '',
-                name: '羊',
-                value: ['105.147012', '29.442367'],
-              },
-              {
-                map: '',
-                name: '羊',
-                value: ['105.115105', '29.383271'],
               },
             ],
           },
@@ -160,6 +169,18 @@
           item = Object.assign(item, _data)
         })
 
+        const _typeBackArr = _defaultArr.reduce((prev, cur) => {
+          cur.data?.forEach((item) => {
+            prev.push({
+              type: 'nylx-key',
+              name: cur.label,
+              value: item.value,
+              key: cur.key,
+            })
+          })
+          return prev
+        }, [])
+
         const _seriesData = _defaultArr
           .filter((item) => item.type === 'dot')
           .map((e) => {
@@ -227,90 +248,54 @@
             duration: 100,
           },
           geo: {
+            show: true,
             map: 'lcxz',
-            aspectScale: 0.75,
+            roam: true,
-            layoutCenter: ['50%', '50.5%'],
+            zoom: 1,
-            layoutSize: '100%',
-            silent: true,
-            roam: false,
-            z: 0,
             label: {
-              color: '#fff',
+              emphasis: {
                 show: false,
               },
+            },
             itemStyle: {
-              areaColor: 'rgba(0, 15, 40, 0.0)',
+              normal: {
-              shadowColor: 'rgba(0, 0, 0, 1)',
+                borderColor: 'rgba(147, 235, 248, 1)',
-              shadowBlur: 0,
+                borderWidth: 1,
-              shadowOffsetX: 0,
+                areaColor: {
-              shadowOffsetY: 5,
+                  type: 'radial',
-              borderColor: '#fff',
+                  x: 0.5,
-              borderWidth: 0.1,
+                  y: 0.5,
+                  r: 0.8,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: 'rgba(147, 235, 248, 0)', // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: 'rgba(147, 235, 248, .2)', // 100% 处的颜色
+                    },
+                  ],
+                  globalCoord: false, // 缺省为 false
+                },
+                shadowColor: 'rgba(128, 217, 248, 1)',
+                // shadowColor: 'rgba(255, 255, 255, 1)',
+                shadowOffsetX: -2,
+                shadowOffsetY: 2,
+                shadowBlur: 10,
               },
               emphasis: {
-              itemStyle: {
+                areaColor: '#389BB7',
-                areaColor: '#2AB8FF',
+                borderWidth: 0,
-                borderWidth: 1,
-                color: 'green',
-              },
-              label: {
-                show: false,
               },
             },
           },
           series: [
             ..._seriesData,
-            // {
+
-            //   type: 'scatter',
-            //   name: '生猪产业分布点',
-            //   coordinateSystem: 'geo',
-            //   tooltip: {
-            //     trigger: 'item',
-            //     show: true,
-            //   },
-            //   symbol: `image://${PigImg}`,
-            //   symbolSize: [30, 30],
-            //   symbolOffset: [0, 0],
-            //   z: 9999,
-            //   data: [
-            //     {
-            //       img: `image://${PigImg}`,
-            //       map: '',
-            //       name: '羊',
-            //       value: ['105.2333', '29.2641'],
-            //     },
-            //   ],
-            // },
-            // {
-            //   type: 'scatter',
-            //   name: '肉羊产业分布点',
-            //   coordinateSystem: 'geo',
-            //   tooltip: {
-            //     trigger: 'item',
-            //     show: true,
-            //   },
-            //   symbol: `image://${SheepImg}`,
-            //   symbolSize: [30, 30],
-            //   symbolOffset: [0, 0],
-            //   z: 9999,
-            //   data: [
-            //     {
-            //       img: `image://${SheepImg}`,
-            //       map: '',
-            //       name: '羊',
-            //       value: ['105.2333', '29.2641'],
-            //     },
-            //     {
-            //       img: `image://${SheepImg}`,
-            //       map: '',
-            //       name: '猪',
-            //       value: ['105.2333', '29.2643'],
-            //     },
-            //   ],
-            // },
             {
               type: 'map',
-              zoom: 1.1,
+              zoom: 1,
               roam: false,
               map: 'lcxz',
               name: 'nylx-key',
@@ -329,19 +314,63 @@
                 },
               },
               itemStyle: {
-                areaColor: 'rgb(242,230,230 , 0.7)',
                 borderColor: '#fff',
                 borderWidth: 0.1,
-              },
-              itemStyle: {
                 emphasis: {
                   label: {
                     show: false,
                   },
+                  areaColor: 'rgba(128, 217, 248, 0.2)',
+                  borderWidth: 0,
                 },
               },
+
               data: _data,
             },
+
+            {
+              type: 'scatter',
+              name: 'nylx-key1',
+              coordinateSystem: 'geo',
+              stateAnimation: {
+                duration: 300,
+                easing: 'bounceOut',
+              },
+              label: {
+                show: true,
+                align: 'center',
+                formatter: function (params) {
+                  var name = params.name
+                  var text = `{tline|${name}}`
+                  return text
+                },
+                color: '#fff',
+                rich: {
+                  fline: {
+                    padding: [0, 25],
+                    color: '#fff',
+                    textShadowColor: '#030615',
+                    textShadowOffsetX: 1,
+                    textShadowOffsetY: 1,
+                    fontSize: 14,
+                    fontWeight: 400,
+                  },
+                  tline: {
+                    padding: [0, 27],
+                    color: '#ABF8FF',
+                    fontSize: 12,
+                  },
+                },
+              },
+              itemStyle: {
+                color: '#00FFF6',
+              },
+              symbol: img2,
+              symbolSize: [100, 34],
+              symbolOffset: [0, -26],
+              z: 999,
+              data: _typeBackArr,
+            },
           ],
         }
         setOptions(options)
@@ -591,7 +620,7 @@
 
       let tempName: any = null
 
-      const _seriesName = ['nylx-key', '肉羊产业分布点', '生猪产业分布点']
+      const _seriesName = ['nylx-key', 'nylx-key1', '肉羊产业分布点', '生猪产业分布点']
 
       onMounted(async () => {
         // await getData()