首页 / 浏览问题 / 云GIS / 问题详情
_echarts2.default.init is not a function
545EXP 2019年11月20日

问题:L.supermap.echartsLayer报错_echarts2.default.init is not a function

iclient-leaflet版本v9.1.2

leaflet版本1.3.1

框架采用vue,leaflet引入方式为

import L from 'leaflet'
import 'leaflet/dist/leaflet.css'

Vue.use(L)

iclient-leaflet引入方式为等leaflet引入后 引入

export const loadJs = (url, callback) => {
  var script = document.createElement('script');
  script.type = "text/javascript";
  if (typeof (callback) != "undefined") {
    if (script.readyState) {
      script.onreadystatechange = function () {
        if (script.readyState == "loaded" || script.readyState == "complete") {
          script.onreadystatechange = null;
          callback();
        }
      }
    } else {
      script.onload = function () {
        callback();
      }
    }
  }
  script.src = url;
  document.body.appendChild(script);
}

// 引入静态的leaflet
loadJs("./static/libs/leaflet/iclient9-leaflet.js")

创建L.supermap.echartsLayer的部分代码

	createLayer(map, data, getnextClustData) {
		if (!map) {
			return
		}
		if (!data) {
			return
		}
		let minobj = this.getSymbolSize(data)
		this.activeMap = map

		const option = {
			color: colorPicker.color,
			tooltip: {
				trigger: 'item',
				formatter(a) {
					return `${a.name}: ${a.value[2]}`
				}
			},
			series: [{
				name: data.name ? data.name : '',
				type: 'scatter',
				coordinateSystem: 'leaflet',
				data: data.data,
				symbolSize(val) {
					// 大小在40至65之间
					let size = 0
					if (minobj.arr.length == 1) {
						size = 65
					} else {
						let a = (val[2] - minobj.min) * 25
						let b = a / (minobj.max - minobj.min)
						size = Number(b) + 40
					}
					return size
				},
				label: {
					show: true,
					position: 'bottom',
					color: data.color ? data.color : (colorPicker.gather.itemColor ? colorPicker.gather.itemColor : '#fff'),
					formatter: '{b}'
				},
				showEffectOn: 'emphasis',
				effectType: 'ripple',
				rippleEffect: {
					brushType: 'stroke'
				},
				hoverAnimation: true,
				itemStyle: {
					color: data.color ? data.color : colorPicker.gather.itemColor,
					borderWidth: data.borderWidth ? data.borderWidth : 2,
					borderColor: data.borderColor ? data.borderColor : colorPicker.gather.borderColor,
					opacity: data.opacity ? data.opacity : 0.8
				},
				emphasis: {
					itemStyle: {
						shadowColor: data.borderColor ? data.borderColor : colorPicker.gather.shadowColor,
						shadowBlur: 20
					}
				}
			}, {
				name: data.name ? data.name : '',
				type: 'scatter',
				coordinateSystem: 'leaflet',
				data: data.data,
				symbolSize: 20,
				symbolSize(val) {
					// 大小在40至65之间
					let size = 0
					if (minobj.arr.length == 1) {
						size = 65
					} else {
						let a = (val[2] - minobj.min) * 25
						let b = a / (minobj.max - minobj.min)
						size = Number(b) + 40
					}
					return size
				},
				label: {
					show: true,
					position: 'inside',
					color: data.color ? data.color : (colorPicker.gather.insideColor ? colorPicker.gather.insideColor : '#fff'),
					formatter(a) {
						let par = a.value[2]
						// par = par.substr(0, 1);
						return par
					}
				},
				showEffectOn: 'emphasis',
				effectType: 'ripple',
				rippleEffect: {
					brushType: 'stroke'
				},
				hoverAnimation: true,
				itemStyle: {
					color: data.color ? data.color : colorPicker.gather.itemColor,
					borderWidth: data.borderWidth ? data.borderWidth : 3,
					borderColor: data.borderColor ? data.borderColor : colorPicker.gather.borderColor,
					opacity: data.opacity ? data.opacity : 1
				},
				emphasis: {
					itemStyle: {
						shadowColor: data.borderColor ? data.borderColor : colorPicker.gather.shadowColor,
						shadowBlur: 20
					}
				}
			}]
		}
		this.graph = {
			shadowColor: data.borderColor ? data.borderColor : colorPicker.gather.shadowColor,
			color: data.color ? data.color : colorPicker.gather.itemColor,
			borderColor: data.borderColor ? data.borderColor : colorPicker.gather.borderColor
		}
		// 记录echartOption,方便自定义颜色
		this.echartOption = option
		// 清除上一次的专题图
		if (this.clusterLayer.hasOwnProperty('_leaflet_id')) {
			this.clusterLayer.remove()
		}
		this.clusterLayer = L.supermap.echartsLayer(option).addTo(map)
	},

1个回答

你好,感觉是引入包报的错,你可以在mian.js里面全模板引入 

然后我这边用10版本的"@supermap/iclient-leaflet": "^10.0.0", 测试没有问题

3,352EXP 2019年11月20日
这种方式不兼容ie
https://cdn.bootcss.com/echarts/4.3.0-rc.2/echarts.min.js 这个文件保存到本地,然后再用静态方式引入
这个是echarts的静态js?这个静态引入的目的是啥
你不是使用L.supermap.echartsLayer报为定义吗定义吗?你就看官网的例子看network中引入那些js文件,你下载到本地再引入就行了吧,你想怎么样
明白了 谢谢
最后怎么解决的老哥我和你一样报错问题~
你的iclient是怎么引入的?如果是npm引入的 应该是没有问题的
如果是引入的静态文件,或者说是通过标签引入的,那要在单独因如下echarts的依赖,顺序要在iclient之前
...