立体地图下钻改进版
添加了markPoint坐标点位
第一版文章 地图下钻，双击返回
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>河南立体地图下钻title>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.2.1/echarts.min.js">script>
<script src="./静态资源/Lodash4.17.21.min.js">script>
<script src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js">script>
head>
<body>
<div class="HNmap">
<div id="HNmain" style="width: 920px;height: 600px;">div>
div>
<script>
//各省份的数据
var allData = [
{
name: 'AA地点',
coord: ['112.23', '34.66'], // 替换为实际的经纬度
adcode: '410300'//对应市的adcode码，用于将坐标点显示在该区域内
},
{
name: 'BB地点',
coord: ['111.51', '33.72'],
adcode: '410300'
},
{
name: 'CC地点',
coord: ['114.285', '35.7665'],
adcode: '410600'
},
{
name: 'DD地点',
coord: ['112.516344', '32.812'],
adcode: '411300'
},
{
name: 'EE地点',
coord: ['115.7543', '34.436'],
adcode: '411400'
},
{
name: 'FF地点',
coord: ['115.43248', '34.6474'],
adcode: '411400'
},
{
name: '3BGS地点',
coord: ['112.436', '33.1621'],
adcode: '411300'
},
{
name: 'BRB地点',
coord: ['113.9875', '32.8694'],
adcode: '411700'
},
{
name: 'BTBSR地点',
coord: ['113.45145', '33.5112'],
adcode: '410400'
},
{
name: '瞎掰的地点',
coord: ['113.17078', '33.7822'],
adcode: '410400'
},
{
name: 'SRN地点',
coord: ['114.583', '36.090'],
adcode: '410500'
},
];
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('HNmain'));
for (var i = 0; i < allData.length; i++) {
allData[i].value = Math.round(Math.random() * 100);
}
var allmapdata = [];//每点击一次，都将获取的地图level、name和mapcode储存在数组中
var bigArray = [];//保存所有点击过的区域显示的地图，不重复的数组
var timeFn = null;
var click_history_path_Arry = [];//点击的历史记录
click_history_path_Arry.push({//初始历史记录
type: 'FeatureCollection',
level: 'country',
name: '中国',
adcode: 'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=100000_full'
})
localStorage.setItem('click_history_path_Arry', JSON.stringify(click_history_path_Arry))
console.log('初始历史记录：', click_history_path_Arry);
loadMap('https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=100000_full', '中国'); //初始化地图
/**
获取对应的json地图数据，然后向echarts注册该区域的地图，最后加载地图信息
@params {String} mapCode:json数据的地址
@params {String} name: 地图名称
*/
function loadMap(mapCode, name) {
$.get(mapCode, function (data) {
console.log(mapCode, data)
var detail_data = []
// 从中国地图数据中获取每个省份的名字
data.features.forEach(item => {
//console.log(item.type, item.properties.level, item.properties.name, item.properties.adcode);
if (item.properties.level == 'province') {
detail_data.push({
type: item.type,
level: item.properties.level,
name: item.properties.name,
adcode: 'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=' + item.properties.adcode + '_full'
})
} else if (item.properties.name == '济源市') {
detail_data.push({
type: item.type,
level: item.properties.level,
name: item.properties.name,
adcode: 'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=' + item.properties.adcode
})
} else if (item.properties.level == 'city') {
detail_data.push({
type: item.type,
level: item.properties.level,
name: item.properties.name,
adcode: 'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=' + item.properties.adcode + '_full'
})
} else if (item.properties.level == 'district') {
detail_data.push({
type: item.type,
level: item.properties.level,
name: item.properties.name,
adcode: 'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=' + item.properties.adcode
})
}
});
allmapdata.push(...detail_data)//将点击后显示的区域都追加到allmapdata数组
bigArray = _.uniqWith(allmapdata, _.isEqual);//利用loadsh进行数组去重
// 将 bigArray 转换为字符串，并保存到 localStorage
localStorage.setItem('bigArray', JSON.stringify(bigArray));
if (data) {
echarts.registerMap(name, data);
// console.log(name, data)
// 根据当前地图的adcode过滤坐标点
var filteredData = allData.filter(function (item) {
// 假设当前地图的adcode可以从mapCode中提取或者通过其他方式获得
// 例如，可以从bigArray中找到匹配的adcode
const currentAdcode = mapCode.split('?code=')[1].split('_')[0];
return item.adcode === currentAdcode;
});
var option = {
tooltip: {
show: true,
textStyle: {
color: '#ffffff',//文字的颜色。
fontStyle: 'normal',//文字字体的风格。
fontWeight: 'bolder',
fontSize: 16,
textBorderWidth: 4,
textBorderType: 'solid',
},
formatter: function (params) {
if (params.data) return params.name //+ '：' + params.data['value']
},
},
//roam: true, // 是否开启鼠标缩放和平移漫游
series: [
{
name: 'MAP',
type: 'map',
mapType: name,
selectedMode: 'false',
layoutCenter: ["50%", "50%"],
layoutSize: "120%",
aspectScale: 1, //宽高比,可以通过调整宽高比达到地图倾斜效果
zoom: 1,
label: {
normal: {
show: true,
color: '#209F84',
fontSize:14,
},
emphasis: {
show: true,
}
},
// data: allData,
itemStyle: {
//areaColor:'#209F84',//地图颜色
areaColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#2975a9' // 0% 处的颜色
}, {
offset: 1, color: '#012d62' // 100% 处的颜色
}],
global: false // 缺省为 false
},
borderColor: '#05b6f6',//边界颜色
borderWidth: 1,//边界线宽
borderType: 'solid',//边界类型
shadowColor: 'rgba(58,90,122,0.8)',//阴影颜色
shadowOffsetX: 6,//阴影水平方向上的偏移距离
shadowOffsetY: 4,//阴影垂直方向上的偏移距离
opacity: 0.3,//图形透明度
},
emphasis:{
itemStyle:{
areaColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#05f6c2' // 0% 处的颜色
}, {
offset: 1, color: '#059df5' // 100% 处的颜色
}],
global: false // 缺省为 false
},
},
},
//坐标点
markPoint: {
symbolSize: 12, // 标注点的大小
silent: false,//图形是否不响应和触发鼠标事件
label: {
normal: {
show: true,
formatter: '{b}', // 显示标注点的名称
position: 'right', // 标签的位置
},
},
itemStyle: {
color: '#9ed9e3',//图形和文字的颜色
borderColor: '#04c1fa',//图形的描边颜色
shadowBlur: 10,//图形阴影的模糊大小
},
data: filteredData
},
}
]
};
myChart.setOption(option);
} else {
alert('json数据不存在，无法加载该地图');
}
});
}
// 查询函数，通过name属性，查找adcode
function findAdcodeByName(name, data) {
for (let i = 0; i < data.length; i++) {
if (data[i].name === name) {
return data[i].adcode;
}
}
return null; // 如果没有找到，返回null或你想要的任何默认值
}
// 查询函数，通过name属性，查找level
function findLevelByName(name, data) {
for (let i = 0; i < data.length; i++) {
if (data[i].name === name) {
return data[i].level;
}
}
return null; // 如果没有找到，返回null或你想要的任何默认值
}
myChart.on('click', function (params) {
clearTimeout(timeFn);
//由于单击事件和双击事件冲突，故单击的响应事件延迟250毫秒执行
console.log(params);
timeFn = setTimeout(function () {
var name = params.name; //获取单击时区域的名字
const mapCode = findAdcodeByName(name, JSON.parse(localStorage.getItem('bigArray')));//通过name在全量数据中查找mapcode路径
const level = findLevelByName(name, JSON.parse(localStorage.getItem('bigArray')));//通过name在全量数据中查找mapcode路径
localStorage.setItem('danji_name', name)//将单击时的区域名字存储本地
localStorage.setItem('danji_mapcode', mapCode)//将单击时的区域json数据请求网址存储本地
localStorage.setItem('danji_level', level)//将单击时的区域的级别存储本地
var get_name = localStorage.getItem('danji_name')
var get_mapcode = localStorage.getItem('danji_mapcode')
var get_level = localStorage.getItem('danji_level')
console.log("单击区域名字:", get_name, '单击区域级别', get_level, "单击区域mapcode网址:", get_mapcode,);
// 处理点击坐标点时，不让添加历史路径
if (params.componentType === 'markPoint') {
var markPointName = params.name; // 获取 markPoint 的名字
console.log('点击的变电站名字:', markPointName);
alert(markPointName)
return
}
// 处理点击区县时，不让添加历史路径---如果需要下钻到地市的话这行代码可以删除
if (get_level === 'district') {
return
}
// 当点击的时候将点击区域的名字和mapcode推进历史记录数组
setTimeout(function () {
click_history_path_Arry = JSON.parse(localStorage.getItem('click_history_path_Arry'));
click_history_path_Arry.push({
name: get_name,
adcode: get_mapcode
})
click_history_path_Arry = _.uniqWith(click_history_path_Arry, _.isEqual);//利用loadsh进行数组去重
localStorage.setItem('click_history_path_Arry', JSON.stringify(click_history_path_Arry));
}, 200)
if (!mapCode) {
alert('无此区域地图显示！！！');
return;
}
if (loadMap) {
loadMap(mapCode, name);
}
}, 250);
});
// 绑定双击事件，返回全国地图
myChart.on('dblclick', function (params) {
//当双击事件发生时，清除单击事件，仅响应双击事件
clearTimeout(timeFn);
// 对历史路径中的元素进行去重
var get_click_history_path_Arry = _.uniqWith(JSON.parse(localStorage.getItem('click_history_path_Arry')), _.isEqual)
// 检查数组是否非空
if (get_click_history_path_Arry.length > 1) {
// 获取倒数第二个元素的索引（因为JavaScript的索引是从0开始的）
const lastIndex = get_click_history_path_Arry.length - 2;
// 访问该索引的name和adcode
const his_name = get_click_history_path_Arry[lastIndex].name;
const his_adcode = get_click_history_path_Arry[lastIndex].adcode;
loadMap(his_adcode, his_name);
const newAreas = get_click_history_path_Arry.slice(0, get_click_history_path_Arry.length - 1);
localStorage.setItem('click_history_path_Arry', JSON.stringify(newAreas))//将删除后的数组覆盖掉本地原有的数组
} else {
alert('暂无历史记录.');
}
});
script>
body>
html>