Vue单文件中加载arcgis显示地图

最新推荐文章于 2025-04-21 14:06:54 发布

forgraduateonly

最新推荐文章于 2025-04-21 14:06:54 发布

阅读量1.3k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/forgraduateonly/article/details/126135487

版权

这篇博客展示了如何在Vue应用中使用esri-loader库动态加载ArcGIS API for JavaScript的Map和MapView模块，创建并配置一个矢量底图的地图视图，并进行了一些基本的设置，如清除地图左上角的缩放图标。

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

<template>
  <div id="content"></div>
</template>

<script>
import {loadModules} from 'esri-loader';
import esriConfig from "@arcgis/core/config";
export default {
  
  methods: {

      //创建地图
      _createMapView: function() {
            var _self = this;   //定义一个_self防止后续操作中this丢失
           var option = {      //定义一个包含有JS API中js开发包和css样式文件的对象
                url: 'https://js.arcgis.com/4.24/',
                css: 'https://js.arcgis.com/4.24/esri/themes/light/main.css',
            };

             loadModules(['esri/Map',
            'esri/views/MapView'], option)
                .then(([Map, MapView]) => {
                    esriConfig.apiKey = "AAPK446e5881d29248d39795a47b359bb81dDvA3xEEUCvMH0qKmoUjUVcqJJ5Yxl27H39r3b7ye41irXy5PnnfbA-XBimuo94Nr";
                    //业务代码在此处编写
                    var map = new Map({    //实例化地图
                        basemap: "topo-vector"
                    });

                    var view = new MapView({   //实例化地图视图
                        container: "content",
                        map: map,
                        zoom: 11, 
                        center: [104.072044,30.663776] 
                    });

                    view.ui.components = [];   //清除掉地图左上角默认的缩放图标
                    console.log('加载了地图')
                }).catch((err) => {
                    _self.$message('地图创建失败，' + err);
                });},
                
                
                },
                mounted:function(){
          this._createMapView()
                }}

</script>
<style scoped>
#content {
 width:200px;
 height:200px;
}
</style>