0

我需要在左侧创建一个带有“菜单”之类的布局，并在右侧加载世界地图。在左侧菜单中，我将有一棵树，叶子上有复选框。每个离开都是一个磁贴，当复选框被选中时将加载到它的位置。假设在我作为父母美国和加拿大的树上。在美国下，我有纽约大厦、纽约街道、华盛顿大厦，在加拿大下有类似的东西。当我检查 New York Buildings 时，我需要将该图块加载到地图上并将地图置于该图块的中心。当我单击纽约街道时，我需要将另一个瓷砖放在第一个瓷砖上（它将具有透明度）。等等。主要思想是我无法将地图居中到图块的位置。其他的没试过，这就是我卡住的地方。我的代码：

@{
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)加载到树中吗？

4

1 回答 1

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);
}
于 2014-02-21T17:02:52.043 回答