实现区域地图散点图效果,vue+echart地图+散点图

需求：根据后端返回的定位坐标数据实现定位渲染

1.效果图

2.准备工作,在main.js和index.js文件中添加以下内容

main.js
app.use(BaiduMap, {// ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */ak: 'sRDDfAKpCSG5iF1rvwph4Q95M6tDCApL',// v:'3.0',  // 默认使用3.0// type: 'WebGL' // ||API 默认API  (使用此模式 BMap=BMapGL)
});index.js<script type="text/javascript" src="https://api.map.baidu.com/getscript?v=3.0&ak=sRDDfAKpCSG5iF1rvwph4Q95M6tDCApL"></script>

3.html

<template><div><div id="main6"style="width:650px;height:400px;"></div>  </div>
</template>

4.script

<script setup>
import * as echarts from 'echarts';
import 'echarts/extension/bmap/bmap';
import {onMounted,defineProps} from 'vue';// import chinaMap from 'https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json'const props = defineProps(['data'])var initData = JSON.parse(JSON.stringify(props)).dataconsole.log(initData,'88888888888888888888888888888888266')const initMap = () =>{var chartDom = document.getElementById('main6');var myChart = echarts.init(chartDom);var option;option = {backgroundColor: 'rgba(0,0,0,.1)',title: {text: '当前服务地区',left: 'center',textStyle: {color: '#fff'}},tooltip: {trigger: 'item'},bmap: { //地理坐标系组件用于地图的绘制,支持在地图地理坐标系上绘制散点图，线集center: [120.22221, 30.2084],zoom: 10,roam: true, //是否允许鼠标放大缩小mapStyle: { //地图显示的样式styleJson: [{featureType: 'water',elementType: 'all',stylers: {color: '#044161'}},{featureType: 'land',elementType: 'all',stylers: {color: '#004981'}},{featureType: 'boundary',elementType: 'geometry',stylers: {color: '#064f85'}},{featureType: 'railway',elementType: 'all',stylers: {visibility: 'off'}},{featureType: 'highway',elementType: 'geometry',stylers: {color: '#004981'}},{featureType: 'highway',elementType: 'geometry.fill',stylers: {color: '#005b96',lightness: 1}},{featureType: 'highway',elementType: 'labels',stylers: {visibility: 'off'}},{featureType: 'arterial',elementType: 'geometry',stylers: {color: '#004981'}},{featureType: 'arterial',elementType: 'geometry.fill',stylers: {color: '#00508b'}},{featureType: 'poi',elementType: 'all',stylers: {visibility: 'off'}},{featureType: 'green',elementType: 'all',stylers: {color: '#056197',visibility: 'off'}},{featureType: 'subway',elementType: 'all',stylers: {visibility: 'off'}},{featureType: 'manmade',elementType: 'all',stylers: {visibility: 'off'}},{featureType: 'local',elementType: 'all',stylers: {visibility: 'off'}},{featureType: 'arterial',elementType: 'labels',stylers: {visibility: 'off'}},{featureType: 'boundary',elementType: 'geometry.fill',stylers: {color: '#029fd4'}},{featureType: 'building',elementType: 'all',stylers: {color: '#1a5787'}},{featureType: 'label',elementType: 'all',stylers: {visibility: 'off'}}]}},series: [{name: '', type: 'effectScatter', //样式coordinateSystem: 'bmap', //该系列使用的坐标系data:[],  // data的数据格式为[{name:'海门',value:['121.15','31.89',200]}，{name:'海门111',value:['121.15','31.89',200]}...] encode: {value: 2},showEffectOn: 'render',rippleEffect: { //涟漪特效相关配置。brushType: 'stroke' //波纹的绘制方式},symbolSize: 10,  //标记的大小,可以设置数组或函数返回值的形式hoverAnimation: true, // 鼠标移入放大圆label: {formatter: '{b}',position: 'right',show: true},itemStyle: {    //样式color: '#f4e925',shadowBlur: 10,shadowColor: '#333'},emphasis: { //高亮状态下的多边形和标签样式scale: true},zlevel: 1}]};// 处理数据 将数据转换成echart可以识别的数据格式,例如[{name:'海门',value:['121.15','31.89',200]}，{name:'海门111',value:['121.15','31.89',200]}...]，详情请查echart地图坐标let result = []initData.map((item,index)=> {let child = {name: '', value:['','']}child.name = item.commNamechild.value[0] = Number(item.mapX)child.value[1] = Number(item.mapY)child.value[2] = Number(item.mapY)result.push(child)})console.log(result,'result')option.series[0].data = result// myChart.registerMap('china', { geoJSON: chinaMap })option && myChart.setOption(option);}onMounted(() => {initMap()}) 
</script>