解决echarts地图geoJson报错问题(“echarts.min.js:45 Uncaught Error: Invalid geoJson format Cannot read prope”)

简介: 解决报错:1.Invalid geoJson format Cannot read property ‘length’ of undefined2 echarts.min.js:45 Uncaught Error: Invalid geoJson format Cannot read prope

背景

解决报错:
1.Invalid geoJson format Cannot read property 'length' of undefined
2 echarts.min.js:45 Uncaught Error: Invalid geoJson format Cannot read prope
项目中用echarts绘制地图,由于网上乡镇级别行政边界地图贼少,所以需要用到bigMap+geojson.io去绘制自定义地图,详情请看解决如何整理出乡镇级的地图json,以此使用echarts绘制出乡镇级的数据
但是由于生成的地图里有一个区域为两块不连续的地图块,所以生成的geoJson中此区域的geometry.type===GeometryCollection.
然而 echarts 中对于此类型没有做处理,详情见源码
echarts\lib\coord\geo\parseGeoJson.js
第133行左右
在这里插入图片描述
这段代码的意思是解析geoJson

解决方法

需要修改如下函数:
echarts 源代码 大约121行

function _default(geoJson, nameProperty) {}

直接复制粘贴:

function _default(geoJson, nameProperty) {
    decode(geoJson);
    return zrUtil.map(
        zrUtil.filter(geoJson.features, function(featureObj) {
            if (featureObj.geometry.geometries) {
                let geometry = featureObj.geometry.geometries.map(i => {
                    return i.coordinates;
                });
                let { type, properties, ...params } = featureObj;
                return { type, properties, geometry };
            }
            // Output of mapshaper may have geometry null
            return (
                featureObj.geometry &&
                featureObj.properties &&
                featureObj.geometry.coordinates &&
                featureObj.geometry.coordinates.length > 0
            );
        }),
        function(featureObj) {
            var properties = featureObj.properties;
            var geo = featureObj.geometry;
            var coordinates = geo.coordinates;
            var geometries = [];
            if (geo.type === "GeometryCollection") {
                let geometry = {
                    type: "Polygon"
                };
                let coordinatesArr = featureObj.geometry.geometries.map(i => {
                    return i.coordinates;
                });
                geometry.coordinates = coordinatesArr;
                console.log(coordinatesArr, "coordinatesArr");
                coordinatesArr.forEach(i => {
                    geometries.push({
                        type: "polygon",
                        // According to the GeoJSON specification.
                        // First must be exterior, and the rest are all interior(holes).
                        exterior: i[0],
                        interiors: i.slice(1)
                    });
                });
            }
            if (geo.type === "Polygon") {
                console.log("coordinatesPolygon", coordinates);
                geometries.push({
                    type: "polygon",
                    // According to the GeoJSON specification.
                    // First must be exterior, and the rest are all interior(holes).
                    exterior: coordinates[0],
                    interiors: coordinates.slice(1)
                });
            }
            if (geo.type === "MultiPolygon") {
                zrUtil.each(coordinates, function(item) {
                    if (item[0]) {
                        geometries.push({
                            type: "polygon",
                            exterior: item[0],
                            interiors: item.slice(1)
                        });
                    }
                });
            }
            console.log(
                properties[nameProperty || "name"],
                geometries,
                properties.cp,
                "asdfasdfasdf"
            );
            var region = new Region(
                properties[nameProperty || "name"],
                geometries,
                properties.cp
            );
            region.properties = properties;
            return region;
        }
    );
}

ps: 去git上看echarts之前的issues,有类似问题,修改前可以去该issues参观一下

相关文章
|
12天前
|
JavaScript 前端开发 大数据
数字太大了,计算加法、减法会报错,结果不正确?怎么办?用JavaScript实现大数据(超过20位的数字)相加减运算。
数字太大了,计算加法、减法会报错,结果不正确?怎么办?用JavaScript实现大数据(超过20位的数字)相加减运算。
|
2月前
VUE.初始化项目报错缺少core-js
VUE.初始化项目报错缺少core-js
35 0
|
3月前
|
JavaScript
node下的two.js调用one.js出现无法编译问题 Cannot find module ‘c:
node下的two.js调用one.js出现无法编译问题 Cannot find module ‘c:
47 0
|
2月前
|
机器学习/深度学习 前端开发 JavaScript
源映射错误:Error: request failed with status 404 源 URL:http://localhost:8080/bootstrap/js/axios-0.18.0.js
源映射错误:Error: request failed with status 404 源 URL:http://localhost:8080/bootstrap/js/axios-0.18.0.js
43 0
源映射错误:Error: request failed with status 404 源 URL:http://localhost:8080/bootstrap/js/axios-0.18.0.js
|
12天前
报错/ ./node_modules/axios/lib/platform/index.js Module parse failed: Unexpected token (5:2)怎么解决?
报错/ ./node_modules/axios/lib/platform/index.js Module parse failed: Unexpected token (5:2)怎么解决?
|
4天前
|
JavaScript
【Js】检查Date对象是否为Invalid Date
【Js】检查Date对象是否为Invalid Date
7 0
|
2月前
|
JavaScript 前端开发 算法
【Node.js 版本过高】运行前端时,遇到错误 `Error: error:0308010C:digital envelope routines::unsupported`
【Node.js 版本过高】运行前端时,遇到错误 `Error: error:0308010C:digital envelope routines::unsupported`
65 0
|
2月前
|
定位技术
使用Echarts实现地图展示
使用Echarts实现地图展示
|
2月前
|
JSON 程序员 定位技术
使用echarts+echarts-gl绘制3d地图,实现地图轮播效果
记录一下大屏开发中使用到的echarts-gl 大屏的页面根据需求前前后后改了几个版本了,地图的样式也改了又改 这里记录一下,因为echarts属性用到的比较多也比较杂,防止以后需要用到忘记了
|
3月前
|
JavaScript 内存技术
解决node.js版本过高报错问题(Error: error:0308010C:digital envelope routines::unsupported)
解决node.js版本过高报错问题(Error: error:0308010C:digital envelope routines::unsupported)
65 0
解决node.js版本过高报错问题(Error: error:0308010C:digital envelope routines::unsupported)