地图添加marker

components.d.ts

@@ -9,8 +9,10 @@ declare module 'vue' {
   export interface GlobalComponents {
     BaseBg: typeof import('./src/components/baseBg.vue')['default']
     CenterMap: typeof import('./src/components/centerMap.vue')['default']
+    'CenterMap copy': typeof import('./src/components/centerMap copy.vue')['default']
     CodeDialog: typeof import('./src/components/code-dialog/index.vue')['default']
     Components: typeof import('./src/components/index.js')['default']
+    copy: typeof import('./src/components/centerMap copy.vue')['default']
     CurrentTime: typeof import('./src/components/currentTime.vue')['default']
     CustomBack: typeof import('./src/components/customBack.vue')['default']
     CustomCarouselPicture: typeof import('./src/components/custom-carousel-picture/index.vue')['default']

src/components/530926geo.json

@@ -18524,7 +18524,6 @@
                                 23.547411
                             ]
                         ]
-                       
                     ]
                 ]
             }

src/components/centerMap copy.vue

@@ -0,0 +1,250 @@
+<template>
+  <div class="map-center-warp">
+    <!-- <img :src="getAssetsFile('images/vsualized/gmmap.png')" class="map-img" /> -->
+    <div class="map-pos">
+      <custom-echart-maps height="100%" width="100%" :option="chartsData.option" :geo="geoData" :name="mapName" @click="mapClick" />
+    </div>
+
+    <el-dialog
+      v-model="isShow"
+      :title="currentMap.name + dialogTitle"
+      width="360"
+      :show-close="false"
+      :before-close="handleClose"
+      custom-class="map-info-dialog"
+    >
+      <template #header="{ close, titleId, titleClass }">
+        <slot name="header"></slot>
+      </template>
+      <slot name="dialogContent"></slot>
+    </el-dialog>
+  </div>
+</template>
+<script setup>
+import { isEmpty, getAssetsFile } from '@/utils';
+import { ref, reactive, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+import geoJsonData from '../components/530926geo.json'; // 根据实际情况调整路径
+const route = useRoute();
+const props = defineProps({
+  dialogTitle: {
+    type: String,
+    default: '首页',
+  },
+});
+var aspectScale = 0.8807505292367753;
+// var iconUrl = 'http://localhost:9529/sub-government-screen-service/src/assets/images/vsualized/home/partbg.png';
+// var iconUrl = getAssetsFile('images/vsualized/gmmap.png').href;
+var iconUrl = getAssetsFile('images/vsualized/gmmap2.png').href;
+
+const isShow = ref(false);
+let geoData = geoJsonData;
+let mapName = ref('ZJ' + route.name);
+let mapConfig = reactive({
+  map: mapName.value,
+  zoom: 1,
+  viewControl: {
+    distance: 115,
+    alpha: 60,
+    beta: 0,
+    minBeta: -360,
+    maxBeta: 720,
+    // 限制视角，使不能旋转缩放平移
+    // rotateSensitivity: 0,
+    // zoomSensitivity: 0,
+    // panSensitivity: 0,
+  },
+  itemStyle: {
+    // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
+    color: 'rgba(75,255,180,0.2)', // 地图板块的颜色
+    opacity: 1, // 图形的不透明度 [ default: 1 ]
+    borderWidth: 1.5, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域   [ default: 0 ]
+    borderColor: '#4bffb4', // 图形描边的颜色。[ default: #333 ]
+  },
+  label: {
+    show: true,
+    distance: 0,
+    color: '#000',
+    padding: [6, 4, 2, 4],
+    borderRadius: 4,
+    backgroundColor: 'rgba(255,255,255,0.2)',
+    textStyle: {
+      fontSize: 12,
+      color: '#000', // 地图初始化区域字体颜色
+      borderWidth: 0,
+      borderColor: '#000',
+    },
+  },
+  emphasis: {
+    //高亮状态的效果
+    label: {
+      show: true,
+      color: '#fff',
+    },
+    itemStyle: {
+      color: 'rgba(75,255,180,0.3)', // 地图板块的颜色
+    },
+  },
+});
+
+const coordTransform = (lng, lat) => {
+  // 这里需要实现具体转换算法
+  // 示例伪代码，需替换真实转换逻辑
+  return [lng + 0.003, lat + 0.002];
+};
+const chartsData = reactive({
+  option: {
+    title: {
+      text: '',
+      left: 'center',
+    },
+    tooltip: {
+      trigger: 'item',
+      formatter: function (params) {
+        if (params.seriesType === 'effectScatter') {
+          return `${params.name}: (${params.value[0]}, ${params.value[1]})`;
+        }
+        return params.name;
+      },
+    },
+    toolbox: {
+      show: false,
+      orient: 'vertical',
+      left: 'right',
+      top: 'center',
+      feature: {
+        // dataView: { readOnly: false },
+        // restore: {},
+        // saveAsImage: {},
+      },
+    },
+    geo3D: {
+      roam: true,
+      left: '30px',
+      show: true,
+      zlevel: -1, // 必须设置，
+      ...mapConfig,
+    },
+    series: [
+      {
+        type: 'map',
+        left: '30px',
+        ...mapConfig,
+      },
+      // {
+      //   name: '闪烁散点',
+      //   type: 'effectScatter', // 使用 effectScatter 类型
+      //   coordinateSystem: 'geo',
+      //   data: [
+      //     // 示例数据点，实际应用中应替换为真实的数据
+      //     {
+      //       name: '孟定镇111',
+      //       value: [99.081993, 23.554045, 100], // 经度, 纬度, 数值
+      //       itemStyle: {
+      //         color: '#4bffb4', // 孟定镇的颜色
+      //       },
+      //     },
+      //     {
+      //       name: '耿马镇',
+      //       value: [99.402267, 23.538889, 80], // 经度, 纬度, 数值
+      //       itemStyle: {
+      //         color: '#4bffb4', // 勐永镇的颜色
+      //       },
+      //     },
+      //   ],
+      //   symbolSize: function (val) {
+      //     return val[2] ? val[2] / 10 : 10; // 如果没有数值，默认大小
+      //   },
+      //   label: {
+      //     formatter: '{b}',
+      //     position: 'right',
+      //     show: false,
+      //   },
+      //   rippleEffect: {
+      //     period: 4, // 波纹动画周期
+      //     scale: 3, // 波纹缩放比例
+      //     brushType: 'stroke', // 波纹绘制方式：'stroke' 或 'fill'
+      //   },
+      //   hoverAnimation: false,
+      // },
+    ],
+  },
+});
+
+let currentMap = reactive({});
+
+const mapClick = (data) => {
+  isShow.value = true;
+  currentMap = data;
+  emit('mapclick', currentMap);
+};
+const handleClose = () => {
+  isShow.value = false;
+};
+onMounted(() => {
+  console.info('iconUrl', iconUrl);
+});
+
+const emit = defineEmits(['mapclick']);
+</script>
+<style lang="scss" scoped>
+div {
+  box-sizing: border-box;
+}
+::v-deep() {
+  .el-dialog {
+    background: url('@/assets/images/vsualized/mapopup.png') no-repeat left top;
+    min-height: 200px;
+    max-height: 500px;
+    overflow-y: auto;
+    background-size: 100% 100%;
+    padding: 16px;
+    margin-top: 15%;
+  }
+  .el-dialog__header {
+    margin-top: 10px;
+    text-align: left;
+    padding-left: 48px;
+    .el-dialog__title,
+    i {
+      color: #fff !important;
+    }
+    .el-dialog__headerbtn {
+      top: 8px !important;
+    }
+  }
+  .map-dialog-my-header {
+    margin-top: 4px;
+    display: inline-flex;
+    justify-content: space-between;
+    h4 {
+      font-weight: normal !important;
+    }
+  }
+}
+.map-center-warp {
+  width: 100%;
+  text-align: center;
+  position: relative;
+  height: 90%;
+  .map-img {
+    width: 80%;
+    height: 80%;
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    object-fit: contain;
+    transform: translateX(-50%);
+    max-width: 1000px;
+    max-height: 1000px;
+  }
+  .map-pos {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+</style>

src/components/centerMap.vue

@@ -25,6 +25,7 @@ import { isEmpty, getAssetsFile } from '@/utils';
 import { ref, reactive, onMounted } from 'vue';
 import { useRoute } from 'vue-router';
 import geoJsonData from '../components/530926geo.json'; // 根据实际情况调整路径
+import { Select } from '@element-plus/icons-vue';
 const route = useRoute();
 const props = defineProps({
   dialogTitle: {
@@ -40,6 +41,84 @@ var iconUrl = getAssetsFile('images/vsualized/gmmap2.png').href;
 const isShow = ref(false);
 let geoData = geoJsonData;
 let mapName = ref('ZJ' + route.name);
+let mapConfig = reactive({
+  map: mapName.value,
+  zoom: 1,
+  viewControl: {
+    distance: 115,
+    alpha: 60,
+    beta: 0,
+    minBeta: -360,
+    maxBeta: 720,
+    // 限制视角，使不能旋转缩放平移
+    // rotateSensitivity: 0,
+    // zoomSensitivity: 0,
+    // panSensitivity: 0,
+  },
+  // itemStyle: {
+  //   // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
+  //   color: 'rgba(75,255,180,0.2)', // 地图板块的颜色
+  //   opacity: 1, // 图形的不透明度 [ default: 1 ]
+  //   borderWidth: 1.5, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域   [ default: 0 ]
+  //   borderColor: '#4bffb4', // 图形描边的颜色。[ default: #333 ]
+  // },
+  itemStyle: {
+    normal: {
+      borderColor: '#4bffb4', // 设置镇边界的颜色
+      borderWidth: 1, // 设置镇边界的宽度
+      areaColor: 'rgba(75,255,180,0.2)', // 设置背景透明，只显示边界
+    },
+    emphasis: {
+      borderColor: '#4bffb4',
+      borderWidth: 2,
+      areaColor: 'rgba(75,255,180,0.5)', // 设置背景透明，只显示边界
+      label: {
+        color: '#fff',
+      },
+    },
+  },
+  select: {
+    // 选中样式:ml-citation{ref="2,7" data="citationList"}
+    itemStyle: {
+      areaColor: 'rgba(75,255,180,0.6)',
+      borderColor: '#4bffb4',
+      borderWidth: 2,
+    },
+    label: {
+      color: '#fff',
+    },
+  },
+
+  label: {
+    show: true,
+    distance: 0,
+    color: '#fff',
+    padding: [6, 4, 2, 4],
+    borderRadius: 4,
+    textStyle: {
+      fontSize: 12,
+      color: '#fff', // 地图初始化区域字体颜色
+      borderWidth: 0,
+      borderColor: '#000',
+    },
+  },
+  // emphasis: {
+  //   //高亮状态的效果
+  //   label: {
+  //     show: true,
+  //     color: '#fff',
+  //   },
+  //   itemStyle: {
+  //     color: 'rgba(75,255,180,0.3)', // 地图板块的颜色
+  //   },
+  // },
+});
+
+const coordTransform = (lng, lat) => {
+  // 这里需要实现具体转换算法
+  // 示例伪代码，需替换真实转换逻辑
+  return [lng + 0.003, lat + 0.002];
+};
 const chartsData = reactive({
   option: {
     title: {
@@ -66,104 +145,57 @@ const chartsData = reactive({
         // saveAsImage: {},
       },
     },
-    geo3D: {
+    geo: {
-      map: mapName.value,
       roam: true,
-      zoom: 1,
       left: '30px',
-      show: true,
+      show: false,
       zlevel: -1, // 必须设置，
-      viewControl: {
+      ...mapConfig,
-        distance: 115,
-        alpha: 60,
-        beta: 0,
-        minBeta: -360,
-        maxBeta: 720,
-        // 限制视角，使不能旋转缩放平移
-        // rotateSensitivity: 0,
-        // zoomSensitivity: 0,
-        // panSensitivity: 0,
-      },
-      itemStyle: {
-        // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
-        color: 'rgba(75,255,180,0.2)', // 地图板块的颜色
-        opacity: 1, // 图形的不透明度 [ default: 1 ]
-        borderWidth: 1.5, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域   [ default: 0 ]
-        borderColor: '#4bffb4', // 图形描边的颜色。[ default: #333 ]
-      },
-      label: {
-        show: true,
-        distance: 0,
-        color: '#000',
-        padding: [6, 4, 2, 4],
-        borderRadius: 4,
-        backgroundColor: 'rgba(255,255,255,0.2)',
-        textStyle: {
-          fontSize: 12,
-          color: '#E87813', // 地图初始化区域字体颜色
-          borderWidth: 0,
-          borderColor: '#000',
-        },
-      },
-      emphasis: {
-        //高亮状态的效果
-        label: {
-          show: true,
-          color: '#fff',
-        },
-        itemStyle: {
-          color: 'rgba(75,255,180,0.3)', // 地图板块的颜色
-        },
-      },
     },
     series: [
       {
-        type: 'map3D',
+        roam: true,
-        map: mapName.value,
+        type: 'map',
-        zoom: 1,
         left: '30px',
-        viewControl: {
+        ...mapConfig,
-          distance: 115,
-          alpha: 60,
-          beta: 0,
-          minBeta: -360,
-          maxBeta: 720,
-          // 限制视角，使不能旋转缩放平移
-          // rotateSensitivity: 0,
-          // zoomSensitivity: 0,
-          // panSensitivity: 0,
       },
+      {
+        name: '闪烁散点',
+        type: 'effectScatter', // 使用 effectScatter 类型
+        coordinateSystem: 'geo',
+        data: [
+          // 示例数据点，实际应用中应替换为真实的数据
+          {
+            name: '永星食品加工厂',
+            value: [99.081993, 23.554045, 150], // 经度, 纬度, 数值
+            symbol: 'image://' + getAssetsFile('images/vsualized/marker.png'),
             itemStyle: {
-          // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
+              color: '#4bffb4', //
-          color: 'rgba(75,255,180,0.2)', // 地图板块的颜色
+            },
-          opacity: 1, // 图形的不透明度 [ default: 1 ]
+          },
-          borderWidth: 1.5, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域   [ default: 0 ]
+          {
-          borderColor: '#4bffb4', // 图形描边的颜色。[ default: #333 ]
+            name: '耿马镇',
+            value: [99.402267, 23.538889, 150], // 经度, 纬度, 数值
+            symbol: 'image://' + getAssetsFile('images/vsualized/marker.png'),
+            itemStyle: {
+              color: '#4bffb4', // 勐永镇的颜色
+            },
+          },
+        ],
+        symbolSize: function (val) {
+          return val[2] ? val[2] / 10 : 10; // 如果没有数值，默认大小
         },
         label: {
-          show: true,
+          formatter: '{b}',
-          distance: 0,
+          position: 'right',
-          color: '#000',
+          show: false,
-          padding: [6, 4, 2, 4],
-          borderRadius: 4,
-          backgroundColor: 'rgba(255,255,255,0.2)',
-          textStyle: {
-            fontSize: 12,
-            color: '#E87813', // 地图初始化区域字体颜色
-            borderWidth: 0,
-            borderColor: '#000',
-          },
-        },
-        emphasis: {
-          //高亮状态的效果
-          label: {
-            show: true,
-            color: '#fff',
-          },
-          itemStyle: {
-            color: 'rgba(75,255,180,0.3)', // 地图板块的颜色
         },
+        rippleEffect: {
+          period: 4, // 波纹动画周期
+          scale: 3, // 波纹缩放比例
+          brushType: 'stroke', // 波纹绘制方式：'stroke' 或 'fill'
         },
+        hoverAnimation: false,
       },
     ],
   },
@@ -189,6 +221,7 @@ const emit = defineEmits(['mapclick']);
 div {
   box-sizing: border-box;
 }
+
 ::v-deep() {
   .el-dialog {
     background: url('@/assets/images/vsualized/mapopup.png') no-repeat left top;

src/components/subTop.vue

@@ -110,7 +110,9 @@ const handleCommand = (data) => {
 .down-menu {
   background: transparent;
 }
-
+.el-dropdown {
+  display: inline-block;
+}
 .el-dropdown-link {
   color: $color-custom-main !important;
   i {
@@ -173,11 +175,6 @@ const handleCommand = (data) => {
     border-radius: 4px;
     padding: 6px;
     text-align: center;
-    ::v-deep() {
-      .el-dropdown {
-        display: inline-block;
-      }
-    }
   }
 }
 </style>

src/views/entities/components/entitiesMap.vue

@@ -0,0 +1,97 @@
+<template>
+  <centerMap :dialog-title="'投入品'" @mapclick="doMapclick">
+    <template #header>
+      <div class="land-map-pop-header">
+        <div class="title">{{ currentRegion && currentRegion.name ? currentRegion.name : '投入品' }}</div>
+      </div>
+    </template>
+    <template #dialogContent>
+      <div class="land-map-pop-content">
+        <div v-for="(n, index) in list" :key="index" class="list-item">
+          <div class="title">
+            <span class="title-val"> {{ n.title }}</span>
+          </div>
+          <div class="value">{{ n.value }}{{ n.unit }}</div>
+        </div>
+      </div>
+    </template>
+  </centerMap>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue';
+
+const unit = ref('家');
+const list = reactive([
+  { title: '年总产值', value: 3.49, color: '#01FEFD', unit: '亿元' },
+  { title: '年人均收入', value: 6.98, color: '#FEF906', unit: '万元' },
+]);
+
+let currentRegion = ref(null);
+const doMapclick = (data) => {
+  currentRegion.value = data;
+};
+</script>
+
+<style lang="scss" scoped>
+.land-map-pop-header {
+  display: inline-flex;
+  justify-content: space-between;
+  width: 100%;
+  margin-top: 3px;
+  .title,
+  .value {
+    display: inline-block;
+    vertical-align: middle;
+    color: $color-white;
+  }
+  .title {
+    font-size: 18px;
+  }
+  .value {
+    font-size: 14px;
+  }
+}
+.land-map-pop-content {
+  width: 100%;
+  gap: 10px;
+  display: inline-flex;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  .list-item {
+    width: calc((100% - 10px) / 1);
+    display: inline-flex;
+    justify-content: space-between;
+    padding: 6px 0;
+    .title {
+      display: inline-flex;
+      justify-content: flex-start;
+      .before {
+        display: inline-flex;
+        flex-direction: column;
+        justify-content: center;
+      }
+      .b-content {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        display: inline-block;
+      }
+      .before,
+      .title-val {
+        display: inline-block;
+        vertical-align: middle;
+        padding: 0 5px 0 2px;
+        color: $color-custom-main;
+      }
+    }
+
+    .value {
+      display: inline-block;
+      text-align: right;
+      color: $color-white;
+      font-size: 12px;
+    }
+  }
+}
+</style>

src/views/entities/index.vue

@@ -24,7 +24,7 @@
       </div>
     </el-col>
     <el-col :span="12">
-      <centerMap></centerMap>
+      <entitiesMap></entitiesMap>
     </el-col>
     <el-col :span="6" class="right-charts">
       <div class="right-charts-item">
@@ -59,6 +59,7 @@ import hotCharts from './components/hotCharts.vue';
 import benefitCharts from './components/benefitCharts.vue';
 import entitiesStatistics from './components/entitiesStatistics.vue';
 import entitiesCategoryCharts from './components/entitiesCategoryCharts.vue';
+import entitiesMap from './components/entitiesMap.vue';
 </script>
 <style lang="scss" scoped>
 .data-home-index {