vue创建arcgis项目

最新推荐文章于 2025-05-05 09:32:12 发布

原创最新推荐文章于 2025-05-05 09:32:12 发布 · 478 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#arcgis #js #javascript #vue.js

arcgis 专栏收录该内容

3 篇文章

订阅专栏

本文档介绍了如何使用Vue CLI创建项目，并集成Esri的gis模块展示地图。首先通过npm安装vue-cli并创建名为my-project的项目，然后安装esri-loader。在项目中引入并使用esri-loader加载Map和MapView模块，设置地图的基本属性如中心点、缩放级别和底图样式。最终实现了一个简单的地图展示功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 下载vue-cli

npm install -g @vue/cli

2. 下载成功之后创建项目

vue create my-project

3. cd my-project 下载gis模块

npm install --save esri-loader

4. 添加如下代码运行即可查看地图

<template>
  <div style="height:600px;">
	 
  </div>
  
</template>

<script>
import { loadModules } from 'esri-loader';

export default {
  name: '',
  mounted() {

    loadModules(['esri/Map', 'esri/views/MapView'], { css: true })
    .then(([ArcGISMap, MapView]) => {
      const map = new ArcGISMap({
        basemap: 'topo-vector'
      });

      this.view = new MapView({
        container: this.$el,
        map: map,
        center: [-118, 34],
        zoom: 8
      });
    });
  },
  beforeDestroy() {
    if (this.view) {
      this.view.container = null;
    }
  }
};

</script>

<style scoped>
div {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}
</style>