2014-02-21 37 views
0

我需要创建一个布局,在左边有一个“菜单”类的东西,在右边加载一个世界地图。在左边的菜单中,我将会有一棵树,在树叶上有复选框。每个假期都是一个贴图,当选中该复选框时,它将被加载到它的位置上。让我们来谈谈我作为父母美国和加拿大的树。在美国,我有纽约建筑,纽约街道,华盛顿建筑,以及加拿大之下类似的东西。当我检查纽约建筑物时,我需要将地图加载到地图上并将地图居中放置在该地图上。当我点击纽约街道时,我需要将其他瓷砖放在第一个瓷砖上(它将具有透明度)。等等。主要想法是我无法将地图居中放置在贴图的位置。其余的都没有试过,这是我卡住的地方。我的代码:中心地图添加瓷砖

@{ 
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)的文件夹结构吗?

回答

1

地图对象有几种显示特定视图的方法,无论是以MapPoint还是其他几何图形为中心。例如,如果您有地图点,则可以使用Map.centerAt(mapPoint)。你想要做的是以你已经加载的平铺地图服务的范围为中心,这样你可以使用map.setExtent(extent,fit)将平铺服务的范围和布尔拟合传递给它,如果你想让它放大需要适合整个范围。您可以使用TiledMapServiceLayer.fullExtent属性获取平铺服务的范围。例如:

map.setExtent(tiled.fullExtent, true); 

随后,您可以把这个到您的复选框事件功能让每一个它的检查时间是放大的程度(如果这是你想要的表现,另一种选择可能是有复选框点击事件只是切换图层的可见性,但在它旁边有一个“放大”的“goto”按钮)。

您可以检查出更多的documentiontation的地图对象和所有在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); 
} 
+0

我已经看过那些类,但我不知道这是什么意思:“设置地图的范围。”。地图的范围是什么?我需要它放大我加载的瓷砖。那是否“设定了地图的范围”?我会试试这个,不再工作了。谢谢。哦,我怎样才能得到代码中的文件夹结构?最好在c#中。 – bokkie

+0

范围是一个区域/区域,它是一个具有几何图形的对象,例如多边形。如果您将地图放大到某个地方,那么它显示的范围就是从地图对象左上角的点到地图窗口左下角的点创建的框所包含的所有东西。同样,一切都有一定的范围。例如,您加载的平铺图层具有fullExtent属性,该属性是如果在该图层的最外层特征周围追踪线条所得到的几何图形。告诉地图将它正在显示的范围设置为完整范围将会将该地图置于该图层的中心。 – Kate

+0

好的,谢谢,我会在星期一尝试,并会回复。你碰巧知道如何获得代码文件夹结构? – bokkie