欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

arcgis for js 实现双屏效果

程序员文章站 2022-06-22 19:46:23
源码: 疑似违法地图双屏

源码:

<!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>

效果:

arcgis for js 实现双屏效果

感谢支持技术分享,请扫码点赞支持:

arcgis for js 实现双屏效果

arcgis for js 实现双屏效果

arcgis for js 实现双屏效果

本文地址:https://blog.csdn.net/weixin_42496466/article/details/107388885

相关标签: arcgis for js js