zoukankan      html  css  js  c++  java
  • Echarts——Invalid geoJson format Cannot read property 'length' of undefined

    前言

    做一个地图下钻的echarts,发现点击某几个县市的时候,报错Invalid geoJson format Cannot read property 'length' of undefined,
    对比数据发现出现报错原因是因为数据类型中有GeometryCollection存在,但是echarts源码中却没有对应的解析。

    访问官方的github仓库果然有issues存在以及对应的解决方法,不过却一直在pending中...
    https://github.com/apache/echarts/issues/9350

    地图下钻: https://github.com/wangyang0210/echartsMap

    自己编译后文件
    https://github.com/wangyang0210/echarts-4.4.0

    内容

    修改方法

    编辑echarts-4.4.0srccoordgeoparseGeoJson.js文件,直接复制下面的内容覆盖同名方法;

    /**
     * @alias module:echarts/coord/geo/parseGeoJson
     * @param {Object} geoJson
     * @return {module:zrender/container/Group}
     */
    export default function (geoJson) {
    
        decode(geoJson);
    
        return zrUtil.map(zrUtil.filter(geoJson.features, function (featureObj) {
            // Output of mapshaper may have geometry null
            return featureObj.geometry
                && featureObj.properties
                && (
                    // avoid length error if missing coordinates
                    (featureObj.geometry.coordinates && featureObj.geometry.coordinates.length > 0)
                    // allow GeometryCollection
                    || (featureObj.geometry.geometries && featureObj.geometry.geometries.length > 0)
                )
                ;
    
        }), function (featureObj) {
            var properties = featureObj.properties;
            var geo = featureObj.geometry;
    
            var coordinates = geo.coordinates;
    
            var geometries = [];
            if (geo.type === 'Polygon') {
                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)
                });
            }
            else if (geo.type === 'MultiPolygon') {
                zrUtil.each(coordinates, function (item) {
                    if (item[0]) {
                        geometries.push({
                            type: 'polygon',
                            exterior: item[0],
                            interiors: item.slice(1)
                        });
                    }
                });
            }
            else if (geo.type === 'GeometryCollection') {
                var geometries2 = geo.geometries;
                zrUtil.each(geometries2, function (geo) { // OR      zrUtil.each(geometries2, function (geo) {
                    var coordinates = geo.coordinates;
                    if (geo.type === 'Polygon') { // this is a full copy from above
                        geometries.push({
                            type: 'polygon',
                            exterior: coordinates[0],
                            interiors: coordinates.slice(1)
                        });
                    } // end full copy
                });
            }
    
            var region = new Region(
                properties.name,
                geometries,
                properties.cp
            );
            region.properties = properties;
            return region;
        });
    }
    

    编译

    # Install the dependencies from NPM:
    npm install
    
    # If intending to build and get all types of the "production" files:
    npm run release
    # The same as `node build/build.js --release`
    
    # If only intending to get `dist/echarts.js`, which is usually
    # enough in dev or running the tests:
    npm run build
    # The same as `node build/build.js`
    
    # Get the same "production" files as `node build/build.js`, while
    # watching the editing of the source code. Usually used in dev.
    npm run watch
    # The same as `node build/build.js -w`
    
    # Check the manual:
    npm run help
    # The same as `node build/build.js --help`
    

    验证

    distecharts.min.js复制到项目中,进行验证

    学无止境,谦卑而行.
  • 相关阅读:
    Remove Nth Node From End of List从尾部开始删除第N个节点
    给乱序的链表排序 · Sort List, 链表重排reorder list LoLn...
    Partition List双色问题链表版
    翻转链表reverse linked list:全部,m~n
    删除链表中的重复元素:不留&留一个&删除一个
    基于快速排序的数组划分:2组 3组 K组(sort color)大小写排序 · Partition Array
    字体 | font (Fonts) – CSS 中文开发手册
    HTML tfoot charoff 属性
    Bootstrap 网格系统
    struct (String) – Python 中文开发手册
  • 原文地址:https://www.cnblogs.com/wangyang0210/p/14655525.html
Copyright © 2011-2022 走看看