建立地圖

發行項
04/22/2024

本文將說明建立地圖及以動畫顯示地圖的方法。

載入地圖

若要載入地圖，請建立地圖類別的新執行個體。初始化地圖時，傳遞 DIV 元素識別碼來轉譯地圖，並傳遞載入地圖時要使用的一組選項。如果未在 atlas 命名空間上指定預設驗證資訊，載入地圖時，必須在地圖選項中指定此資訊。地圖會以非同步方式載入數個資源以獲得效能。因此，在建立地圖執行個體之後，將 ready 或 load 事件附加至地圖，然後將與地圖互動的任何其他程式碼新增至事件處理常式。當地圖載入足夠的資源，可透過程式設計方式互動時，就會觸發 ready 事件。 load 事件會在初始地圖檢視完整完成載入之後觸發。

您也可以在相同的頁面上載入多個地圖，如需示範在同一頁面上載入多個地圖的範例程式碼，請參閱 Azure 地圖服務範例中的多個地圖。如需此範例的原始程式碼，請參閱多個地圖服務原始程式碼。

A screenshot that shows the snap grid on map.

提示

相同頁面上的多個地圖可能會使用相同或不同的驗證和語言設定。

顯示世界的單一複本

在寬螢幕上放大地圖時，世界的多個複本會水平顯示。此選項適合某些案例，但對於其他應用方式而言，最好是看到世界的單一複本。藉由將地圖 renderWorldCopies 選項設定為 false，即可實作此行為。

//Only allow one copy of the world be rendered when zoomed out.
renderWorldCopies: false

地圖選項

建立地圖時，可以傳入數個不同類型的選項，以自訂地圖的運作方式:

CameraOptions 和 CameraBoundOptions 是用來指定地圖應該顯示的區域。
ServiceOptions 可用來指定地圖應該如何與提供地圖功能的服務互動。
StyleOptions 可用來指定地圖的樣式和轉譯方式。
UserInteractionOptions 可用來指定使用者與地圖互動時應該如何連接地圖。

使用 setCamera、setServiceOptions、setStyle 和 setUserInteraction 函式載入地圖之後，也可以更新這些選項。

控制地圖觀景窗

有兩個方式可以使用地圖的觀景窗來設定地圖的顯示區域。您可以在載入地圖時設定觀景窗選項。或者，您可以在地圖載入之後隨時呼叫 setCamera 選項，以程式設計方式更新地圖檢視。

設定觀景窗

地圖觀景窗會控制地圖畫布檢視區中顯示的內容。初始化或傳遞至地圖 setCamera 函式時，觀景窗選項可以傳遞至地圖選項。

