当前位置：首页 > news >正文

vue2+echarts地图下钻+地图遮盖物散点

news 2025/7/8 4:48:11

一、下载工具

npm i echarts echarts-gl axios -S

-S是生产依赖默认是-S不写也可以 -D是开发依赖

二、引入工具

import * as echarts from "echarts";
import "echarts-gl";
import axios from "axios";

三、HTML部分代码

<div class="iconText" v-show="address != '100000'"><svgstyle="cursor: pointer"@click="backMap"t="1681180771137"class="icon"viewBox="0 0 1024 1024"version="1.1"xmlns="http://www.w3.org/2000/svg"p-id="3427"width="40"height="40"><pathd="M426.666667 384V213.333333l-298.666667 298.666667 298.666667 298.666667v-174.933334c213.333333 0 362.666667 68.266667 469.333333 217.6-42.666667-213.333333-170.666667-426.666667-469.333333-469.333333z"p-id="3428"fill="#ffffff"></path></svg><span style="font-size: 25px; font-weight: 200; color: #fff; text-shadow: 1px 2px 5px rgba(255, 255,255,.8);font-family: my-self-font;">返回上级地图</span></div>
<div class="map-chart" id="mapEchart"></div>

四、data函数中定义的数据

 data() {return {// 地图下钻历史记录historyMapData: [{ name: "中国", adcode: "100000" }],address: "100000",addressName: "中国",district: "",showtab: false,scatterList: [],};},

五、在methods方法中初始化一下dom

chartMap() {// 初始化domconst myChart = echarts.init(document.getElementById("mapEchart"));// 初始化mapthis.initMap(myChart, "中国", "100000");// 添加点击事件myChart.on("click", (e) => {// 添加历史记录this.historyMapData.push(e.value);// 初始化地图this.initMap(myChart, this.addressName, e.value.adcode, e.value.schoolId);});

六、让可视化地图跟随浏览器大小缩放

window.addEventListener("resize", () => {myChart.resize();
});

七、下钻的时候清除一下echarts实例

 async initMap(chartDOM, geoName, adcode, id) {// 清除echarts实例chartDOM.clear();// 请求map的jsonconst mapData = await this.getMapJSON(adcode, geoName, id);// 图表配置项const option = this.getOption(geoName, mapData);// 渲染配置if (this.district == "district") {option.series[1].data.push({ name: "杨家埠小学", value: [119.2, 36.85],schoolId:1 },{ name: "杨家埠小学", value: [119.21, 37.01],schoolId:2 },{ name: "杨家埠小学", value: [119.1, 36.9],schoolId:3 },{ name: "杨家埠小学", value: [118.9, 37.15],schoolId:4 });} else {option.series[1].data = [];}chartDOM.setOption(option);},

八、获取阿里云地图数据

async getMapJSON(address, geoName, id) {let res = null;if (address == undefined) {return null;}//判断地图下钻到district级的时候获取district数据if (this.district === "district") {res = await axios.get(`https://geo.datav.aliyun.com/areas_v2/bound/${address}.json`);} else if (this.district !== "district") {res = await axios.get(`https://geo.datav.aliyun.com/areas_v2/bound/${address}_full.json`);}// 重新注册地图echarts.registerMap(geoName, res.data);// 过滤json数据// 去掉台湾合海南岛边线if (res.data.features[20] &&res.data.features[20].properties.adcode == "460000") {res.data.features[20].geometry.coordinates.splice(1);}if (res.data.features[34] &&res.data.features[34].properties.adcode == "100000") {res.data.features[34].geometry.coordinates.splice(0);}const mapData = res.data.features.map((item) => {return {value: item.properties,name: item.properties.name,};});return mapData;},

九、地图配置散点配置

getOption(geoName, mapData) {const option = {geo3D: {zlevel: -100,show: false, //是否显示全部区域名称type: "map3D",roam: false,center: { x: 0, y: 0 },map: geoName, // 地图类型。echarts-gl 中使用的地图类型同 geo 组件相同regionHeight: 2,shading: "realistic",regions: [{name: mapData[0].name,itemStyle: {color: "#ff9900",},},],shading: "lambert",//默认高亮区域emphasis: {label: { show: false },itemStyle: {color: "transparent",},},},series: [{zlevel: -10,regionHeight: 1,type: "map3D",viewControl: {panSensitivity: 0,rotateSensitivity: 0,// zoomSensitivity: 0,minAlpha: 90,},map: geoName, // 地图类型。echarts-gl 中使用的地图类型同 geo 组件相同data: mapData, //这里比较重要 获得过滤后的data，这样点击事件时就能获得这个data的值label: {show: false, // 是否显示标签。textStyle: {color: "#fff", // 地图初始化区域字体颜色fontSize: 14,fontWeight: 600,},formatter: (e) => {return ` ${e.name} `;},},shading: "realistic",realisticMaterial: {detailTexture: "./public/image.png",},itemStyle: {borderColor: "rgba(50, 123, 200, 0.5)", //区域边界线颜色borderWidth: 2, // 区域边界宽度color: "skyblue",opacity: 0.9,},emphasis: {label: {show: true, //鼠标划过或停留是否现在区域名称textStyle: {borderColor: "#f00",color: "#fff", //鼠标划过或停留的字体颜色},},itemStyle: {color: "#fff", //鼠标划过或停留的区域颜色},},},{zlevel: 1,type: "scatter3D", // 三维散点图coordinateSystem: "geo3D",data: [],roam: true,symbol: 'path://M51.911,16.242C51.152,7.888,45.239,1.827,37.839,1.827c-4.93,0-9.444,2.653-11.984,6.905 c-2.517-4.307-6.846-6.906-11.697-6.906c-7.399,0-13.313,6.061-14.071,14.415c-0.06,0.369-0.306,2.311,0.442,5.478 c1.078,4.568,3.568,8.723,7.199,12.013l18.115,16.439l18.426-16.438c3.631-3.291,6.121-7.445,7.199-12.014 C52.216,18.553,51.97,16.611,51.911,16.242z',// symbol: shcoolAddress,symbolSize: 20, // 散点大小label: {// 散点标签设置formatter: "{b}", // 显示数据点的名称position: "top",show: true,textStyle: {color: "#fff",padding: [5, 2],backgroundColor: {image: addressImg,},},},itemStyle: {// 散点样式设置color: "gold",},emphasis: {// 高亮状态样式设置label: {show: true,},itemStyle: {color: "skyblue",},},},],};return option;},

十、返回上级地图

backMap() {const myChart = echarts.init(document.getElementById("mapEchart"));// 去除当前的地图信息this.historyMapData.pop();const len = this.historyMapData.length;// 获取上一级的地图信息const newdata = this.historyMapData[len - 1];// 重新渲染地图this.initMap(myChart,newdata?.name || "map",newdata?.adcode || "100000");},

十一、在mounted中调用chartMap