服务器之家:专注于服务器技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - js教程 - arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)

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

2022-01-11 15:59码尚 js教程

这篇文章主要介绍了arcgis.js控制地图地体的显示范围超出区域自动弹回,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

背景

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

效果

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

思路

1、arcgis.js控制其显示范围,在超出底图显示范围时自动弹回来
(1)地图创建完成之后使用监听事件监听地图范围改变调用shwoExtent方法,该方法会传一个地图的左上角和右下角的值

?
1
this.gisMap.on('extent-change',this.showExtent)

(2)根绝判断地图的最大显示范围 full extent来判断当前地图显示范围是否超出地图可视范围,当超出范围则显示地图的最大范围,地图回弹

代码片

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 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地图显示范围内容请搜索服务器之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持服务器之家!

原文链接:https://blog.csdn.net/weixin_43305946/article/details/113241812

延伸 · 阅读

精彩推荐
  • js教程基于JavaScript实现轮播图效果

    基于JavaScript实现轮播图效果

    这篇文章主要为大家详细介绍了基于JavaScript实现轮播图效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    努力学习中.....5562021-12-24
  • js教程JS+CSS实现过渡特效

    JS+CSS实现过渡特效

    这篇文章主要为大家详细介绍了JS+CSS实现过渡特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    Dr_空山3592021-12-23
  • js教程uniapp微信小程序:key失效的解决方法

    uniapp微信小程序:key失效的解决方法

    这篇文章主要介绍了uniapp微信小程序:key失效的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友...

    灬都是个谜11002022-01-05
  • js教程原生JavaScript实现随机点名表

    原生JavaScript实现随机点名表

    这篇文章主要为大家详细介绍了原生JavaScript实现随机点名表,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    栋栋很优秀啊9822021-12-31
  • js教程原生JS实现音乐播放器

    原生JS实现音乐播放器

    这篇文章主要为大家详细介绍了原生JS音乐播放器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    奶茶只要半糖3582022-01-07
  • js教程JavaScript中arguments的使用方法详解

    JavaScript中arguments的使用方法详解

    这篇文章主要给大家介绍了关于JavaScript中arguments的使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的...

    等待的L先生3682021-12-15
  • js教程JavaScript canvas实现文字时钟

    JavaScript canvas实现文字时钟

    这篇文章主要为大家详细介绍了JavaScript canvas实现文字时钟,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    _Adoph6162021-12-29
  • js教程微信小程序选择图片控件

    微信小程序选择图片控件

    这篇文章主要为大家详细介绍了微信小程序选择图片控件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    小雅雅家的小凯凯吖9732022-01-04