加载一张基本的网络地图

这个程序将加载一张表示各州意外死亡的网络地图。标记的大小表示每个州的死亡人口总数,颜色表示死亡率。明红色表示死亡的人数多,暗绿色表示死亡人数少。

网络地图来自 ArcGIS Online 或者 ArcGIS for Portal item ,最后转变成了自定义的 Web 应用。

获取网络地图需要 ID。

因为 WebMap 继承了 esri/Map ,所以可以将其设置为 MapView 的 map 属性。

程序完整的源代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Load a basic WebMap - 4.5</title>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.5/esri/css/main.css">

  <script src="https://js.arcgis.com/4.5/"></script>

  <script>
    require([
      "esri/views/MapView",
      "esri/WebMap",
      "dojo/domReady!"
    ], function(
      MapView, WebMap
    ) {

      /************************************************************
       * 创建一个 WebMap 实例. WebMap 必须引用
       * PortalItem ID ,这个 ID 代表 一张保存在
       * arcgis.com 或者 一个内置门户网的网络地图
       *
       * 加载内置门户网的网络地图需要设置 esriConfig.portalUrl.
       ************************************************************/
      var webmap = new WebMap({
        portalItem: {
          id: "f2e9b762544945f390ca4ac3671cfa72"
        }
      });

      /************************************************************
       * 将 MapView 的map属性设置为 webmap
       ************************************************************/
      var view = new MapView({
        map: webmap,
        container: "viewDiv"
      });
    });
  </script>
</head>

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

</html>

程序执行效果:

沙箱地址:https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=webmap-basic

(完)

results matching ""

    No results matching ""