1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120
| <!DOCTYPE html> <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 2D map - 4.15</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } .mystyle { position: absolute; top: 937px; left: 0px; width: 1920px; height: 937px; } </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>
|