Vue2/ArcGis4开发实战

更新：2021-8-18

最近用 Vue2结合 ArcGis4 做了一个项目，因为此前并没有怎么接触过ArcGis for JavaScript,所以整个过程还是比较痛苦的，虽然GIS官网有例子，并没有起到什么实质作用，网上关于vue/gis的资料又少的可怜，好了废话不多说，直接上干货！

api 引入

自定义服务配置文件

安装好cli后，开始引入GIS,在目录 src > assets>js下新建下新建ArcGisServe.js文件,供我们编写ArcGis Serve服务地址。

// ArcGisServe.js
export const ServiceUrl = {
    testLayer:'https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Landscape_Trees/FeatureServer/0', //测试图层
    apiUrl: 'https://js.arcgis.com/4.20/init.js',   //API地址
}

这里可以定义自己服务器上的底图的地址，默认情况下是官网地址，也可以添加其它服务地址，随意。

CDN

这中方法就不多说了，直接 script 标签 引入 CDN 网址，要说明的是，可用 CDN 网址较少，官网提供的地址在国内加载较满。

//更改版本号即可引入不同版本api
<script src="https://js.arcgis.com/4.20/init.js"></script>
// 主题样式
<link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/dark/main.css"/>

esri-loader (推荐)

npm install esri-loader

.vue 组件

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

<script>
import * as esriLoader from "esri-loader";
import { ServiceUrl } from "@/assets/js/ArcGisServe.js";

const option = {
    url: ServiceUrl.apiUrl
};

export default {
    name: "Test",
    data() {
        return {
            map: {},
            testLayer: {}
        };
    },
    methods: {
        Init() {
            esriLoader.loadModules([
                "esri/Map", 
                "esri/views/MapView", 
                "esri/layers/FeatureLayer"
            ], option).then(([Map, MapView, FeatureLayer]) => {
                this.map = new Map();
               // 不能在将视图对象赋值给data return 变量，如果想要赋值，可在外边定义一个变量。
                new MapView({
                    container: "viewDiv",
                    map: this.map
                });
                // 新建图层对象
                this.testLayer = new FeatureLayer({
                    url: ServiceUrl.testLayer
                });
                // 添加图层至地图
                this.map.add(this.testLayer);
            })
            .catch(err => {
                console.log(err);
            });
        }
    },
    created() {
        this.init();
    }
};
</script>

<style scoped>
 
@import "https://js.arcgis.com/4.20/esri/themes/light/main.css";
#viewDiv {
    width: 100%;
    height: 100%;
}
</style>

@arcgis/core（推荐）

npm install @arcgis/core

.vue 组件

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

<script>
import Map from "@arcgis/core/Map";
import MapView from "@arcgis/core/views/MapView";
import FeatureLayer from "@arcgis/core/layers/FeatureLayer";
// 图层服务地址
import { ServiceUrl } from "@/assets/js/ArcGisServe.js";
// 样式文件
import "@arcgis/core/assets/esri/themes/dark/main.css";

export default {
    name: "Test",
    data() {
        return {
            map: {},
            testLayer: {}
        };
    },
    methods: {
        init() {
            this.map = new Map();
            new MapView({
                container: "viewDiv",
                map: this.map
            });
            this.testLayer = new FeatureLayer({
                url: ServiceUrl.testLayer
            });
            this.map.add(this.testLayer);
        }
    },
   created() {
        this.init();
    }
};
</script>

<style>
#viewDiv {
    width: 100%;
    height: 100%;
}
</style>

esri-loader / @arcgis/core 区别

二者都可以通过npm 安装的依赖包，不同的是：

• @arcgis/core : 基于ES 构建，包含全部 api ,使用的时候直接引入对应的类，无需额外加载 api文件，打包后体积较大。

• esri-loader : api 加载器，需要引入额外的 api 文件，打包后体积较小，基于 AMD 构建。