解决echarts4+如果直接使用天地图下载的geojson会导致坐标和其他信息不全
解决方法是使用python脚本来补全其他信息：center，level，adcode等内容
前提是必须有一个之前使用的json文件（需要全一点的数据供echarts使用）
公司是因为可能用之前的旧版本的地图数据可能会导致侵权或者是没显示重要内容，天地图里面的地图绝对是很正确的（国内地图）
天地图下载网址：https://cloudcenter.tianditu.gov.cn/administrativeDivision/
python脚本：
import json
import json
def load_json(file_path):
with open(file_path, 'r', encoding='utf-8') as f:
return json.load(f)
def save_json(data, file_path):
with open(file_path, 'w', encoding='utf-8') as f:
json.dump(data, f, ensure_ascii=False, indent=4)
def merge_properties(geojson, json_data):
# 建立name到feature的索引，json_data中的名称较短
name_to_feature = {feature['properties']['name']: feature for feature in json_data['features']}
for geo_feature in geojson['features']:
geo_name = geo_feature['properties']['name']
for name, json_feature in name_to_feature.items():
if name in geo_name:
# 更新geojson中的properties，排除geometry字段
geo_properties = geo_feature['properties']
json_properties = json_feature['properties']
# 打印调试信息
print(f"Updating properties for {geo_name}")
# 仅更新properties字段
for key, value in json_properties.items():
geo_properties[key] = value
break
def main(geojson_path, json_path, output_path):
geojson_data = load_json(geojson_path)
json_data = load_json(json_path)
merge_properties(geojson_data, json_data)
save_json(geojson_data, output_path)
# 输入文件路径
geojson_path = 'china5.geojson'
#json_path = 'China4.json'
json_path = 'chinabak.json'
output_path = 'xczxMap.json'
main(geojson_path, json_path, output_path)
实现方案
china5.geojson（下载的天地图）中的北京是
{
"geometry": {
"type": "MultiPolygon",
"coordinates": [地图中的坐标]
},
"type": "Feature",
"properties": { "name": "北京市", "gb": "156410000" }
}
China4.json（原来使用的echarts的地图）中的北京是
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"adcode": 110000,
"name": "北京",
"center": [116.405285, 39.904989],
"centroid": [116.41995, 40.18994],
"childrenNum": 16,
"level": "province",
"parent": { "adcode": 100000 },
"subFeatureIndex": 0,
"acroutes": [100000]
},
"geometry": {
"type": "MultiPolygon",
"coordinates": []
}
- 读取China4.json和china5.geojson文件。
- 遍历China4.json中的每个feature，并检查china5.geojson中是否存在对应的name。
- 如果存在，则将China4.json中feature的properties补充到china5.geojson的对应feature中。
- 保存修改后的china5.geojson文件。
- 过滤掉coordinates中的信息，不替换天地图中的坐标
- name会保存为之前的echarts的名称（缩写）
python目录
前端调用地图代码
地图调用
function loadChinaMap() {
$.getJSON(
//china5.geojson
'@/../static/plugins/chinese-map/static/map/updated_china5.geojson',
function(geoJson) {
//获取当前地图数据值
api.接口().then((res) => {
let data = res.data ? res.data.data : [];
let unitName = res.data ? res.data.unitName : ''; //单位
let date = res.data ? res.data.date : ''; //日期
_this.maps.bigNum = 0;
for (let i = 0; i < d.length; i++) {
d[i].value > _this.maps.bigNum
? (_this.maps.bigNum = d[i].value)
: ''; //获取最大值
}
console.log(d);
mapdata = data ;
//注册地图
echarts.registerMap('china', geoJson);
//绘制地图
renderMap('china', data, unitName, date);
});
}
);
}
地图渲染
<div class="m1_echarts1" id="m1_echarts1"></div>设置地图
import echarts from '@/../static/plugins/echarts/echarts.js';
function renderMap(map, data, unitName, date) {
let chart = echarts.init(document.getElementById('m1_echarts1'));
option.visualMap.max = _this.maps.bigNum + 5;
option.title.subtext = map;
option.tooltip.formatter = date（这个是日期） + '： {c}' + unitName（这个是单位）;
option.series = [
{
name: map,
type: 'map',
mapType: map,
roam: true,
zoom: 2.7,
center: [104.46, 35.92],
nameMap: {
china: '中国',
},
label: {
normal: {
show: true,
textStyle: {
// color:'#EFF7FF',
color: '#000',
fontSize: 13,
},
},
emphasis: {
show: true,
textStyle: {
color: '#640000',
fontSize: 13,
},
},
},
itemStyle: {
normal: {
// borderColor: 'rgba(147, 235, 248, 1)',
borderColor: '#9c978b',
borderWidth: 1,
areaColor: {
type: 'radial',
x: 0.2,
y: 0.2,
r: 0.9,
colorStops: [
{
offset: 0,
color: 'rgba(255, 255, 255, 0)', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(255, 255, 255, .1)', // 100% 处的颜色
},
],
globalCoord: false, // 缺省为 false
},
},
emphasis: {
areaColor: '#ffdf33',
borderWidth: 0,
},
},
data: data,
},
];
//初始化绘制全国地图配置
var option = {
title: {
show: false,
text: '',
subtext: '',
left: 'center',
textStyle: {
color: '#121212',
fontSize: 16,
fontWeight: 'normal',
fontFamily: 'Source Han Sans CN',
},
subtextStyle: {
color: '#121212',
fontSize: 13,
fontWeight: 'normal',
fontFamily: 'Source Han Sans CN',
},
},
grid: {
//设置canvas内部表格的内距
x: 50,
y: 50,
x2: 50,
y2: 0,
borderWidth: 10,
},
tooltip: {
show: true,
trigger: 'item',
formatter: '{b}： {c}家',
},
toolbox: {
show: false,
orient: 'vertical',
left: 'right',
top: 'top',
iconStyle: {
normal: {
color: '#fff',
},
},
feature: {
mark: {
// '辅助线开关'
show: true,
},
saveAsImage: {
//保存为图片。
show: true, //是否显示该工具。
type: 'png', //保存的图片格式。支持 'png' 和 'jpeg'。
name: 'pic1', //保存的文件名称，默认使用 title.text 作为名称
backgroundColor: '#ffffff', //保存的图片背景色，默认使用 backgroundColor，如果backgroundColor不存在的话会取白色
title: '中国地图',
pixelRatio: 1, //保存图片的分辨率比例，默认跟容器相同大小，如果需要保存更高分辨率的，可以设置为大于 1 的值，例如 2
},
// dataView: {readOnly: false},
},
},
animationDuration: 1000,
animationEasing: 'cubicOut',
animationDurationUpdate: 1000,
visualMap: {
min: 0,
max: 150,
right: '0',
bottom: '2px',
text: ['高', '低'],
calculable: true,
inRange: {
color: ['#ebdecb', '#8aa87d', '#7d97a8'],
},
show: true,
textStyle: {
color: ['#DCE5F5'],
},
},
};
//渲染地图
chart.setOption(option, true);
//地图点击事件
chart.off('click');
chart.on('click', function(params) {
});
}
数据格式：
最终样式：
