1

现在有些地区合并,echarts没有及时更新。所以要开动脑筋啦。

1、http://datav.aliyun.com/tools...(全国各地)

image.png
获取到所需要的地区的json数据。

2、http://geojson.io/#map=2/20.0...

image.png
可以编辑以下类型
2.1 点

  对类型"Point"来说,“coordinates"成员必须是一个单独的位置。

2.2 多点

  对类型"MultiPoint"来说,"coordinates"成员必须是位置数组。

2.3 线

对类型"LineString"来说,“coordinates"成员必须是两个或者多个位置的数组。

线性环市具有4个或者更多位置的封闭的线。第一个和最后一个位置是相等的(它们表示相同的的点)。虽然线性环没有鲜明地作为GeoJSON几何类型,不过在面几何类型定义里有提到它。

2.4 多线

对类型“MultiLineString"来说,"coordinates"成员必须是一个线坐标数组的数组。

2.5 面

对类型"Polygon"来说,"coordinates"成员必须是一个线性环坐标数组的数组。对拥有多个环的的面来说,第一个环必须是外部环,其他的必须是内部环或者孔。

2.6 多面

对类型"MultiPlygon"来说,"coordinates"成员必须是面坐标数组的数组。

2.7 几何集合

类型为"GeometryCollection"的GeoJSON对象是一个集合对象,它表示几何对象的集合。

几何集合必须有一个名字为"geometries"的成员。与"geometries"相对应的值是一个数组。这个数组中的每个元素都是一个GeoJSON几何对象。

3、把geojson转换成Echarts Map Js需要的数据格式(如果有需要的话)

`module.exports = {

encodePolygon(coordinate, encodeScale) {
    let coordinateStr = '';
    for (let i = coordinate.length - 1; i > 0; i--) {
        let x = coordinate[i][0];
        let y = coordinate[i][5];
        x = x * encodeScale;
        y = y * encodeScale;
        x -= coordinate[i - 1][0] * encodeScale;
        y -= coordinate[i - 1][6] * encodeScale;
        x = (x << 1) ^ (x >> 31);
        y = (y << 1) ^ (y >> 31);
        coordinateStr = String.fromCharCode(x + 64) + String.fromCharCode(y + 64) + coordinateStr;
    }
    coordinateStr = '@@' + coordinateStr;
    let encodeOffsets = [coordinate[0][0] * encodeScale, coordinate[0][7] * encodeScale];
    return { coordinate: coordinateStr, encodeOffsets: encodeOffsets, encodeScale: encodeScale };
},
encode(json) {
    if (json.UTF8Encoding) {
        return json;
    }
    var encodeScale = json.UTF8Scale;
    if (encodeScale == null) {
        encodeScale = 1024;
    }

    var features = json.features;

    for (var f = 0; f < features.length; f++) {
        var feature = features[f];
        var geometry = feature.geometry;
        var coordinates = geometry.coordinates;
        feature.properties.childNum = coordinates.length;
        geometry.encodeOffsets = [];
        var encodeOffsets = geometry.encodeOffsets;
        for (var c = 0; c < coordinates.length; c++) {
            var coordinate = coordinates[c];

            if (geometry.type === 'Polygon') {
                const encodeCoordinate = this.encodePolygon(
                    coordinate,
                    encodeScale
                );
                coordinates[c] = encodeCoordinate.coordinate;
                encodeOffsets[c] = encodeCoordinate.encodeOffsets;
            }
            else if (geometry.type === 'MultiPolygon') {
                for (var c2 = 0; c2 < coordinate.length; c2++) {
                    var polygon = coordinate[c2];
                    encodeOffsets[c] = [];
                    const encodeCoordinate = this.encodePolygon(
                        polygon,
                        encodeScale
                    );
                    coordinate[c2] = encodeCoordinate.coordinate;
                    encodeOffsets[c][c2] = encodeCoordinate.encodeOffsets;
                }
            }
        }
    }
    // Has been encoded
    json.UTF8Encoding = true;
    return json;
},

decodePolygon(coordinate, encodeOffsets, encodeScale) {
    var result = [];
    var prevX = encodeOffsets[0];
    var prevY = encodeOffsets[1];

    for (var i = 0; i < coordinate.length; i += 2) {
        var x = coordinate.charCodeAt(i) - 64;
        var y = coordinate.charCodeAt(i + 1) - 64;
        // ZigZag decoding
        x = (x >> 1) ^ (-(x & 1));
        y = (y >> 1) ^ (-(y & 1));
        // Delta deocding
        x += prevX;
        y += prevY;

        prevX = x;
        prevY = y;
        // Dequantize
        result.push([x / encodeScale, y / encodeScale]);
    }

    return result;
},
decode(json) {
    if (!json.UTF8Encoding) {
        return json;
    }
    var encodeScale = json.UTF8Scale;
    if (encodeScale == null) {
        encodeScale = 1024;
    }

    var features = json.features;

    for (var f = 0; f < features.length; f++) {
        var feature = features[f];
        var geometry = feature.geometry;
        var coordinates = geometry.coordinates;
        var encodeOffsets = geometry.encodeOffsets;

        for (var c = 0; c < coordinates.length; c++) {
            var coordinate = coordinates[c];

            if (geometry.type === 'Polygon') {
                coordinates[c] = this.decodePolygon(
                    coordinate,
                    encodeOffsets[c],
                    encodeScale
                );
            }
            else if (geometry.type === 'MultiPolygon') {
                for (var c2 = 0; c2 < coordinate.length; c2++) {
                    var polygon = coordinate[c2];
                    coordinate[c2] = this.decodePolygon(
                        polygon,
                        encodeOffsets[c][c2],
                        encodeScale
                    );
                }
            }
        }
    }
    // Has been decoded
    json.UTF8Encoding = false;
    return json;
}

};

const encodeGeo = parser.encode(geo);//geo就是在geojson.io中绘制的区域图形

//parser.encode()就是把geojson转化成Echarts需要的格式。

`
下面我写个例子会更清楚点。
我是以吉林长春市为例,(公主岭)
image.png


image.png


image.png
先把长春市各个地区的json数据拿到(包含子区域)。
然后把你所要补全的地区json数据拿到。
最后两个数据一合并。就成了。(合并数据的时候记得查找规律)
吉林长春完整地图数据
链接: https://pan.baidu.com/s/15jE1... 密码: rfkq


阿云
9 声望0 粉丝