Echarts+vue3+高德渲染地图

一：安装

npm install echarts

二：渲染地图

1. html

<template>
  <div class="content">
    <div ref="myChartsRef" id="map" style="width: 100%;height: 560px;" ></div>    
  </div>
</template>

2. 高德地图获取geo数据

//获取geo的json数据
const getGeoJson = (adcode: any) => {
  return new Promise((resolve, reject) => {
    AMapLoader.load({
      key: '*******************', // 申请好的Web端开发者Key
      version: '1.4.4',// 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      AMapUI: {
        version: '1.1', // AMapUI 缺省 1.1
        plugins: [], // 需要加载的 AMapUI ui插件
      },
    }).then(() => {
      new AMapUI.loadUI(['geo/DistrictExplorer'], DistrictExplorer => {
        var districtExplorer = new DistrictExplorer();
        districtExplorer.loadAreaNode(adcode, function (error, areaNode) {
          if (error) {
            console.error(error);
            reject(error, 'error 191');
            return;
          }
          let Json = areaNode.getSubFeatures();
          let mapJson = {
            features: [],
          };
          mapJson.features = Json;
          resolve(mapJson);
        })
      })
    }).catch(err => {
      console.log(err)
    })
  })
}

3. echarts的基础配置项

let mapOption = {
  tooltip: {//提示框组件。
    trigger: "item",
    formatter: (p) => {
      let val = p.value;
      let txtCon =
        "<div style='text-align:left'>" +
        p.name
      "</div>";
      return txtCon;
    },
  },
  geo: [
    //geo数据
    {
      name: "SUI",
      type: "map",
      map: "SUI",
      zoom: 1.6, //当前视角的缩放比例
      center: [105.191, 36.582], // 地图中心
      roam: false, //是否开启平游或缩放
      scaleLimit: {
        //滚轮缩放的极限控制
        min: 1.4,
        max: 100,
      },
      label: {
        normal: {
          show: false,
          color: "rgb(249, 249, 249)", //省份标签字体颜色
        },
        emphasis: {
          show: true,
          color: "#fff", //鼠标放上去字体颜色
        },
      },
      itemStyle: {
        //省突起来的效果
        normal: {
          areaColor: "#1f4b77",
          borderColor: "#53D9FF",
          borderWidth: 1,
          shadowBlur: 15,
          shadowColor: "rgb(58,115,192)",
          shadowOffsetX: 0,
          shadowOffsetY: 0,
        },
        emphasis: {
          areaColor: "#487de1",
          borderWidth: 1.6,
          shadowBlur: 25,
        },
      },
    },
  ],
  series:[]
};

4. 地图飞线

地图飞线和标记点

 {
      type: 'lines',
      zlevel: 99,
      effect: {
        show: true,
        //飞机的速度  这里是s单位
        period: 5,
        trailLength: 0.1,
        symbol: 'pin',//这是圆点替换了飞机
        // 飞机大小
        symbolSize: 5,
        color: '#31FFFF',
      },
      lineStyle: {
        normal: {
          color: '#fff',
          type: 'solid', // 虚线
          // 线条宽度
          width: 1,
          opacity: 0.1,
          curveness: 0.2, // 弯曲度
        },
        emphasis: {
          color: '#FF9600' //飞线悬浮颜色
        }
      },
      label: {
        normal: {
          show: false,
          position: 'middle',
          formatter: '{b}'
        }
      },
      data: lines_coord,//飞线数据
    },

飞线数据

lines_coord = [
  {
    coords: [
      [85.427108, 40.558036],
      [116.427239, 40.246686],
    ],
  },
  {
    coords: [
      [96.487689, 35.972901],
      [116.427239, 40.246686],
    ],
  },
  {
    coords: [
      [88.348773, 31.224238],
      [116.427239, 40.246686],
    ],
  },
  {
    coords: [
      [102.748392, 30.747149],
      [116.427239, 40.246686],
    ],
  },
  {
    coords: [
      [114.574166, 23.829568],
      [116.427239, 40.246686],
    ],
  },
  {
    coords: [
      [115.756743, 43.502437],
      [116.427239, 40.246686],
    ],
  },
  {
    coords: [
      [127.825623, 47.200057],
      [116.427239, 40.246686],
    ],
  },
  {
    coords: [
      [121.455937, 31.073690],
      [116.427239, 40.246686],
    ],
  },
];

