java实现arcgis地图分屏(双图)

java实现arcgis地图分屏(双图)

本博文采用Java语言，利用arcgis api for javascript 4.16地图服务，实现地图分屏，直接上源码：

视图对比

html,body{

width: 100%;

height: 100%;

padding: 0;

margin: 0;

}

#targetWindow,#referenceWindow{

height: 100%;

margin: 0;

padding: 0;

}

#referenceWindow{

position: absolute;

right: 0;

z-index: 0;

}

#contrastSetting{

width: 377px;

background-color: white;

padding: 8px;

}

.divHidden{

display: none!important;

}

.options{

margin-left: 10px;

display: inline-block;

position: absolute;

bottom: 14px;

}

.displayStyle{

margin-top: 19px;

}

#targetDamChart,#referenceDamChart{

background-color: white;

padding: 15px;

}

/**

* 把targetWindow和referenceWindow分开比较好(即主地图和参考地图分开定义和设置)

*/

require([

"esri/Map",

"esri/views/MapView",

"esri/layers/FeatureLayer",

"esri/core/watchUtils",

"esri/widgets/Expand",

"esri/widgets/Fullscreen",

"esri/widgets/Sketch",

"esri/layers/GraphicsLayer",

"esri/geometry/Point",

"esri/Graphic",

"esri/widgets/Legend",

"esri/widgets/BasemapToggle",

"esri/widgets/TimeSlider", //时间滑块

//3D

"esri/views/SceneView",

"esri/widgets/Fullscreen/FullscreenViewModel",

"esri/symbols/PictureMarkerSymbol",

"esri/renderers/visualVariables/ColorVariable",

"esri/symbols/MeshSymbol3D",

"esri/symbols/LineSymbol3DLayer",

"esri/symbols/PolygonSymbol3D"

],function (Map,MapView,FeatureLayer,watchUtils,Expand,Fullscreen,Sketch,GraphicsLayer,

Point,Graphic,Legend, BasemapToggle,TimeSlider, SceneView,FullscreenViewModel,PictureMarkerSymbol,

ColorVariable,MeshSymbol3D,LineSymbol3DLayer, PolygonSymbol3D) {

/**

* targetWindowConfiguration 主地图设置

*/

var targetWindowMap = new Map({

basemap:"osm",

});

var targetWindowView = new MapView({

map:targetWindowMap,

container:"targetWindow",

//地图中心坐标

center:[108.63033475, 34.36030168],

zoom:12

});

/**

* referenceWindowConfiguration 参考地图设置

*/

var referenceWindowMap = new Map({

basemap:"osm",

});

var referenceWindowView = new MapView({

map:referenceWindowMap,

container:"referenceWindow",

center:[108.63033475, 34.36030168],

zoom:12,

ui:{

components:[]

},

popup:{

dockOptions:{

position:"top-left"

}

}

});

//禁止参考窗口地图通过鼠标控制移动

referenceWindowView.on(["drag","mouse-wheel"],function (event) {

event.stopPropagation()

});

//referenceWindow通过targetWindow来控制地图移动

targetWindowView.when(function () {

referenceWindowView.when(function () {

watchUtils.watch(targetWindowView,"extent",function (extent) {

//stationary表示targetWindowView中的地图移动完毕

if (targetWindowView.stationary){

//将显示中心同步

referenceWindowView.goTo({

center:targetWindowView.center

})

}

//两个对比窗口的显示范围同步

referenceWindowView.extent = extent

})

})

});

$(function () {

//使用select下拉框来控制要素图层的显示

$("#target").on("change",function (event) {

damMessageTarget.visible = false;

// riverMessageTarget.visible = false;

ClearChart();

switch (event.originalEvent.target.value) {

case "damMessageTarget":

damMessageTarget.visible = true;

break;

}

});

$("#reference").on("change",function (event) {

damMessageReference.visible = false;

ClearChart();

switch (event.originalEvent.target.value) {

case "damMessageReference":

damMessageReference.visible = true;

break;

}

});

//添加可拖动div

$("#displayStyle>label>input[type='radio']").on("click",function (event) {

//获取点击的radio的value

var val = event.target.value;

switch (val) {

case "doubleDivs":

doubleDivs();

break

}

});

//初始目标div的宽度

var initialTargetWindowsWidth = $("#targetWindow").width();

//初始参考div的宽度

var initialreferenceWindowsWidth = initialTargetWindowsWidth;

function init() {

//https://www.jqueryui.org.cn/api/3725.html

$("#targetWindow").resizable({

maxHeight: $("#targetWindow").height(),

maxWidth: $("#targetWindow").width() * 1.27,

minHeight: $("#targetWindow").height(),

minWidth: $("#targetWindow").width(),

//拉动对比div时触发该方法

resize: function (event, ui) {

//获取目标div的改变值,ui.size.width 是当前目标div的宽度

var change = initialTargetWindowsWidth - ui.size.width

//改变参考div的宽度

$("#referenceWindow").width(initialreferenceWindowsWidth + change)

}

})

}

//初始化resizable方法，以后切换模式只用开关闭就行啦，不用新建，节省资源。

init();

//双图模式

function doubleDivs() {

//关闭resizable方法，并将对比和参考的div还原成初始状态

$("#targetWindow").resizable("option", "disabled", true);

$("#targetWindow").width(initialTargetWindowsWidth)

$("#referenceWindow").width(initialreferenceWindowsWidth)

}

})

})

