1. 程式人生 > >14 新增影像圖層

14 新增影像圖層

       上一篇文章中我們介紹瞭如何向地圖新增切片圖層,這篇文章介紹如何新增影像圖層。如果要實現此功能,同樣的,我們需要“esri/layers/ArcGISImageServiceLayer”元件,通過例項化一個地圖,然後例項化一個影像圖層,再用map的addLayer方法將它新增到地圖之上,效果如下:

具體操作如下所示:

1 例項化地圖:

map = new Map("map", {

basemap: "osm",

center: [89.689085,39.09635],

zoom: 6

});

2 例項化影像圖層並新增至地圖之上:

var imageServiceLayer = new ArcGISImageServiceLayer(" https://xqwserver.arcgis.cn:6443/arcgis/rest/services/imageservertest/ImageServer", {

opacity: 0.75

});

map.addLayer(imageServiceLayer);

3 至此,我們實現了將一個影像圖層新增在地圖之上,此處只是一個簡單的演示,關於具體的需求,大家可以檢視此API的文件來進行進一步的操作。完整程式碼如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Simple Image Service</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.25/esri/css/esri.css" />
<style>
html, body, #map { height: 100%; width: 100%; margin: 0; padding: 0; }
</style>
<script src="https://js.arcgis.com/3.25/"></script>
<script>
var map;
require([
"esri/map", "esri/layers/ArcGISImageServiceLayer",
"dojo/parser", "dojo/domReady!"
], function(
Map, ArcGISImageServiceLayer,
parser
) {

parser.parse();

map = new Map("map", {
basemap: "osm",
center: [89.689085,39.09635],
zoom: 6
});

var imageServiceLayer = new ArcGISImageServiceLayer(" https://xqwserver.arcgis.cn:6443/arcgis/rest/services/imageservertest/ImageServer", {
opacity: 0.75
});

map.addLayer(imageServiceLayer);

});

</script>
</head>
<body>
<div id="map"> </div>
</body>
</html>