Question

我需要在左侧创建一个带有“菜单”类型的布局，并在右侧加载一张世界地图。在左侧菜单中，我将有一棵树，叶子上有复选框。每个假期都是一个图块，当选中该复选框时，该图块将被加载到它的位置。让我们说我作为父母美国和加拿大的树。在美国，我有纽约建筑，纽约街道，华盛顿建筑，以及类似的加拿大。当我查看纽约建筑物时，我需要在地图上加载该图块并将地图居中到该图块。当我单击纽约街道时，我需要将另一个图块放在第一个图块上（它将具有透明度）。等等。主要的想法是我不能将地图居中到瓷砖的位置。没有尝试其余的，这是我被卡住的地方。我的代码：

@{
ViewBag.Title = "Map";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div id="mainWindow" 
     data-dojo-type="dijit.layout.BorderContainer" 
     data-dojo-props="design:'headline', gutters:false" 
     style="width:100%; height:100%;">
  <div id="header" 
       data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">

    This is the header section
   <div id="subheader">subheader</div>

  </div>
  <div data-dojo-type="dijit.layout.ContentPane" id="leftPane" data-dojo-props="region:'left'">
    <div data-dojo-type="dijit.layout.TabContainer">

      <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Legend', selected:true">
        <div id="legendDiv"></div>
      </div>

      <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Tab 2'" >
        Content for the second tab
      </div>

    </div>
  </div>

  <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'"></div>

  <div id="footer" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">
    this is the footer section
  </div> 
</div>
@section Head
{
<script type="text/javascript">
    var map;

    require(["esri/map", "esri/layers/ArcGISTiledMapServiceLayer", "dojo/domReady!"],
      function (Map, Tiled) {
          var tiled = new Tiled("http://xx.xxx.xx.xx:xxxx/arcgis/rest/services/USA/NewYork_tiles/MapServer");

          map = new Map("map", {
              basemap: "topo",
              center: [[-79.40, 43.64],
              zoom: 12
          });

          map.addLayer(tiled);
      }
    );
</script>
      }

        <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>@ViewBag.Title</title>



<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></title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
    <style>
      html, body, #map {
        height: 100%; width: 100%; margin: 0; padding: 0; 
      }
</style>

<script src="http://js.arcgis.com/3.8/"></script>

@RenderSection("Head", false)
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body class="claro">
    @RenderBody()

@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)
</body>
</html>

这就是我发现地图中心的方式。但我想把它放在加载的瓷砖中心。此外，可以在树中加载具有切片(http://xx.xxx.xx.xx:xxxx/arcgis/rest/services)的文件夹结构吗？

Answer 1

地图对象有几种显示特定视图的方法，无论是以MapPoint还是其他几何体为中心。例如，如果您有地图点，则可以使用Map.centerAt（mapPoint）。您要做的是以您加载的平铺地图服务的范围为中心，这样您就可以使用map.setExtent（extent，fit）将平铺服务的范围和布局拟合传递给它，如果您希望它缩放为需要适应整个范围。您可以使用TiledMapServiceLayer.fullExtent属性获取平铺服务的范围。例如：

map.setExtent(tiled.fullExtent, true);

您可以随后将其放入复选框事件功能中，以便每次检查时它都会缩放到某个范围（如果这是您希望它的行为方式，另一个选项可能是让复选框点击事件切换图层可见性但是然后在它旁边放一个'转到'按钮放大它。）

您可以在此处查看地图对象和所有ArcGIS API的更多文档：https://developers.arcgis.com/javascript/jsapi/map-amd.html

希望这有帮助。

修改根据您的注释，尝试在调用加载图层后直接访问fullExtent属性不起作用，因为addLayer是异步的，因此执行在加载图层之前返回。要在加载图层后立即设置范围，您需要注册一个函数，以便在引发图层onLoad事件时运行。以下代码应该实现此目的：

var tiled = new Tiled("http://xx.xxx.xx.xx:xxxx/arcgis/rest/services/USA/NewYork_tiles/MapServer"); tiled.on("load", displayLayerExtent); map.addLayer(tiled); function displayLayerExtent(evt) { map.setExtent(evt.layer.fullExtent, true); }

中心地图添加到瓷砖

1 个答案: