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 image = 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, #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>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。