ArcGIS API For JavaScript官方文档Tutorials之使用ArcGIS.com webmap

最新推荐文章于 2023-02-02 20:19:58 发布

不睡觉的怪叔叔

最新推荐文章于 2023-02-02 20:19:58 发布

阅读量605

点赞数

分类专栏： ArcGIS API For JavaScript

ArcGIS API For JavaScript 专栏收录该内容

31 篇文章 44 订阅

订阅专栏

Build a web map using ArcGIS.com

在这个教程中，您将使用ArcGIS API for JavaScript构建一个应用程序，该应用程序显示一个来自ArcGIS.com的web map。

这个教程向您展示如何：

①在ArcGIS.com构建一个Web Map

②创建一个来自您的ArcGIS.com Web Map的地图应用程序

③给地图应用程序添加图例

在开始之前，如果您刚接触ArcGIS API for JavaScript，请阅读我们的Setting up a Development Environment 主题，该主题涵盖了诸如设置Web服务器和使用各种IDE和文本编辑器的内容。

1、构建一个web map

ArcGIS.com Map Viewer允许您快速和轻松地创建和分享讲述有关您数据的有趣故事的web map，他们可以解释哪里是人们买房子的地方，哪里的海水温度正在变化，或者哪里是大象夏天迁徙的地方。这些地图不仅分享数据，而且分享信息。

web地图通常显示包含操作数据（如可用的木材林地）的地图服务，在地图服务顶部使用参考信息(如图像或阴影图)。有时，包含边界或标签的引用地图服务放在其他图层层的顶部以创建一个“地图三明治”。构建一个web map 请浏览Create a map 教程。

创建了web map之后，将web map id复制以在本教程的后面部分使用。要找到id，请在ArcGIS.com参看您的web map。URL包含唯一 map 标识符

2、创建一个来自您的ArcGIS.com Web Map的地图应用程序

下面的步骤将允许您的应用程序访问一个ArcGIS.com Web Map，第一步是在sandbox中打开教程示例，并使用下面代码替换原来的代码：

<!DOCTYPE html>
<html>
<head>
<title>Create a Web Map</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.24/esri/css/esri.css">
<style>
  html,body,#mapDiv,.map.container{
    padding:0;
    margin:0;
    height:100%;
  }
</style>

<script>var dojoConfig = { parseOnLoad:true };</script>
<script src="https://js.arcgis.com/3.24compact/"></script>
<script>
  var map;
  require(["esri/map", "dojo/domReady!"], function(Map){

  });
</script>
</head>

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

如果您刚接触这些代码，请浏览Create your First Application帮助主题

接下来，我们将添加"esri/arcgis/utils"模块到我们的require列表中。这将使用我们能访问"esri/arcgis/utils"的createMap()方法。将下面的代码添加到sandbox应用程序。

require([
  "esri/map",
  "esri/arcgis/utils",
  "dojo/domReady!"
  ], function(Map, arcgisUtils){

});

现在您已经准备好使用createMap()方法了。该方法采用了一个web map id和可选map参数，并根据web地图内容创建地图。您在您的web地图中定义的任何symbology、popups、图层可见性等都将受到map的支持。

如果您还没有创建一个web map，那么您可以使用1a40fa5cc1ab4569b79f45444d728067来进行测试。

require([
  "esri/map",
  "esri/arcgis/utils",
  "dojo/domReady!"
  ], function(Map, arcgisUtils){
  arcgisUtils.createMap(<<Web Map Id>>, "mapDiv").then(function (response) {
      map = response.map;
  });
});

运行应用程序并注意到来自ArcGIS.com的web map已经显示了，该map显示您在ArcGIS.com中定义的symbology和popup信息

从ArcGIS Online的外部portal中访问web map，在调用createMap()方法之前，引用arcgisUrl属性并设置路径为您的portal URL：

arcgisUtils.arcgisUrl = "http://pathto/portal/sharing/content/items";

3、添加图例

让我们尝试添加一个图例到测试应用程序。

从3.4版本开始，您可以使用"esri/arcgis/utils"的getLegendLayers()方法快速添加图例到应用程序中，这个方法接受来自createMap的response，并构建一个可以传递到Legend 构造函数的layerInfos的数组。该方法考虑到关于图层的可见性设置和输出数组不会包含basemap。

将一个div添加到map div下面，这个div将保存我们的图例小部件

<div id="mapDiv"></div>
<div id="legendDiv"></div>

添加CSS将图例定位到地图右上角

html,body,#mapDiv,.map.container{
  padding:0;
  margin:0;
  height:100%;
}
#legendDiv{
  background-color: #fff;
  position: absolute !important;
  z-index: 99;
  top:10px;
  right:20px;
}

接下来，我们添加代码来加载图例小部件

require([
  "esri/map",
  "esri/arcgis/utils",
  "esri/dijit/Legend",
  "dojo/domReady!"], function (Map, arcgisUtils, Legend) {

然后，使用getLegendLayers()方法构建一个图例图层的数组，最后，我们将该函数的输出传递给图例小部件，作为layerInfos构造函数选项，以限制图例仅为操作图层的图例。

arcgisUtils.createMap("1a40fa5cc1ab4569b79f45444d728067", "mapDiv").then(function (response) {
  map = response.map;
  
  var legend = new Legend({
    map: map,
    layerInfos:(arcgisUtils.getLegendLayers(response))
  }, "legendDiv");
      
  legend.startup();
});

现在，当您运行应用程序时，图例应该显示在地图的右上角。

有关如何使用ArcGIS API for JavaScript或者使用Web应用程序模板的详细信息，请查看ArcGIS.com web maps 帮助主题。

不睡觉的怪叔叔

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
ArcGIS API For JavaScript官方文档Tutorials之使用ArcGIS.com webmap

Build a web map using ArcGIS.com 在这个教程中，您将使用ArcGIS API for JavaScript构建一个应用程序，该应用程序显示一个来自ArcGIS.com的web map。这个教程向您展示如何： ①在ArcGIS.com构建一个Web Map ②创建一个来自您的ArcGIS.com Web Map的地图应用程序 ③给地图应...
复制链接

扫一扫

专栏目录