vue使用ArcGIS以及基于arcgis封装的地图API

最新推荐文章于 2025-06-21 12:20:15 发布

原创

最新推荐文章于 2025-06-21 12:20:15 发布 · 4.8k 阅读

19 ·

CC 4.0 BY-SA版权

一.安装arcgis地图加载器

二.使用arcgis加载地图

三.vue使用npm没有的地图api,即自己或他人封装的（是个大坑）

一.安装arcgis地图加载器

1.使用npm install esri-loader --save 或者 yarn add esri-loader

2.在项目中需要加载地图的vue文件（组件）中引入 esri-loader

import * as esriLoader from 'esri-loader'

二.使用arcgis加载地图

1.在style中使用@import引入arcgis的css文件

@import url('https://js.arcgis.com/4.4/esri/css/main.css');

2.在methods里编写加载地图代码，如下

 createMap: function() {
      const options = {
        //url: "https://js.arcgis.com/4.12/init.js"       //这是官网demo的地址 
      };
      let that = this;
      esriLoader
        .loadModules([//这里根据自己的需要引入需要用到的模块
          // "esri/tasks/Locator",
          "esri/Map",
          "esri/views/MapView",//2D地图引入，3D使用screenView
          "esri/layers/TileLayer",//地图图层可以使用这个类来添加
          //"esri/layers/FeatureLayer",//自定义的图层
          "esri/Graphic",//图像，点线面等
          //"esri/layers/GroupLayer",
          // "esri/widgets/LayerList",
          "esri/widgets/Fullscreen",//全屏小部件
          "esri/widgets/Zoom",//放大缩小部件
          "dojo/domReady!"
        ])
        .then(
          ([Map, MapView, TileLayer, Graphic, Fullscreen, Zoom]) => {
            var transportationL