如何在 ECharts 百度地图 中只显示中国地图？-灵析社区
东三环`echarts` 中引用百度地图（非`geojson`地图）显示散点图等，想问下能不能只显示中国境内，不显示国外区域地图。
周舟莫UI设计可以去先去阿里dataV下载
我们需要的数据就是一个对象，我们需要使用他们提供的接口或者把这个对象下载到本地。
比如合肥
合肥地图
*{ margin: 0; padding: 0;}
body{ background: linear-gradient(45deg , #001B4B , #006FCA , #006FCA , #003783);}
var listKey = {
'合肥市':{
json:'https://geo.datav.aliyun.com/areas_v3/bound/340100_full.json',
},
'瑶海区':{
json:'https://geo.datav.aliyun.com/areas_v3/bound/340102.json',
points:[{name: '瑶海区111',value: [117.313076,31.866118]},]
},
'庐阳区':{
json:'https://geo.datav.aliyun.com/areas_v3/bound/340103.json',
points:[{name: '庐阳区111',value: [117.261397,31.889056]},{name: '庐阳区222',value: [117.269733,31.881452]},]
},
'蜀山区':{
json:'https://geo.datav.aliyun.com/areas_v3/bound/340104.json',
points:[{name: '蜀山区111',value: [117.157229,31.872589]},{name: '蜀山区222',value: [117.173902,31.848054]},]
},
'包河区':{
json:'https://geo.datav.aliyun.com/areas_v3/bound/340111.json',
points:[{name: '包河区111',value: [117.298183,31.81746]},{name: '包河区222',value: [117.407992,31.761968]},]
},
'长丰县':{
json:'https://geo.datav.aliyun.com/areas_v3/bound/340121.json',
points:[{name: '长丰县111',value: [117.168961,32.490058]},]
},
'肥东县':{
json:'https://geo.datav.aliyun.com/areas_v3/bound/340122.json',
points:[{name: '肥东县111',value: [117.473675,31.899776]},{name: '肥东县222',value: [117.473675,31.890456]},]
},
'肥西县':{
json:'https://geo.datav.aliyun.com/areas_v3/bound/340123.json',
points:[{name: '肥西县111',value: [117.09212,31.763079]},{name: '肥西县222',value: [117.051876,31.718367]},]
},
'庐江县':{
json:'https://geo.datav.aliyun.com/areas_v3/bound/340124.json',
points:[{name: '庐江县111',value: [117.293574,31.273179]},{name: '庐江县222',value: [117.304497,31.224772]},]
},
'巢湖市':{
json:'https://geo.datav.aliyun.com/areas_v3/bound/340181.json',
points:[{name: '巢湖市111',value: [117.802437,31.639333]},{name: '巢湖市222',value: [117.897298,31.62064]},]
},
}
var keyName = '合肥市';
function setMap(){
// $.get('//geo.datav.aliyun.com/areas_v3/bound/340100_full.json', function (geoJson) {
$.get(listKey[keyName].json, function (geoJson) {
myChart.hideLoading();
echarts.registerMap('HF', geoJson);
myChart.setOption(
(option = {
title: {
show: true, //显示标题
// left: 'left', //显示在横向位置
// top: 'top', //显示在竖向位置
textStyle:{
color:'#ffffff'
},
text: '合肥地图',
subtext: 'ECharts 快速上手', //点击 跳转链接（sublink）
sublink:'https://echarts.apache.org/handbook/zh/get-started/',
subtextStyle:{
color:'#fff'
},
},
tooltip: {
trigger: 'item',
formatter: '{b}{c}（单位）'
},
toolbox: {
show: true, // 显示菜单
orient: 'vertical',
// left: 'right', //显示在横向位置
// top: 'top', //显示在竖向位置
iconStyle:{
borderColor:'#fff'
},
feature: {
dataView: { readOnly: false }, //数据视图
restore: {}, //刷新重置
saveAsImage: {}, //保存为图片
}
},
visualMap: {
show: true, //显示数据区间查看器
min: 10,
max: 600,
text: ['High', 'Low'],
// left: 'left', //显示在横向位置
// top: 'bottom', //显示在竖向位置
textStyle:{
color:'#ffffff'
},
realtime: false,
calculable: true,
inRange: {
// 地图渲染色值（根据data中value数据区间展示对应渐变过度色值，值越小展示越靠前的色值）
// color: ['#B0E1FF', '#63C1FD' , '#3CADF4'],
color: ['lightskyblue', 'yellow', 'orangered'],
}
},
series: [
{
name: '合肥地图',
type: 'map',
map: 'HF',
label: {
show: true
},
data: [
{ name: '瑶海区', value: 10 }, //{b} : name {c} : value
{ name: '庐阳区', value: 50 },
{ name: '蜀山区', value: 100 },
{ name: '包河区', value: 150 },
{ name: '长丰县', value: 300 },
{ name: '肥东县', value: 400 },
{ name: '肥西县', value: 500 },
{ name: '庐江县', value: 600 },
{ name: '巢湖市', value: 70 },
],
// 自定义名称映射（地图JSON中name是英文的展示处理）
nameMap: {
'yaohai': '瑶海区',
// ...
}
},
// 写入经纬度标注点所需
{
name: '',
type: 'scatter',
coordinateSystem: 'geo',
color: ['#000'],
tooltip: {
position: "right",
color: "#000",
formatter(d) {
// console.log(d)
return `【${d.data.name}】`;
},
},
itemStyle: {
color: '#ddb926',
normal: {
areaColor: '#8abcd1',
borderColor: '#fff',
borderWidth: 1,
},
emphasis: {
areaColor: '#fff',
borderColor: '#ff0000',
borderWidth: 0.5,
}
},
// 经纬度数据
data: keyName == '合肥市' ? [].concat(listKey['瑶海区'].points,listKey['庐阳区'].points,listKey['蜀山区'].points,listKey['包河区'].points,listKey['长丰县'].points,listKey['肥东县'].points,listKey['肥西县'].points,listKey['庐江县'].points,listKey['巢湖市'].points) : listKey[keyName].points,
}
],
// 写入经纬度标注点所需
geo: {
show: true,
map: 'HF',
type: 'map',
// mapType: 'anhui',
roam: false,
// label: {
// normal: {
// // 显示省份标签
// show: false,
// textStyle: {
// color: '#fff',
// fontSize: 10
// }
// },
// emphasis: {
// // 对应的鼠标悬浮效果
// show: true,
// // 选中后的字体样式
// textStyle: {
// color: '#000',
// fontSize: 14
// }
// }
// },
// itemStyle: {
// color: '#ddb926',
// normal: {
// areaColor: '#8abcd1',
// borderColor: '#fff',
// borderWidth: 1
// },
// emphasis: {
// borderWidth: 0.5,
// borderColor: '#8abcd1',
// areaColor: '#fff'
// }
// },
// emphasis: {
// label: {
// show: false
// }
// }
}
})
);
});
}
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
myChart.showLoading();
setMap();
option && myChart.setOption(option);
window.addEventListener('resize', myChart.resize);
myChart.on('click', function (param) {
console.log(param)
console.log(param.name)
if(!listKey[param.name]){
return;
}
if(keyName == param.name){
keyName = '合肥市';
}else{
keyName = param.name;
}
setMap();
})