5.地图标记点

 {
      name: "地点",
      // effectScatter
      type: "scatter",
      coordinateSystem: "geo",
      zlevel: 2,
      rippleEffect: {
        brushType: "stroke",
        scale: 1.5,//涟漪大小
        period: 8,//涟漪速度
      },
      label: {
        normal: {
          show: true,
          formatter: "{b}",
          position: "right",
          textStyle: {
            color: "#fff",
            fontSize: 16,
          },
        },
      },
      emphasis: {
        interval: 1000 // 闪烁频率为每秒1次
      },
      showEffectOn: "render",
      itemStyle: {
        normal: {
          color: "#46bee9",
        },
      },
      data: coord,//标记点数据
    },

标记数据

let coord = [
  {
    name: "北京市",
    value: [116.427239, 40.246686, 1],
    symbolSize: 58, //标记点自定义图片大小
    symbol: "image://" + '图片地址（/src/images/logo.png）' //标记点自定义图片

  },
  {
    name: "新疆",
    value: [85.427108, 40.558036, 1],
    symbolSize: 38,
    symbol: "image://" + '图片地址（/src/images/logo.png）'
  },
  {
    name: "青海省",
    value: [96.487689, 35.972901, 1],
    symbolSize: 38,
    symbol: "image://" + '图片地址（/src/images/logo.png）'
  },
  {
    name: "西藏",
    value: [88.348773, 31.224238, 1],
    symbolSize: 38,
    symbol: "image://" + '图片地址（/src/images/logo.png）'
  },
  {
    name: "四川省",
    value: [102.748392, 30.747149, 1],
    symbolSize: 38,
    symbol: "image://" +'图片地址（/src/images/logo.png）'
  },
  {
    name: "广东省",
    value: [114.574166, 23.829568, 1],
    symbolSize: 38,
    symbol: "image://" +'图片地址（/src/images/logo.png）'
  },
  {
    name: "内蒙古",
    value: [115.756743, 43.502437, 1],
    symbolSize: 38,
    symbol: "image://" + '图片地址（/src/images/logo.png）'
  },
  {
    name: "黑龙江",
    value: [127.825623, 47.200057, 1],
    symbolSize: 38,
    symbol: "image://" + '图片地址（/src/images/logo.png）'
  },
  {
    name: "上海市",
    value: [121.455937, 31.073690, 1],
    symbolSize: 38,
    symbol: "image://" +'图片地址（/src/images/logo.png）'
  },
];

6. 点击地图板块弹框设置背景图片

在这里插入图片描述

let mapOption = {
  tooltip: {
    extraCssText: 'max-width:270px; white-space:pre-wrap',
    enterable: true,//鼠标是否可进入提示框浮层中，默认为false,当弹框中有点击事件的时候可为true
    trigger: "item",
    triggerOn: 'click',//提示框触发的条件 'mousemove|click','mousemove','click'
    show: true,//是否显示提示框组件。
    padding: 0,//提示框浮层内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。
    // borderColor: "#e3b020",//弹框边框颜色
    borderWidth: 1,//弹框边框宽度
    alwaysShowContent: true,//是否永远显示提示框内容
    formatter: (p: any) => {//自定义弹框内容    
      return formatter(p)
    },
    // '<button οnclick="hideTooltip('+p.data.adcode+')">点击</button>'+
  },
}

自定义数据

