通过bigemap和geojson获取echarts精确到乡镇、街道的地图json数据和undefined (reading ‘length‘)报错问题

我是参考了别人文章,然后自己去鼓弄的,先写一下百度参考链接,希望可以帮助到你们。
第一个链接
第二个链接

第一步:我是用了阿里云的加粗样式地理小工具,把自己想要的地图区域模块导出json文件保存
地理小工具
在这里插入图片描述
第二步:我下载了bigemap的全能软件,因为地理小工具只能具体到区县,不能到镇街道。需要下载软件然后导出你需要的镇街道的kml文件。
在这里插入图片描述
在这里插入图片描述

然后就会得到kml文件,把需要的镇街道都下载好。在打开geojson网站进行合并(geojson需要fan出去)
geojson
在这里插入图片描述
先导入下载好的json文件,要注意导入顺序,会不会覆盖的问题,旁边会有json文件,等全部导入完,复制出来到新的json文件(可以新建一个文本文档,修改名字和文件格式为json)在这里插入图片描述
然后就可以用了

第三步:我导入之后会报错,Uncaught Invalid geoJson format TypeError Cannot read properties of undefined (reading ‘length‘)
排查了半天终究还是去百度了,发现是echart.js的问题。我换成了echarts.js不是min.js。然后按照百度上写的修改,又报错。就一条一条复制的。先在echartsjs中找到这个方法,然后这两部分对一下,然后复制过去就好了。(粘贴的下面链接的博主代码)
链接

function parseGeoJSON(geoJson, nameProperty) {
      geoJson = decode(geoJson);
      return map(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 geometries = [];

        if (geo.type === 'Polygon') {
          var coordinates = geo.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') {
          var coordinates = geo.coordinates;
          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;
            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 GeoJSONRegion(properties[nameProperty || 'name'], geometries, properties.cp);
        region.properties = properties;
        return region;
      });
    }
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)
            )


else if (geo.type === 'GeometryCollection') {
            var geometries2 = geo.geometries;
            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
            });
        }


版权声明:本文为qq_42654348原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。