// Set the camera options when creating the map.
// Map properties, such as center and zoom level, are part of the CameraOptions
var map = new atlas.Map('map', {
    center: [-122.33, 47.6],
    zoom: 12

    //Additional map options.
};

//Update the map camera at anytime using setCamera function.
map.setCamera({
    center: [-110, 45],
    zoom: 5 
});

置中與縮放層級等地圖屬性是 CameraOptions 屬性的一部分。

設定觀景窗界限

週框方塊可用來更新地圖觀景窗。如果週框方塊是從點資料計算而來，在觀景窗選項中指定像素邊框間距值來解釋圖示大小通常很有用。像素邊框間距有助於確保點不會落在地圖檢視區的邊緣外。

map.setCamera({
    bounds: [-122.4, 47.6, -122.3, 47.7],
    padding: 10
});

在下列程式碼中，會透過 new atlas.Map() 建構地圖物件。 CameraBoundsOptions 等地圖屬性可透過 Map 類別的 setCamera 函式來定義。邊界和邊框間距屬性會使用 setCamera 來設定。

以動畫方式呈現地圖的檢視

設定地圖的觀景窗選項時，也可以設定動畫選項。這些選項會指定移動觀景窗所需的動畫類型和持續時間。

map.setCamera({
    center: [-122.33, 47.6],
    zoom: 12,
    duration: 1000,
    type: 'fly'  
});

在下列程式碼中，第一個程式碼區塊會建立地圖，並設定進入和縮放地圖樣式。在第二個程式碼區塊中，會針對動畫按鈕建立 Click 事件處理常式。按一下此按鈕時，會針對 CameraOptions 和 AnimationOptions 的一些隨機值呼叫 setCamera 函式。

<!DOCTYPE html>
 <html>
 <head>

    <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
  <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css" />
  <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>
  
  
    <script type="text/javascript">
    var map;
    
    function InitMap()
    {
        map = new atlas.Map('myMap', {
        center: [-122.33, 47.6],
        zoom: 12,
        view: 'Auto',
        style: 'road',

      
        // Add authentication details for connecting to Azure Maps.
        authOptions: {
          // Get an Azure Maps key at https://azuremaps.com/.
          authType: 'subscriptionKey',
          subscriptionKey: '{Your-Azure-Maps-Subscription-key}'
        }      
      });
    }
    
    /* Animate map view to set camera location
       to random points on the map*/
    function animateMap() {
      map.setCamera({
      zoom: Math.random() *2 + 12,
      duration: 1000,
      type: 'fly'  
      });
    }
  </script>

  <style>
    button {
      position: absolute;
      top: 10px;
      left: 10px;
    }  
  </style>

</head>

<html style='width:100%;height:100%;'> 
  <body onload="InitMap()" style='width:100%;height:100%;padding:0;margin:0;'> 
    <div id='myMap' style='position:relative;width:100%;height:100%;'></div>
  <button onclick="animateMap()">Animate Maps</button>
  <div id="my-text-box"></div>
  </body>
</html>

A screenshot showing a map with a button labeled Animate Maps that when pressed, causes the map to zoom in or out.

要求轉換

有時候，能夠修改地圖控制項所做的 HTTP 要求會很有用。例如：

將更多標頭新增至密碼保護服務的磚要求。
修改 URL 以透過 Proxy 服務執行要求。

地圖的服務選項有 transformRequest 可用來在地圖製作之前修改所有要求。 transformRequest 選項是函式，其需要兩個參數；字串 URL，以及指出要求用途的資源類型字串。此函式必須傳回 RequestParameters 結果。

transformRequest: (url: string, resourceType: string) => RequestParameters

使用要求轉換時，您必須傳回至少包含 url 屬性的 RequestParameters 物件。以下是可以包含在 RequestParameters 物件中的屬性。

選項	類型	描述
本文	string	POST 要求本文。
credentials	`'same-origin'` \| `'include'`	用來指定跨原始來源要求 (COR) 認證設定。使用『include』傳送具有跨來源要求的 Cookie。
標題	object	要與要求一起傳送的標頭。對像是字串值的機碼值組。
method	`'GET'` \| `'POST'` \| `'PUT'`	要提出的要求類型。預設值為 `'GET'`。
type	`'string'` \| `'json'` \| `'arrayBuffer'`	POST 回應本文的格式。
URL	string	需要要求的 URL。

下表列出與您新增至對應內容最相關的資源類型:

資源類型	描述
映像	與 SymbolLayer 或 ImageLayer 搭配使用之影像的要求。
來源	來源資訊的要求，例如 TileJSON 要求。在載入來源資訊時，來自基底地圖樣式的某些要求也會使用此資源類型。
圖標	來自圖格圖層 (點陣或向量) 的要求。
WFS	空間 IO 模組中的 `WfsClient` 對 OGC Web 功能服務的要求。如需詳細資訊，請參閱連線至 WFS 服務。
WebMapService	空間 IO 模組中的 `OgcMapLayer` 對 WMS 或 WMTS 服務的要求。如需詳細資訊，請參閱從開放地理空間協會 (OGC) 新增地圖圖層。

以下是一些資源類型，通常會被忽略，這些類型會透過要求轉換傳遞，且與基底地圖樣式相關: StyleDefinitions、樣式、SpriteImage、SpriteJSON、Glyphs、屬性。

以下範例會示範如何透過將使用者名稱和密碼新增為請求標頭來將所有請求的大小修改至 https://example.com。

var map = new atlas.Map('myMap', {
    transformRequest: function (url, resourceType) {
        //Check to see if the request is to the specified endpoint.
        if (url.indexOf('https://examples.com') > -1) {
            //Add custom headers to the request.
            return {
                url: url,
                header: {
                    username: 'myUsername',
                    password: 'myPassword'
                }
            };
        }

        //Return the URL unchanged by default.
        return { url: url };
    },

    authOptions: {
        authType: 'subscriptionKey',
        subscriptionKey: '<Your Azure Maps Key>'
    }
});