解决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参观一下

相关文章
|
11月前
|
JSON JavaScript 定位技术
vue中使用echarts实现省市地图绘制,根据数据显示省市天气图标及温度信息
vue中使用echarts实现省市地图绘制,根据数据显示省市天气图标及温度信息
1288 1
|
6月前
|
缓存 JavaScript 前端开发
mapbox没有token/token失效,地图闪烁后变空白,报错Error: A valid Mapbox access token is required to use Mapbox GL JS.
本博客介绍了mapbox如何去除token验证,暴力破解mapbox的token验证机制。一劳永逸解决mapbox地图闪现一下然后变成空白,报错Error: A valid Mapbox access token is required to use Mapbox GL JS.的方法,还介绍了类似问题的具体解决思路。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
11月前
|
JavaScript 前端开发 开发工具
【Azure Developer】使用JavaScript通过SDK进行monitor-query的client认证报错问题
AADSTS90002: Tenant 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' not found. Check to make sure you have the correct tenant ID and are signing into the correct cloud. Check with your subscription administrator, this may happen if there are no active subscriptions for the tenant.
|
11月前
|
JSON JavaScript 前端开发
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
3096 0
|
11月前
|
JavaScript 前端开发
原生js常见报错及其处理方案
原生js常见报错及其处理方案
219 0
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
240 2
|
10月前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
160 1
JavaScript中的原型 保姆级文章一文搞懂
|
10月前
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
99 0
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
349 5
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的家政平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的家政平台附带文章源码部署视频讲解等
193 3

热门文章

最新文章