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实现星级评分代码分享
Dec 09 Javascript
javascript背景时钟实现方法
Jun 18 Javascript
php结合imgareaselect实现图片裁剪
Jul 05 Javascript
jQuery+Pdo编写login登陆界面
Aug 01 Javascript
React-router 4 按需加载的实现方式及原理详解
May 25 Javascript
AngularJS中使用ngModal模态框实例
May 27 Javascript
详解vue组件基础
May 04 Javascript
Vue filter格式化时间戳时间成标准日期格式的方法
Sep 16 Javascript
Nuxt.js之自动路由原理的实现方法
Nov 21 Javascript
vue中的v-if和v-show的区别详解
Sep 01 Javascript
JS实现简单随机3D骰子
Oct 24 Javascript
vue项目打包后请求地址错误/打包后跨域操作
Nov 04 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+MySql编写聊天室
2006/10/09 PHP
php中get_headers函数的作用及用法的详细介绍
2013/04/27 PHP
js读取本地excel文档数据的代码
2010/11/11 Javascript
Windows系统下使用Sublime搭建nodejs环境
2015/04/13 NodeJs
Js数组排序函数sort()介绍
2015/06/08 Javascript
ECMAScript6新增值比较函数Object.is
2015/06/12 Javascript
关于JavaScript的变量的数据类型的判断方法
2015/08/14 Javascript
JavaScript多并发问题如何处理
2015/10/28 Javascript
javascript实现拖动元素交换位置
2015/11/29 Javascript
基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
2015/12/03 Javascript
再谈Javascript中的基本类型和引用类型(推荐)
2016/07/01 Javascript
jQuery获取与设置iframe高度的方法
2016/08/01 Javascript
原生js仿jquery一些常用方法(必看篇)
2016/09/20 Javascript
基于js实现二级下拉联动
2016/12/17 Javascript
详解vue axios中文文档
2017/09/12 Javascript
Vue shopCart 组件开发详解
2018/01/26 Javascript
JS实现的base64加密解密操作示例
2018/04/18 Javascript
vue在手机中通过本机IP地址访问webApp的方法
2018/08/15 Javascript
零基础之Node.js搭建API服务器的详解
2019/03/08 Javascript
浅谈layui 数据表格前后台传值的问题
2019/09/12 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
2019/11/07 Javascript
Vue开发环境跨域访问问题
2020/01/22 Javascript
react-router-dom 嵌套路由的实现
2020/05/02 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
2020/05/29 jQuery
vue如何在用户要关闭当前网页时弹出提示的实现
2020/05/31 Javascript
python传递参数方式小结
2015/04/17 Python
在Python的Django框架中simple-todo工具的简单使用
2015/05/30 Python
python获取文件路径、文件名、后缀名的实例
2018/04/23 Python
Python数据类型之列表和元组的方法实例详解
2019/07/08 Python
浅谈python3中input输入的使用
2019/08/02 Python
python实现图片压缩代码实例
2019/08/12 Python
使用python写的opencv实时监测和解析二维码和条形码
2019/08/14 Python
Tensorflow之梯度裁剪的实现示例
2020/03/08 Python
Kathmandu英国网站:新西兰户外运动品牌
2017/03/27 全球购物
干部作风建设心得体会
2014/10/22 职场文书
出国签证在职证明范本
2014/11/24 职场文书