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 相关文章推荐
JS DOM 操作实现代码
Aug 01 Javascript
仿新浪微博登陆邮箱提示效果的js代码
Aug 02 Javascript
jQuery取得select选择的文本与值的示例
Dec 09 Javascript
Javascript获取CSS伪元素属性的实现代码
Sep 28 Javascript
javascript学习笔记(三)BOM和DOM详解
Sep 30 Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
Sep 01 Javascript
jQuery使用getJSON方法获取json数据完整示例
Sep 13 Javascript
js中new一个对象的过程
Feb 20 Javascript
ES6中class类用法实例浅析
Apr 06 Javascript
js实现Tab选项卡切换效果
Jul 17 Javascript
浅谈Vue组件及组件的注册方法
Aug 24 Javascript
vue动态绘制四分之三圆环图效果
Sep 03 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
回答PHPCHINA上的几个问题:URL映射
2007/02/14 PHP
php扩展ZF――Validate扩展
2008/01/10 PHP
常用的php对象类型判断
2008/08/27 PHP
Codeigniter框架的更新事务(transaction)BUG及解决方法
2014/07/25 PHP
php获取随机数组列表的方法
2014/11/13 PHP
php+mysql结合Ajax实现点赞功能完整实例
2015/01/30 PHP
详解配置 Apache 服务器支持 PHP 文件的解析
2017/02/15 PHP
PHP观察者模式原理与简单实现方法示例
2017/08/25 PHP
从零开始学习jQuery (二) 万能的选择器
2010/10/01 Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
2013/07/10 Javascript
js实现卡片式项目管理界面UI设计效果
2015/12/08 Javascript
微信js-sdk上传与下载图片接口用法示例
2016/10/12 Javascript
基于JavaScript实现瀑布流效果
2017/03/29 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
2017/05/02 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
2018/04/27 Javascript
JavaScript canvas实现雨滴特效
2021/01/10 Javascript
详解Django中的form库的使用
2015/07/18 Python
pandas修改DataFrame列名的方法
2018/04/08 Python
通过python顺序修改文件名字的方法
2018/07/11 Python
Python3.7实现中控考勤机自动连接
2018/08/28 Python
基于python二叉树的构造和打印例子
2019/08/09 Python
Python 如何优雅的将数字转化为时间格式的方法
2019/09/26 Python
利用python画出AUC曲线的实例
2020/02/28 Python
浅谈Python3中print函数的换行
2020/08/05 Python
Django crontab定时任务模块操作方法解析
2020/09/10 Python
美国学校校服,儿童和婴儿服装:Cookie’s Kids
2016/10/14 全球购物
番木瓜健康和保健产品第一大制造商:Herbal Papaya
2017/04/25 全球购物
日本最大的购物网站乐天市场国际版:Rakuten Global Market(支持中文)
2020/02/03 全球购物
莫斯科珠宝厂官方网站:Miuz
2020/09/19 全球购物
Shell如何接收变量输入
2012/09/24 面试题
大学运动会入场词
2014/02/22 职场文书
生日宴会主持词
2014/03/20 职场文书
计划生育诚信协议书
2014/11/02 职场文书
房地产销售经理岗位职责
2015/02/02 职场文书
电影焦裕禄观后感
2015/06/09 职场文书
CSS SandBox应用场景及常见问题
2022/06/25 HTML / CSS