Echarts地图报错:Error: Invalid geoJson format Cannot read property ‘length‘ of undefined

这篇博客讲述了在展示浙江台州地图时遇到的页面报错问题,原因是玉环市JSON中的&type:“GeometryCollection”。博主通过修改echarts库的`parseGeoJson.js`文件解决了此问题,主要涉及对GeoJSON的解码和处理,确保了多边形数据的正确解析。修复后,地图能够正常展示。

展示浙江台州的区县时发现页面报错,找了一圈发现文件里不一样的地方就是玉环市JSON里面有一个"type": “GeometryCollection”
修改node_modules\echarts\lib\coord\geo\parseGeoJson.js代码

/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */


/**
 * AUTO-GENERATED FILE. DO NOT MODIFY.
 */

/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

/**
 * Parse and decode geo json
 */
import * as zrUtil from 'zrender/lib/core/util';
import Region from './Region';

function decode(json) {
   
   
    if (!json.UTF8Encoding) {
   
   
        return json;
    }

    var jsonCompressed = json;
    var encodeScale = jsonCompressed.UTF8Scale;

    if (encodeScale == null) {
   
   
        encodeScale = 1024;
    }

    var features = jsonCompressed.features;

    for (var f = 0; f < features.length; f++) {
   
   
        var feature = features[f];
        var geometry = feature.geometry;

        if (geometry.type === 'Polygon') {
   
   
            var coordinates = geometry.coordinates;

            for (var c = 0; c 
Echarts报错 `Error: Initialize failed: invalid dom.` 通常是由于在初始化 Echarts 时传入的 DOM 节点无效导致的,以下是一些可能的解决办法: ### 确保 DOM 节点存在且已插入页面 在 Vue 项目中,若在初始化 Echarts 实例时传入的节点与 Vue 组件的根节点不是同一个节点,需要在 Vue 组件的 `mounted` 阶段确保根节点已被正确插入到页面中,这样才能初始化 Echarts 实例。比如在使用 `this.$refs` 获取 DOM 节点时,要保证该节点在获取时已经存在于页面上。示例代码如下: ```vue <template> <div ref="radarbox"></div> </template> <script> import echarts from 'echarts'; export default { mounted() { const mycharts = this.$refs.radarbox; if (mycharts) { this.chart = echarts.init(mycharts); this.setOptions(this.data2, this.num); } }, methods: { setOptions(data, num) { // 设置 Echarts 选项的逻辑 } } } </script> ``` ### 处理数据加载延迟问题 当后端数据返回较慢,在数据未返回之前切换当前页面,可能会导致 DOM 节点无效。可以在切换页面时取消 Echarts 的初始化操作,或者在数据返回后再进行 Echarts 初始化。示例代码如下: ```vue <template> <div ref="radarbox"></div> </template> <script> import echarts from 'echarts'; export default { data() { return { isPageActive: true, data2: null, num: null }; }, mounted() { this.fetchData(); }, beforeDestroy() { this.isPageActive = false; }, methods: { fetchData() { // 模拟异步获取数据 setTimeout(() => { if (this.isPageActive) { const mycharts = this.$refs.radarbox; if (mycharts) { this.chart = echarts.init(mycharts); this.setOptions(this.data2, this.num); } } }, 2000); }, setOptions(data, num) { // 设置 Echarts 选项的逻辑 } } } </script> ``` ### 检查 DOM 节点选择器 要保证在初始化 Echarts 时使用的 DOM 节点选择器是正确的。如果使用 `document.getElementById` 或 `document.querySelector` 等方法选择节点,要确保选择器能准确找到对应的 DOM 节点。示例代码如下: ```javascript const mycharts = document.getElementById('radarbox'); if (mycharts) { const chart = echarts.init(mycharts); // 设置 Echarts 选项 } ```
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值