源码：
<!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
如对本文有疑问， 点击进行留言回复！！
selenium + ajax抓取英雄联盟全部英雄的详细信息及多线程保存全部皮肤图片到本地
我要评论
网友评论