Echart 3D地图 提示 Uncaught Incvalid geoJson format TypeError: i.parseGeoJSON is not a function

问题描述

借助Echart 及相关的库去实现3D地图时提示如下错误在这里插入图片描述

解决

echart版本太低导致的,升级echart版本到4.5.0(发表该片博文是最先版本)就解决了该问题

相关代码

		<div id="map" style="width: 100%;height: 100%;"></div>
		<script src="js/echarts.min.js"></script>
		<script src="js/map/echarts-gl.min.js" type="text/javascript" charset="utf-8"></script>
		<!-- 百度地图china.js 自己删减代码, 然后注册生huanan地图,方便下面应用,也可以直接用china.js  geo3D属性中的map设置为'china'即可 -->
		<script src="js/map/huanan.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/datacenter.js"></script>

datacenter.js

let myMap = echarts.init(document.getElementById("map"))
	option = {
	    geo3D: {
	        map: '华南',
			boxheight: 8,
	        itemStyle: {
	            areaColor: 'rgb(5,101,123)',
	            opacity: 1,
	            borderWidth: 2,
	            borderColor: 'rgb(62,215,213)'
	        },
	        label: {
	            show: false,
	            textStyle: {
	                color: '#fff', //地图初始化区域字体颜色
	                fontSize: 16,
	                opacity: 1,
	                backgroundColor: 'rgba(0,0,0,0)'
	                //backgroundColor: 'rgba(53,171,199,0)'
	            },
	        },
	        emphasis: { //当鼠标放上去  地区区域是否显示名称
	            label: {
	                show: true,
	                textStyle: {
	                    color: '#fff',
	                    fontSize: 16,
	                    backgroundColor: 'rgba(0,23,11,0)'
	                }
	            }
	        },
	        light: { //光照阴影
	            main: {
	                color: '#fff', //光照颜色
	                intensity: 1.2, //光照强度
	                //shadowQuality: 'high', //阴影亮度
	                shadow: false, //是否显示阴影
	                alpha: 55,
	                beta: 10
	
	            },
	            ambient: {
	                intensity: 0.3
	            }
	        },
			viewControl: {
				distance: 110
			},
			top:10,
			left:10,
			right: 10,
			bottom: 10
	    }
	};
	myMap.setOption(option)

结果

在这里插入图片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章