脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → arcgis.js地图显示范围

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

 更新时间：2021年01月28日 16:55:43   作者：码尚  
这篇文章主要介绍了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地图显示范围内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • Web Uploader文件上传插件使用详解

    Web Uploader文件上传插件使用详解

    WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。这篇文章主要为大家详细介绍了Web Uploader文件上传插件使用方法，感兴趣的小伙伴们可以参考一下
    2016-05-05
  • 浅谈Axios去除重复请求方案

    浅谈Axios去除重复请求方案

    本文主要介绍了Axios去除重复请求方案，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-08-08
  • js鼠标单击和双击事件冲突问题的快速解决方法

    js鼠标单击和双击事件冲突问题的快速解决方法

    下面小编就为大家带来一篇js鼠标单击和双击事件冲突问题的快速解决方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • js文本框走动跑马灯效果代码分享

    js文本框走动跑马灯效果代码分享

    这篇文章主要介绍了js文本框跑马灯效果，功能实现非常简单，推荐给大家，有需要的小伙伴可以参考下。
    2015-08-08
  • uni-app实现全局水印示例详解

    uni-app实现全局水印示例详解

    这篇文章主要为大家介绍了uni-app实现全局水印示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-07-07
  • bootstrap布局中input输入框右侧图标点击功能

    bootstrap布局中input输入框右侧图标点击功能

    这篇文章主要为大家详细介绍了bootstrap布局中input输入框右侧图标点击功能实现的相关代码，感兴趣的小伙伴们可以参考一下
    2016-05-05
  • js中el表达式的使用和非空判断方法

    js中el表达式的使用和非空判断方法

    下面小编就为大家分享一篇js中el表达式的使用和非空判断方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • webpack@v4升级踩坑(小结)

    webpack@v4升级踩坑(小结)

    这篇文章主要介绍了webpack@v4升级踩坑(小结),之前就尝试了升级，由于部分插件的原因，未能成功,今天就来试一下在我的项目中升级会遇到哪些坑。感兴趣的小伙伴们可以参考一下
    2018-10-10
  • uniapp实现可以左右滑动导航栏

    uniapp实现可以左右滑动导航栏

    这篇文章主要为大家详细介绍了uniapp 实现可以左右滑动导航栏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-10-10
  • JavaScript比较当前时间是否在指定时间段内的方法

    JavaScript比较当前时间是否在指定时间段内的方法

    这篇文章主要介绍了JavaScript比较当前时间是否在指定时间段内的方法,涉及javascript时间与字符串的转换及比较操作相关技巧,需要的朋友可以参考下
    2016-08-08

最新评论