知識(shí)和技能真的是用進(jìn)廢退，還是得多實(shí)踐，才不至于遺忘。
目錄
前言
二、實(shí)現(xiàn)原理
三、從0開(kāi)始實(shí)現(xiàn)
1.目錄結(jié)構(gòu)
2.地圖JSON數(shù)據(jù)獲取
3.具體實(shí)現(xiàn)，重頭戲
3.一些常見(jiàn)問(wèn)題的解決方法
總結(jié)
前言
本文簡(jiǎn)單來(lái)聊一聊Echarts偽3D地圖的實(shí)現(xiàn)，只分離出最底層的偽3D效果，刪除了其余的上層展示效果。Echarts這塊還有一些重要且常用的功能，比如，地圖鉆取、結(jié)合散點(diǎn)圖實(shí)現(xiàn)各種效果等，總之，可玩性很高。本文還是抽絲剝繭，只專(zhuān)注3D效果這一點(diǎn)，貪多嚼不爛，后續(xù)有機(jī)會(huì)可以進(jìn)行擴(kuò)展，或者網(wǎng)上能夠找到不少的Echarts社區(qū)的鏡像站。里面的示例良莠不齊，但仔細(xì)甄別后，有很多可取之處。
一、實(shí)現(xiàn)效果圖
先來(lái)看效果圖，如果不符合你的業(yè)務(wù)需求，也就不用再繼續(xù)浪費(fèi)你的時(shí)間了，再去找找其他效果實(shí)現(xiàn)。所有的天馬行空，一定可以用技術(shù)來(lái)實(shí)現(xiàn)，如果不能，那就是技術(shù)還有待發(fā)展。加油，期待在別的博文中有幸再見(jiàn)。
?如果需要在線運(yùn)行預(yù)覽，可以直接點(diǎn)擊：
?
二、實(shí)現(xiàn)原理
實(shí)現(xiàn)的原理：說(shuō)白了就是多圖層錯(cuò)位，輔以相應(yīng)的顏色搭配營(yíng)造出一種凸起的效果。具體的配置包括：zlevel（用于分層，數(shù)值大的在數(shù)值小的上面）、aspectScale（地圖的長(zhǎng)寬比，默認(rèn)0.75）、layoutCenter（定義地圖中心在屏幕中的位置）、layoutSize（定義地圖的大?。┑?/span>
三、從0開(kāi)始實(shí)現(xiàn)
1.目錄結(jié)構(gòu)
mapdemo目錄下，包含以下四個(gè)文件：
2.地圖JSON數(shù)據(jù)獲取
DataV.GeoAtlas地理小工具系列
我為了演示方便，直接放到了js文件里了，采用變量存儲(chǔ)。開(kāi)發(fā)中應(yīng)該是放到JSON文件里進(jìn)行讀取。演示使用如下所示：
3.具體實(shí)現(xiàn)，重頭戲
頁(yè)面布局上使用了Grid布局，有興趣的同學(xué)也可以進(jìn)行了解學(xué)習(xí)一下，萬(wàn)事開(kāi)頭難，還是那句話，用進(jìn)廢退，實(shí)踐是最好的老師。如果不感興趣，也沒(méi)問(wèn)題，畢竟不是本文的主題，只是我希望我用一點(diǎn)能夠達(dá)到一個(gè)拋磚引玉的效果，激發(fā)大家的好奇心。
代碼如下（示例）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Echarts偽3D地圖</title>
<script src="./echarts.min.js"></script>
<script src="./map-shandong.js"></script>
<script src="./map-shanxi.js"></script>
<style>
* {
margin: 0;
}
.map-panel {
position: relative;
box-sizing: border-box;
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 55px auto;
grid-template-areas:
"header header"
"left right";
gap: 10px;
padding: 10px;
}
.title {
grid-area: header;
display: grid;
justify-items: center;
align-items: center;
font-size: 28px;
font-weight: bold;
}
.shandong-map {
grid-area: left;
border: 1px solid #007acc;
border-radius: 5px;
}
.shanxi-map {
grid-area: right;
border: 1px solid #007acc;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="map-panel">
<div class="title">Echarts偽3D地圖</div>
<div id="shandong-map" class="shandong-map"></div>
<div id="shanxi-map" class="shanxi-map"></div>
</div>
</body>
<script>
window.onload = () => {
initMap("shandong", mapJsonDataShanDong, "shandong-map");
initMap("shanxi", mapJsonDataShanXi, "shanxi-map");
};
function initMap(mapName, mapJsonData, domId) {
echarts.registerMap(mapName, mapJsonData);
let option = {
tooltip: {
show: false,
},
geo: [
{
show: true,
map: mapName,
zoom: 1,
roam: false,
regions: [],
zlevel: 5,
aspectScale: 0.85,
layoutCenter: ["50%", "50%"],
layoutSize: "90%",
itemStyle: {
areaColor: "transparent",
},
},
{
show: true,
map: mapName,
zoom: 1,
roam: false,
zlevel: 4,
layoutCenter: ["50.5%", "50.5%"],
layoutSize: "90%",
aspectScale: 0.85,
itemStyle: {
borderWidth: 1,
borderColor: "rgba(22, 186, 212,0.8)",
shadowColor: "rgba(80, 183, 140,0.5)",
shadowOffsetY: 5,
shadowBlur: 15,
areaColor: "rgba(5,21,35,0.1)",
},
silent: true,
},
{
show: true,
map: mapName,
zoom: 1,
roam: false,
zlevel: 3,
layoutCenter: ["51%", "51%"],
layoutSize: "90%",
aspectScale: 0.85,
itemStyle: {
borderWidth: 1,
borderColor: "rgba(9, 170, 148,0.6)",
shadowColor: "rgb(80,183,140)",
shadowOffsetY: 5,
shadowBlur: 15,
areaColor: "transpercent",
},
silent: true,
},
{
show: true,
map: mapName,
zoom: 1,
roam: false,
zlevel: 2,
layoutCenter: ["51.5%", "51.5%"],
layoutSize: "90%",
aspectScale: 0.85,
itemStyle: {
borderWidth: 1,
borderColor: "rgba(105, 174, 253,0.4)",
shadowColor: "rgba(10, 177, 105,0.4)",
shadowOffsetY: 15,
shadowBlur: 10,
areaColor: "transpercent",
},
silent: true,
},
{
show: true,
map: mapName,
zoom: 1,
roam: false,
zlevel: 1,
layoutCenter: ["52%", "52%"],
layoutSize: "90%",
aspectScale: 0.85,
itemStyle: {
borderWidth: 5,
borderColor: "rgb(6,125,119)",
shadowColor: "rgba(10,177,105,0.3)",
shadowOffsetY: 15,
shadowBlur: 10,
areaColor: "rgba(5,21,35,0.1)",
},
silent: true,
},
],
series: [
{
type: "map",
map: mapName,
zoom: 1,
roam: false,
aspectScale: 0.85,
layoutCenter: ["50%", "50%"],
layoutSize: "90%",
selectedMode: false,
itemStyle: {
normal: {
label: {
show: true,
color: "#FF0",
fontSize: 14,
},
borderColor: "#FFFFFF",
borderWidth: 1,
areaColor: {
type: "linear",
x: 1200,
y: 0,
x2: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: "rgb(60,213,147)", // 0% 處的顏色
},
{
offset: 1,
color: "rgba(126, 207, 195,0.75)", // 50% 處的顏色
},
],
global: true, // 缺省為 false
},
},
emphasis: {
label: {
show: true,
color: "#FF0",
fontSize: 14,
},
areaColor: "rgba(18, 190, 115, 0.6)",
borderColor: "#ffdc00",
},
},
zlevel: 99,
data: [],
},
],
};
let mapChart = echarts.init(document.getElementById(domId));
mapChart.setOption(option);
window.onresize = () => {
mapChart.resize();
};
}
</script>
</html>
3.一些常見(jiàn)問(wèn)題的解決方法
echarts地圖的使用過(guò)程中，可能遇到很多效果顯示的問(wèn)題，但是不知道如何搜索問(wèn)題，總是康菲很多的時(shí)間，下面我簡(jiǎn)單的列舉一些這里面需要注意的點(diǎn)，如果恰好有你抓耳撓腮的問(wèn)題，那么我這篇文章的目的也就達(dá)到了。
? ? ? ? 1）我們不需要geo地理坐標(biāo)系圖層進(jìn)行交互，比如鼠標(biāo)滑過(guò)、點(diǎn)擊等事件，這時(shí)候我們可以采用silent:true配置，禁用交互。
? ? ? ? 2）在地圖鉆取時(shí)候，我們基本上不需要地圖點(diǎn)擊后，地圖的高亮顯示，這時(shí)候我們可以通過(guò)selectedMode: false配置，禁用掉選擇，這里面有個(gè)比較坑的地方，就是官網(wǎng)文檔說(shuō)的這個(gè)selectedMode屬性默認(rèn)是關(guān)閉的，這就容易誤導(dǎo)我們以為默認(rèn)是false，其實(shí)不然，它的意思應(yīng)該說(shuō)默認(rèn)是關(guān)閉多選。文檔原文：“選中模式，表示是否支持多個(gè)選中，默認(rèn)關(guān)閉，支持布爾值和字符串，字符串取值可選'single'表示單選，或者'multiple'表示多選?！?mark hidden color="red">文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-460559.html
總結(jié)
希望你工作是為了更好的生活，而不是為了活著。在這個(gè)過(guò)程中，如果能夠給世界留下點(diǎn)什么，那就更好了。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-460559.html
到了這里，關(guān)于簡(jiǎn)單聊聊Echarts偽3D地圖實(shí)現(xiàn)的相關(guān)配置的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
