arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)

背景

前段时间在公司项目中遇到一个问题，地图底图区域只有一部分范围，超出当前范围会显示白底，使用效果来说非常的不好，伴随着的需求便是地图缩小、鼠标移动地图超出底图的显示范围则需要底图回弹。

效果

思路

1、arcgis.js控制其显示范围，在超出底图显示范围时自动弹回来
（1）地图创建完成之后使用监听事件监听地图范围改变调用shwoExtent方法，该方法会传一个地图的左上角和右下角的值

this.gisMap.on('extent-change',this.showExtent)

（2）根绝判断地图的最大显示范围 full extent来判断当前地图显示范围是否超出地图可视范围，当超出范围则显示地图的最大范围，地图回弹

代码片

// An highlighted block
let fullExtent={
    xmin: xx,
    ymin: xx,
    xmax: xx,
    ymax: xx,
   }
showExtent(extS){
   let ext=extS.extent;
    if(ext.xmin<this.fullExtent.xmin||ext.xmax>this.fullExtent.xmax||ext.ymax>this.fullExtent.ymax||ext.ymin<this.fullExtent.ymin){
    let fullExtent = new esri.geometry.Extent(
     {
      ...this.fullExtent,
      spatialReference:new esri.SpatialReference({ wkid: parseInt(4490) })//SpatialReference设置地图坐标系
     }
    );
    this.gisMap.setExtent(fullExtent);
   }
  },

参考文档：https://developers.arcgis.com/javascript/3/jsapi/extent-amd.html

注意：在查阅文档时需要知道项目中使用的是什么版本的arcgis.js

到此这篇关于arcgis.js控制地图地体的显示范围超出区域自动弹回的文章就介绍到这了,更多相关arcgis.js地图显示范围内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 基于Arcgis for javascript实现百度地图ABCD marker的效果

    基于Arcgis for javascript实现百度地图ABCD marker的效果

    先给大家展示实现后效果: 为直观期间,先贴出来我做的效果 列表展示和地图展示以及联动 显示信息 实现思路: 1.列表与地图的互动 鼠标经过列表时,修改列表图标,并根据列表返回的值在地图上绘蓝色的marker:鼠标移出,修改列表图标为红色,清空地图marker图层. 关键代码: title.on("mouseover",function(){ var attr = $(this).data("attr"); $("#icon"+attr.id).c

  • arcgis for js 修改infowindow样式的方法

    方法一: function popup() { $(".esriPopup .titlePane").css({ 'background-color':'rgba(64,64,64,0.8)' }) $(".esriPopup .contentPane").css({ 'background-color':'rgba(64,64,64,0.8)', 'color':'#FFFFFF' }) $(".esriPopup .actionsPane")

  • arcgis for js栅格图层叠加(Raster Layer)问题

    arcgis for js栅格图层叠加(Raster Layer)问题

    其实呢,这个问题或许与栅格图层(Raster Layer)关系并不十分大,也可能所有类型的图层都有这个问题,我对arcgis尚不十分了解,目前只在栅格图层遇到问题,所以先记下来,存疑. 栅格图层啥问题呢?叠不出来,报错. 比如,有这么个地图服务: 然后想直接叠加其中一个子图层(可见其类型为栅格图层). 代码如下: var layer = new ArcGISDynamicMapServiceLayer("http://192.168.0.225:6080/arcgis/HN_test/MapSe

  • arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)

    arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)

    背景 前段时间在公司项目中遇到一个问题,地图底图区域只有一部分范围,超出当前范围会显示白底,使用效果来说非常的不好,伴随着的需求便是地图缩小.鼠标移动地图超出底图的显示范围则需要底图回弹. 效果 思路 1.arcgis.js控制其显示范围,在超出底图显示范围时自动弹回来 (1)地图创建完成之后使用监听事件监听地图范围改变调用shwoExtent方法,该方法会传一个地图的左上角和右下角的值 this.gisMap.on('extent-change',this.showExtent) (2)根绝判

  • arcgis js完整悬停效果实现demo

    目录 arcgis 中的悬停效果 1.获取鼠标悬停事件回调 2.悬停时修改鼠标指针 3.悬停时显示标签名称 4.悬停时图标放大 arcgis 为什么这么设计 完整 demo 代码: arcgis 中的悬停效果 arcgis 中的悬停效果并不如想象中那么容易实现,本文会介绍如何完整的实现如下悬停效果,并对相关的技术细节进行解释,讲解如何避免一些小坑.让你不仅知其然,更知其所以然. 文章正文主要涉及对细节和原理的讲解,如果你着急的话,文末有完整的使用 demo,需要自取. 效果拆分 从上面的 gif

  • 通过js控制时间,一秒一秒自己动的实例

    1.第一种形式 <html> <head> <title>时间</title> <script type="text/javascript"> setInterval("showtime()", 1000); function showtime() { var date = new Date(); var time = date.getHours() + ":" + date.getMi

  • js控制网页背景音乐播放与停止的方法

    本文实例讲述了js控制网页背景音乐播放与停止的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml

  • JS控制HTML元素的显示和隐藏的两种方法

    利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: document.getElementById("EleId").style.visibility="hidden"; document.getElementById("EleId").style.visibility="visible"; 利用上述方法实现隐藏后,页面

  • JS控制表格实现一条光线流动分割行的方法

    本文实例讲述了JS控制表格实现一条光线流动分割行的方法.分享给大家供大家参考.具体分析如下: 这是很漂亮的一个分割行的代码. 其实就是利用JS控制表格实现的一条七彩流光分割横线 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>js用单元格实现的七彩线条</tit

  • js控制的遮罩层实例介绍

    闲来无事,把项目里很土的弹窗,改成了遮罩层显示,感觉效果好点了.上代码: 父页面: 复制代码 代码如下: <div id='newDiv1' style="display: none;"> <%@include file='/WEB-INF/jsp/infobackup/martyr/printCertDia.jsp' %> <%--<jsp:include page="/WEB-INF/jsp/infobackup/martyr/prin

  • js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法

    本文实例讲述了js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法.分享给大家供大家参考.具体如下: //控制logo的显示位置 Begin window.addEventListener("resize", function () { // 得到屏幕尺寸 (内部/外部宽度,内部/外部高度) changeLogoPosition(); }, false); changeLogoPosition(); function changeLogoPosition() { var conten

  • JS 控制CSS样式表

    下面先记录一下JS控制CSS所使用的方法. 1.使用javascript更改某个css class的属性... <style type="text/css"> .orig { display: none; } </style> 你想要改变把他的display属性由none改为inline. 解决办法: 在IE里: document.styleSheets[0].rules[0].style.display = "inline"; 在firef

  • JS控制静态页面传递参数并获取参数应用

    在项目中遇到这也一个问题: 有a.html和b.html. 1.a页面已经打开,b页面尚未打开,我希望在a页面设置好一些列参数,比如背景色,宽度等参数,传递给b页面,好让b页面在打开就能应用. 2.a页面已经打开,b页面无论是否打开.在a页面需要获取到b页面的一些元素甚至变量,以便于应用到a页面. 注意:不涉及跨域问题. 想了很久,终于想到了解决方案. 第一个问题,我们可以利用html页面锚点的特性,将参数通过url传递给b页面 这是a页面代码: <button>跳转设置</button

随机推荐