eCharts地图散点标注位置

苏小小呀

于 2024-05-20 09:37:24 发布

阅读量436

点赞数 1

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/m0_50170396/article/details/139053592

版权

eCharts地图添加固定地点点位标注

散点渲染效果

//定义地图散点需要的点位数据(此处数据取的是安徽省淮南市凤台县下属的镇饿经纬度，详细点位的经纬度我是通过http://www.ugucci.com/anhui.html网址查询的
//不同的地点只要修改name和value的经纬度即可
let data = [
	{ name: '朱马店镇', value: [116.454858, 32.913925] },
    { name: '城关镇', value: [116.722615, 32.709243] },
    { name: '丁集镇', value: [116.6469973, 32.8283509] },
    { name: '顾桥镇', value: [116.545119, 32.834366] },
    { name: '顾桥镇临淝村', value: [116.55506, 32.79687] },
    { name: '顾桥镇搬迁安置区', value: [116.5468553777, 32.8309452620] },
    { name: '凤凰镇', value: [116.720502, 32.709076] },
    { name: '古店乡', value: [116.536507, 32.885146] },
    { name: '关店乡', value: [116.630028, 32.885607] },
    { name: '桂集镇', value: [116.612462, 32.772656] },
    { name: '刘集镇', value: [116.6683679, 32.70987] },
    { name: '钱庙乡', value: [116.488189, 32.820394] },
    { name: '尚塘乡', value: [116.427635, 32.951916] },
    { name: '杨村镇', value: [116.418757, 32.871375] },
    { name: '岳张集镇', value: [116.525661, 32.755617] },
]
//在地图的配置数据options中添加一个series对象，以下就是一个完整的series的对象
{
  name: '',
  type: 'effectScatter',
  coordinateSystem: 'geo',
  symbolSize: function (val) {//此处数字可调整散点大小
      return 15;
  },
  showEffectOn: 'render',
  rippleEffect: {
      brushType: 'stroke',
  },
  hoverAnimation: false,
  label: {
    normal: {
      formatter: '{b}',
      position: 'right',
      show: false,
      color: "#fff"
    },
  },
  itemStyle: {
    normal: {
      color: '#1DE9B6',
      shadowBlur: 10,
      shadowColor: '#1DE9B6',
    },
  },
  zlevel: 1,
  //此处data渲染的就是地图的点位数据
  data: data.map(function (item) {
      return {
          name: item.name,
          value: [item.value[0], item.value[1], 1] // 最后一个数字控制涟漪特效的大小
      };
  }),
}