通过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
            });
        }

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

猪猪大魔王db

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值