实现效果为两个地图左右分屏，以下为效果图：

这个都是用的在线地图，加载速度不会太快，所以可以将arcgis的api部署在本地，加载速度就会很快了。建议部署最新的argis api，功能更齐全，官方文档也全一些。

用到的jquery-ui.css有需要的可以点击百度网盘链接下载~

链接：https://pan.baidu.com/s/16QJsEX0e2l_wZqZgObi-mA

提取码：t3ht

以后还会更新地图的选择日期进行打点，弹框，敬请期待！

java实现arcgis地图分屏(双图)相关教程

进程间通信——基于共享内存和信号量实现共享队列

进程间通信——基于共享内存和信号量实现共享队列 一、进程间的通信方式 进程间通信就是在不同进程之间传播或交换信息，通信方式一般分为管道、命名管道(FIFO)、消息队列、信号量(Semaphore)、共享内存(Shared Memory)五种。 管道：只能用于父子进程或

Java 求助！ 为什么我拿不到错误信息，e.getMessage()

Java 求助！ 为什么我拿不到错误信息，e.getMessage() 我明明打印了错误信息的啊？ e.getMessage() 是空，为什么？ 一声声带着惊讶，带着恐慌，带着质疑，带着无奈的话语，从某个角落里传出。 议论纷纷...... 似乎拿不到异常信息是个僵局，只能用 玄 学 两个

springboot+Hystrix+eureka+Openfeign实现分布式生产者消费者直

springboot+Hystrix+eureka+Openfeign实现分布式生产者消费者直接的调用以及解决服务降级、服务熔断、服务限流等问题(1) springboot+Hystrix+eureka+Openfeign实现分布式生产者消费者直接的调用以及解决服务降级、服务熔断、服务限流等问题(1) Hystrix是什么

Javaweb——(day01)html与css

Javaweb——(day01)html与css 文章目录 HTML与CSS B/S软件的结构 前端的开发流程 网页的组成部分 HTML简介 创建HTML文件 HTML 标签介绍 常用标签 1.font字体标签 2.特殊字符 3.标题标签 4.超链接 5.列表标签 6.img标签 7.表格标签 8.跨行跨列表格 9.了解ifram

【Java】对象与类

【Java】对象与类 对象和类 类和对象 类的成员 属性 方法 方法重载 方法参数 方法参数的值传递机制 可变个数的形参 构造器 对象 匿名对象 对象的内存解析 类的三大特征 封装 权限修饰符 继承 多态 关键字 this package import 类和对象 属性 属性(成员变量)

PAT甲级1099 Build A Binary Search Tree (30分)|C++实现

PAT甲级1099 Build A Binary Search Tree (30分)|C++实现 一、题目描述 原题链接 For each test case, print in one line the level order traversal sequence of that tree. All the numbers must be separated by a space, with no extra space at the end

【React】实现div高度适配浏览器窗口大小

【React】实现div高度适配浏览器窗口大小 实现的方法有好几种，本人仅提供自己在实现过程中使用的这一种。 div style={{height:100%,position:absolute,width:100%,left:0,top:0}} {/* 中间内容省略 */}/div 实现效果：

Laravel实现权限控制

Laravel实现权限控制 文章目录 一、RBAC 二、认证授权逻辑 三、具体实现 创建表的迁移文件 用户： 角色： 权限： 创建控制器 修改路由文件 路由别名 拓展FormRequest验证 中间件过滤 控制器方法 RBAC: role base access control 基于角色的用户访问权限控制权