效果圖
regions的數(shù)據(jù)格式
以下是地圖初始化代碼、雙擊地圖和單擊高亮，方法是封裝后的，mapData 的數(shù)據(jù)格式我放在后面，均有注釋
const drawEcharts = mapData => {
//數(shù)據(jù)過多的時(shí)候，echarts渲染過慢，可以使用此方法
if (myChart.value) {
myChart.value.dispose();
}
let chartDom = centerMap.value;
myChart.value = echarts.init(chartDom);
myChart.value.clear();
myChart.value.resize();
let nameMap = "centerMap";
// 圖標(biāo)數(shù)據(jù)
// 根據(jù)傳入的type獲取不同的初始數(shù)據(jù)
mapDataList = mapData;
// 根據(jù)獲取到的區(qū)劃第一個(gè)查詢區(qū)劃的等級(jí)（地圖下轉(zhuǎn)的時(shí)候用，如果不需要可以用，這個(gè)是為了獲取區(qū)劃等級(jí)）
currentMapLevel.value = mapUtils.getRegionLevel(mapData.features[0].properties.adcode.toString());
//渲染地圖數(shù)據(jù)
echarts.registerMap(nameMap, mapData);
// mapData的數(shù)據(jù)中含有每個(gè)區(qū)對(duì)應(yīng)有多少人（如：成都市1000人）
//number和resultSac是將每個(gè)區(qū)的人數(shù)做一個(gè)排序，然后規(guī)定一個(gè)范圍，然后某個(gè)范圍只能用一種顏色
// 比如索引中0-5是顏色#d0f8ff，6-11是顏色#93d5fd以此類推
// 這兩個(gè)代碼主要是為了讓顏色能更好的劃分區(qū)域，也可以自己手動(dòng)劃分，如果手動(dòng)劃分，number和resultSac是可以不要的
// 獲取分段后數(shù)據(jù)
let number: any = mapData.features
.map(function (feature) {
return feature.properties.num ? Number(feature.properties.num) : 0;
})
.sort(function (a, b) {
return a - b;
});
// mapUtils.sacdata是封裝的方法，可以不需要
let resultSac = mapUtils.sacdata(number, 5);
// 地圖模塊顏色劃分（這是主要的顏色劃分）regions 的數(shù)據(jù)格式放在上面的，可以對(duì)照查看，手動(dòng)的我放在下面了
let regions = mapData.features.map(function (feature) {
let colorArr = ["#d0f8ff", "#93d5fd", "#5eaedd", "#3787b7", "#0e6598"];
let colorNum = 0;
for (let index = 0; index < resultSac.length; index++) {
if (feature.properties.num <= resultSac[index]) {
colorNum = index;
break;
}
}
return {
name: feature.properties.name,
value: feature.properties.adcode,
num: feature.properties.num,
itemStyle: { color: colorArr[colorNum] }
};
});
// console.log(regions, "regions");
// 地圖配置
let optionMap = {
geo3D: {
//加載geo3D
map: nameMap,
// 設(shè)置3D視角的位置和朝向
viewControl: {
distance: 130, // 相機(jī)距離物體的距離
alpha: 70, // 三維場(chǎng)景水平方向的旋轉(zhuǎn)角度
beta: 30 // 三維場(chǎng)景垂直方向的旋轉(zhuǎn)角度
},
// 文字
label: {
show: false,
fontSize: 13,
fontWeight: 600,
opacity: 1,
textStyle: {
backgroundColor: "transparent", // 設(shè)置 label 背景透明
color: "#ffffff", // 設(shè)置 label 文字顏色
fontFamily: "YSBTH"
}
},
itemStyle: {
color: "#5ca3f9", //將geo3d數(shù)據(jù)設(shè)置為透明
opacity: 1, //透明
borderColor: "#62def5",
borderWidth: 1,
areaColor: "rgba(37,157,255,0.2)"
},
// 類似于hover
emphasis: {
label: {
show: false
}
},
zlevel: 2
},
series: [
{
type: "map3D", //加載series數(shù)據(jù)
map: nameMap,
// 外邊界顏色
itemStyle: {
color: "rgba(1, 16, 31, 0)",
opacity: 1,
borderColor: "#75f3f8",
borderWidth: 1,
shadowColor: "#3ffeff",
shadowOffsetY: 15,
shadowBlur: 8,
areaColor: "rgba(5,21,35.0.1)"
},
label: {
show: true,
fontSize: 13,
fontWeight: 600,
opacity: 1,
textStyle: {
backgroundColor: "transparent", // 設(shè)置 label 背景透明
color: "#ffffff", // 設(shè)置 label 文字顏色
fontFamily: "YSBTH"
}
},
// 設(shè)置3D視角的位置和朝向
viewControl: {
distance: 130, // 相機(jī)距離物體的距離
alpha: 70, // 三維場(chǎng)景水平方向的旋轉(zhuǎn)角度
beta: 30 // 三維場(chǎng)景垂直方向的旋轉(zhuǎn)角度
},
// 類似于hover，雙擊地圖的區(qū)塊或者點(diǎn)擊，就是通過這個(gè)傳遞的值
emphasis: {
label: {
formatter: function (params) {
highlightObj.value = params;
return params.name;
},
show: true,
fontSize: 13,
fontWeight: 600,
opacity: 1,
textStyle: {
backgroundColor: "transparent", // 設(shè)置 label 背景透明
color: "#fff", // 設(shè)置 label 文字顏色
fontFamily: "YSBTH"
}
},
itemStyle: {
color: "#15ffff",
opacity: 1,
borderColor: "#62def5",
borderWidth: 5
}
},
// shading: 'color',
zlevel: 3,
// 數(shù)據(jù)
data: regions,
large: true
}
]
};
myChart.value.clear();
// myChart.value.resize();
myChart.value.setOption(optionMap);
// 雙擊下鉆
myChart.value.getZr().on("dblclick", async res => {
res.event.stopPropagation();
// 因?yàn)槲沂歉競(jìng)髯臃庋b的組件，會(huì)涉及到有些地方是不允許下轉(zhuǎn)的，這個(gè)值就是父?jìng)鬟f過來(lái)是否允許下轉(zhuǎn)的
if (!propsList.allow) return;
// 這兒是接收emphasis.label的信息，在這兒我就不貼出數(shù)據(jù)格式了，可以自己打印看看
let params = highlightObj.value;
// 這兒是獲取你點(diǎn)擊的那個(gè)區(qū)的信息
let curData = mapData.features[params.dataIndex];
// 如果是村一級(jí)不下鉆（這是項(xiàng)目要求，如果沒有這個(gè)要求，可以刪除）
if (currentMapLevel.value == 6) {
return;
}
// 獲取這個(gè)點(diǎn)擊地方的區(qū)劃號(hào)，因?yàn)槲覀兒蠖艘蟮氖亲址?，所以我轉(zhuǎn)了一下格式
let code = curData.properties.adcode.toString();
// 這兒是我根據(jù)后端需求，返回上一級(jí)需要區(qū)劃號(hào)，所以我把我下轉(zhuǎn)的區(qū)劃號(hào)存在一個(gè)數(shù)組里
runInHole.value.push(code);
// 層級(jí)（省的層級(jí)對(duì)應(yīng)2；市=>3;區(qū)=>4以此類推）
let level = currentMapLevel.value;
level++;
// 這是發(fā)送請(qǐng)求，請(qǐng)求獲取地圖信息，可以在這里獲取到了新的地圖信息后重新渲染地圖，調(diào)用封裝的方法drawEcharts
// 因?yàn)橄到y(tǒng)響應(yīng)時(shí)長(zhǎng)的問題，我是通過其他地方調(diào)用的，就不在這兒展示了
await getMapData(1, 99, [code], level);
// 這個(gè)是子傳父，可以不要
emit("getRegionList", {
level: level,
regions: mapList,
curData
});
// 定義單擊高亮的地圖
let colorActive = ref({
num: -1,
color: null
});
// 單擊高亮
myChart.value.getZr().on("click", () => {
click_type = false;
let params = highlightObj.value;
// 層級(jí)
let level = currentMapLevel.value;
level++;
setTimeout(() => {
if (click_type != false) return;
highlightName.value = params.name;
let option = myChart.value.getOption();
let list = option.geo3D[0].regions;
if (list.length == 1) return;
//找到選中的地圖，并設(shè)置高亮
let result = list.find(el => el.name === params.name);
// 所在位置索引
let resultIndex = list.findIndex(el => el.name === highlightName.value);
// 將之前的高亮過區(qū)域換成原本的顏色
if (colorActive.value.num >= 0) {
option.series[0].data[colorActive.value.num].itemStyle = {
color: colorActive.value.color
};
}
// 存儲(chǔ)點(diǎn)擊區(qū)域的索引和原本的顏色
colorActive.value.num = resultIndex;
colorActive.value.color = option.series[0].data[resultIndex].itemStyle.color;
if (resultIndex != -1) {
highlightIndex.value = resultIndex;
}
// 設(shè)置高亮-以及高亮字體大小
if (result) {
option.series[0].data[resultIndex].itemStyle = {
color: "#15eaff"
};
option.series[0].label.textStyle.fontSize = 13;
if (myChart.value) {
myChart.value.clear();
}
myChart.value.setOption(option);
}
}, 500);
});
};
這個(gè)是手動(dòng)區(qū)分，就看綠色框框的，feature.properties.num就是各個(gè)區(qū)人數(shù)
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-827280.html
mapData 的數(shù)據(jù)格式
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-827280.html
到了這里，關(guān)于echarts-gl的type為map3D修改不同區(qū)域的顏色和點(diǎn)擊事件的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
