很多应用中都需要用到地图联动、多屏对比、二三维分屏、大屏显示,有图形可视化的地方就有事件响应触发:鼠标按下、移动、鼠标滚轮,由此触发了地图上坐标或范围的变化,将这些变化发送给另一个地图并响应这些变化,即完成地图联动。

下面以二维地图分屏和二三维地图分屏分别说明实现思路(以ArcGIS开发为例,其他思路可参考)。

1、二维地图分屏对比(地图空间参考一般会一致)

1)页面布局,将网页布局设计成1~N个DIV;

2)事件监听,对鼠标在地图上的事件进行监听,一个地图事件触发后,其他地图响应。

※※※ MouseDown、MouseOver、MouseWheel,3个主要事件响应,对应地图上pan-end、mouse-move、zoom-end,地图联动变化核心:【map.setExtent(evt.extent)】,参考代码如下:

  1.        //放大联动
  2. this._activeMapEventHandlers.push(this.activeMap.on("zoom-end", function (evt) {
  3. self._maps.forEach(function (map) {
  4. if (map != self.activeMap) {
  5. map.setExtent(evt.extent);
  6. }
  7. });
  8. }));
  9. //平移联动
  10. this._activeMapEventHandlers.push(this.activeMap.on("pan-end", function (evt) {
  11. self._maps.forEach(function (map) {
  12. if (map != self.activeMap) {
  13. map.setExtent(evt.extent);
  14. }
  15. });
  16. }));
  17.  
  18. //鼠标联动
  19. this._activeMapEventHandlers.push(this.activeMap.on("mouse-move", function (evt) {
  20. self._maps.forEach(function (map) {
  21. var idx = self._maps.indexOf(map);
  22. var graphicLayer = map.getLayer("layer")
  23. var graphic = self._mouseGraphics[idx];
  24. if (map != self.activeMap) {
  25. graphicLayer.show();
  26. graphic.setGeometry(evt.mapPoint);
  27. } else {
  28. graphicLayer.hide();
  29. }
  30. });
  31. }));

2、二三维分屏联动对比

  与二维相比,三维在地图空间参考上具有差异性,三维地图一般是WGS84、WGS84魔卡托,还有诸如国内火星坐标系(CGCS2000)等,会导致投影坐标存在投影转换,二维平面坐标就是XY(另加Scale),三维立体坐标拥有XYZ(另加Scale),以及XYZ上的旋倾角,遵循右手笛卡尔坐标系,见下图:

pitch是围绕X轴旋转,也叫做俯仰角;yaw是围绕Y轴旋转,也叫偏航角;roll是围绕Z轴旋转,也叫翻滚角。

由此可见,二三维联动的核心:二维的中心(X,Y)+Scale(缩放系数),三维的“七参数”:(X,Y,Z,Pitch,Yaw,Roll,Scale(缩放系数)),转换投影变动就能实现。

ArcGIS JS二三维联动同步具体设计实现与二维类似,给出核心同步代码参考:

  1. var synchronizeView = function(view, others) {
  2. others = Array.isArray(others) ? others : [others];
  3.  
  4. var viewpointWatchHandle;
  5. var viewStationaryHandle;
  6. var otherInteractHandlers;
  7. var scheduleId;
  8.  
  9. var clear = function() {
  10. if (otherInteractHandlers) {
  11. otherInteractHandlers.forEach(function(handle) {
  12. handle.remove();
  13. });
  14. }
  15. viewpointWatchHandle && viewpointWatchHandle.remove();
  16. viewStationaryHandle && viewStationaryHandle.remove();
  17. scheduleId && clearTimeout(scheduleId);
  18. otherInteractHandlers = viewpointWatchHandle =
  19. viewStationaryHandle = scheduleId = null;
  20. };
  21.  
  22. //鼠标事件监听、动画交互
  23. var interactWatcher = view.watch('interacting,animation',
  24. function(newValue) {
  25. if (!newValue) {
  26. return;
  27. }
  28. if (viewpointWatchHandle || scheduleId) {
  29. return;
  30. }
  31.  
  32. //同步联动视图(每个地图的View),viewpoint:Camera,rotation,scale
  33. scheduleId = setTimeout(function() {
  34. scheduleId = null;
  35. viewpointWatchHandle = view.watch('viewpoint',
  36. function(newValue) {
  37. others.forEach(function(otherView) {
  38. otherView.viewpoint = newValue;
  39. });
  40. });
  41. }, 0);
  42.  
  43. //视图交互响应
  44. otherInteractHandlers = others.map(function(otherView) {
  45. return watchUtils.watch(otherView,
  46. 'interacting,animation',
  47. function(
  48. value) {
  49. if (value) {
  50. clear();
  51. }
  52. });
  53. });
  54.  
  55. viewStationaryHandle = watchUtils.whenTrue(view,
  56. 'stationary', clear);
  57. });
  58.  
  59. return {
  60. remove: function() {
  61. this.remove = function() {};
  62. clear();
  63. interactWatcher.remove();
  64. }
  65. }
  66. };

以上介绍了地图开发中常用到的分屏对比实现思路,仅供参考。

版权声明:欢迎转载,转载请说明出处。

