arcgis for js 实现双屏效果
源码：
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>疑似违法地图双屏</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.13/esri/themes/light/main.css"/>
<link rel="stylesheet" href="../css/mainApp.css">
<!--<link rel="stylesheet" th:href="@{${gisfileserver} + '/library/4.11/esri/themes/light/main.css'}"/>-->
<link rel="stylesheet" href="../dist/css/dextra.css">
<style>
.esri-ui-top-left {
top: 20%;
left: 95%;
}
.legendContent{
right: 230px;
}
.esri-popup--is-docked {
top:unset;
bottom: -5%;
right: 20%;
margin: 15px 15px 30px 15px;
animation: esri-docking-animation 250ms ease-out;
}
#MW_WARN{
left: 241px;
position: fixed;
width: 131px;
right: 0 !important;
}
#MW_WARN h3{
color: #fff;
text-align: center;
padding: 4px !important;
margin: 0;
background: rgba(23, 197, 207, 0.5);
font-weight: normal;
font-size: 14px;
}
#MW_WARN li{
background: rgba(0,0,0,0.5);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
}
#MW_WARN li img{
margin-right: 10px;
width: 14px;
}
#MW_WARN li:nth-child(2) img{
margin-right: 2px;
}
.YL{
width: 78px;
margin-right: 20px;
display: none;
}
.YL h3{
padding: 4px !important;
margin: 0;
background: #0087b5;
/* border-bottom: 1px #ccc solid; */
text-align: center;
font-weight: normal;
font-size: 14px;
color: #fff;
}
.YL ul{
background: #fff;
}
.YL li{
font-size: 12px;
display: inline-block;
width: 100%;
text-align: center;
cursor: pointer;
padding: 3px 0 !important;
color: #fff;
}
.YL li:last-child{
color: #000;
}
html,
body {
padding: 0;
margin: 0;
height: 100%;
}
.viewDivBase {
padding: 0;
margin: 0;
height: 100%;
width: 49.9%;
}
#viewDiv {
float: left;
}
#viewDivx {
float: right;
}
</style>
<script src="../js/Config/SysConfig.js"></script>
<script src="../Vendor/jquery/jquery-1.8.3.min.js"></script>
<script src="../Vendor/GeoTool.js"></script>
<script src="../dist/config.js"></script>
<script src="https://js.arcgis.com/4.13/"></script>
<script src="../js/Symbols/suspectedIllegalSymbols.js"></script>
<!--<script th:src="@{${gisfileserver} + '/library/4.11/dojo/dojo.js'}"></script>-->
<script src="../js/RenderSet/suspectedIllegalRenderSets.js"></script>
## <script src="../js/layerMsg/suspectedIllegalMsgClick.js"></script>
## <script src="../js/layerMsg/suspectedIllegalMsgMouseOver.js"></script>
## <script src="../js/popupInfo/suspectedIllegal.js"></script>
<script src="../js/suspectedIllegalLayers.js"></script>
## <script src="../js/Widgets/ItsWidgetManage.js"></script>
## <script src="../js/FlashInfo/CFlashInfo.js"></script>
<script src="../js/commonAjax.js"></script>
<script src="../js/MapCommon.js"></script>
<script>
var myMap,myMapx,tdtvlayer,tdtvannolayer,tdtImageLayer,tdtImageAnnoLayer,tdtTerrienLayer,tdtTerrienAnnoLayer,BaseMapLayer,tdtvlayerx,tdtvannolayerx,tdtImageLayerx,tdtImageAnnoLayerx,tdtTerrienLayerx,tdtTerrienAnnoLayerx,BaseMapLayerx,view,viewx,layerList;
// Load the Map and MapView modules
require(["esri/Map",
"esri/layers/GraphicsLayer",
"esri/layers/MapImageLayer",
"dextra/layers/TdtVectorLayer",
"dextra/layers/TdtVectorAnnoLayer",
"dextra/layers/TdtImageLayer",
"dextra/layers/TdtImageAnnoLayer",
"dextra/layers/TdtTerrienLayer",
"dextra/layers/TdtTerrienAnnoLayer",
"esri/layers/FeatureLayer",
"esri/layers/TileLayer",
"esri/views/SceneView",
"esri/views/MapView",
"esri/tasks/support/Query",
"esri/tasks/QueryTask",
"esri/Graphic",
"esri/geometry/Point",
"esri/symbols/SimpleMarkerSymbol",
"esri/tasks/IdentifyTask",
"esri/tasks/support/IdentifyParameters",
"esri/layers/support/LabelClass",
"esri/widgets/LayerList",
"dojo/domReady!"], function(Map,GraphicsLayer,MapImageLayer, TdtVectorLayer,TdtVectorAnnoLayer,TdtImageLayer,TdtImageAnnoLayer,TdtTerrienLayer,TdtTerrienAnnoLayer,FeatureLayer,TileLayer,SceneView,MapViewer,Query, QueryTask, Graphic, Point, SimpleMarkerSymbol,IdentifyTask,IdentifyParameters,LabelClass,LayerList) {
tdtvlayer=new TdtVectorLayer();
BaseMapLayer=new MapImageLayer("http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer");
BaseMapLayer.visible=false;
tdtvlayer.visible=false;
tdtvannolayer=new TdtVectorAnnoLayer();
tdtvannolayer.visible=false;
tdtImageLayer=new TdtImageLayer();
tdtImageLayer.visible=true;
tdtImageAnnoLayer=new TdtImageAnnoLayer();
tdtImageAnnoLayer.visible=false;
tdtTerrienLayer=new TdtTerrienLayer();
tdtTerrienLayer.visible=false;
tdtTerrienAnnoLayer=new TdtTerrienAnnoLayer();
tdtTerrienAnnoLayer.visible=false;
tdtvlayerx=new TdtVectorLayer();
BaseMapLayerx=new MapImageLayer("http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer");
BaseMapLayerx.visible=false;
tdtvlayerx.visible=false;
tdtvannolayerx=new TdtVectorAnnoLayer();
tdtvannolayerx.visible=false;
tdtImageLayerx=new TdtImageLayer();
tdtImageLayerx.visible=true;
tdtImageAnnoLayerx=new TdtImageAnnoLayer();
tdtImageAnnoLayerx.visible=false;
tdtTerrienLayerx=new TdtTerrienLayer();
tdtTerrienLayerx.visible=false;
tdtTerrienAnnoLayerx=new TdtTerrienAnnoLayer();
tdtTerrienAnnoLayerx.visible=false;
myMapx = new Map({
layers:[tdtvlayerx,tdtvannolayerx,tdtImageLayerx,tdtImageAnnoLayerx,tdtTerrienLayerx,tdtTerrienAnnoLayerx]
});
myMap = new Map({
layers:[tdtvlayer,tdtvannolayer,tdtImageLayer,tdtImageAnnoLayer,tdtTerrienLayer,tdtTerrienAnnoLayer]
});
view = new MapViewer({
map: myMap,
container: "viewDiv",
center: [116.46584736842797, 40.2002852541334], // Sets center point of view using longitude,latitude
zoom:9,
constrains:{
minScale:500000,//最大空间等级
maxScale:5000000,//最小空间等级
rotationEnabled:false
}
});
viewx = new MapViewer({
map: myMapx,
container: "viewDivx",
center: [116.46584736842797, 40.2002852541334], // Sets center point of view using longitude,latitude
zoom:9,
constrains:{
minScale:500000,//最大空间等级
maxScale:5000000,//最小空间等级
rotationEnabled:false
}
});
myMap.add(BaseMapLayer);
myMapx.add(BaseMapLayerx);
//动态创建图层
for(var i=0; i<LayersInfo.length; i++ ){
if(LayersInfo[i].SERVICETYPE=='featrueSevice'){
CreateFeatureLayer(myMap,LayersInfo[i],FeatureLayer);
CreateFeatureLayer(myMapx,LayersInfo[i],FeatureLayer);
}
if(LayersInfo[i].SERVICETYPE=='arcGISDynamicMapService'){
CreateArcGISDynamicMapServiceLayer(myMap,LayersInfo[i],FeatureLayer);
CreateArcGISDynamicMapServiceLayer(myMapx,LayersInfo[i],FeatureLayer);
}
if(LayersInfo[i].SERVICETYPE=='MapImageLayer'){
CreateMapImageLayer(myMap,LayersInfo[i],MapImageLayer);
CreateMapImageLayer(myMapx,LayersInfo[i],MapImageLayer);
}
if(LayersInfo[i].SERVICETYPE=='tileLayer'){
CreateTileLayer(myMap,LayersInfo[i],TileLayer);
CreateTileLayer(myMapx,LayersInfo[i],TileLayer);
}
// if(LayersInfo[i].SERVICETYPE=='GraphicsLayer'){
// CreateGraphicsLayer(myMap,LayersInfo[i],GraphicsLayer);
// if(LayersInfo[i].LAYERTYPE == 'point' && LayersInfo[i].DRAWINFO != undefined){
// commonAjaxForPointPost(LayersInfo[i],CreatePointGraphicsByData);
// }
// }
}
myMap.findLayerById("nearInfrared").visible=false;
myMapx.findLayerById("infrared").visible=false;
view.on("click", function (event) {
var point = view.toMap({x: event.x, y: event.y});
// the hitTest() checks to see if any graphics in the view
// intersect the given screen x, y coordinates
view.hitTest(event).then(function (results) {
if(results.results.length){
MapClick(results.results);
}
});
});
view.on("pointer-move", function (event) {
var point = view.toMap({x: event.x, y: event.y});
// the hitTest() checks to see if any graphics in the view
// intersect the given screen x, y coordinates
view.hitTest(event).then(function (results) {
if(results.results.length){
MapMouseoverEvent(results.results);
}
});
});
viewx.on("drag",function(){
view.goTo({
target: viewx.center,
zoom: viewx.zoom
});
});
view.on("drag",function(){
viewx.goTo({
target: view.center,
zoom: view.zoom
});
});
viewx.on("mouse-wheel",function(){
view.goTo({
target: viewx.center,
zoom: viewx.zoom
});
});
view.on("mouse-wheel",function(){
viewx.goTo({
target: view.center,
zoom: view.zoom
});
});
layerList=new LayerList({
view: view
});
//通用创建widget
if(typeof(widgets)!='undefined'){
for(var i = 0; i < widgets.length; i++){
widgets[i].options.view=view;
if(widgets[i].layersSet){
for(var j = 0; j < widgets[i].layersSet.length; j++){
for(var k = 0; k<widgets[i].layersSet[j].value.length; k++){
widgets[i].options[widgets[i].layersSet[j].key].push(myMap.findLayerById(widgets[i].layersSet[j].value[k]));
}
}
}
if(widgets[i].layerListSet){
widgets[i].options[widgets[i].layerListSet[0].key]=layerList;
}
commonCreateWidget(widgets[i]);
}
}
});
</script>
</head>
<body>
<div class="viewDivBase" id="viewDiv"></div>
<div class="viewDivBase" id="viewDivx"></div>
<div id="legend">
</div>
</body>
</html>
效果:
感谢支持技术分享，请扫码点赞支持：
本文地址：https://blog.csdn.net/weixin_42496466/article/details/107388885
上一篇： 织梦(Dedecms)内容管理系统漏洞