ArcGis For JavaScript4.x學習(一)——第一個demo

阿新 • • 發佈：2019-01-20

一、前提介紹：

博主公司之前的WebGis使用的是ArcGis For Flex，但是由於adobe公司和esri公司對flex不維護了和支援了，所以決定定放棄ArcGis For Flex，換成使用ArcGis For JavaScript，網上很多ArcGis For JavaScript的例子但都是3.x的版本，不是最新的4.x，特寫博文記錄學習路程。

二、資源的引用：

4.x和3.x的目錄結構和檔名稱都有一些變化，網上很多都是3.x的入門的示例對4.x是不可以直接使用，這兒不詳細介紹，可以直接到ArcGis For JavaScript api裡去看，這兒給一個入口：ArcGis For JavaScript

4.x的官網api裡的示例都是自己的服務，所以只要把它的靜態頁面複製過去就可以看到效果了，這樣對學習會有誤導作用，建議還是自己起一個服務學習。

三、自己起服務豐衣足食：

自己起服務：下載官網的那個sdk裡有相關的介紹這兒直接貼出來：

1：替換：

Open C:\Inetpub\wwwroot\arcgis_js_api\library\4.0\4.0\init.js in a text editor and search for the text[HOSTNAME_AND_PATH_TO_JSAPI], and replace this text with fqdn.tld/arcgis_js_api/library/4.0/4.0/
Open C:\Inetpub\wwwroot\arcgis_js_api\library\4.0\4.0\dojo\dojo.js in a text editor and search for the text[HOSTNAME_AND_PATH_TO_JSAPI], and replace this text with fqdn.tld/arcgis_js_api/library/4.0/4.0/

2、設計頁面：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
    <title>Test Map</title>
    <link rel="stylesheet" href="http://www.example.com/arcgis_js_api/library/4.0/4.0/dijit/themes/claro/claro.css" />
    <link rel="stylesheet" href="http://www.example.com/arcgis_js_api/library/4.0/4.0/esri/css/main.css" />
    <style>
      html, body, #ui-map-view {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
      }
    </style>
    <script src="http://www.example.com/arcgis_js_api/library/4.0/4.0/init.js"></script>
    <script>
      var myMap, view;
      require([
        "esri/Basemap",
        "esri/layers/TileLayer",
        "esri/Map",
        "esri/views/MapView",
        "dojo/domReady!"
      ], function (Basemap, TileLayer, Map, MapView){
        // --------------------------------------------------------------------
        // If you do not have public Internet access then use the Basemap class
        // and point this URL to your own locally accessible cached service.
        // 
        // Otherwise you can just use one of the named hosted ArcGIS services.
        // --------------------------------------------------------------------
        var layer = new TileLayer({
          url: "http://www.example.com/arcgis/rest/services/Folder/Custom_Base_Map/MapServer"
        });
        var customBasemap = new Basemap({
          baseLayers: [layer],
          title: "Custom Basemap",
          id: "myBasemap"
        });
        myMap = new Map({
          basemap: customBasemap
        });
        view = new MapView({
          center: [-111.87, 40.57], // long, lat
          container: "ui-map-view",
          map: myMap,
          zoom: 6
        });
      });
    </script>
  </head>
  <body class="claro">
    <div id="ui-map-view"></div>
  </body>
</html>

四、注意： 1、對於上面的頁面程式碼需要把js和css引用url修改成自己專案的url 2、對於圖層的地圖服務這兒需要自己啟動個arcgis service用來呼叫，如果覺得麻煩，esri也提供了相應的服務給我們呼叫了，這個博主提供出來，不知遊客們看到時這些服務還在不在：esri提供的各種樣式的地圖服務，隨意選

ArcGis For JavaScript4.x學習(一)——第一個demo

ArcGis For JavaScript4.x學習(一)——第一個demo

Swift學習的第一個demo，講解了一些常用的知識點

ArcGIS API for JavaScript3.x 學習筆記[3] 加載底圖（一）【天地圖（經緯度版）】

ArcGIS API for JavaScript3.x 學習筆記[4] 加載底圖（三）【Open Street Map開放街道地圖】

ArcGIS API for JavaScript3.x 學習筆記[5] 加載底圖（四）【高德在線地圖】

ArcGIS API for JavaScript3.x 學習筆記[8] 動態地圖服務圖層

arcgis api for javascript4.x聚合

OC學習筆記一---第一個OC程式

18 ArcGIS API for JavaScript4.X 系列加載天地圖（經緯度）

struts2學習筆記——第一個struts2應用配置

Python Tkinter學習(1)——第一個Tkinter程序

python新手第一天學習筆記-第一個ptyhon程序和python變量

Java Netty 學習(七) - 第一個Netty程式

vue學習——第一個demo

一、搭建Django，建立第一個demo

Java菜鳥學習編寫第一個java程式HelloWorld

hibernate(一) 第一個hibernate工程

ArcGIS for Android 的學習與應用（二）如何移除指定的點和線？

Swift3.0學習筆記-第一個app

Shadertoy程式設計學習(1):第一個shader程式

ArcGis For JavaScript4.x學習(一)——第一個demo

相關推薦