04 ArcGIS JS API 4.12加載天地圖

時間 2019-11-29

標籤 arcgis api 4.12 加載地圖欄目 JavaScript 简体版

原文原文鏈接

平時開發過程當中，若是咱們調用arcgis js api官網的底圖時，因爲受網絡的限制，調用就會變得很慢，此時咱們能夠考慮將咱們的底圖換爲天地圖，以下圖所示：javascript

具體操做過程以下：css

一、加載arcgis api實例化地圖時所需的樣式文件和js代碼包，以下：html

<link
      rel="stylesheet"
      href="https://js.arcgis.com/4.12/esri/themes/light/main.css"
    />
<script src="https://js.arcgis.com/4.12/"></script>

二、引入實例化地圖和切片圖層所用的模塊，以下：java

require(["esri/Map", 
    "esri/views/MapView",
    "esri/layers/WebTileLayer"], function(Map, 
    MapView,
    WebTileLayer) {

})

三、在天地圖官網申請key，相似於百度地圖API開發的流程，而後根據天地圖官網給的在線地址，調用天地圖服務，以下：git

var tiledLayer = new WebTileLayer({
    urlTemplate:"http://{subDomain}.tianditu.gov.cn/DataServer?T=vec_w&x={col}&y={row}&l={level}&tk=申請的key",
    subDomains: ["t0", "t1", "t2", "t3","t4", "t5", "t6", "t7"],
});

var tiledLayer_poi = new WebTileLayer({
    urlTemplate:"http://{subDomain}.tianditu.gov.cn/DataServer?T=cva_w&x={col}&y={row}&l={level}&tk=申請的key",
    subDomains: ["t0", "t1", "t2", "t3","t4", "t5", "t6", "t7"],
});

上述代碼實例化了兩個切片圖層，其中第一個是天地圖切片圖層，第二個是標註圖層。api

四、實例化地圖和mapview，將上述實例化完成的兩個切片圖層做爲basemap來添加，以下：網絡

var map = new Map({
    basemap: {
         baseLayers: [tiledLayer, tiledLayer_poi]
    }
});

var view = new MapView({
    container: "viewDiv",
    map: map,
   zoom: 10,
   center: [104.072619,30.663776] // longitude, latitude
});

五、完整代碼以下所示：ui

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>天地圖加載</title>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.12/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.12/"></script>

    <script>
      require(["esri/Map", "esri/views/MapView","esri/layers/WebTileLayer"], function(Map, MapView,WebTileLayer) {
    
        var tiledLayer = new WebTileLayer({
          urlTemplate:
            "http://{subDomain}.tianditu.gov.cn/DataServer?T=vec_w&x={col}&y={row}&l={level}&tk=申請的key",
          subDomains: ["t0", "t1", "t2", "t3","t4", "t5", "t6", "t7"],
        });

        var tiledLayer_poi = new WebTileLayer({
          urlTemplate:
            "http://{subDomain}.tianditu.gov.cn/DataServer?T=cva_w&x={col}&y={row}&l={level}&tk=申請的key",
          subDomains: ["t0", "t1", "t2", "t3","t4", "t5", "t6", "t7"],
        });

        var map = new Map({
            basemap: {
              baseLayers: [tiledLayer, tiledLayer_poi]
            }
        });

        var view = new MapView({
          container: "viewDiv",
          map: map,
          zoom: 10,
          center: [104.072619,30.663776] // longitude, latitude
        });
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。