Arcgis for JavaScript + Vue 学习笔记 —— 创建2D，3D地图

本文记录了 Vue.js 结合 Arcgis （4.13版本）实现 2D 地图及 3D 地图的创建。

1. 创建 Vue 项目，安装 esri-loader

创建 Vue 项目就不再赘述，安装： npm install --save esri-loader 或者 yarn add esri-loader

2. 引入项目中

import {loadModules} from 'esri-loader';

3. 创建3D地图的完整代码

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

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

  export default {
    name: "",
    data() {
      return {
        options: {
          url: 'https://js.arcgis.com/4.13/'
        }
      }
    },
    mounted() {
      this.get3DMap()
    },
    methods: {
      get3DMap() {
        loadModules([
          "esri/Map",
          "esri/views/SceneView",
          "dojo/domReady!"
        ], this.options)
          .then(([Map, SceneView]) => {
            const map = new Map({
              basemap: "hybrid",
            })

            // 创建视图
            const views = new SceneView({
              container: "viewDiv",
              scale: 40000000, //将初始比例设置为1:40 000 000
              center: [116.49, 39.74], // 地球初始停留的中心点
              map: map
            })
          })
      }
    }
  }
</script>

<style scoped>
@import url("https://js.arcgis.com/4.13/esri/themes/light/main.css");
  #sceneView {
    width: 100%;
    height: 100%;
  }

  html, body, #viewDiv {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
  }
</style>

4. 创建2D地图的完整代码

basemap是地图的底图，是一组切片图层。

底图的选项有：satellite，hybrid，topo，gray，dark-gray，oceans，osm，national-geographic,streets

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

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

  export default {
    name: "",
    data() {
      return {
        options: {
          url: 'https://js.arcgis.com/4.13/'
        }
      }
    },
    mounted() {
      this.get2DMap()
    },
    methods: {
      get2DMap() {
        loadModules([
          "esri/Map",//加载特定于创建地图的代码
          "esri/views/MapView",
          "dojo/domReady!"  //确保在执行代码之前DOM可用
        ], this.options)
          .then(([Map, MapView]) => {
            const map = new Map({
              basemap: "streets"
            });

            // 视图层：根据经纬度定位在某山
            const view = new MapView({
              container: "viewDiv",
              map: map, //引用上面map的映射对象
              center: [116.49, 39.74],  //使用经度、纬度设置中心点
              zoom: 11  //设置缩放级别
            });
          })
      }
    }
  }
</script>

<style scoped>
  @import url("https://js.arcgis.com/4.13/esri/themes/light/main.css");

  #mapView {
    width: 100%;
    height: 100%;
  }

  html, body, #viewDiv {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
  }
</style>