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 相关文章推荐
json 定义
Jun 10 Javascript
jquery 日期分离成年月日的代码
May 14 Javascript
Javascript变量函数浅析
Sep 02 Javascript
使用jQuery同时控制四张图片的伸缩实现代码
Apr 19 Javascript
js单独获取一个checkbox看其是否被选中
Sep 22 Javascript
分享一个常用的javascript静态类
Dec 31 Javascript
JavaScript实现LI列表数据绑定的方法
Aug 04 Javascript
微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
Jan 17 Javascript
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
解决vue 更改计算属性后select选中值不更改的问题
Mar 02 Javascript
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
vue+element ui实现锚点定位
Jun 29 Vue.js
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将向Java靠拢
2006/10/09 PHP
php下mysql数据库操作类(改自discuz)
2010/07/03 PHP
Erlang的运算符(比较运算符,数值运算符,移位运算符,逻辑运算符)
2012/07/23 PHP
利用php递归实现无限分类 格式化数组的详解
2013/06/08 PHP
Yii中使用PHPExcel导出Excel的方法
2014/12/26 PHP
php通过排列组合实现1到9数字相加都等于20的方法
2015/08/03 PHP
PHP计算日期相差天数实例分析
2016/02/23 PHP
Javascript 继承机制实例
2009/08/12 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
2013/01/04 Javascript
JQuery动画和停止动画实例代码
2013/03/01 Javascript
input输入框的自动匹配(原生代码)
2013/03/19 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
2015/05/06 Javascript
jquery实现弹出层登录和全屏层注册特效
2015/08/28 Javascript
js随机生成字母数字组合的字符串 随机动画数字
2015/09/02 Javascript
获取JS中网页各种高宽与位置的方法总结
2016/07/27 Javascript
JavaScript中的this引用(推荐)
2016/08/05 Javascript
vue-router路由简单案例介绍
2017/02/21 Javascript
js数据类型检测总结
2018/08/05 Javascript
angular.js实现列表orderby排序的方法
2018/10/02 Javascript
一文读懂ES7中的javascript修饰器
2019/05/06 Javascript
vue实现匀速轮播效果
2020/06/29 Javascript
python实现代码行数统计示例分享
2014/02/10 Python
Python实现的破解字符串找茬游戏算法示例
2017/09/25 Python
Android分包MultiDex策略详解
2017/10/30 Python
Python实现快速计算词频功能示例
2018/06/25 Python
TensorFlow Session会话控制&amp;Variable变量详解
2018/07/30 Python
详解python-图像处理(映射变换)
2019/03/22 Python
python 使用while写猜年龄小游戏过程解析
2019/10/07 Python
Python3批量创建Crowd用户并分配组
2020/05/20 Python
Keras 快速解决OOM超内存的问题
2020/06/11 Python
Artist Guitars新西兰:乐器在线商店
2017/09/17 全球购物
英国性能汽车零件和发动机配件在线:Maxpeedingrods
2019/11/05 全球购物
运动会入场词60字
2014/02/15 职场文书
学生评语集锦
2015/01/04 职场文书
毕业生党员个人总结
2015/02/14 职场文书
公司周年庆寄语
2019/06/21 职场文书