arcgis api 3.x for js 入门开发系列六地图分屏对比(附源码下载)
前言
关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类的介绍,还有就是在线例子:esri 官网在线例子,这个也是学习 arcgis api 3.x 的好素材。
内容概览
- 地图分屏对比功能讲解
- 源代码 demo 下载
本篇实现地图分屏对比功能模块,截图如下:
对效果图的简单介绍一下,在 demo 只采用了两分屏对比,感兴趣的话,可以在两分屏的基础上拓展,修改 css 样式以及 js 控制,可以修改为多屏对比效果。1对应的是鼠标当前位置,2对应的是1在另一个分屏的地图位置;3是切图不同底图的作用。
地图分屏效果的对比,核心在于拥有不同年份或者不同类型的底图之间的对比才有意义的,这里的 dmeo 由于地图数据素材的限制,没有不同类型的底图,所以凑合的采用同一张底图的对比,但是分屏对比的功能效果是达到了的。
- 项目demo新增部分
- 新增 map.splitScreen.js 文件,实现地图分屏对比功能模块的代码文件;
- 在 map.html 页面引用 map.splitScreen.js:
<script type="text/javascript" src="js/main/map.splitScreen.js"></script>
更多的详情见:GIS之家小专栏
文章尾部提供源代码下载,对本专栏感兴趣的话,可以关注一波
arcgis api 3.x for js 入门开发系列六地图分屏对比(附源码下载)的更多相关文章
- leaflet-webpack 入门开发系列三地图分屏对比(附源码下载)
前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...
- arcgis api 3.x for js 入门开发系列十三地图最短路径分析(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- arcgis api 3.x for js 入门开发系列十叠加 SHP 图层(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- arcgis api for js入门开发系列六地图分屏对比(含源代码)
上一篇实现了demo的地图标绘模块,本篇新增地图地图分屏对比模块,截图如下(源代码见文章底部): 对效果图的简单介绍一下,在demo只采用了两分屏对比,感兴趣的话,可以在两分屏的基础上拓展,修改css ...
- openlayers4 入门开发系列之地图展示篇(附源码下载)
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
- openlayers4 入门开发系列之地图工具栏篇(附源码下载)
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
- openlayers4 入门开发系列之地图切换篇(附源码下载)
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
- openlayers4 入门开发系列之聚合图篇(附源码下载)
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
- openlayers4 入门开发系列之迁徙图篇(附源码下载)
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
随机推荐
- ABP入门系列(3)——领域层定义仓储并实现
ABP入门系列目录--学习Abp框架之实操演练 一.先来介绍下仓储 仓储(Repository): 仓储用来操作数据库进行数据存取.仓储接口在领域层定义,而仓储的实现类应该写在基础设施层. 在ABP中 ...
- Vue 学习笔记 -- inline-template
简书 更方便的使用私有子组件 定义一个私有子组件时,如果子组件的template过长会使得代码非常难以阅读 这时可以使用内联模版 但是如果写成这样 为毛用要子组件呢?
- emWin酿造机过程演示,含uCOS-III和FreeRTOS两个版本
第2期:酿造机过程演示 配套例子:V6-902_STemWin提高篇实验_酿造机过程演示(uCOS-III)V6-903_STemWin提高篇实验_酿造机过程演示(FreeRTOS) 例程下载地址:h ...
- JDK 和 OpenJDK 的区别
历史上的原因是,openjdk是jdk的开放原始码版本,以GPL协议的形式放出.在JDK7的时候,openjdk已经成为jdk7的主干开发,sun jdk7是在openjdk7的基础上发布的,其大部分 ...
- [Swift]LeetCode766. 托普利茨矩阵 | Toeplitz Matrix
A matrix is Toeplitz if every diagonal from top-left to bottom-right has the same element. Now given ...
- [Swift]LeetCode1003. 检查替换后的词是否有效 | Check If Word Is Valid After Substitutions
We are given that the string "abc" is valid. From any valid string V, we may split V into ...
- Python中面向对象的概念(科普)
面向对象(OOP)基本概念 面向对象编程 —— Object Oriented Programming 简写 OOP 目标 了解 面向对象 基本概念 01. 面向对象基本概念 我们之前学习的编程方式就 ...
- Linux 虚拟网络设备详解之 Bridge 网桥
本文首发于我的公众号 Linux云计算网络(id: cloud_dev),专注于干货分享,号内有 10T 书籍和视频资源,后台回复「1024」即可领取,欢迎大家关注,二维码文末可以扫. 前面几篇文章介 ...
- SpringMVC接收json数组对象
最近帮一个妹子解决一个需求,就是前台使用ajax传三个相同的对象,再加一个form表单对象.然后遇到各种问题,终于解决了,@RequestBody接收Json对象字符串 以前,一直以为在Spring ...
- [Abp 源码分析]十七、ASP.NET Core 集成
0. 简介 整个 Abp 框架最为核心的除了 Abp 库之外,其次就是 Abp.AspNetCore 库了.虽然 Abp 本身是可以用于控制台程序的,不过那样的话 Abp 就基本没什么用,还是需要集合 ...