脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue.js ArcGis API

ArcGis API for js在vue.js中的使用示例详解

 更新时间：2023年08月22日 15:22:40   作者：无is  
这篇文章主要为大家介绍了ArcGis API for js在vue.js中的使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

写在前面

最近换了一份工作，公司做的是gis相关的服务，之前完全没有接触过gis，光是把地图展现到页面上就费了好些功夫。所以打算把自己在项目中用到的相关技术点记录下来，供自己日后翻看。有写的不好的地方，还请在评论留言。

在vue中安装ArcGis

在vue中使用arcgis需要一个叫做esri-loader的东西来帮我们加载arcgis文件。

  • 首先是npm安装
npm install esri-loader -S

npm上的相关文档参考：https://www.npmjs.com/package/esri-loader

  • 安装完之后import一下
import esriLoader from  'esri-loader'

样式文件可以在main.js中引入，也可以在当前组件引入，我选择的是在main.js中引

import '../public/src/assets/js/4.10/esri/themes/light/main.css'//这里用相对路径就可以了

使用

最后加载就可以使用arcgis的api了，部分代码如下

      const options = {
        url: "/src/assets/js/4.10/init.js"//这里千万小心，要用绝对路径，这是托管在本地服务器上的地址
      }
      esriLoader
      //按需加载模块
      .loadModules([
        "esri/Map", 
        "esri/views/MapView",//2d视图模块
        "esri/views/SceneView",//3d视图模块
      ],options)
      .then(([
        Map,
        MapView,
        SceneView
      ])=>{
        console.log(Map)
      })

如果控制台可以打印出Map对象，那么说明我们已经在vue中成功加载arcgis了

以上就是ArcGis API for js在vue.js中的使用示例详解的详细内容，更多关于vue.js ArcGis API的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • vue.js通过路由实现经典的三栏布局实例代码

    vue.js通过路由实现经典的三栏布局实例代码

    本文通过实例代码给大家介绍了vue.js通过路由实现经典的三栏布局，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
    2018-07-07
  • Vue递归实现树形菜单方法实例

    Vue递归实现树形菜单方法实例

    学习vue有一段时间了，最近使用vue做了一套后台管理系统，其中使用最多就是递归组件，下面这篇文章主要给大家介绍了关于Vue利用递归实现树形菜单的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下
    2018-11-11
  • Vue实现拖拽改变列表顺序详解

    Vue实现拖拽改变列表顺序详解

    这篇文章主要为大家详细介绍了Vue实现拖拽改变列表顺序的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-04-04
  • 解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)

    解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)

    这篇文章主要介绍了解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • 基于Vue渲染与插件的加载顺序的问题详解

    基于Vue渲染与插件的加载顺序的问题详解

    下面小编就为大家分享一篇基于Vue渲染与插件的加载顺序的问题详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue实现信息管理系统

    vue实现信息管理系统

    这篇文章主要为大家详细介绍了vue实现信息管理系统，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-05-05
  • vue 指令和过滤器的基本使用(品牌管理案例)

    vue 指令和过滤器的基本使用(品牌管理案例)

    这篇文章主要介绍了vue-品牌管理案例-指令和过滤器的相关知识，文中通过代码给大家介绍了过滤器的基本使用,需要的朋友可以参考下
    2019-11-11
  • vue router demo详解

    vue router demo详解

    这篇文章主要为大家详细介绍了vue router demo演示代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-10-10
  • Vues中使用JavaScript实现路由跳转的步骤详解

    Vues中使用JavaScript实现路由跳转的步骤详解

    在Vue应用中,利用Vue Router进行页面间的导航是一个常见需求,本篇博客将通过示例代码详细介绍如何在Vue组件中使用JavaScript实现路由跳转,需要的朋友可以参考下
    2024-05-05
  • Vue实现右键菜单组件的超详细教程(支持快捷键)

    Vue实现右键菜单组件的超详细教程(支持快捷键)

    右键菜单组件非常常见,所有的前端开发工程师都会遇到类似的功能组件开发需求,这篇文章主要给大家介绍了关于Vue实现右键菜单组件的超详细教程,文中介绍的方法支持快捷键,需要的朋友可以参考下
    2024-02-02

最新评论