文末有相關(guān)資源
這兩天公司要求做一個地圖展示要求每個省份根據(jù)用戶量多少展示不同的顏色,且給每個市級單位加標(biāo)注,于是乎研究了一下,找了好多平臺(高德,百度,簡數(shù)科技等)發(fā)現(xiàn)還是echarts好用.
但是有一個小問題就是echarts官方提示他們的地圖json測繪不符合中國官方標(biāo)準(zhǔn)不提供下載,實(shí)際上包里面包含了且可以使用.(小心駛得萬年船)
1.先去阿里官方下載中國地圖的json文件
https://geo.datav.aliyun.com/areas_v2/bound/100000_full.json(已失效)
2.下載完后在echarts中的china.js直接替換發(fā)現(xiàn)可以使用啥事都沒有,但是其實(shí)是有一個隱藏的坑,要注意一下就是json中各省市的命名要和代碼里面的命名相同不同的話好多的操作時不能進(jìn)行的
3.然后接著往下看發(fā)現(xiàn)阿里的json數(shù)據(jù)字段名稱和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('保存的數(shù)據(jù)為空');
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
},
// 對地圖坐標(biāo)進(jìn)行壓縮
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('保存的數(shù)據(jù)為空');
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舒服多了,但是如何使用呢?復(fù)制粘貼到
echarts/map/js/china.js里面即可
截屏2020-10-22下午3.29.28.png
將china后面之前的刪掉把我們生成的json直接粘貼過了即可使用了
注意一定保證china.js中省市名稱和自己寫的代碼中設(shè)置的省市名稱一致
展示一個簡陋的效果圖
截屏2020-10-23下午1.52.56.png
資源列表
china.json/encodeChina.js/china.js/alichina.json
echarts官方給的geojson的格式
展示省市詳細(xì)信息
