vue中加载gis地图(vue引入地图)

2024-05-13 GIS 61
A⁺AA⁻

本篇文章给大家谈谈vue中加载gis地图,以及vue引入地图对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。

目录一览:

关于Vue+ECharts 地图引用空间文件或GIS(.shp)

效果图:

直接步入主题

GIS 能够让你查看这个 .shp 文件的地图内容,但是我感觉用不用都可以,反正我是没用,因为他在合并的时候我不是很理解,毕竟太过跨越了;

vue中加载gis地图(vue引入地图)

微信号:MeetyXiao
添加微信好友, 获取更多信息
复制微信号

关于引用空间文件

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引入地图的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。

客服微信号码

客服微信号码

客服微信号码

客服微信号码

留言咨询
提交留言

您将免费获得

  • 全面诊断

    您将获得专家对您公司申请资质所需条件的全面诊断服务,我们不同于传统代办公司,仅是提供一些通用的,浅显的建议

  • 找出疏忽点

    我们在了解您公司的基本情况之后,将挖掘出您公司目前不利于资质申请的疏忽点,还将详细说明您在申请资质时应当改善的确切的事项。

  • 分析需求

    我们通过丰富的从业经验,结合目前的实际情况,确认好符合您实际经营情况的资质需求。

  • 定制方案与报价

    对您的需求深入了解后,将结合您公司目前的情况,我们将为您量身定制一份资质代办方案及报价单。

获取方案

×
请设置您的cookie偏好
欢迎来到资质参谋
我们希望在本网站上使用cookie,以便保障本网站的安全、高效运转及服务优化,有关我们使用cookie的更多信息,请点击查看了解更多。
接收Cookies
决绝Cookies