Echarts-实现一个下钻伪3d地图
最近在大屏可视化项目中有个展现地图的功能，要求：html
- 好看排第一
- 支持钻入钻出
- 能单独展现省份、地市，由于客户数据有的是省级，有的是市级
获得这个需求后第一个想到的就是Echarts，因此打开Echarts官方案例查看，找到一个相似的地图 demojquery
查看完整代码看到他是请求一个路径获取数据，反问了下路径看到他是一串带坐标的json数据 cdn.jsdelivr.net/gh/apache/e…git
到这一步我涉及到知识盲区了，因而百度了下geoJson，发现阿里云dataV提供一个网站能获取geoJson数据 datav.aliyun.com/tools/atlas…github
按照demo教程，尝试实现：web
1. 先布局一下并引入所需文件
<!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 map</title>
<style>
* {
margin: 0;
padding: 0;
}
.echarts-map {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: url("./background.png") no-repeat;
}
</style>
</head>
<body>
<div class="echarts-map" id="3dMap"></div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
</html>
复制代码
2. 地图渲染
let mapEcharts = null;
if (mapEcharts) {
mapEcharts.dispose(); // 销毁实例，实例销毁后没法再被使用。
}
// 初始化图表
mapEcharts = echarts.init(document.getElementById("3dMap"));
// 数据请求
// 加载效果
mapEcharts.showLoading();
$.getJSON('https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json', jsonData => {
// 注册地图
echarts.registerMap('china', jsonData);
// 配置
let options = {
series: [
{
name: "map",
type: "map", // 地图
map: 'china', // 加载注册的地图
},
],
};
mapEcharts.setOption(options); // 实例配置项与数据
// 隐藏loading
mapEcharts.hideLoading();
})
复制代码
这里能够看到，地图基本已经出来了，接下来就是美化地图，在地图上能看到海南诸岛的数据，可是实际上海南诸岛的数据已经在右下角，因此我整理了一份数据china.js放在本地，各位大佬能够在demo中自行获取。ajax
3. 美化地图
添加地图渐变颜色以及选中颜色apache
let options = {
series: [
{
name: "map",
type: "map", // 地图
map: mapName, // 加载注册的地图
selectedMode: false, // 不让单独选中
roam: true, // 开始鼠标事件，scale缩放、move移动
// 图形上的文本标签
label: {
show: true,
color: "#000a3c",
},
// 地图样式
itemStyle: {
// 区域样式
areaColor: {
type: "radial",
x: 0.5,
y: 0.5,
r: 3,
colorStops: [
{
offset: 0,
color: "rgba(223, 231, 242, 1)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(2, 99, 206, 1)", // 100% 处的颜色
},
],
globalCoord: false, // 缺省为 false
},
borderWidth: 1, // 边框大小
borderColor: "rgba(104, 152, 190, 1)", // 边框样式
shadowColor: "rgba(128, 217, 248, 1)", // 阴影颜色
shadowOffsetX: -2, // 阴影水平方向上的偏移距离
shadowOffsetY: 2, // 阴影垂直方向上的偏移距离
shadowBlur: 10, // 文字块的背景阴影长度
},
// 选中状态下样式
emphasis: {
label: {
color: "#ffffff",
},
itemStyle: {
areaColor: "#a5d4fe",
},
},
},
],
};
复制代码
4. 制做伪3d效果
let options = {
geo: {
map: mapName, //地图类型。
zoom: 1,
roam: true,
animation: false,
itemStyle: {
// 区域样式
areaColor: {
type: "radial",
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [
{
offset: 0,
color: "rgba(147, 235, 248, 1)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(2, 99, 206, 1)", // 100% 处的颜色
},
],
globalCoord: false, // 缺省为 false
},
shadowColor: "#105781", //地图区域的阴影颜色。
shadowOffsetX: 0,
shadowOffsetY: 10,
},
},
series: [
{
name: "map",
type: "map", // 地图
map: mapName, // 加载注册的地图
selectedMode: false, // 不让单独选中
roam: true, // 开始鼠标事件，scale缩放、move移动
// 图形上的文本标签
label: {
show: true,
color: "#000a3c",
},
// 地图样式
itemStyle: {
// 区域样式
areaColor: {
type: "radial",
x: 0.5,
y: 0.5,
r: 3,
colorStops: [
{
offset: 0,
color: "rgba(223, 231, 242, 1)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(2, 99, 206, 1)", // 100% 处的颜色
},
],
globalCoord: false, // 缺省为 false
},
borderWidth: 1, // 边框大小
borderColor: "rgba(104, 152, 190, 1)", // 边框样式
shadowColor: "rgba(128, 217, 248, 1)", // 阴影颜色
shadowOffsetX: -2, // 阴影水平方向上的偏移距离
shadowOffsetY: 2, // 阴影垂直方向上的偏移距离
shadowBlur: 10, // 文字块的背景阴影长度
},
// 选中状态下样式
emphasis: {
label: {
color: "#ffffff",
},
itemStyle: {
areaColor: "#a5d4fe",
},
},
},
],
};
复制代码
能够看到如今已经有一个相似3d的阴影效果json
5. 实现下钻效果
mapEcharts.on("click", (params) => {
// 当双击事件发生时，清除单击事件，仅响应双击事件
clearTimeout(timeFn);
timeFn = setTimeout(function () {
if (
allAreaCode.filter((item) => item.name.indexOf(params.name) > -1)[0]
) {
let areaCode = allAreaCode.filter(
(item) => item.name.indexOf(params.name) > -1
)[0].code;
loadMap(
`https://geo.datav.aliyun.com/areas_v3/bound/${areaCode}_full.json`
)
.then((data) => {
initMap(data, areaCode);
})
.catch(() => {
loadMap(
`https://geo.datav.aliyun.com/areas_v3/bound/${areaCode}.json`
)
.then((res) => {
initMap(res, areaCode);
})
.catch(() => {});
});
historyList.push({
code: areaCode,
name: params.name,
});
let result = [];
let obj = {};
for (let i = 0; i < historyList.length; i++) {
if (!obj[historyList[i].code]) {
result.push(historyList[i]);
obj[historyList[i].code] = true;
}
}
historyList = result;
}
}, 250);
});
复制代码
这里的loadMap为数据请求封装，initMap为渲染地图，后面在所有代码中会放出来。数组
这里主要逻辑是监听地图点击事件，经过筛选的到areaCode，经过areaCode拼接路径请求数据，这里的地址能在上面网站获取，之因此分_full和普通的是由于，地图数据有可能包含子区域数据，例如广东省内包含广州市、佛上市等......markdown
allAreaCode是我花不少时间搜集全国地区省市区code数据，这份数据可能有部分错误，懂爬虫的大佬能够直接爬上面网站的数据，处理成个人数据格式就行
地图渲染后把历史记录推动historyList中，后面钻出用到。
5. 实现钻出效果
mapEcharts.on("dblclick", (params) => {
// 当双击事件发生时，清除单击事件，仅响应双击事件
clearTimeout(timeFn);
if (historyList.length == 1) {
alert("已经到达最上一级地图了");
return;
}
let map = historyList.pop();
if (historyList[historyList.length - 1].code == "china") {
initMap(china, "china", "中国");
} else {
loadMap(
`https://geo.datav.aliyun.com/areas_v3/bound/${
historyList[historyList.length - 1].code
}_full.json`
).then((data) => {
initMap(data, historyList[historyList.length - 1].code);
}).catch(() => {
loadMap(
`https://geo.datav.aliyun.com/areas_v3/bound/${
historyList[historyList.length - 1].code
}.json`
)
.then((res) => {
initMap(res, historyList[historyList.length - 1].code);
})
.catch(() => {});
});
}
});
复制代码
这里采用双击钻出方式，双击时从历史记录中删除最后一个，而且取删除后数组的最后一个元素数据来渲染地图
6. 同步map层与geo层的鼠标事件
若是开启鼠标事件，会发现不管scale或者move，map层和geo层都是分开的，例如：
这种状况咱们能够经过事件监听来同步他们的数据
mapEcharts.on("georoam", (params) => {
let option = mapEcharts.getOption(); //得到option对象
if (params.zoom != null && params.zoom != undefined) {
//捕捉到缩放时
option.geo[0].zoom = option.series[0].zoom; //下层geo的缩放等级跟着上层的geo一块儿改变
option.geo[0].center = option.series[0].center; //下层的geo的中心位置随着上层geo一块儿改变
} else {
//捕捉到拖曳时
option.geo[0].center = option.series[0].center; //下层的geo的中心位置随着上层geo一块儿改变
}
mapEcharts.setOption(option); //设置option
});
复制代码
7. 最终代码与效果
<!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 map</title>
<style>
* {
margin: 0;
padding: 0;
}
.echarts-map {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: url("./background.png") no-repeat;
}
</style>
</head>
<body>
<div class="echarts-map" id="3dMap"></div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
<script src="./china.js"></script>
<script src="./geoAtlasJson.js"></script>
<script>
let mapEcharts = null;
let historyList = [];
let timeFn = null;
if (mapEcharts) {
mapEcharts.dispose(); // 销毁实例，实例销毁后没法再被使用。
}
// 初始化图表
mapEcharts = echarts.init(document.getElementById("3dMap"));
historyList.push({
code: "china",
name: "中国",
});
// 加载效果
mapEcharts.showLoading();
initMap(china, "china", "中国");
mapEcharts.on("click", (params) => {
// 当双击事件发生时，清除单击事件，仅响应双击事件
clearTimeout(timeFn);
timeFn = setTimeout(function () {
if (
allAreaCode.filter((item) => item.name.indexOf(params.name) > -1)[0]
) {
let areaCode = allAreaCode.filter(
(item) => item.name.indexOf(params.name) > -1
)[0].code;
loadMap(
`https://geo.datav.aliyun.com/areas_v3/bound/${areaCode}_full.json`
)
.then((data) => {
initMap(data, areaCode);
})
.catch(() => {
loadMap(
`https://geo.datav.aliyun.com/areas_v3/bound/${areaCode}.json`
)
.then((res) => {
initMap(res, areaCode);
})
.catch(() => {});
});
historyList.push({
code: areaCode,
name: params.name,
});
let result = [];
let obj = {};
for (let i = 0; i < historyList.length; i++) {
if (!obj[historyList[i].code]) {
result.push(historyList[i]);
obj[historyList[i].code] = true;
}
}
historyList = result;
}
}, 250);
});
mapEcharts.on("dblclick", (params) => {
// 当双击事件发生时，清除单击事件，仅响应双击事件
clearTimeout(timeFn);
if (historyList.length == 1) {
alert("已经到达最上一级地图了");
return;
}
let map = historyList.pop();
console.log(historyList[historyList.length - 1])
if (historyList[historyList.length - 1].code == "china") {
initMap(china, "china", "中国");
} else {
loadMap(
`https://geo.datav.aliyun.com/areas_v3/bound/${
historyList[historyList.length - 1].code
}_full.json`
)
.then((data) => {
initMap(data, historyList[historyList.length - 1].code);
})
.catch(() => {
loadMap(
`https://geo.datav.aliyun.com/areas_v3/bound/${
historyList[historyList.length - 1].code
}.json`
)
.then((res) => {
initMap(res, historyList[historyList.length - 1].code);
})
.catch(() => {});
});
}
});
mapEcharts.on("georoam", (params) => {
let option = mapEcharts.getOption(); //得到option对象
if (params.zoom != null && params.zoom != undefined) {
//捕捉到缩放时
option.geo[0].zoom = option.series[0].zoom; //下层geo的缩放等级跟着上层的geo一块儿改变
option.geo[0].center = option.series[0].center; //下层的geo的中心位置随着上层geo一块儿改变
} else {
//捕捉到拖曳时
option.geo[0].center = option.series[0].center; //下层的geo的中心位置随着上层geo一块儿改变
}
mapEcharts.setOption(option); //设置option
});
// 地图数据请求
async function loadMap(url, pathName) {
return await $.getJSON(url);
}
// 地图初始化
function initMap(mapData, mapName) {
// 注册地图
echarts.registerMap(mapName, mapData);
// 配置项
let options = {
geo: {
map: mapName, //地图类型。
zoom: 1,
roam: true,
animation: false,
itemStyle: {
// 区域样式
areaColor: {
type: "radial",
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [
{
offset: 0,
color: "rgba(147, 235, 248, 1)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(2, 99, 206, 1)", // 100% 处的颜色
},
],
globalCoord: false, // 缺省为 false
},
shadowColor: "#105781", //地图区域的阴影颜色。
shadowOffsetX: 0,
shadowOffsetY: 10,
},
},
series: [
{
name: "map",
type: "map", // 地图
map: mapName, // 加载注册的地图
selectedMode: false, // 不让单独选中
roam: true, // 开始鼠标事件，scale缩放、move移动
// 图形上的文本标签
label: {
show: true,
color: "#000a3c",
},
// 地图样式
itemStyle: {
// 区域样式
areaColor: {
type: "radial",
x: 0.5,
y: 0.5,
r: 3,
colorStops: [
{
offset: 0,
color: "rgba(223, 231, 242, 1)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(2, 99, 206, 1)", // 100% 处的颜色
},
],
globalCoord: false, // 缺省为 false
},
borderWidth: 1, // 边框大小
borderColor: "rgba(104, 152, 190, 1)", // 边框样式
shadowColor: "rgba(128, 217, 248, 1)", // 阴影颜色
shadowOffsetX: -2, // 阴影水平方向上的偏移距离
shadowOffsetY: 2, // 阴影垂直方向上的偏移距离
shadowBlur: 10, // 文字块的背景阴影长度
},
// 选中状态下样式
emphasis: {
label: {
color: "#ffffff",
},
itemStyle: {
areaColor: "#a5d4fe",
},
},
},
],
};
mapEcharts.setOption(options); // 实例配置项与数据
// 隐藏loading
mapEcharts.hideLoading();
}
</script>
</html>
复制代码
demo github地址：github.com/ljnMeow/ech…
8. 最后的话
在制做这份demo时实际上是花了挺多时间的，最开始是想经过echarts-gl直接实现一个3d地图，但经过官方文档来看echarts-gl的map3d好像不支持渐变背景，因此就直接放弃了，其次就是搜集省市区全部数据花费的时间，不得不感叹咱们大华夏是真的地大物博。
最后但愿这份教程对各位有帮助，以为ok的话麻烦留个赞👍，或者github给点star🌟也行🙏。
祝各位大佬步步高升🧨
相关文章
- 1. Echarts实现下钻地图
- 2. echarts 地图下钻
- 3. 关于echarts地图下钻。
- 4. 疫情大屏优化-ECharts 地图下钻功能实现
- 5. uni-app使用echarts--h5端--可以实现地图下钻
- 6. echarts地图使用问题，下钻
- 7. 详解vue中使用echarts地图实现上钻下钻的可视化 三级下钻 省＞市＞县
- 8. echarts实现地图
- 9. echarts 实现省市区下钻
- 10. ECharts 实现地图散点图（下）
- 更多相关文章...
- • PHP imagecharup - 垂直地画一个字符 - PHP参考手册
- • 第一个MyBatis程序 - MyBatis教程
- • ☆基于Java Instrument的Agent实现
- • Docker容器实战(七) - 容器眼光下的文件系统
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. CVPR 2020 论文大盘点-光流篇
- 2. Photoshop教程_ps中怎么载入图案？PS图案如何导入？
- 3. org.pentaho.di.core.exception.KettleDatabaseException:Error occurred while trying to connect to the
- 4. SonarQube Scanner execution execution Error --- Failed to upload report - 500: An error has occurred
- 5. idea 导入源码包
- 6. python学习 day2——基础学习
- 7. 3D将是页游市场新赛道？
- 8. osg--交互
- 9. OSG-交互
- 10. Idea、spring boot 图片(pgn显示、jpg不显示)解决方案
欢迎关注本站公众号,获取更多信息
