arcgis 叠加图片 

<html>
    <head>
    <meta charset = "utf-8" / >
    <meta name = "viewport"
content = "initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title> Intro to MapView - Create a 2 D map - 4.15 title > 
    <style>
    html,
    body, #viewDiv {
        padding: 0;
        margin: 0;
        height: 100 % ;
        width: 100 % ;
    }

    .mystyle {
        position: absolute;
        top: 937 px;
        left: 0 px;
        width: 1920 px;
        height: 937 px;
    }

    </style>
    <link rel = "stylesheet"
href = "http://localhost/4.15/esri/themes/light/main.css" / >
    <script src = "http://localhost/4.15/init.js" > < /script > 
    <script >
    require(['esri/Map', 'esri/views/MapView', 'esri/core/watchUtils'], function (Map, MapView, watchUtils) {
        var map = new Map({
                basemap: 'osm',
            }

        );
        var view = new MapView({
            container: 'viewDiv',
            map: map,

            zoom: 7,
            center: [104.071883, 30.664022],
            // longitude, latitude             
        });

        let extent = {
            xmin: 10138549.59667821,
            ymin: 3449716.2722409572,
            xmax: 10249869.087471481,
            ymax: 3578363.913808475,
        };
        var resultDom;
        view.when(
            function () {
                //添加图片         
                var selectDom = document.getElementsByClassName('esri-view-surface esri-view-surface--inset-outline esri-view-surface--touch-none', );
                console.log(extent);
                resultDom = document.createElement('img');
                resultDom.src = './testquickviewphoto.png';
                resultDom.className = 'mystyle';
                resultDom.id = 'mystyle';
                selectDom[0].appendChild(resultDom);
            });
        var absd = view.zoom;
        watchUtils.when(view, 'extent', function () {
            if (view.extent && document.getElementById('mystyle')) {
                var lefttop = {
                    x: extent.xmin,
                    y: extent.ymax,
                    spatialReference: {
                        wkid: 102100,
                    },
                };
                var screen_lefttop = view.toScreen(lefttop);
                document.getElementById('mystyle').style.top = screen_lefttop.y + 'px';
                document.getElementById('mystyle').style.left = screen_lefttop.x + 'px';
                //zoom未改变的情况下不重新计算image长和宽                  
                if (absd != view.zoom) {
                    var rightbottom = {
                        x: extent.xmax,
                        y: extent.ymin,

                        spatialReference: {
                            wkid: 102100,
                        },
                    };
                    var screen_rightbottom = view.toScreen(rightbottom);
                    document.getElementById('mystyle').style.width = screen_rightbottom.x - screen_lefttop.x + 'px';
                    document.getElementById('mystyle').style.height = screen_rightbottom.y - screen_lefttop.y + 'px';
                }
            }
        });
        setTimeout(reloadPhoto, 500);

        function reloadPhoto() {
            //console.log(extent.xmax)           
            //左下角           
            var leftbottom = {
                x: extent.xmin,
                y: extent.ymin,
                spatialReference: {
                    wkid: 102100,
                },
            };
            var screen_leftbottom = view.toScreen(leftbottom);
            //右上角 
            var righttop = {
                x: extent.xmax,
                y: extent.ymax,
                spatialReference: {
                    wkid: 102100,
                },
            };
            var screen_righttop = view.toScreen(righttop);
            document.getElementById('mystyle').style.top = screen_righttop.y + 'px';
            document.getElementById('mystyle').style.left = screen_leftbottom.x + 'px';
            document.getElementById('mystyle').style.width = Math.abs(screen_righttop.x - screen_leftbottom.x) + 'px';
            document.getElementById('mystyle').style.height = Math.abs(screen_righttop.y - screen_leftbottom.y) + 'px';
        }
    }); 
    </script>     
    </head >  
    <body>
    <div id = "viewDiv" > </div>    
    </body> 
    </html>

　　

posted @ 2021-11-09 14:46  zhh  阅读(179)  评论(0)    收藏  举报