Bootstrap

echarts地图点击态，添加引导线等

引入、注册、实例化地图数据

// 引入地图数据
const municipalMap = require(`./json/map.json`)
// 注册地图数据
echarts.registerMap('惠州市', municipalMap)
// 实例化地图
this.mapChart = echarts.getInstanceByDom(document.getElementById('mapChart'))
// 判断是否已经实例化
if (this.mapChart == null) {
  this.mapChart = echarts.init(document.getElementById('mapChart'))
}

添加地图marker数据

// marker 图标数据示例，value是图标坐标点
let iconData = [
  { type: '一般', name: '博罗县', value: [114.32074, 23.302638] },
  { type: '一般', name: '博罗县', value: [114.30074, 23.382638] },
  { type: '重大', name: '龙门县', value: [114.30497, 23.68495] },
  { type: '重大', name: '惠城区', value: [114.545898, 23.160987] },
  { type: '紧急', name: '惠阳区', value: [114.401134, 22.92713] },
  { type: '其他', name: '大亚湾区', value: [114.555124, 22.762723] },
  { type: '其他', name: '惠东县', value: [114.9402, 23.122134] },
  { type: '一般', name: '仲恺高新区', value: [114.251124, 23.075723] }
]
// 图片前缀，this.ybIcon是通过data里面require引入的，如ybIcon: require('@/assets/screen/yb.png')
let prefix = 'image://'
iconData.forEach((item) => {
  if (item.type === '一般') {
    item.symbol = prefix + this.ybIcon
  } else if (item.type === '重大') {
    item.symbol = prefix + this.zdIcon
  } else if (item.type === '紧急') {
    item.symbol = prefix + this.jjIcon
  } else {
    item.symbol = prefix + this.qtIcon
  }
})

地图主要配置项

geo: [
   {
     // 指定地图名称
     map: '惠州市',
     // 是否启用缩放和平移
     roam: false,
     // 缩放级别
     zoom: 1.26,
     // 图层级别
     zlevel: 2,
     // 图层顺序
     z: 1,
     // 设置地图的宽高比为1.05
     aspectScale: 1.05,
     // 设置地图布局大小为80%
     layoutSize: '80%',
     // 设置地图布局中心
     layoutCenter: ['52%', '48%'],
     // 设置地图标签的显示属性，包括显示、颜色、字体粗细和字体大小。
     label: {
       show: true,
       color: '#fff',
       fontWeight: 700,
       fontSize: this.nowSize(12)
     },
     // 设置地图在hover状态下的显示属性，包括标签和样式。
     emphasis: {
       disabled: false,
       label: {
         show: true,
         color: '#fff',
         fontWeight: 700,
         fontSize: this.nowSize(12)
       },
       itemStyle: {
         borderWidth: this.nowSize(2),
         shadowColor: '#003585',
         focus: 'none',
         areaColor: 'orange'
       }
     },
     // 设置地图项的样式，包括边界线颜色、大小、阴影颜色、偏移和模糊度，以及区域颜色
     itemStyle: {
       borderColor: '#003585', //边界线颜色
       borderWidth: this.nowSize(1), //边际线大小
       shadowColor: '#003585',
       shadowOffsetX: this.nowSize(2),
       shadowOffsetY: this.nowSize(3),
       shadowBlur: 6,
       areaColor: '#228FF4'
     },
     // 设置选中模式为单选
     selectedMode: 'single',
     // 设置选中状态下的标签和地图样式
     select: {
       label: {
         show: true,
         color: '#fff',
         fontWeight: 700,
         fontSize: this.nowSize(12)
       },
       itemStyle: {
         borderWidth: this.nowSize(2),
         shadowColor: '#003585',
         focus: 'none',
         areaColor: 'orange'
       }
     }
   },
   // 地图背景配置
   {
     map: '惠州市',
     roam: false,
     zlevel: -1,
     zoom: 1.26,
     z: 1,
     aspectScale: 1.05,
     layoutCenter: ['52%', '49%'],
     layoutSize: '80%',
     itemStyle: {
       borderWidth: this.nowSize(0), //边际线大小
       borderColor: 'transpercent', //边界线颜色
       shadowColor: '#086489',
       shadowOffsetX: 0,
       shadowOffsetY: this.nowSize(10),
       shadowBlur: this.nowSize(10),
       areaColor: '#06336C'
     }
   }
 ],

地图点击态实现主要代码

// 设置选中模式为单选
selectedMode: 'single',
// 设置选中状态下的标签和地图样式
select: {
  label: {
    show: true,
    color: '#fff',
    fontWeight: 700,
    fontSize: this.nowSize(12)
  },
  itemStyle: {
    borderWidth: this.nowSize(2),
    shadowColor: '#003585',
    focus: 'none',
    areaColor: 'orange'
  }
}

添加区域中心点

