基于大屏需要 做了一个伪3D 有下钻,和返回上一级的echars地图
准备工作:DataV.GeoAtlas地理小工具系列 从该地址上找到你要画的省,市,县
首先 html处很简单 写一个 echars图的div 加一个返回上一级的按钮就可以,此处我的返回上一级是一个img,当然用一个div ,button 都可以
<div style="height: 100%; width: 100%;" class="draggable-container" >
<img @click.stop.capture="goBacks" :src="goback" alt="" class="image">
<div class="draggable-item" ref="mapChartRef" style="height: 100%; width: 100%;"></div>
</div>
script(js)
// 获取地图 JSON 数据
// 注册: registerMap('地图名称', 地图数据), 地图名称须和option里面的map一致
echarts.registerMap(mapName, mapData);
// let mapJson = echarts.getOption().series[0].map;
// console.log(echarts.getOption(),'mapJson')
// 地图配置项
const option = {
dragZoom: true,
// 提示浮窗样式
tooltip: {
show: true,
trigger: "item",
alwaysShowContent: false,
borderWidth: 0,
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0);',
backgroundColor: "rgba(4,24,51,0)",
borderColor: 'rgba(99, 173, 222,0)',
hideDelay: 100,
triggerOn: "mousemove",
enterable: true,
textStyle: {
color: "transparent",
},
symbol: 'image://'+ icon,
showDelay: 100
},
geo: [
{
aspectScale: 0.85,
zoom: zoom.value,
top: "10%",
left: "center",
roam: false,
throttle: 0,
animationDurationUpdate: 0,
silent: true, // 设置为true不渲染小岛
z: 4, //变小,也就是被压在下面
map: mapName,
regions: [
{
name: "海南省",
value: 0,
itemStyle: {
normal: {
opacity: 0,
label: {
show: false,
},
},
},
}
],
itemStyle: {
areaColor: {
image: bgimage,
},
borderWidth: 3,
borderColor: "#8ddffc",
shadowBlur: 5,
shadowColor: "#8ddffc",
shadowOffsetX: 3,
shadowOffsetY: 3,
},
tooltip: {
show: false,
},
z: 5,
},
{
map: mapName,
layoutCenter: ["55%", "51%"], //地图位置
silent: true, // 设置为true不渲染小岛
aspectScale: 0.85,
zoom: zoom.value,
top: "9%",
left: "center",
roam: false,
throttle: 0,
animationDurationUpdate: 0,
label: {
show: false,
},
itemStyle: {
areaColor: {
image: bgimage,
},
borderWidth: 1,
borderColor: "#8ddffc",
shadowBlur: 3,
shadowColor: "#0fb9ee",
shadowOffsetX: 2,
shadowOffsetY: 3,
},
tooltip: {
show: false,
},
z: 5,
},
],
series: [
//原本的图层
{
progressiveRendering: true,
type: "map",
map: mapName, // 地图名称
aspectScale: 0.85,
silent: false, // 设置为 false 让地图在初始化时就可以被渲染
zoom: zoom.value,
top: "9%",
left: "center",
roam: false,
selectedMode: 'none', // 选择高亮显示
itemStyle: {
borderColor: "#fff",
borderWidth: 1,
areaColor: {
type: "linear",
x: 0,
y: 2500,
x2: 2500,
y2: 5,
colorStops: [
{
offset: 0,
color: "transparent", // 0% 处的颜色
// color: '#fff' // 0% 处的颜色
},
{
offset: 1,
color: "transparent", // 100% 处的颜色
// color: '#fff' // 100% 处的颜色
},
],
global: true, // 缺省为 false
},
},
emphasis: {
itemStyle: {
areaColor: 'rgba(0, 0, 0, 0)' // 设置高亮时的区域颜色为透明
},
label: {
show: false // 可选,设置鼠标移入时不显示标签
}
},
select: {},
zlevel: 1,
data: data.xFlist,
},{ //标记点图片
type: 'scatter',
coordinateSystem: "geo",
itemStyle: {
color: '#f00',
opacity: 1
},
label: {
show: true,
color: '#FFFFFF',
offset: [0, -16],
formatter: function (params) {
return params.data.name;
},
fontSize: 12
},
symbol: 'image://'+ icon,
symbolSize: [50, 50],
symbolOffset: [0, -20],
zlevel: 2,
data: data.xFlist,
animationDurationUpdate: 0, //数据更新动画的时长。
},
],
};
// 渲染
initChinaMap.value.setOption(option);
此处就是最简单的绘制echars图的一个js代码
然后,我们要写一个点击下钻(点击山东,跳进山东地图)
首先:要做一个防止多次出发click事件
initChinaMap.value.off("click");
其次:填写下钻代码,也就是获取点击处的名字,与mapList(echars官网中获取来的json数据)相同
// 下钻
initChinaMap.value.on("click", (params) => {
console.log(params)
const activeItem = mapList.value.find((item) => item.name == params.name);
// 判断有子级的时候才可以下钻
if (activeItem && activeItem.adcode && activeItem.childrenNum) {
console.log(activeItem,'click')
historyInfo.value.push(activeItem)
currentMapName.value = params.name;
setMapList(activeItem);
}
});
这样初步下钻功能就可以了,再添加上loading状态,以及其他的节流等优化代码就可以了
返回上一级:总体代码
const goBacks = () => {
let lastItem = historyInfo.value.pop();
if (lastItem && lastItem.parent && lastItem.parent.adcode) {
if (lastItem.parent.adcode == "100000") {
currentMapName.value = "china";
}
setMapList(lastItem.parent);
}else{
}
};
1:historyInfo是怎么来的,
在点击下钻的时候 会有一句:
historyInfo.value.push(activeItem)
2:由于地图的name是中国的时候 会有一些bug(我遇到的是 南海诸岛不是缩略图,需要改成china才为缩略图) 所以加了一个判断 手动改为china(不需要可以忽略)
自此下钻和返回上一级的总体代码完成
下一篇:地图的拖拽与缩放
需要源码的可以私信我哦