vue+arcgis

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

盛夏晚秋

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

阅读量2.4k

点赞数 2

分类专栏： arcgis 文章标签： arcgis vue-cli3 vue javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_21785691/article/details/111478372

版权

arcgis 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何在 Vue 项目中集成 ArcGIS API，实现地图展示、比例尺和回首页等功能。具体步骤包括下载 API、安装 esri-loader、配置全局变量、修改 baseURL 并在页面中使用。

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

一、下载arcgisAPI

二、将api放入项目public文件夹下

类似

三、安装esri-loader并引用css

import { loadModules } from 'esri-loader'

import '../public/api/esri/themes/light/main.css'

四、设置全局变量

Vue.prototype.$loadModules = loadModules;

Vue.prototype.$option = { url: "./api/init.js" }

五、改变baseURL

dojo.js和init.js

 baseUrl:"https://[HOSTNAME_AND_PATH_TO_JSAPI]dojo"
 //改成
 baseUrl:"./api/dojo/"

六、页面使用

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

<script>
export default {
  name: 'WebMap',
  mounted() {
    let that = this;
    that.$loadModules([
      'esri/Map', 
      'esri/views/MapView',
      "esri/layers/MapImageLayer",
      "esri/widgets/Home",
      "esri/widgets/ScaleBar"
      ],that.$option)
    .then(([Map, MapView,MapImageLayer,Home,ScaleBar]) => {
      
      var ygyx = new MapImageLayer({
        url:
          "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer",
        id:'ygyx'
      });
      // 创建地图
      var map=new Map({
          layers:[ygyx]
      });
      // 地图实例化
      that.view = new MapView({
        container: "mapView",
        map: map,
        center: [120.2494, 30.2867],
        zoom: 11,
      });
      // 比例尺
      var scaleBar = new ScaleBar({
          view: this.view,
          unit: "metric" // The scale bar displays both metric and non-metric units.
        });
      // 比例尺添加到地图左下角
      this.view.ui.add(scaleBar, {
        position: "bottom-left"//左下角
      });
      // home 回到视图中心
      var homeBtn = new Home({
          view: this.view,
          container:"home"
        });
      this.view.ui.add(homeBtn, "top-right");//右上角
    });
  },
  methods: {
  },
};

</script>

<style scoped lang="less">
#mapView{
  position: relative;
  width:100%;
  height:100%;
  .xiao{
    position:absolute;
    right: 20px;
    top: 50px;
  }
  .remove,.add{
    position:absolute;
    right: 70px;
    bottom: 20px;
  }
  .none{
    display: none;
  }
  #widgets{
    position:absolute;
    right: 120px;
    bottom: 20px;
    margin: 0 5px;
    font-size: 11px;
    color: #fff;
  }
}
/deep/ .esri-ui{
  // display: none;
  position: absolute;
}
/deep/ .esri-component.esri-attribution.esri-widget{
  display: none;
}
</style>