const formatter = (p: any) => {
  return '<div style="color:#fff;font-size:14px;height: 162px;background: #061547;padding:0;margin:0;position:relative;">' +
    `<img src="${'/src/assets/images/***.png'}">` +
    '<div style="position:absolute;top:0;left:0;width:100%;height:100%;">' +
    '<div style="font-weight:bold;font-size:19px;padding-top:3px;padding-left:38px;">' + p.name + '</div>' +
    '<div style="color:#9ba0b5;font-size:13px;padding:10px;">' +
    '<div >' +
    '负责人：' + '测试/182****1474' +
    '</div>' +
    '<div style="padding-top:5px;">' +
    '地   址：' + '测试地址测试地址测试地址测试地址测试地址测试地址测试地址' +
    '</div>' +
    '<div style="heigth:100px;background:#142251;margin-top:3px;padding: 8px 5px 3px 6px;display: flex;justify-content: space-between;">' +
    '<div style="display: flex;cursor: pointer;flex-direction: column;align-items: center;width:40px;justify-content: center;" οnclick="hideTooltip(' + p.data.adcode + ')">' +
    `<img src="${'/src/assets/images/***.png'}">` +
    '<div style="font-size:10px;">测试</div>' +
    '</div>' +
    '<div style="display: flex;cursor: pointer;flex-direction: column;align-items: center;width:40px;justify-content: center;" >' +
    `<img src="${'/src/assets/images/icon_liuyg.svg'}">` +
    '<div style="font-size:10px;">测试</div>' +
    '</div>' + '<div style="display: flex;cursor: pointer;flex-direction: column;align-items: center;width:40px;justify-content: center;">' +
    `<img src="${'/src/assets/images/icon_dianzc.svg'}">` +
    '<div style="font-size:10px;">测试</div>' +
    '</div>' + '<div style="display: flex;cursor: pointer;flex-direction: column;align-items: center;width:40px;justify-content: center;">' +
    `<img src="${'/src/assets/images/icon_ai.svg'}">` +
    '<div style="font-size:10px;">测试</div>' +
    '</div>' + '<div style="display: flex;cursor: pointer;flex-direction: column;align-items: center;width:40px;justify-content: center;">' +
    `<img src="${'/src/assets/images/icon_chenj.svg'}">` +
    '<div style="font-size:10px;">测试</div>' +
    '</div>' +
    '</div>' +
    '</div>' +
    '</div>' +
    '</div>'
}

触发点击事件

onMounted(async () => {
  window.hideTooltip = function (parmas: any) {
    console.log('我是点击事件', parmas);
  }
})

7.tooltip自定义图片背景图

在这里插入图片描述

label: {
        normal: {
          show: true,
          color: "rgb(249, 249, 249)", //省份标签字体颜色
          formatter: function (param: any) {
            return '{icon|} ' + `{name|${param.name}}`; // {icon}为图片占位符
          },
          rich: {
            icon: {
              height: 25,
              width: 70,
              alingn: 'center',
              backgroundColor: {
                image: '/src/assets/images/***.png' // 设置图片路径
              }
            },
            name: {
              fontSize: 13,
              padding: [0, 0, 0, -58]
            }
          }
        },
}

8. 渲染地图

//获取geo数据
const getGeoJson = (adcode: any) => {
  return new Promise((resolve, reject) => {
    AMapLoader.load({
      key: '*******************', // 申请好的Web端开发者Key
      version: '1.4.4',// 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      AMapUI: {
        version: '1.1', // AMapUI 缺省 1.1
        plugins: [], // 需要加载的 AMapUI ui插件
      },
    }).then(() => {
      new AMapUI.loadUI(['geo/DistrictExplorer'], DistrictExplorer => {
        var districtExplorer = new DistrictExplorer();
        districtExplorer.loadAreaNode(adcode, function (error, areaNode) {
          if (error) {
            console.error(error);
            reject(error, 'error 191');
            return;
          }
          let Json = areaNode.getSubFeatures();
          let mapJson = {
            features: [],
          };
          mapJson.features = Json;
          resolve(mapJson);
        })
      })
    }).catch(err => {
      console.log(err)
    })
  })
}
//处理数据
const getJson = (val: any) => {
  var MapJsons = [];
  var MapJson = [];
  //去拿地图json数据
  getGeoJson(val).then((res: any) => {
    //想要的数据
    MapJsons = res.features?.map((item: any) => {
      return {
        adcode: item.properties.adcode,
        name: item.properties.name,
        value: item.properties.name,
        level: item.properties.level,
        center: item.properties.center,
      };
    });

    MapJson = MapJsons?.sort(function (a: any, b: any) {
      return a.value - b.value;
    });
    //调用绘制地图方法
    drawMap(res, MapJson);
  });
};
//渲染地图
const drawMap = (map: any, MapJson: any) => {
  //拿到标签的dom
  let mapChart = echarts.init(document.getElementById("map"));
  echarts.registerMap("SUI", map); //注册地图
  // mapChart.off('click')
  //加载进去，后面的true为了重新绘制
  mapChart.setOption(mapOption, true);
  //点击事件
  mapChart.on("click", (params: any) => {
    // console.log('点击地图组件', params);
  })
};