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


Posted in Javascript onJanuary 28, 2021

背景

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

效果

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地图显示范围内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery中与toggleClass等价的程序段 以及未来学习的方向
Mar 18 Javascript
javascript 运算数的求值顺序
Aug 23 Javascript
js实现表单Radio切换效果的方法
Aug 17 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
Sep 16 Javascript
jQuery数组处理函数整理
Aug 03 Javascript
jQuery动态增减行的实例代码解析(推荐)
Dec 05 Javascript
bootstrap实现图片自动轮播
Dec 21 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
Jan 03 Javascript
微信小程序封装http访问网络库实例代码
May 24 Javascript
Node.js Windows Binary二进制文件安装方法
May 16 Javascript
你可能从未使用过的11+个JavaScript特性(小结)
Jan 08 Javascript
prettier自动格式化去换行的实现代码
Aug 25 Javascript
vue使用transition组件动画效果的实例代码
Jan 28 #Vue.js
Bootstrap FileInput实现图片上传功能
Jan 28 #Javascript
js实现简单的倒计时
Jan 28 #Javascript
原生js实现无缝轮播图效果
Jan 28 #Javascript
JavaScript实现4位随机验证码的生成
Jan 28 #Javascript
JavaScript点击按钮生成4位随机验证码
Jan 28 #Javascript
Vue ​v-model相关知识总结
Jan 28 #Vue.js
You might like
PHP获取中英混合字符串长度的方法
2014/06/07 PHP
CodeIgniter采用config控制的多语言实现根据浏览器语言自动转换功能
2014/07/18 PHP
基于php实现随机合并数组并排序(原排序)
2015/11/26 PHP
jquery 插件学习(三)
2012/08/06 Javascript
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
2013/01/24 Javascript
JavaScript等比例缩放图片控制超出范围的图片
2013/08/06 Javascript
JQuery页面的表格数据的增加与分页的实现
2013/12/10 Javascript
解释&amp;&amp;和||在javascript中的另类用法
2014/07/28 Javascript
对比分析AngularJS中的$http.post与jQuery.post的区别
2015/02/27 Javascript
JavaScript事件委托实例分析
2015/05/26 Javascript
浅谈Cookie的生命周期问题
2016/08/02 Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
2017/07/12 jQuery
学习使用ExpressJS 4.0中的新Router的用法
2018/11/06 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
2019/02/20 jQuery
ES6中Symbol、Set和Map用法详解
2019/08/20 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
2020/02/10 Javascript
[49:28]VP vs Optic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python中的多重继承实例讲解
2014/09/28 Python
对于Python异常处理慎用“except:pass”建议
2015/04/02 Python
python实现的简单文本类游戏实例
2015/04/28 Python
python实现的简单抽奖系统实例
2015/05/22 Python
python3实现字符串的全排列的方法(无重复字符)
2018/07/07 Python
Selenium(Python web测试工具)基本用法详解
2018/08/10 Python
python实现得到当前登录用户信息的方法
2019/06/21 Python
Python:Numpy 求平均向量的实例
2019/06/29 Python
Django如何使用jwt获取用户信息
2020/04/21 Python
Django ORM 查询表中某列字段值的方法
2020/04/30 Python
Selenium元素定位的30种方式(史上最全)
2020/05/11 Python
Python 操作 MySQL数据库
2020/09/18 Python
利用Python将多张图片合成视频的实现
2020/11/23 Python
html5摇一摇代码优化包括DeviceMotionEvent等等
2014/09/01 HTML / CSS
J2EE面试题集锦(附答案)
2013/08/16 面试题
2013年军训通讯稿
2014/02/05 职场文书
少年雷锋观后感
2015/06/10 职场文书
步步惊心观后感
2015/06/12 职场文书
PostgreSQL逻辑复制解密原理解析
2022/09/23 PostgreSQL