地图下钻+标记点
作者：互联网
首先老规矩，上代码
drawMap() {
if (
this.myChart != null &&
this.myChart != "" &&
this.myChart != undefined
) {
this.myChart.dispose();
}
this.$nextTick(() => {
let self = this;
this.myChart = echarts.init(document.getElementById("mapTest"));
// HuaiAn
// let geoJson = "http://localhost:8080/static/mapHuaiAn.geoJson";
// XiaMen
// let geoJson = "http://localhost:8080/static/mapXiaMen.geoJson";
// DrawMap
// let geoJson = "http://localhost:8080/static/drawMap.geoJson";
// let geoJson =
// "https://geo.datav.aliyun.com/areas_v3/bound/350200_full.json";
// "https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=350200_full";
// Origin
let xiamen = "http://localhost:8080/static/mapXiaMen.geoJson";
// Test [BUG]
// let xiamen = "http://localhost:8080/static/mapXiaMenTest.geoJson";
let haicang = "http://localhost:8080/static/HaiCang.geoJson";
let huli = "http://localhost:8080/static/HuLi.geoJson";
let jimei = "http://localhost:8080/static/JiMei.geoJson";
let siming = "http://localhost:8080/static/SiMing.geoJson";
let tongan = "http://localhost:8080/static/TongAn.geoJson";
let xiangan = "http://localhost:8080/static/XiangAn.geoJson";
var mapname = xiamen;
var mapJson = [
{
name: "海沧区",
json: haicang,
},
{
name: "湖里区",
json: huli,
},
{
name: "集美区",
json: jimei,
},
{
name: "思明区",
json: siming,
},
{
name: "同安区",
json: tongan,
},
{
name: "翔安区",
json: xiangan,
},
];
let mapDataOrigin = [
{
name: "同安区",
value: [118.14422607421875, 24.76927845059527, 29999],
}
];
let mapData = mapDataOrigin;
/**
此版本通过设置geoindex && seriesIndex: [1] 属性来实现geo和map共存，来达到hover散点
和区域显示tooltip的效果
默认情况下，map series 会自己生成内部专用的 geo 组件。
但是也可以用这个 geoIndex 指定一个 geo 组件。
这样的话，map 和 其他 series（例如散点图）就可以共享一个 geo 组件了。
并且，geo 组件的颜色也可以被这个 map series 控制，从而用 visualMap 来更改。
当设定了 geoIndex 后，series-map.map 属性，以及 series-map.itemStyle 等样式配置
不再起作用，而是采用 geo 中的相应属性。
并且加了pin气泡图标以示数值大小
*/
this.myChart.showLoading();
this.myChart.on("click", function (e) {
// console.log(e);
var chooseName = mapJson.filter((item) => {
return item.name == e.name;
});
console.log("chooseName", chooseName[0].name);
mapname = chooseName[0].json;
// console.log(mapname, "选择地图");
mapData = [];
$('<div class="back">返回市级</div>').appendTo($("#mapTest"));
$(".back").css({
position: "absolute",
left: "17px",
top: "25px",
color: "rgb(222,222,222)",
"font-size": "15px",
cursor: "pointer",
"z-index": "100",
});
$(".back").click(function () {
mapname = xiamen;
mapData = mapDataOrigin;
$(".back").css({
position: "absolute",
left: "17px",
top: "-25px",
color: "rgb(222,222,222)",
"font-size": "15px",
cursor: "pointer",
"z-index": "100",
});
mapInit();
});
// Everytime after click, it needs to repaint.
mapInit();
});
setTimeout(function () {
mapInit();
}, 1000);
function mapInit() {
// geoJson --- map Location
// res --- map Information
// After everytime click, the mapname changes and also res.
// $.get(geoJson, (res) => {
// echarts.registerMap("xiamen", res);
self.get(mapname).then((res) => {
echarts.registerMap("xiamen", res);
// console.log("我来了mapname", mapname);
// console.log("new res", res);
self.myChart.hideLoading();
let option = {
backgroundColor: "#020933",
title: {
top: 20,
text: "“困难人数” - 厦门市",
subtext: "",
x: "center",
textStyle: {
color: "#2ab8ff",
},
},
visualMap: {
min: 0,
max: 1000000,
right: 100,
seriesIndex: 1,
type: "piecewise",
bottom: 100,
textStyle: {
color: "#FFF",
},
splitList: [
{
gt: 50000,
color: "#F5222D",
label: "困难人数大于5万人",
}, //大于5万人
{
gte: 30000,
lte: 50000,
color: "#FA541C ",
label: "困难人数3-5万人",
}, //3-5万人
{
gte: 10000,
lte: 30000,
color: "#FA8C16",
label: "困难人数1-3万人",
}, //1-3万人
{
lte: 10000,
color: "#fbe1d6",
label: "困难人数小于1万人",
},
],
},
geo: {
map: "xiamen",
aspectScale: 0.75, //长宽比
zoom: 1.1,
roam: false,
itemStyle: {
areaColor: "#013C62",
shadowColor: "#182f68",
shadowOffsetX: 0,
shadowOffsetY: 25,
},
},
emphasis: {
itemStyle: {
areaColor: "#2AB8FF",
borderWidth: 0,
color: "green",
label: {
show: false,
},
},
label: {
color: "#fff",
},
scale: true,
},
series: [
{
type: "map",
roam: true,
label: {
show: true,
color: "#fff",
},
itemStyle: {
borderColor: "#2ab8ff",
borderWidth: 1.5,
// mapArea Color
areaColor: "#12235c",
},
zoom: 1.1,
roam: false,
map: "xiamen", // registerMap need to be same
},
{
type: "effectScatter",
coordinateSystem: "geo",
showEffectOn: "render",
rippleEffect: {
period: 15,
scale: 4,
brushType: "fill",
},
itemStyle: {
textStyle: {
color: "yellow",
},
shadowBlur: 10,
shadowColor: "#333",
},
data: mapData,
},
],
};
self.myChart.setOption(option);
});
}
});
},
View Code
参考网址里的楼主用的下钻方法挺好的，mapInit函数，每次点击选择地图Json再初始化地图。包括数据点，市级和区级切换的时候涉及到装载和清空的两种情况。
我这个版本因为echarts5.1.2的缘故，改了一些Option选项，（不然每次一运行黄色的警告，难受）
加点用的这个网站坐标——geojson.io
如果直接把加点的坐标json复制过来，图会变得很奇怪，所以就用数组用的时候装进地图里。
效果如图
标签：map,标记,color,地图,geoJson,let,static,localhost 来源： https://www.cnblogs.com/lepanyou/p/15188498.html