Write in front
I wrote an article about adding images to ArcGIS maps, and the attention was good. In the project, the technical route mentioned in the article was also used to achieve the needs of map overlay images. But recently, customers have new demands, because after we added images by expanding the layers in the previous article, if there is more information in a certain part of the image, if we drag the map at the moment the map is zoomed, That part of the picture will be stuck. In fact, this situation is not serious, because it only takes a second or so, but the customer has to compete when grasping this point. Then there is no way, let's make a wave of optimization.
The address of the previous article is as follows: " 07 ArcGIS JS API 4.14 Implementing Map Loading Images ".
The final effect is as follows:
Specific operation
1. Because the previous technical route was implemented by extending the BaseDynamicLayer class, the bottom layer still uses canvas drawing technology to draw pictures on our map. In this way, it will be slower to draw in the more information-rich places on the picture, and there will definitely be a miss. Although the use of double buffering technology in the later period has not been optimized, we adopt another method in this article. To achieve map overlay pictures.
2. This article uses the img tag directly. The principle is very simple. We directly add an img tag to the canvas tag of the map rendering, and then dynamically change the image size and position by monitoring the changes in the view area of the map.
3. First, we instantiate a two-dimensional map, the code is as follows:
<!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%;
}
</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
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>4. Then we get the label of the map rendering after the map initialization is completed, add an img tag at its same level, and specify some attributes, as follows:
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);
});5. In this way, our picture has been added to the map, we need to specify the style for this img tag to see the picture we added, so next we directly monitor the view change of the map, here it is Specify the style and corresponding location:
let extent = { //图片的范围
xmin: 10138549.59667821,
ymin: 3449716.2722409572,
xmax: 10249869.087471481,
ymax: 3578363.913808475,
};
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';
}
}
});6. After completing the above operations, we have successfully implemented the process of loading pictures on the map. In this way, the pictures we added will not be stuck when the map is zoomed.
Attach:
All codes:
<!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>