個人博客遷移到biubu.cn,此處停更.請移步。

arcgis + vue 本地開發(fā)環(huán)境配置

• 1 首先用 vue-cli 生成項目結(jié)構(gòu)并安裝項目依賴,當(dāng)然,這不是唯一的,同樣也可以使用 iview-cli 來生成,再次不在贅述.

• 2 安裝 arcgis 官方依賴 esri-loader,這個只是開發(fā)依賴,因此使用命令 npm i esri-loader --save-dev 來安裝.

• 3 用模塊的方式引入 esri-loader;

  import esriLoader from 'esri-loader'
  

  esriLoader 有以下幾個方法 :

  • 1 getScript () 從庫里面獲取 js 文件 ;
  • 2 isLoaded () 檢測模塊是否加載完成 ;
  • 3 loadModules( [ ], options) 用于加載arcgis 模塊,
  • 4 loadCss( url ) 用于加載css文件
  • 5 loadScript({url: "xxxxxxxx" }) 將js 加載到頁面上,

• 4 開始加載第一個地圖:

  // template 部分代碼: 
      <div>
          <div id="viewDiv"></div>
          <div id="newmap"></div>
      </div>
  

   // css 代碼 : 
   #viewDiv {
       margin: 20px auto;
       border: 1px solid #000;
       width: 500px;
       height: 400px;
   }
  
  

  // js 代碼
  import esriLoader from 'esri-loader'
  
  const options = {
              // 可以使用自定義資源加載,arcgis 官網(wǎng)加載太慢了,經(jīng)常加載失敗.后面會講到自己本地如何配置資源
              url: 'http://localhost:8080/arcgis_js_api/library/4.7/init.js'
          }
  
          esriLoader.loadModules ([
              "esri/Map",
              'esri/views/MapView',
          ], options)
          .then (([
                      Map,
                      MapView
                  ]) => {
              const map = new Map ({
                  basemap: "streets"
              })
              const mapview = new MapView ({
                  container: "viewDiv",
                  map: map,
                  zoom: 12,
                  center: [ 102.7346125, 25.0563901 ]
              })
          }, reason => {
              console.log (reason);
          })
  

  • 配置好以上部分,就可以正常的加載出地圖了.

• 5本地配置 arcgis 資源:

  • 5.1 下載資源,官網(wǎng)提供了下載的資源,需要先注冊賬號才能下載,但是呢,注冊賬號的有不開發(fā),可以通過谷歌賬號登陸,登陸完成就可以下載了.下載地址
  • 5.2 windows 系統(tǒng)下配置 ,首先安裝 tomcat,進(jìn)入tomcat 所在目錄,將下載下來的文件加壓,將arcgis_js_api文件夾粘貼到 tomcat 的 webapps 目錄下.
  • 5.3 在 \arcgis_js_api\library\4.7 目錄下 init.js 文件打開, 搜索 https://[HOSTNAME_AND_PATH_TO_JSAPI]dojo,替換為
    http://localhost:8080/arcgis_js_api/library/4.7/
    用同樣的方式處理 \arcgis_js_api\library\4.7\dojo\dojo.js;
  • 5.4 啟動 tomcat ;這里注意,我的tomcat 默認(rèn)端口是 8080, 如果你的不是 8080,請更改替換后連接的端口;然后,打開瀏覽器,
    輸入http://localhost:8080/arcgis_js_api/library/4.7/init.js,看看能否正常訪問,能訪問就在說明正常了.