ArcGIS API for JavaScript - 將圖片設為map的底圖
阿新 • • 發佈：2018-12-03
1，問題引出
我們在開發web應用時，需要一些地圖作為我們的底圖。ArcGIS API給我們提供了樣式眾多的basemap,我們還可以使用ArcgisOnline提供的一些地圖服務以及自己釋出的一些地圖服務。然而有時候我們不需要在這個底圖服務上實現一些操作功能，只是用其作為展示，因此將他釋出為地圖服務顯得沒有必要。
2，如何解決
ArcGIS API："esri/layers/MapImageLayer"和"esri/layers/MapImage"
MapImageLayer類用於將地理配準影象新增到地圖中。地圖將地理參考影象放置在指定的地理範圍內。影象的範圍應該在地圖的範圍內。影象也應與地圖位於同一座標系中。
MapImage類用於設定圖片的一些屬性。支援的格式有：gif | jpg | png | bmp
3，實現過程
以夜晚燈光地圖作為說明
1，獲取圖片：
如果底圖需要準確的地理位置，則圖片不能隨便亂來，可以在Arcmap中將其進行地理配準。
本次我的圖片如下：範圍：全球；座標系：WGS_84(4326)
2，MapImage類的實現
由於我的底圖是全球範圍，所以範圍是 x:[-180,180] y:[-90,90]，你要根據你圖片實地範圍來寫。
href是你圖片的地址
var mi = new MapImage({ 'extent': { 'xmin':-180, 'ymin': -90, 'xmax': 180, 'ymax': 90, 'spatialReference': { 'wkid': 4326 }}, 'href': "img/燈光tif.png" });
3，MapImageLayer類的實現
var mapImageLayer = new MapImageLayer();
mapImageLayer.addImage(image);4，全部程式碼
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>1</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.25/esri/css/esri.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.25/dijit/themes/tundra/tundra.css">
<script src="https://js.arcgis.com/3.25/"></script>
<style>
html,body{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
#MapDiv{
width: 100%%;
height: 100%;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<script>
require([
"esri/map",
"esri/layers/MapImage",
"esri/layers/MapImageLayer",
"dojo/domReady!"
], function(Map,MapImage,MapImageLayer) {
var image = new MapImage({
'extent': { 'xmin':-180,
'ymin': -90,
'xmax': 180,
'ymax': 90,
'spatialReference': { 'wkid': 4326 }},
'href': "img/燈光tif.png"
});
var mapImageLayer = new MapImageLayer();
mapImageLayer.addImage(image);
var map = new Map("MapDiv");
map.addLayer(mapImageLayer);
});
</script>
<div id="MapDiv"></div>
</body>
</html>