WebGIS實戰系列 一、環境準備

前言

近期會在博客發佈一系列有關WebGIS的實戰課程，技術棧：vue全家桶+arcgis Server+arcgis API 3.x+asp.net實現一個簡單的城市供水管網系統。
前置知識準備：

• es6語法
• node的簡單安裝包
• vue、vue-cli 3.0、vuex，vue-router，以及elementUI框架
• axios
• asp net mvc框架（後臺可能會使用koa2）
• arcgis SOE開發擴展arcgis server功能
• arcgis的簡單操作：發佈地圖服務，矢量化地圖等等。
• arcgis sde for postgresql安裝
• ThreeJS實現三維管道展示

我的環境是 arcgis 10.2版本的，大家也可以進行安裝。

可以補充一下這些知識，我也會在博客裏面寫有關代碼的說明。

1. 加載地圖

首先使用vue-cli創建一個項目，我是使用element UI進行搭建項目的整體框架，界面如下，代碼我會上傳到我的github上面

esri推出了一個非dojo框架加載地圖的一個包esri-loader，我們可以查看 https://github.com/Esri/esri-loader ，按照提示的步驟進行操作，首先輸入命令：npm install --save esri-loader進行安裝，然後在main.js入口引用esri-loader：

import { loadScript } from 'esri-loader'
const options = {
  url: 'https://js.arcgis.com/3.23/',
}
//加載腳本
loadScript(options)

然後在我們加載地圖的組件中進行加載地圖操作：

import { loadModules } from 'esri-loader';
export default {
  mounted () {
    this.initMap()
  },
  methods: {
    initMap () {
      loadModules(['esri/map', 'esri/dijit/HomeButton', 'esri/layers/ArcGISTiledMapServiceLayer'])
        .then(([Map, HomeButton, ArcGISTiledMapServiceLayer]) => {
          // 創建地圖以及配置參數
          const map = new Map(this.$refs.map, {
            center: [114.3, 30.51667],
            zoom: 12,
          })
          // 實例化home按鈕
          const button = new HomeButton({
            map
          }, this.$refs.button)
          // 啓用按鈕
          button.startup()
          let basemapurl="http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineStreetWarm/MapServer";
          let graybasemap = new ArcGISTiledMapServiceLayer(basemapurl);
          // 加載地圖
          map.addLayer(graybasemap);
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}

實現效果：