文末有相关资源
这两天公司要求做一个地图展示要求每个省份根据用户量多少展示不同的颜色,且给每个市级单位加标注,于是乎研究了一下,找了好多平台(高德,百度,简数科技等)发现还是echarts好用.
但是有一个小问题就是echarts官方提示他们的地图json测绘不符合中国官方标准不提供下载,实际上包里面包含了且可以使用.(小心驶得万年船)
1.先去阿里官方下载中国地图的json文件
https://geo.datav.aliyun.com/areas_v2/bound/100000_full.json(已失效)
2.下载完后在echarts中的china.js直接替换发现可以使用啥事都没有,但是其实是有一个隐藏的坑,要注意一下就是json中各省市的命名要和代码里面的命名相同不同的话好多的操作时不能进行的
3.然后接着往下看发现阿里的json数据字段名称和echarts不同
4.自己拼字段生成一份json文件!
// 这个json是阿里的
import json from '../assets/china.json'
export default {
methods: {
disposeJson () {
let allData = {}
allData['type'] = 'FeatureCollection'
let alifeatures = json['features']
let features = []
for (let index = 0; index < alifeatures.length; index++) {
let alifeature = alifeatures[index];
let feature = {}
feature['type'] = 'Feature'
let id = alifeature['properties']['adcode']
let cp = alifeature['properties']['center']
let name = alifeature['properties']['name']
let childrenNum = alifeature['properties']['childrenNum']
let coordinates = alifeature['geometry']['coordinates']
let properties = {}
feature['id'] = id
properties['cp'] = cp;
properties['id'] = id;
properties['name'] = name;
properties['childNum'] = childrenNum;
feature['properties'] = properties
let geometry = {}
geometry['type'] = 'MultiPolygon'
geometry['coordinates'] = coordinates
feature['geometry'] = geometry
features.push(feature)
}
allData['features'] = features;
this.saveJSON(allData, 'china.json')
},
saveJSON (data, filename) {
if(!data) {
alert('保存的数据为空');
return;
}
if(!filename)
filename = 'json.json'
if(typeof data === 'object'){
data = JSON.stringify(data, undefined, 4)
}
var blob = new Blob([data], {type: 'text/json'}),
e = document.createEvent('MouseEvents'),
a = document.createElement('a')
a.download = filename
a.href = window.URL.createObjectURL(blob)
a.dataset.downloadurl = ['text/json', a.download, a.href].join(':')
e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
a.dispatchEvent(e)
}
}
}
5.好了新的json生成了可以使用了,看一眼,我去这么大3M8万行,压缩一下
压缩的方法出处
disposeJson () {
let allData = {}
allData['type'] = 'FeatureCollection'
let alifeatures = json['features']
let features = []
for (let index = 0; index < alifeatures.length; index++) {
let alifeature = alifeatures[index];
let feature = {}
feature['type'] = 'Feature'
let id = alifeature['properties']['adcode']
let cp = alifeature['properties']['center']
let name = alifeature['properties']['name']
let childrenNum = alifeature['properties']['childrenNum']
let coordinates = alifeature['geometry']['coordinates']
let properties = {}
feature['id'] = id
properties['cp'] = cp;
properties['id'] = id;
properties['name'] = name;
properties['childNum'] = childrenNum;
feature['properties'] = properties
let geometry = {}
geometry['type'] = 'MultiPolygon'
this.disposeCoordinates(coordinates,geometry)
feature['geometry'] = geometry
features.push(feature)
}
allData['features'] = features;
this.saveJSON(allData, 'china')
},
disposeCoordinates (coordinates, geometry) {
let coordinateArr = []
let encodeOffsets = []
for (let index = 0; index < coordinates.length; index++) {
let coordinate = coordinates[index];
let encodeOffset = []
coordinateArr.push([this.encodePolygon(coordinate[0],encodeOffset)])
encodeOffsets.push([encodeOffset])
}
geometry['coordinates'] = coordinateArr
geometry['encodeOffsets'] = encodeOffsets
},
// 对地图坐标进行压缩
encodePolygon(coordinate, encodeOffsets) {
var result = '';
var prevX = this.quantize(coordinate[0][0]);
var prevY = this.quantize(coordinate[0][1]);
// Store the origin offset
encodeOffsets[0] = prevX;
encodeOffsets[1] = prevY;
for (var i = 0; i < coordinate.length; i++) {
var point = coordinate[i];
result+=this.encode(point[0], prevX);
result+=this.encode(point[1], prevY);
prevX = this.quantize(point[0]);
prevY = this.quantize(point[1]);
}
return result;
},
encode(val, prev){
// Quantization
val = this.quantize(val);
// var tmp = val;
// Delta
val = val - prev;
if (((val << 1) ^ (val >> 15)) + 64 === 8232) {
//WTF, 8232 will get syntax error in js code
val--;
}
// ZigZag
val = (val << 1) ^ (val >> 15);
// add offset and get unicode
return String.fromCharCode(val+64);
// var tmp = {'tmp' : str};
// try{
// eval("(" + JSON.stringify(tmp) + ")");
// }catch(e) {
// console.log(val + 64);
// }
},
quantize(val) {
return Math.ceil(val * 1024);
},
saveJSON (data, filename) {
if(!data) {
alert('保存的数据为空');
return;
}
if(!filename)
filename = 'json.json'
if(typeof data === 'object'){
data = JSON.stringify(data, undefined, 4)
}
var blob = new Blob([data], {type: 'text/json'}),
e = document.createEvent('MouseEvents'),
a = document.createElement('a')
a.download = filename
a.href = window.URL.createObjectURL(blob)
a.dataset.downloadurl = ['text/json', a.download, a.href].join(':')
e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
a.dispatchEvent(e)
}
6.压完看了一眼100多k舒服多了,但是如何使用呢?复制粘贴到
echarts/map/js/china.js里面即可
截屏2020-10-22下午3.29.28.png
将china后面之前的删掉把我们生成的json直接粘贴过了即可使用了
注意一定保证china.js中省市名称和自己写的代码中设置的省市名称一致
展示一个简陋的效果图
截屏2020-10-23下午1.52.56.png
资源列表
china.json/encodeChina.js/china.js/alichina.json
echarts官方给的geojson的格式
展示省市详细信息
