Fatal编程技术网
  • javascript/
  • Javascript 将地图居中添加到平铺

Javascript 将地图居中添加到平铺

javascript

Javascript 将地图居中添加到平铺,javascript,arcgis-server,Javascript,Arcgis Server,我需要创建一个布局，左边是“菜单”之类的东西，右边是世界地图。在左侧菜单中，我将有一棵树，叶子上有复选框。选中复选框时，每个假期都是一个将加载到其位置的磁贴。比如说在树上，我的父母是美国和加拿大。在美国，我有纽约的建筑，纽约的街道，华盛顿的建筑，在加拿大也有类似的建筑。当我检查纽约的建筑物时，我需要把那块地砖放在地图上，然后把地图放在那块地砖的中心。当我点击纽约街道时，我需要将另一块地砖放在第一块上面（它将具有透明度）。等等主要的想法是，我无法将地图居中放置到瓷砖的位置。我还没试过其他的，这就是

我需要创建一个布局，左边是“菜单”之类的东西，右边是世界地图。在左侧菜单中，我将有一棵树，叶子上有复选框。选中复选框时，每个假期都是一个将加载到其位置的磁贴。比如说在树上，我的父母是美国和加拿大。在美国，我有纽约的建筑，纽约的街道，华盛顿的建筑，在加拿大也有类似的建筑。当我检查纽约的建筑物时，我需要把那块地砖放在地图上，然后把地图放在那块地砖的中心。当我点击纽约街道时，我需要将另一块地砖放在第一块上面（它将具有透明度）。等等主要的想法是，我无法将地图居中放置到瓷砖的位置。我还没试过其他的，这就是我被困的地方。我的代码：

@{
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>

@{
ViewBag.Title=“地图”；
Layout=“~/Views/Shared/_Layout.cshtml”；
}
这是标题部分
副标题
第二个选项卡的内容
这是页脚部分
@科长
{
var映射；
需要（[“esri/map”、“esri/layers/ArcGISTiledMapServiceLayer”、“dojo/domReady！”），
功能（贴图、平铺）{
变量平铺=新平铺（“http://xx.xxx.xx.xx:xxxx/arcgis/rest/services/USA/NewYork_tiles/MapServer");
地图=新地图（“地图”{
底图：“地形”，
中间：[-79.40,43.64]，
缩放：12
});
map.addLayer（平铺）；
}
);
}
@视图包。标题
html，body，#map{
高度：100%；宽度：100%；边距：0；填充：0；
}
@渲染部分（“头部”，假）
@style.Render（“~/Content/css”）
@Scripts.Render（“~/bundles/modernizer”）
@RenderBody（）
@Scripts.Render（“~/bundles/jquery”）
@RenderSection（“脚本”，必需：false）
这就是我发现地图居中的原因。但是我想将它居中到加载的磁贴上。另外，可以使用磁贴的文件夹结构
(http://xx.xxx.xx.xx:xxxx/arcgis/rest/services)
加载到树中？

地图对象有几种显示特定视图的方法，可以在地图点或其他几何体上居中显示。例如，如果您有地图点，可以使用map.centerAt（MapPoint）。您要做的是以已加载的平铺地图服务的范围为中心，以便使用map.setExtent（extent，fit）传递平铺服务的范围，如果希望它根据需要缩放以适应整个范围，则传递布尔拟合。可以使用TiledMapServiceLayer.fullExtent属性获取平铺服务的范围。例如：

map.setExtent(tiled.fullExtent, true);
随后，您可以将其放入复选框事件函数中，以便每次选中它时，它都会缩放到某个范围（如果您希望它的行为是这样的，另一个选项可能是让复选框单击事件仅切换图层可见性，然后在其旁边有一个“转到”按钮来缩放到它）

您可以在此处查看地图对象和所有ArcGIS API的更多DocumentationStation：

希望这有帮助

编辑： 根据您的评论，尝试在调用加载层后直接访问fullExtent属性不起作用，因为addLayer是异步的，因此在加载层之前执行会返回。要在加载层后立即设置扩展，您需要注册一个函数，以便在引发layers onLoad事件时运行。fo以下代码应实现这一点：

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);
}
我看过这些类，但我不知道这意味着什么：“设置地图的范围。”。地图的范围是什么？我需要它来缩放我加载的磁贴。是“设置地图的范围”吗？我将尝试此方法，不再工作。谢谢。哦，我如何在代码中获得文件夹结构？最好是在c#中。范围是一个区域/区域，它是一个具有几何体的对象，例如多边形。如果将地图缩放到某个位置，那么它显示的范围是由从地图左上角的点创建的框限定的所有内容对象到地图窗口左下角的点。类似地，所有对象都有一个范围。例如，您加载的平铺层有一个fullExtent属性，该属性是您在该层中最外层要素周围绘制一条线时得到的几何体。告诉地图将其显示的范围设置为图层完整范围将使好的，谢谢，我会在周一尝试并回复。你知道如何对文件夹结构进行编码吗？关于文件夹结构，我不确定你想做什么，但你可以使用这个非常好的第三方目录小部件，它将根据你添加的层构建一个目录对于地图和动态（而不是平铺）图层，为子图层创建复选框。它还显示图例图形。您可以从ArcGIS网站此处获取：我需要获取所有文件夹和子文件夹，例如，从这里：sampleserver6.arcgisonline.com/ArcGIS/rest/services。我需要用“文件夹”构建一个树获取所有的瓦片表单并将它们加载到复选框树列表中，单击后，将它们添加到地图中