设置和使用地图的范围—ArcGIS API for JavaScript

设置地图的范围或获得地图范围是使用地图时常见操作。在地图上设置新范围的一个简单的替代方法是在地图上调用centerAndZoom()法，该方法基于给定的中心点和缩放级别设置新的范围。

默认范围
如果在初始化地图时不包含范围信息，则默认范围是地图服务初始范围，就是上次保存在地图文档中的地图范围。如果你使用多个服务，默认范围是添加的基本映射或第一个加载图层的初始范围。

设置初始范围
如果你希望起始范围不是默认的范围，你可以通过以下方法设置初始范围：
- 在Map构造函数中设置范围

function init() {var startExtent = new Extent(-95.271, 38.933, -95.228, 38.976,new SpatialReference({ wkid:4326 }) );var myMap = new Map("mapDiv", { extent: startExtent });var mapServiceURL = "https://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer";myMap.addLayer(new ArcGISTiledMapServiceLayer(mapServiceURL));
}

通过Map.setExtent设置地图范围

function init() {myMap = new Map("mapDiv");var startExtent = new Extent(-95.271, 38.933, -95.228, 38.976,new SpatialReference({ wkid:4326 }) );myMap.setExtent(startExtent);var mapServiceURL = "https://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer";myMap.addLayer(new ArcGISTiledMapServiceLayer(mapServiceURL));
}

改变下第二个方法也行

function init() {myMap = new Map("mapDiv");var spatialRef = new SpatialReference({ wkid:4326 });var startExtent = new Extent();startExtent.xmin = -124.71;startExtent.ymin = 31.89;startExtent.xmax = -113.97;startExtent.ymax = 42.63;startExtent.spatialReference = spatialRef;myMap.setExtent(startExtent);var mapServiceURL = "https://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer";myMap.addLayer(new ArcGISTiledMapServiceLayer(mapServiceURL));
}

设置使用多个服务的起始范围
当在同一应用程序中包含多个服务时，默认范围是基础图层的初始范围。如果你希望自定义初始范围，你可以在Map构造函数中设置该范围。
在某些情况下，你可能自己都不知道要设多大范围。在其他情况下，你知道要使用辅助图层的范围。例如，ArcGIS Online服务都具有世界范围。你可能希望将地图范围视为本地数据的范围而不是世界范围。
在以下示例中，使用了两个服务。基础图层是具有世界范围的ArcGIS Online图层，第二个图层有一定的范围。initLayers()函数创建两个图层，您必须创建第二个函数来设置范围，因为您不能在加载类之前调用类上的属性或事件。在这种情况下，函数createMapAddLayers()被调用，对于这两个地图服务已经触发了onLoad事件。此功能创建地图，将范围设置为myService2，然后将两个地图服务添加到地图。初始地图范围

function initLayers() {var primaryMapServiceURL = "https://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer";var myService1 = new ArcGISTiledMapServiceLayer(primaryMapServiceURL);var secondaryMapServiceURL = "https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Petroleum/KGS_OilGasFields_Kansas/MapServer";var myService2 = new ArcGISDynamicMapServiceLayer(secondaryMapServiceURL, {opacity:0.75});var layerLoadCount = 0;//When both layers have loaded, run addLayersSetExtentmyService1.on("load", function(service) {layerLoadCount += 1;if (layerLoadCount === 2) {createMapAddLayers(myService1,myService2);}});myService2.on("load", function(service) {layerLoadCount += 1;if (layerLoadCount === 2) {createMapAddLayers(myService1,myService2);}});
}//Create a map, set the extent, and add the services to the map.
function createMapAddLayers(myService1,myService2) {//create mapmyMap = new Map("mapDiv", { extent:myService2.fullExtent });myMap.addLayer(myService1);myMap.addLayer(myService2);
}

获得地图当前范围
您可以使用Map.onExtentChange事件获取地图的当前范围。
在以下示例中，Map.onExtentChange在init()函数中引用。当用户平移或缩放地图时，将对该showExtent()功能进行回调，返回extent对象。在该示例中，对象被命名为ext，对象属性包括xmin，ymin，xmax，和ymax。在该showExtent()功能中，四个范围值在一个字符串中连接在一起，以便在HTML页面上显示。

function init(){var myMap = new Map("mapDiv");var mapServiceURL = "https://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer";myMap.addLayer(new ArcGISTiledMapServiceLayer(mapServiceURL));myMap.addLayer(mapServiceURL);myMap.on("extent-change", showExtent);
}function showExtent(ext){var extentString = "";extentString = "XMin: " + ext.xmin +" YMin: " + ext.ymin +" XMax: " + ext.xmax +" YMax: " + ext.ymax;document.getElementById("onExtentChangeInfo").innerHTML = extentString;
}

你也可以使用Map.extent获取当前的范围
您可以使用Map.extent属性获取地图的当前范围。此属性是只读属性。如果要设置范围，则需要使用Map.setExtent方法。

本文首发于微信公众号：GISXXCOM

设置和使用地图的范围—ArcGIS API for JavaScript相关推荐

地图小部件—ArcGIS API for JavaScript
电子地图和传统的纸质地图最大的区别就是交互的程度不一样,而交互性很大程度上由地图的小部件所控制.传统的纸制地图主要有三个基本的部件(要素):比例尺.指北针.图例,而电子地图有更多的交互性小部件选择,在 ...
ArcGIS API for JavaScript——地图展示
ArcGIS API for JavaScript 能够实现的最基本功能就是地图展示,包括地图缩放.平移.定位.实时显示坐标.展示地图要素(指北针.比例尺.图例).切换地图等.本文将详细介绍地图展示的 ...
基于ArcGIS API for JavaScript加载百度各种类型切片地图
文章目录应用场景需求分析效果图实现代码原理解读应用场景部分项目基于ArcGIS平台,但是甲方只提供部分矢量数据,用作底图的地形图数据没有,表示可以使用百度地图作为底图.所以才会有使用Ar ...
在移动设备中创建ArcGIS API for JavaScript地图应用程序
本教程将演示如何通过响应式移动专用布局窗口小部件创建移动友好的webapp 1.支持的设备这个模板支持安卓和IOS横向和纵向姿态,它使用Dojo Mobile框架并包含Dojo标题窗口等小部件. 2 ...
ArcGIS API for javascript创建二维度地图
1.引用arcgis api for javascript <link rel="stylesheet" href="https://js.arcgis.com/4 ...
ArcGIS API for JavaScript根据两个点坐标在地图上画线
ArcGIS API for JavaScript根据两个点坐标在地图上画线比如说a(xxxx,xxxxx),b(xxxx,xxxxx).利用这两个点画一条线 var polyline = new ...
ArcGIS API for JavaScript创建 3D 地图
1.引用ArcGIS API for JavaScript <link rel="stylesheet" href="https://js.arcgis.com/4 ...
ArcGIS API for JavaScript 4.4 版本加载谷歌地图
ArcGIS API for JavaScript 4.X 版本升级后,API发生了很大的变化. 其中就支持了WebEarth展示,主要是通过 esri/views/SceneView 实现的. 在新 ...
ArcGis API for JavaScript学习——加载地图
ArcGis API for JavaScript开发笔记--加载地图在这个例子中使用的离线部署的API(请参见 http://note.youdao.com/noteshare?id=f42865 ...

设置和使用地图的范围—ArcGIS API for JavaScript

设置和使用地图的范围—ArcGIS API for JavaScript相关推荐

最新文章

热门文章