2014-02-21 1 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'버튼이 있습니다. 이 도움이 https://developers.arcgis.com/javascript/jsapi/map-amd.html

희망 :

당신은지도 객체와 여기의 ArcGIS API 모두를 위해 더 documentiontation을 확인할 수 있습니다.

편집 : addLayer가 비동기 및 레이어 전에 이렇게 실행 수익률이로드되어 있기 때문에 작동하지 않습니다 레이어를로드 할 바로 호출 후 fullExtent 속성에 액세스하려고, 당신의 의견으로 당. 레이어가로드되는 즉시 확장을 설정하려면 레이어 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

범위는 영역/영역으로 Polygon과 같은 Geometry가있는 객체입니다. 지도를 어딘가로 확대 한 경우 표시되는 범위는지도 객체의 왼쪽 상단에있는 점에서지도 창의 왼쪽 하단에있는 점까지 작성된 상자로 묶인 모든 것입니다. 마찬가지로, 모든 것은 범위가 있습니다. 예를 들어,로드 한 타일링 된 레이어에는 해당 레이어 내의 가장 바깥 쪽 형상을 중심으로 한 선을 따라 가면 얻을 수있는 지오메트리 인 fullExtent 속성이 있습니다. 지도가 전체 범위에 표시되는 범위를 설정하도록지도에 지시하면 해당지도가지도의 중심에 배치됩니다. – Kate

+0

좋아, 고마워, 나는 그것을 월요일에 시험해보고 대답 할 것이다. 폴더 구조에 코드를 입력하는 방법을 알고 있습니까? – bokkie

관련 문제