ArcGIS API For JavaScript官方文档(六)之设置范围

简介: ArcGIS API For JavaScript官方文档(六)之设置范围

使用地图的一个常见操作是设置地图的extent(范围)或获取在其他操作中使用的extent。在map上设置新extent的简单替代方案是调用map的centerAndZoom()方法,该方法基于给定中心点和细节级别(level of detail-LOD)设置新的extent。


1、默认的extent

如果在初始化map时不包含extent信息,默认extent作为初始化extent信息,即上次在地图文档中保存时地图的extent。


如果您使用的服务不止一个,默认的extent是base map(底图)或者添加的第一层layer的初始extent。


2、设置一个新的起始extent

如果您希望起始extent不是默认的extent,您有几个方式可用于设置此新的extent

①在Map 构造器中设置extent

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()方法设置extent

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));
}


3、使用多个服务时设置起始extent

当您在同一应用程序中包含多个服务时,默认的extent是base layer的初始extent。如果您希望初始extent是新的,并且提前知道extent,则可以将该extent包含在map的构造函数中。


在某些情况下,您可能无法提前知道extent。在其他情况下,您希望使用第二层的layer。例如,ArcGIS Online services(ArcGIS在线服务)都有一个world extent,您可能希望您的地图extent是本地数据的extent,而不是world extent。


在下面的示例中,使用了两个服务或layers。base layer是具有world extent的ArcGIS Online layer,第二个layer具有堪萨斯州的extent,这是所需的extent。initLayers()函数用于创建两个layers。您必须创建第二个函数来设置extent,因为不能在类被加载之前调用属性或事件。在本例中,触发了对两个地图服务的onLoad事件之后调用函数createMapAddLayers()。该函数创建map,设置myService2的extent,然后将两个map服务添加到map中。初始map的extent使用map服务定义的Layer.fullExtent属性,如果要使用初始extent,可以使用Layer.initialExtent。

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 addLayersSetExtent
myService1.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 map
myMap = new Map("mapDiv", { extent:myService2.fullExtent });
myMap.addLayer(myService1);
myMap.addLayer(myService2);
}


4、使用地图事件获取当前extent

您可以使用Map.onExtentChange事件获取map当前extent。


在下面的例子中,map.onExtentChange在inti()函数中被引用。当用户对地图进行平移或缩放时,会对showExtent()函数进行回调。onExtentChange事件构建了对象,第一个对象是extent。在本例中,该对象被命名为ext,对象属性包括xmin、ymin、xmax和ymax。在ShowExtent()函数中,四个extent值被连接成一个字符串并在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;
}


5、使用Map.extent属性获取当前extent

您可以通过Map.extent属性获取当前extent,这个属性是只读的。如果您向设置当前extent,您需要使用Map.setExtent()方法


相关文章
|
25天前
|
人工智能 安全 架构师
告别旅行规划的"需求文档地狱"!这个AI提示词库,让你像调API一样定制完美旅程
作为开发者,旅行规划如同“需求地狱”:信息碎片、需求多变、缺乏测试。本文提出一套“企业级”AI提示词库,将模糊需求转化为结构化“API请求”,实现标准化输入输出,让AI成为你的专属旅行架构师,30分钟生成专业定制方案,提升决策质量,降低90%时间成本。
366 129
|
1月前
|
存储 JSON 监控
亚马逊:调用促销管理API设置跨店满赠,提升客单价
本文介绍了如何通过亚马逊SP-API实现跨店满赠促销,提升卖家客单价。内容涵盖概念、优势、API调用步骤及代码示例,助力自动化高效促销部署。
73 0
|
6月前
|
前端开发 JavaScript NoSQL
使用 Node.js、Express 和 React 构建强大的 API
本文详细介绍如何使用 Node.js、Express 和 React 构建强大且动态的 API。从开发环境搭建到集成 React 前端,再到利用 APIPost 高效测试 API,适合各水平开发者。内容涵盖 Node.js 运行时、Express 框架与 React 库的基础知识及协同工作方式,还涉及数据库连接和前后端数据交互。通过实际代码示例,助你快速上手并优化应用性能。
|
7月前
|
前端开发 Cloud Native Java
Java||Springboot读取本地目录的文件和文件结构,读取服务器文档目录数据供前端渲染的API实现
博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
Java||Springboot读取本地目录的文件和文件结构,读取服务器文档目录数据供前端渲染的API实现
|
11月前
|
JavaScript 前端开发 API
Vue.js 3:探索组合式API带来的新变革
Vue.js 3:探索组合式API带来的新变革
329 84
|
7月前
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
8月前
|
数据采集 算法 Java
如何在Java爬虫中设置动态延迟以避免API限制
如何在Java爬虫中设置动态延迟以避免API限制
|
11月前
|
JSON 缓存 JavaScript
深入浅出:使用Node.js构建RESTful API
在这个数字时代,API已成为软件开发的基石之一。本文旨在引导初学者通过Node.js和Express框架快速搭建一个功能完备的RESTful API。我们将从零开始,逐步深入,不仅涉及代码编写,还包括设计原则、最佳实践及调试技巧。无论你是初探后端开发,还是希望扩展你的技术栈,这篇文章都将是你的理想指南。
|
9月前
|
JavaScript 前端开发 安全
盘点原生JS中目前最没用的几个功能API
在JavaScript的发展历程中,许多功能与API曾风光无限,但随着技术进步和语言演化,部分功能逐渐被淘汰或被更高效的替代方案取代。例如,`with`语句使代码作用域复杂、可读性差;`void`操作符功能冗余且影响可读性;`eval`函数存在严重安全风险和性能问题;`unescape`和`escape`函数已被`decodeURIComponent`和`encodeURIComponent`取代;`arguments`对象则被ES6的剩余参数语法替代。这些变化体现了JavaScript不断优化的趋势,开发者应紧跟技术步伐,学习新技能,适应新技术环境。
156 10
|
9月前
|
开发框架 数据可视化 .NET
.NET 中管理 Web API 文档的两种方式
.NET 中管理 Web API 文档的两种方式
157 14

热门文章

最新文章