Preview

ArcGIS

ArcGIS 官方檔案

一、安裝 ArcGIS 官方加載依賴 esri-loader

esri-loader 官網

npm install esri-loader --save-dev

二、初始化地圖

InitMap.vue

<template>
  <div id="map-container"
       style="width:100%;height:100%;">
    <div id="HomeButton"></div>
    <div id="LocateButton"></div>
    <div id="navigation-toolbar"
         class="navigation-toolbar">
      <div class="nt-translation">
        <button id="resize"></button>
        <button id="east"></button>
        <button id="west"></button>
        <button id="south"></button>
        <button id="north"></button>
      </div>
      <div class="nt-zoom">
        <div class="rule"></div>
        <button id="site"></button>
        <button id="zoomUp"></button>
        <button id="zoomDowm"></button>
      </div>
    </div>
  </div>
</template>
<script>
import { loadCss, loadModules } from 'esri-loader'
export default {
  name: 'InitMap',
  data() {
    return {
      navToolbar: null,
      map: '',
      gisConstructor: {}, // gis 建構式
      gisModules: [
        'esri/toolbars/navigation', // 地圖導航工具
        'dojo/_base/declare',
        'esri/dijit/OverviewMap', // 小地圖
        'esri/dijit/Scalebar', // 比例尺
        'esri/dijit/LocateButton', // 當前位置
        'esri/dijit/HomeButton', // 回傳到地圖默認開始范圍
        'esri/layers/OpenStreetMapLayer', // OSM
        'esri/geometry/Extent', // 范圍
        'esri/map',
      ],
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    /**
     * @name: 地圖點擊事件
     */
    mapClickFun() {
      this.map.on('click', e => {
        console.log(e)
      })
    },

    /**
     * @name: 初始化地圖
     */
    init() {
      // 加載 css
      // loadCss('http://localhost/js.arcgis.com/3.32/esri/css/esri.css')
      loadCss('https://js.arcgis.com/3.32/esri/css/esri.css')
      // 加載模塊
      loadModules(this.gisModules, {
        // url: 'http://localhost/js.arcgis.com/3.32/init.js'
        url: 'https://js.arcgis.com/3.32/',
      })
        .then(this.initMap)
        .then(this.mapClickFun)
    },
    initMap(args) {
      // 將 ArcGIS 的每個功能模塊都存放到 gisConstructor 中
      for (let k in args) {
        let name = this.gisModules[k].split('/').pop()
        this.gisConstructor[name] = args[k]
      }
      /**
       * 添加 OSM 有兩種方式
       * 方式一：在初始化 map 時設定 basemap 屬性 basemap: 'osm'
       * 方式二：加載 OpenStreetMapLayer 模塊，創建 OSM layer，再添加 layer 到 map 中，可單獨對 OSM 進行配置
       */
      let basemap = new this.gisConstructor.OpenStreetMapLayer({
        id: 'OSMlayer',
        visible: true,
        opacity: 1,
        // displayLevels: [1, 2, 3] // 在指定縮放等級下顯示
      })
      this.map = new this.gisConstructor.map('map-container', {
        // center: [116.395645038, 39.9299857781],
        // basemap: 'osm',
        zoom: 12,
        logo: false,
        slider: true,
      })
      this.map.addLayer(basemap)

      // 設定初始化范圍
      let extent = {
        xmin: -117.1839455,
        ymin: 32.68087830000002,
        xmax: -117.15035189999998,
        ymax: 32.732100979999984,
      }
      /*
        如果坐標系是 4490，初始化范圍需要設定空間參考坐標系
        new this.gisConstructor.SpatialReference({
          wkid: 4490
        })
      */
      this.map.setExtent(
        new this.gisConstructor.Extent(
          extent.xmin,
          extent.ymin,
          extent.xmax,
          extent.ymax
        )
      )

      // 回傳到地圖默認開始范圍（現在是根據 center 設定的，如何根據 extent 設定？）
      // let home = new this.gisConstructor.HomeButton(
      //   {
      //     map: this.map,
      //   },
      //   'HomeButton'
      // )
      // home.startup()

      // 當前位置
      // let geoLocate = new this.gisConstructor.LocateButton(
      //   {
      //     map: this.map,
      //   },
      //   'LocateButton'
      // )
      // geoLocate.startup()

      // 比例尺
      // eslint-disable-next-line no-unused-vars
      let scalebar = new this.gisConstructor.Scalebar({
        map: this.map,
        // "dual" displays both miles and kilometers
        // "english" is the default, which displays miles
        // use "metric" for kilometers
        scalebarUnit: 'metric',
      })

      // 小地圖
      // let overviewMapDijit = new this.gisConstructor.OverviewMap({
      //   map: this.map,
      //   visible: true,
      // })
      // overviewMapDijit.startup()

      // 自定義導航空間（地圖平移，縮放，設定范圍等功能）
      let innerDOM = document.getElementById('navigation-toolbar')
      let allBtn = innerDOM.querySelectorAll('button')
      let siteDOM = ''
      for (let i = 0; i < allBtn.length; i++) {
        if (allBtn[i].getAttribute('id') === 'site') {
          siteDOM = allBtn[i]
          siteDOM.style.top = this.map.getLevel() + 20 + 'px'
        }
        allBtn[i].onclick = event => {
          let domID = event.target.getAttribute('id')
          switch (domID) {
            case 'resize':
              this.map.setExtent(
                new this.gisConstructor.Extent(
                  extent.xmin,
                  extent.ymin,
                  extent.xmax,
                  extent.ymax
                )
              )
              break
            case 'east':
              this.map.panRight()
              break
            case 'west':
              this.map.panLeft()
              break
            case 'north':
              this.map.panDown()
              break
            case 'south':
              this.map.panUp()
              break
            case 'zoomUp':
              this.map.setLevel(this.map.getLevel() + 1)
              break
            case 'zoomDowm':
              this.map.setLevel(this.map.getLevel() - 1)
              break
            case 'site':
              // this.map.setLevel()
              break
          }
          siteDOM.style.top = this.map.getLevel() + 20 + 'px'
        }
      }
      siteDOM.style.top = this.map.getLevel() + 20 + 'px'
    },
  },
}
</script>

<style lang="scss">
#map-container {
  position: relative;
}
#HomeButton {
  position: absolute;
  top: 95px;
  left: 20px;
  z-index: 50;
}
#LocateButton {
  position: absolute;
  top: 145px;
  left: 20px;
  z-index: 50;
}
.esriScalebarLabel {
  width: auto !important;
}
.esriOverviewMap.ovwTR {
  top: 50px !important;
}
#navigation-toolbar {
  position: absolute;
  top: 50px;
  left: 100px;
  z-index: 9;
  text-align: center;
  .nt-translation {
    width: 60px;
    height: 60px;
    background-image: url('../assets/images/navtoolbar/ico02.png');
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;
    button {
      width: 20px;
      height: 20px;
      &#resize {
        width: 26px;
        height: 26px;
        background-image: url('../assets/images/navtoolbar/ico03.png');
        background-repeat: no-repeat;
        background-size: contain;
        top: 50%;
        left: 50%;
        margin-left: -13px;
        margin-top: -13px;
      }
      &#east {
        top: 50%;
        right: 0;
        margin-top: -10px;
      }
      &#west {
        top: 50%;
        left: 0;
        margin-top: -10px;
      }
      &#south {
        left: 50%;
        bottom: 0;
        margin-left: -10px;
      }
      &#north {
        left: 50%;
        top: 0;
        margin-left: -10px;
      }
    }
  }
  .nt-zoom {
    position: relative;
    height: 120px;
    margin-top: 20px;
    .rule {
      width: 20px;
      height: 104px;
      background-image: url('../assets/images/navtoolbar/ico01.jpg');
      background-repeat: no-repeat;
      background-size: contain;
      position: absolute;
      top: 0;
      left: 50%;
      margin-left: -10px;
    }
    button {
      width: 16px;
      height: 16px;
      background-repeat: no-repeat;
      background-size: contain;
      &#zoomUp {
        left: 50%;
        top: -18px;
        margin-left: -8px;
        background-image: url('../assets/images/navtoolbar/ico04.png');
      }
      &#zoomDowm {
        left: 50%;
        bottom: -4px;
        margin-left: -8px;
        background-image: url('../assets/images/navtoolbar/ico05.png');
      }
      &#site {
        width: 11px;
        height: 11px;
        left: 50%;
        top: 5px;
        margin-left: -5px;
        background-image: url('../assets/images/navtoolbar/ico06.png');
      }
    }
  }
  button {
    cursor: pointer;
    position: absolute;
    background: none;
    outline: 0;
    border: 0;
  }
}
</style>

esri-loader 方法：

• getScript () 從庫里面獲取 js 檔案
• isLoaded () 檢測模塊是否加載完成
• loadModules( [ ], options) 用于加載 arcgis 模塊
• loadCss( url ) 用于加載 css 檔案
• loadScript({url: “xxxxxxxx” }) 將 js 加載到頁面上

如果將依賴部署到了本地或其他服務器上，需要修改 init.js，否則依賴可能會加載失敗，在 init.js 中搜索：

baseUrl:

修改后邊地址，例如：

baseUrl:"http://localhost/js.arcgis.com/3.32/dojo"

也可以設定為動態地址，通過 js 獲取當前檔案所在的服務器地址：

baseUrl:document.scripts[document.scripts.length - 1].src.substring(0, document.scripts[document.scripts.length - 1].src.lastIndexOf("/") + 1) + "/dojo"