网络编程 
首页 > 网络编程 > 浏览文章

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

(编辑:jimmy 日期: 2024/12/26 浏览:3 次 )

背景

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

效果

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

上一篇:vue穿梭框实现上下移动
下一篇:vue使用transition组件动画效果的实例代码
一句话新闻
高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 站点导航 SiteMap