首先导入依赖
npm install leaflet
npm install leaflet-draw
npm install @supermap/iclient-leaflet
然后在main.js文件中引入
importLfrom'leaflet'
import'leaflet/dist/leaflet.css'
import'@supermap/iclient-leaflet'
Vue.use(L);
最后
你可能会在使用的时候发现控制台报错echarts is not defined
这说明你还需要安装echarts
npm i echarts
然后是最重要的一点,一定要在package.json文件中把 "echarts": "^5.0.2",这一行放在"leaflet": "^1.7.1", "leaflet-draw": "^1.0.4","@supermap/iclient-leaflet": "^10.1.1",等超图相关依赖的上面,否则还是找不到echarts的。
更新,上述做法还是可能失败,那么还有一种解决方法,在https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0/echarts.min.js等你能找到的网址下,把echarts的js文件下载下来,放在项目的静态资源目录static下,然后再在index.html文件中引入这个js文件
<script src="static/js/echarts.min.js" type="text/javascript"></script>
这样如果还是报错,那说明你的vue项目与supermap有缘无份,老老实实的用下面的方法吧
在index.html文件中引入在线资源
<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/leaflet.draw/1.0.4/leaflet.draw.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0/echarts.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.js"></script>
<script type="text/javascript" src="https://iclient.supermap.io/dist/leaflet/iclient-leaflet.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.js"></script>