{
	// 使用带有涟漪特效的散点图类型
	type: 'effectScatter',
	// 使用地理坐标系来定位这些中心点
	coordinateSystem: 'geo',
	// 图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
	silent: true,
	// 表示在地图中使用的地理坐标系的索引
	geoIndex: 0,
	// 数据中的值对应的是数组中的第二个元素
	encode: {
	  value: 2
	},
	data: [
	  { name: '博罗县', value: [114.39074, 23.339638, 10] },
	  { name: '龙门县', value: [114.194197, 23.66548, 10] },
	  { name: '惠城区', value: [114.605898, 23.198987, 10] },
	  { name: '惠阳区', value: [114.491124, 22.877723, 10] },
	  { name: '大亚湾区', value: [114.497124, 22.710723, 10] },
	  { name: '惠东县', value: [115.010202, 23.082134, 10] },
	  { name: '仲恺高新区', value: [114.311124, 23.033723, 10] }
	],
	// 散点的大小
	symbolSize: this.nowSize(10),
	// 配置何时显示特效。'render' 绘制完成后显示特效。'emphasis' 高亮（hover）的时候显示特效。
	showEffectOn: 'render',
	// 设置涟漪特效的样式为描边
	rippleEffect: {
	  brushType: 'stroke'
	},
	// 不显示标签
	label: {
	  show: false
	},
	// 设置散点的样式，包括阴影模糊度、阴影颜色和主体颜色。
	itemStyle: {
	  shadowBlur: this.nowSize(10),
	  shadowColor: '#333',
	  color: '#19E3FF'
	},
	emphasis: {
	  scale: true
	},
	// 图层级别
	zlevel: 2
}

添加点击地图区域时的引导线

// 绘制地图
this.mapChart.setOption(mapOption)
let that = this
// 监听地图点击事件
this.mapChart.on('click', (params) => {
	// 判断当前是否已选中区域，是的话取消选中
	if (that.popupTitle === params.name) {
	  this.hideLine()
	} else {
	  that.popupTitle = params.name
	  // 当前点击的区域
	  var points = []
	  if (params.name === '博罗县') {
	    points = [
	      [114.39074, 23.339638],
	      [114.70074, 23.652638],
	      [114.74074, 23.652638]
	    ]
	  } else if (params.name === '龙门县') {
	    points = [
	      [114.194197, 23.66548],
	      [114.684197, 23.66548],
	      [114.724197, 23.62548]
	    ]
	  } else if (params.name === '惠城区') {
	    points = [
	      [114.605898, 23.198987],
	      [114.725898, 23.608987],
	      [114.765898, 23.608987]
	    ]
	  } else if (params.name === '惠阳区') {
	    points = [
	      [114.491124, 22.877723],
	      [114.081124, 22.757723],
	      [114.081124, 22.727723]
	    ]
	  } else if (params.name === '大亚湾区') {
	    points = [
	      [114.497124, 22.710723],
	      [114.417124, 22.520723],
	      [114.387124, 22.520723]
	    ]
	  } else if (params.name === '惠东县') {
	    points = [
	      [115.010202, 23.082134],
	      [115.150202, 23.422134],
	      [115.150202, 23.462134]
	    ]
	  } else if (params.name === '仲恺高新区') {
	    points = [
	      [114.311124, 23.033723],
	      [114.051124, 22.783723],
	      [114.051124, 22.733723]
	    ]
	  }
	  // 动态添加引导线
	  that.mapChart.setOption({
	    series: [
	      {
	        type: 'lines',
	        coordinateSystem: 'geo',
	        zlevel: 3,
	        silent: true,
	        polyline: true,
	        // 设置引导线的样式
	        lineStyle: {
	          color: '#fff'
	        },
	        data: [
	          {
	            coords: points
	          }
	        ]
	      }
	    ]
	  })
	}
})

取消地图选中和引导线

// 隐藏地图引导线
hideLine() {
  if (this.mapChart) {
    // 取消地图选中区域
    this.mapChart.dispatchAction({
      type: 'geoUnSelect',
      name: this.popupTitle
    })
  }
  this.popupTitle = ''
  this.mapChart.setOption({
    series: [
      {
        zlevel: 3,
        type: 'lines',
        data: []
      }
    ]
  })
}

防止重复触发地图点击事件，导致地图初始化时点击地图选中触发两次以上，导致点击态消失（顺便加一个接口获取地图数据并初始化地图，初始化时要调用一下取消选中方法）

this.mapLoading = true
getMapInfo(data)
  .then((res) => {
    this.mapLoading = false
    console.log('地图数据----', res)
    this.mapData = res.data
    if (this.mapChart) {
      // 防止重复触发点击事件，再次初始化地图时注销掉之前的点击事件
      this.mapChart.off('click')
    }
    this.$nextTick(() => {
      this.initMap()
      this.hideLine()
    })
  })
  .catch(() => {
    this.mapLoading = false
  })

离开页面销毁地图实例

destroyed() {
  if (this.mapChart) {
    this.mapChart.dispose()
  }
},

悦读

道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。 故常无欲，以观其妙，常有欲，以观其徼。 此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。

最新收录
【从零开始】6. RAG 应用性能压测工具（番外篇）
矩阵分析学习（补充）
OpenCV基础（24）改善夜间图像的照明
【K8s】专题三（7）：Kubernetes 安装方法之 K3d
Xilinx原语——FPGA学习笔记4
拦截信号优雅关闭Golang应用
控制台查出数据传到layui数据表格却没有数据的问题
Kubernetes网络通讯模式深度解析
运行PySpark项目报错SparkException: Python worker failed to connect back.的解决方法
Linux中使用docker方式搭建SQL Server
;