ArcGIS API for JavaScript - 将图片设为map的底图

最新推荐文章于 2023-05-31 09:07:44 发布

沉默是零吗

最新推荐文章于 2023-05-31 09:07:44 发布

阅读量3.8k

点赞数 2

文章标签： ArcGIS API for JavaScript

本文链接：https://blog.csdn.net/augustu1/article/details/81866023

版权

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>

沉默是零吗

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
2
评论
ArcGIS API for JavaScript - 将图片设为map的底图

1，问题引出我们在开发web应用时，需要一些地图作为我们的底图。ArcGIS API给我们提供了样式众多的basemap,我们还可以使用ArcgisOnline提供的一些地图服务以及自己发布的一些地图服务。然而有时候我们不需要在这个底图服务上实现一些操作功能，只是用其作为展示，因此将他发布为地图服务显得没有必要。2，如何解决 ArcGIS API："esri/l...
复制链接

扫一扫