前言

关于本篇功能实现用到的 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. Java中的读写锁

    一.读写锁 1.初识读写锁 a)Java中的锁——Lock和synchronized中介绍的ReentrantLock和synchronized基本上都是排它锁,意味着这些锁在同一时刻只允许一个线程进 ...

  2. [Swift]LeetCode329. 矩阵中的最长递增路径 | Longest Increasing Path in a Matrix

    Given an integer matrix, find the length of the longest increasing path. From each cell, you can eit ...

  3. [Swift]LeetCode509. 斐波那契数 | Fibonacci Number

    The Fibonacci numbers, commonly denoted F(n) form a sequence, called the Fibonacci sequence, such th ...

  4. [Swift]LeetCode890. 查找和替换模式 | Find and Replace Pattern

    You have a list of words and a pattern, and you want to know which words in words matches the patter ...

  5. [武汉集训] Cliquers

    题意 设把\(n\)个不同元素分成若干个大小相等的集合的方案个数为\(res\),求\(m^{res}\)模\(10^9-401\)后的余数. (n,m不超过2*10^9) 分析 可以知道,所求答案为 ...

  6. asp.net core系列 33 EF查询数据 (2)

    一. 原生SQL查询 接着上篇讲.通过 Entity Framework Core 可以在使用关系数据库时下降到原始 SQL 查询. 在无法使用 LINQ 表达要执行的查询时,或因使用 LINQ 查询 ...

  7. 带着萌新看springboot源码04

    继续开头说些废话,我也不知道什么鬼,每次写着写着经常会写到其他地方去了,太容易分神了. 这次说一下springboot对于springmvc的大概整个流程,以请求动态网页为例 . 1.梳理一下spri ...

  8. Python包的导入说明

    import 模块 from 包 import 模块 上面的代码有什么区别呢? from 模块 import * 这种导入想象与把模块里面的代码都复制到当前模块中(也就是该语句所在位置),这时候你可以 ...

  9. Linux下编译器的安装

    一.Linux下gcc/g++/gfortran的安装 (1).gcc Linux下自带gcc编译器.可以通过“gcc -v”命令来查看是否安装. (2).g++安装g++编译器,可以通过命令“sud ...

  10. centos7修改网卡名字为传统名字

    前言:在centos6及其之前的系统中,我们已经习惯了网卡为eth0,eht1这种网卡命名方式,在centos7上网卡名字为ens33,ens37,ens38等名字,很别扭,想统一下网卡的命名. 1 ...