前言

关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类的介绍,还有就是在线例子:esri 官网在线例子,这个也是学习 arcgis api 3.x 的好素材。

内容概览

  1. 地图分屏对比功能讲解
  2. 源代码 demo 下载

本篇实现地图分屏对比功能模块,截图如下:

对效果图的简单介绍一下,在 demo 只采用了两分屏对比,感兴趣的话,可以在两分屏的基础上拓展,修改 css 样式以及 js 控制,可以修改为多屏对比效果。1对应的是鼠标当前位置,2对应的是1在另一个分屏的地图位置;3是切图不同底图的作用。
地图分屏效果的对比,核心在于拥有不同年份或者不同类型的底图之间的对比才有意义的,这里的 dmeo 由于地图数据素材的限制,没有不同类型的底图,所以凑合的采用同一张底图的对比,但是分屏对比的功能效果是达到了的。

  • 项目demo新增部分
  1. 新增 map.splitScreen.js 文件,实现地图分屏对比功能模块的代码文件;
  2. 在 map.html 页面引用 map.splitScreen.js:
<script type="text/javascript" src="js/main/map.splitScreen.js"></script>

更多的详情见GIS之家小专栏

文章尾部提供源代码下载,对本专栏感兴趣的话,可以关注一波

 

arcgis api 3.x for js 入门开发系列六地图分屏对比(附源码下载)的更多相关文章

  1. leaflet-webpack 入门开发系列三地图分屏对比(附源码下载)

    前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...

  2. arcgis api 3.x for js 入门开发系列十三地图最短路径分析(附源码下载)

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

  3. arcgis api 3.x for js 入门开发系列十叠加 SHP 图层(附源码下载)

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

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

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

  5. openlayers4 入门开发系列之地图展示篇(附源码下载)

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  6. openlayers4 入门开发系列之地图工具栏篇(附源码下载)

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  7. openlayers4 入门开发系列之地图切换篇(附源码下载)

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  8. openlayers4 入门开发系列之聚合图篇(附源码下载)

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  9. openlayers4 入门开发系列之迁徙图篇(附源码下载)

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

随机推荐

  1. 使用Sublime Text 或 vs2017开发Node.js程序

    在学习一门开发语言时,为了从简单的方式入手,有时候直接用Notepad开始敲代码.曾经我也这样干过,这样做简洁而不简单啊! 随着时间的流逝,人也变得懒惰起来,做事前总是想借助一些工具来搞事情.< ...

  2. Dubbo与Nginx区别

    Dubbo的负载均衡已经是服务层面的了,和nginx的负载均衡还在http请求层面完全不同.至于二者哪个优秀,当然没办法直接比较. 涉及到负载均衡就涉及到你的业务,根据业务来选择才是最适合的. dub ...

  3. 【逆元】HDU-1576

    逆元: 同余方程 ax≡1(mod n),gcd(a,n) = 1 时有解,这时称求出的 x 为 a 的对模n的乘法逆元.(注意:如果gcd(a,n)如果不等于1则无解),解法还是利用扩展欧几里得算法 ...

  4. 免费申请使用IBM Cloud Lite(轻量套餐) 详细教程指南

    注册轻量帐户可在 IBM CLOUD控制台中使用所选的显示有轻量标记的免费轻量套餐来构建应用程序和探索服务.轻量帐户不会到期,也无需信用卡. 本文详细的介绍了一下,免费云服务的申请以及使用!这次使用I ...

  5. [Swift]LeetCode86. 分隔链表 | Partition List

    Given a linked list and a value x, partition it such that all nodes less than x come before nodes gr ...

  6. [Swift]LeetCode326. 3的幂 | Power of Three

    Given an integer, write a function to determine if it is a power of three. Example 1: Input: 27 Outp ...

  7. [Swift]LeetCode654. 最大二叉树 | Maximum Binary Tree

    Given an integer array with no duplicates. A maximum tree building on this array is defined as follo ...

  8. [Swift]LeetCode818. 赛车 | Race Car

    Your car starts at position 0 and speed +1 on an infinite number line.  (Your car can go into negati ...

  9. linux入门--类UNIX系统详解

    有人说,这个世界上只有两种操作系统: UNIX 和类 UNIX 操作系统: 其它操作系统. 类 UNIX 系统(英文 Unix-like)既包括各种传统的 UNIX 系统,比如 FreeBSD.Ope ...

  10. Kubernetes 笔记 06 豌豆荚之旅(一)

    本文首发于我的公众号 Linux云计算网络(id: cloud_dev),专注于干货分享,号内有 10T 书籍和视频资源,后台回复「1024」即可领取,欢迎大家关注,二维码文末可以扫. Hi,大家好, ...