本篇文章给大家谈谈vue中加载gis地图，以及vue引入地图对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。
目录一览：
关于Vue+ECharts 地图引用空间文件或GIS(.shp)
效果图：
直接步入主题
GIS 能够让你查看这个 .shp 文件的地图内容，但是我感觉用不用都可以，反正我是没用，因为他在合并的时候我不是很理解，毕竟太过跨越了；
添加微信好友, 获取更多信息
复制微信号
关于引用空间文件
1.首先你需要得到一些 .shp 文件，当然是越轻量级越好；
2.你需要将你得到的空间文件在 这个网站进行转化为geo *** ON ；
3.你转换的是geo *** ON 但是到手的确实 *** ON文件，这个不用慌，就是这么的无厘头；
4.如果你得到的是一个 *** ON文件当然更好，如果是多个你就需要合并了，就像我是的安装了很多插件，但是最后都没成，还是自己手动的合成了一下，但好在不是很多，我只有三个，简单地看了一下应该是 （点、线、面）凑成的三个 *** ON文件；
5.你得到这个 *** ON文件你成功了三分之二，剩下的就是echarts的操作了，以上的一些步骤卡了我2天时间，毕竟比较菜鸡，叶很水，当然你看见了我这个文章你就乐吧，稳稳地能帮你把这个需求搞定；
以下是ECharts的操作了
1.你需要将你得到的 *** ON文件放到你的项目文件中以便引入；
这是一个引入外部 *** ON文件 在ECharts中有过案例；
把这个写上，这个也是官网的案例；
以上就是我的实现经历 如果大家有更方便的办法请联系我或评论哦 （在将几个 *** ON文件合并时感觉好尴尬）
ArcGis API for js 在vue.js中的使用
最近换了一份工作，公司做的是gis相关的服务，之前完全没有接触过gis，光是把地图展现到页面上就费了好些功夫。所以打算把自己在项目中用到的相关技术点记录下来，供自己日后翻看。有写的不好的地方，还请在评论留言。
在vue中使用arcgis需要一个叫做 esri-loader 的东西来帮我们加载arcgis文件。
npm上的相关文档参考：
样式文件可以在main.js中引入，也可以在当前组件引入，我选择的是在main.js中引
如果控制台可以打印出Map对象，那么说明我们已经在vue中成功加载arcgis了
vue加载高德地图（原生）
1. 在 public 文件夹下的 index.html 中加入
///script type="text/javascript" src=";key=你申请的key"/script
2. 在 vue.config.js 文件中配置 externals
///module.exports = {
devServer: {
port: 57103 // 端口号配置
},
configureWebpack: {
externals: {
'AMap': 'AMap' // 高德地图配置
} }}
注： vue.config.js 文件要自己创建，vue-cli 3.0 不会自动生成此文件。 此外，修改 vue.config.js 不会触发热加载，也就是修改之后你需要重新 run 一下你的项目，它才能生效。
3.加载地图
地图容器要给他一个宽高。
注：init() *** 请在 mounted 生命周期中调用，因为如果在 created 阶段调用，会找不到 html 元素 div#container
注2:若中途遇到 'map' is assigned a value but never used
可找到package.json中找到rules:{} 添加 "no-unused-vars":0
最终效果
高德API：
关于vue中加载gis地图和vue引入地图的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。
