作者:lly
背景
最近有小伙伴需要直接在前端对接处理好的图片,并且要求位置正确,对于这种不常见的情况,我们使用Image图层来实现,并分享给大家。
一、实现思路
查看官网api,发现ImageStatic可以指定图片在地图中的范围
指定图片范围
let extent=[113.75,22.44,114.62,22.864];
构建一个新的source,设置好projection,并将设定的范围设置到图层中
let imgl=new ol.layer.Image({
opacity:0.6,
source:new ol.source.ImageStatic({
url:"../img/six.png",
projection:'EPSG:4326',
imageExtent:extent,
})
});
最后再将图层添加到地图进行展示
map.addLayer(imgl);
map.getView().setCenter([113.75,22.44])
二、结果展示
完整代码如下:
<!--********************************************************************
* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title data-i18n="resources.title_tiledMapLayer4326"></title>
<script type="text/javascript" src="../js/include-web.js"></script>
<script type="text/javascript" src="../../dist/ol/include-ol.js"></script>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%; position: absolute;top: 0;">
<div id="map" style="width: 100%;height:100%"></div>
<script type="text/javascript">
var map, url = (window.isLocal ? window.server : "https://iserver.supermap.io")+"/iserver/services/map-world/rest/maps/World";
map = new ol.Map({
target: 'map',
controls: ol.control.defaults({attributionOptions: {collapsed: false}})
.extend([new ol.supermap.control.Logo()]),
view: new ol.View({
center: [0, 0],
zoom: 8,
projection: 'EPSG:4326',
multiWorld: true
})
});
var layer = new ol.layer.Tile({
source: new ol.source.TileSuperMapRest({
url: url,
wrapX: true
}),
projection: 'EPSG:4326'
});
map.addLayer(layer);
let extent=[113.75,22.44,114.62,22.864];
let imgl=new ol.layer.Image({
opacity:0.6,
source:new ol.source.ImageStatic({
url:"../img/six.png",
projection:'EPSG:4326',
imageExtent:extent,
})
});
map.addLayer(imgl);
map.getView().setCenter([113.75,22.44])
</script>
</body>
</html>