一、下载工具
npm i echarts echarts-gl axios -S
-S是生产依赖默认是-S不写也可以 -D是开发依赖
二、引入工具
javascript
import * as echarts from "echarts";
import "echarts-gl";
import axios from "axios";三、HTML部分代码
html
<div class="iconText" v-show="address != '100000'">
<svg
style="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"
>
<path
d="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函数中定义的数据
javascript
data() {
return {
// 地图下钻历史记录
historyMapData: [{ name: "中国", adcode: "100000" }],
address: "100000",
addressName: "中国",
district: "",
showtab: false,
scatterList: [],
};
},五、在methods方法中初始化一下dom
javascript
chartMap() {
// 初始化dom
const myChart = echarts.init(document.getElementById("mapEchart"));
// 初始化map
this.initMap(myChart, "中国", "100000");
// 添加点击事件
myChart.on("click", (e) => {
// 添加历史记录
this.historyMapData.push(e.value);
// 初始化地图
this.initMap(myChart, this.addressName, e.value.adcode, e.value.schoolId);
});六、让可视化地图跟随浏览器大小缩放
javascript
window.addEventListener("resize", () => {
myChart.resize();
});七、下钻的时候清除一下echarts实例
javascript
async initMap(chartDOM, geoName, adcode, id) {
// 清除echarts实例
chartDOM.clear();
// 请求map的json
const 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);
},八、获取阿里云地图数据
javascript
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;
},九、地图配置散点配置
javascript
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;
},十、返回上级地图
javascript
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
javascript
mounted() {
this.chartMap();
},