vue中supermap的使用

首先导入依赖

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>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容