天天看點

ArcGIS API for JavaScript開發環境準備ArcGIS API for JavaScript

ArcGIS API for JavaScript

通過ArcGIS API for JavaScript可以對ArcGIS for Server進行通路,并且将ArcGIS for Server提供的地圖資源和其他資源(ArcGIS Online)嵌入到Web應用中。

ArcGIS API for JavaSript主要特點

  1. 空間資料展示:加載地圖服務,影像服務,WMS等。
  2. 用戶端Mashup:将來自不同伺服器、不同類型的服務在用戶端聚合後統一呈現給客戶。
  3. 圖形繪制:在地圖上互動式地繪制查詢範圍或地理标記等。
  4. 符号渲染:提供對圖形進行符号化,要素圖層生成專題圖和服務端渲染等功能。
  5. 查詢檢索:基于屬性和空間位置進行查詢,支援關聯查詢,對查詢結果的排序、分組以及對屬性資料的統計。
  6. 地理處理:調用ArcGIS for Server釋出的地理處理服務(GP服務),執行空間分析、地理處理或其他需要伺服器端執行的工具、模型、運算等。
  7. 網絡分析:計算最優路徑、臨近設施和服務區域。
  8. 線上編輯:通過要素服務編輯要素的圖形、屬性、附件,進行編輯追蹤。
  9. 時态感覺:展示、查詢具有時間特征的地圖服務或影像服務資料。
  10. 影像處理:提供動态鑲嵌、實時栅格函數等處理等功能。
  11. 地圖輸出:提供多種地圖圖檔導出和伺服器端列印等功能。

在使用ArcGIS API for JavaScript的時候,其實就是在使用這些REST API使用這些服務對外的能力,了解每種服務的具體功能,在開發的時候就可以根據需求做到遊刃有餘。

內建開發環境和API的準備

要引入ArcGIS API for JavaScript的開發包

下載下傳連結:

https://developers.arcgis.com/downloads/apis-and-sdks?product=javascript

新增賬號:

https://accounts.esri.com/en/signup?redirect_uri=http%3A%2F%2Fappsforms.esri.com%2Fproducts%2Fdownload%2Findex.cfm%3Ffuseaction%3Ddownload.all

修改API的兩個JS檔案

這裡要注意你下載下傳的是arcgis哪個版本的,這裡示範 3.19 版本的,其他版本的也是類似的,如果是 4.x 版本的,要将 https 改成 http。

  1. arcgis_js_api\library\3.19\3.19\init.js

    [HOSTNAME_AND_PATH_TO_JSAPI]dojo

    修改成

    localhost/arcgis_js_api/library/3.19/3.19/dojo

修改前:

ArcGIS API for JavaScript開發環境準備ArcGIS API for JavaScript

修改後:

ArcGIS API for JavaScript開發環境準備ArcGIS API for JavaScript
  1. arcgis_js_api\library\library\3.19\3.19\dojo\dojo.js

    [HOSTNAME_AND_PATH_TO_JSAPI]dojo

    修改成

    localhost/arcgis_js_api/library/3.9/3.9/dojo

修改前:

ArcGIS API for JavaScript開發環境準備ArcGIS API for JavaScript

修改後:

ArcGIS API for JavaScript開發環境準備ArcGIS API for JavaScript

Tomcat部署(這個方法比較友善,推薦這個)

将arcgis_js_api放在webapps下,同樣修改兩個js檔案,就是上面提到的兩個檔案,主要注意修改的路徑要填寫正确。

然後建立一個項目:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, maximum-scale=1, user-scalable=no, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="http://localhost:8080/arcgis_js_api/library/3.19/3.19/dijit/themes/claro/claro.css" target="_blank" rel="external nofollow" >
    <link rel="stylesheet" href="http://localhost:8080/arcgis_js_api/library/3.19/3.19/esri/css/esri.css" target="_blank" rel="external nofollow" >
    <script src="http://localhost:8080/arcgis_js_api/library/3.19/3.19/init.js"></script>
    <style>
        html, body, #map {
            height: 100%;
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body class="claro">
    <div id="map"></div>
    <script>
        var map;
        require(["esri/map", "dojo/domReady!"], function(Map) {
            map = new Map("map", {
                basemap: "topo",
                center: [-122.45, 37.75],
                zoom: 13
            });
        });
    </script>
</body>
</html>
           

打開浏覽器就可以看到效果了。

IIS部署

如果不是 macbook,同時電腦裡沒有裝 tomcat,可以考慮用這種方式。

打開控制台,點選【程式】→【啟用或關閉Windows功能】,然後找到Internet資訊服務,然後進行勾選。

[外鍊圖檔轉存失敗,源站可能有防盜鍊機制,建議将圖檔儲存下來直接上傳(img-Qy4GSjJZ-1592198186986)(https://i.imgur.com/XAjhmHY.png)]

FTP伺服器和Web管理器全選和網際網路服務中的安全性、常見HTTP功能。性能功能全選。應用程式開發功能和運作狀況和診斷按下圖選

ArcGIS API for JavaScript開發環境準備ArcGIS API for JavaScript

打開IIS管理器

打開控制台,點選【系統與安全】→【管理工具】→【Internet資訊服務(IIS)管理器】,打開IIS管理器

配置IIS管理器

在硬碟的某一位置建立一個Web站點檔案夾(我建在了F:\Web),這個位置随意。

設定後的顯示:

ArcGIS API for JavaScript開發環境準備ArcGIS API for JavaScript

輸入網址:http://127.0.0.1/ 就可以看到部署在 IIS 伺服器上的資源了。

如果不行的話應該是沒打開目錄浏覽,進去之後右邊有一個啟用的按鈕。

将demo直接放在 F:\web 檔案夾下,然後通路 127.0.0.1 對應的demo也可直接檢視最終用 js 顯示的地圖哦。

參考連結:

  • OGC、WMS、WFS、WCS
  • 【一】ArcGIS API for JavaScript之API的使用和部署
  • Win10下Arcgis api for javascript的本地伺服器(IIS)配置
  • arcgis api for js 3.25
  • http://www.ibloger.net/category-37.html