arcgis js之地图分屏同步
arcgis js之地图分屏同步
原理:
新建两个map两个view或者一个map两个view。对地图进行移动事件绑定,在地图移动时同步地图方位
代码:
views.forEach((view) => {
// 定义一个范围变量
let fullextent = null
// 设置鼠标滚轮事件
view.on('mouse-wheel', (e) => {
// 延迟获取范围的函数
window.setTimeout(() => {
// 获取操作图层的范围
fullextent = view.extent
// 遍历所有视图来设置这个范围
views.forEach((nview) => {
nview.extent = fullextent
})
}, 1000)
})
// 设置鼠标拖拽事件
view.on('drag', (e) => {
// 获取操作图层的范围
fullextent = view.extent
// 遍历所有视图来设置这个范围
views.forEach((nview) => {
nview.extent = fullextent
})
})
注:
views是两个view的数组:
let views = [this.view, this.referview]
钻研不易,转载请注明出处......
arcgis js之地图分屏同步的更多相关文章
- arcgis api for js入门开发系列六地图分屏对比(含源代码)
上一篇实现了demo的地图标绘模块,本篇新增地图地图分屏对比模块,截图如下(源代码见文章底部): 对效果图的简单介绍一下,在demo只采用了两分屏对比,感兴趣的话,可以在两分屏的基础上拓展,修改css ...
- arcgis api 3.x for js 入门开发系列六地图分屏对比(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- ArcGIS Pro开发Web3D应用(2)——地图分屏对比(多屏对比)思路
很多应用中都需要用到地图联动.多屏对比.二三维分屏.大屏显示,有图形可视化的地方就有事件响应触发:鼠标按下.移动.鼠标滚轮,由此触发了地图上坐标或范围的变化,将这些变化发送给另一个地图并响应这些变化, ...
- leaflet-webpack 入门开发系列三地图分屏对比(附源码下载)
前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...
- arcgis api for js回调函数如何等待同步
arcgis js开发往往会遇到同步异步的问题,有可能在上一步使用了arcgis js模块回调函数,下一步需要用上一步回调函数的结果,但是因为JavaScript是异步执行的,它并不会等待上一步的回调 ...
- 基于jquery的页面分屏切换模板
闲来无事,搞了个页面的分屏效果,先来看下效果: 出于可自定义宽高的目的,屏幕分块由CSS控制,由js控制估计等分模块效果一般. 程序相关说明: HTML结构: <div class=" ...
- Arcgis API for JS——普通分屏联动及二三维联动
对于二三维联动,有多种方法进行实现,当时旧项目使用了当时能掌握的一种写法,在技能提升了这么多后当然要对这些写法做一个总结. 一.通过监听View上的鼠标事件变化来进行分屏联动(同一坐标系) (同理可以 ...
- ArcGIS JS 学习笔记1 用ArcGIS JS 实现仿百度地图的距离量测和面积量测
一.开篇 在博客注册了三年,今天才决定写第一篇博客,警告自己不要懒!!! 二.关于ArcGIS JS 版本选择 在写这篇博客时ArcGIS JS 4.0正式版已经发布.它和3.x版本的不同是,Map不 ...
- arcgis js 之 渔网工具(调用地图服务)
arcgis js 之 渔网工具(调用地图服务) 原理: 简历不同级别的网渔网图层,设置显示比例尺.然后发布服务,使用MapImageLayer接收. 过程: 1.在arcmap中用创建渔网工具将不同 ...
随机推荐
- 重学C语言
重学C语言 #include <stdio.h> int main() { ; ; printf("I am %d year old.\n",age); printf( ...
- <JavaScript> 关于闭包和this对象
1.this指向windows是如何得出的 var name = "The Window"; var object = { name : "My Object" ...
- SQL-W3School-高级:SQL LIKE 操作符
ylbtech-SQL-W3School-高级:SQL LIKE 操作符 1.返回顶部 1. LIKE 操作符用于在 WHERE 子句中搜索列中的指定模式. LIKE 操作符 LIKE 操作符用于在 ...
- django 2.2和mysql使用的常见问题
可能是由于Django使用的MySQLdb库对Python3不支持,我们用采用了PyMySQL库来代替,导致出现各种坑,特别是执行以下2条命令的是时候: python manage.py makemi ...
- SQL 里ESCAPE的用法
TABLES:makt. SELECT SINGLE * FROM makt AND maktx LIKE '%/_' ESCAPE '/' . SQL中escape的用法使用 ESCAPE 关键字定 ...
- 【ASP.NET Core学习】远程过程调用 - gRPC使用
本文介绍在gRPC使用,将从下面几个方面介绍 什么是RPC 什么时候需要RPC 如何使用gRPC 什么是RPC RPC是Remote Procedure Call简称,翻译过来是远程过程调用.它是一个 ...
- JAVA 基础编程练习题19 【程序 19 打印菱形图案】
19 [程序 19 打印菱形图案] 题目:打印出如下图案(菱形) * *** ************ ***** *** * 程序分析:先把图形分成两部分来看待,前四行一个 ...
- 【转载】CentOS7下使用LVM给系统硬盘扩容
原文地址:https://www.cnblogs.com/ding2016/p/9680690.html 简单介绍: LVM是逻辑盘卷管理(Logical Volume Manager)的简称,它是L ...
- 【Gstreamer开发】用 GStreamer 简化 Linux 多媒体开发
原文:http://www.ibm.com/developerworks/cn/linux/l-gstreamer/ 一.基本概念 GStreamer 作为 GNOME 桌面环境推荐的流媒体应用框架, ...
- Nuxt.js入门学习
Nuxt.js简单的说是Vue.js的通用框架,最常用的就是用来作SSR(服务器端渲染).再直白点说,就是Vue.js原来是开发SPA(单页应用)的,但是随着技术的普及,很多人想用Vue开发多页应用, ...