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)

結果