前言

关于本篇功能实现用到的 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. Spring Cloud Eureka 使用 IP 地址进行服务注册

    默认情况下,Eureka 使用 hostname 进行服务注册,以及服务信息的显示,那如果我们使用 IP 地址的方式,该如何配置呢?答案就是eureka.instance.prefer-ip-addr ...

  2. 【RL-TCPnet网络教程】第22章 RL-TCPnet之网络协议IP

    第22章      RL-TCPnet之网络协议IP 本章节为大家讲解IP(Internet Protocol,网络协议),通过前面章节对TCP和UDP的学习,需要大家对IP也有个基础的认识. (本章 ...

  3. 剑指Offer全解

    二维数组中的查找 描述 在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中 ...

  4. Go语言数组和切片的原理

    目录 数组 创建 访问和赋值 切片 结构 初始化 访问 追加 拷贝 总结 数组和切片是 Go 语言中常见的数据结构,很多刚刚使用 Go 的开发者往往会混淆这两个概念,数组作为最常见的集合在编程语言中是 ...

  5. [Swift]LeetCode1014. 最佳观光组合 | Best Sightseeing Pair

    Given an array A of positive integers, A[i] represents the value of the i-th sightseeing spot, and t ...

  6. [Swift]LeetCode1022. 从根到叶的二进制数之和 | Sum of Root To Leaf Binary Numbers

    Given a binary tree, each node has value 0 or 1.  Each root-to-leaf path represents a binary number ...

  7. [Swift]LeetCode1028. 从先序遍历还原二叉树 | Recover a Tree From Preorder Traversal

    We run a preorder depth first search on the root of a binary tree. At each node in this traversal, w ...

  8. Firefox 多行标签的解决方案分享

    更新了 Quantum 以后 TabMixPlus 就不能用了,我最中意的多行标签也没了,捣鼓了一下终于重新回来了. 指南: https://discourse.mozilla.org/t/tabs- ...

  9. kubernetes系列之ConfigMap使用方式

    作用理解 核心用途就是容器和配置的分离解耦. 如启用一个mysql容器,mysql容器重要的文件有两部分,一部分为存储数据文件,一部分为配置文件my.cnf,存储数据可以用持久存储实现和容器的分离解耦 ...

  10. Kubernetes系列之监控Metres-server实战篇

    本次系列使用的所需部署包版本都使用的目前最新的或最新稳定版,安装包地址请到公众号内回复[K8s实战]获取 介绍 从 Kubernetes 1.8 开始,Kubernetes 通过 Metrics AP ...