ArcGIS Pro开发Web3D应用(2)——地图分屏对比(多屏对比)思路的更多相关文章

  1. ArcGIS Pro开发Web3D应用(1)——环境搭建与初始实例

    1.搭建环境 1.1 ArcGIS Web3D软件环境 ArcGIS Pro 2.0(必须) ArcGIS for Enterprise 10.5.1 (从10.5开始称呼为Enterprise)包括 ...

  2. ArcGIS Pro开发Web3D应用(3)——Server/Portal授权服务开发

    1.整体环境搭建完成 WebAdaptor.DataStore.Portal for arcgis.arcgis server.arcgis pro都成功部署安装,不管是同服务器还是不同服务器,最好做 ...

  3. ArcGIS Pro开发Web3D应用(4)——Portal发布三维没有“发布”选项解决

    如题,将三维场景包.slpk上传并发布,未看到发布选项. 问题核心就在于环境没配置好,主要有2点: 1.验证联合托管状态 需要将托管服务器与Portal进行联合,并进行验证,此情况需要在WebAdap ...

  4. Arcgis andoid开发之应用百度地图接口实现精准定位与显示

    怀着激动.兴奋的心情,在这个漫天柳絮的季节写下了这片博文,为什么呢,因为困扰我很久的一个技术性的问题得到了解决,发次博文,供大家参观.学习,同时,也以慰藉我长期困扰的心情,好了,废话不再,言归正传,看 ...

  5. 更新!ArcMap和ArcGIS Pro加载百度影像地图

    上一篇文章写了ArcMap和ArcGIS Pro中加载百度地图 的方法 一次没有把百度影像加载的功能开发出来,趁这几天有空整理了下 加载方法按照上次那篇文章操作. 百度影像wmts加载地址:http: ...

  6. arcgis api for js入门开发系列六地图分屏对比(含源代码)

    上一篇实现了demo的地图标绘模块,本篇新增地图地图分屏对比模块,截图如下(源代码见文章底部): 对效果图的简单介绍一下,在demo只采用了两分屏对比,感兴趣的话,可以在两分屏的基础上拓展,修改css ...

  7. arcgis api 3.x for js 入门开发系列六地图分屏对比(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  8. ArcMap和ArcGIS Pro加载百度地图

    前面发布了两篇我用ArcBruTile开发用于ArcMap加载百度地图的插件ArcBruTileBaidu,放在网上后评论和反响还不错,还有两位大学同学通过百度搜索居然搜到我本人!文章和技术介绍也被网 ...

  9. 开源方案搭建可离线的精美矢量切片地图服务-7.Arcgis Pro企业级应用

    1.前言 上篇讲.pbf字体库的时候说到我们使用的字体通过Arcgis Pro 生成,Arcgis Pro样式基于Mapbox做的矢量切片地图渲染.这篇主要讲一下Arcgis Pro矢量切片生成的的具 ...

随机推荐

  1. Spring 基于Session的创建实例

    需求 提供一个网页,根据导入的Excel数据计算结果. 第一版本设计 Controller层 @RestController public class QuoteController { privat ...

  2. .NET中结构和类的区别

    最近在学习Swift语言,看到了枚举这一章,Swift可以支持在枚举中定义方法...于是想到了回顾一下.NET中枚举.结构.类之间区别. 枚举在.NET较为简单,这里就不作比较,只谈谈结构和类. 1. ...

  3. 使用Apache JMeter对SQL Server、Mysql、Oracle压力测试(一)

    前段时间面试被问到了数据库方面的知识:比如选择什么样的数据库,如何优化,怎么加索引,于是想到了自己动手测试一下常用数据库的性能: 第一步,下载好JMeter之后打开运行.话说这个JMeter打开还真是 ...

  4. 编年史:OI测试

    2019.4.18 t1:给出不定方程ax+by+c=0,求x在x1~x2并且y在y1~y2时的解个数.考场上想的是一个扩欧板子敲下去,然后构造出x>=x1的最小解,同时得出y,然后通过通项来枚 ...

  5. 监听auduo标签播放

    <audio id="audio" controls="controls" loop="loop" style="displ ...

  6. sersync客户端搭建及配置

    首先需要自行下载sersync包,地址如下: 谷歌项目地址:https://code.google.com/archive/p/sersync/ 64位下载地址:https://storage.goo ...

  7. Centos6.10 安装Python 2.7.16

    部署一个程序, 系统环境:CentOS 6.10 64位 Python版本:2.7 1.升级下系统 yum install eple-release -y yum update -y 2.下载pyth ...

  8. R-CNN,SPP-NET, Fast-R-CNN,Faster-R-CNN, YOLO, SSD, R-FCN系列深度学习检测方法梳理

    1. R-CNN:Rich feature hierarchies for accurate object detection and semantic segmentation 技术路线:selec ...

  9. 漫谈GUI开发—各种平台UI开发概况

    前言: 在看这边文章前,可以建议看下:图形界面操作系统发展史——计算机界面发展历史回顾 从CS到BS,现在的前端开发,其实也是GUI开发范畴.现今 各平台的UI开发概况 HTML&CSS,Wi ...

  10. vue知识总结

    vue: 渐进式JavaScript 框架 Vue项目构建 npm install -g vue vue init webpack-simple my-project cd my-project np ...