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