博客 (2)

类参考:http://lbs.tianditu.gov.cn/api/js4.0/opensource/class/ImageOverlay.html

资源引用:http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/ImageOverlay.js

压缩文件:http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/ImageOverlay.min.js

示例:http://lbs.tianditu.gov.cn/api/js4.0/opensource/demo/ImageOverlay.html


添加图片覆盖物:

map = new T.Map('mapDiv');
map.centerAndZoom(new T.LngLat(116.390750, 39.916980), zoom);
var bd = new T.LngLatBounds(
    new T.LngLat(116.385360, 39.911380),
    new T.LngLat(116.395940, 39.921400));
img = new T.ImageOverlay("http://lbs.tianditu.gov.cn/images/openlibrary/gugong.jpg", bd, {
    opacity: 1,
    alt: "故宫博物院"
});
map.addOverLay(img);

修改图片地址:

img.setImageUrl(imgBase64);


xoyozo 3 年前
3,793

百度地图称之为地面叠加层(GroundOverlay)

类参考:https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_reference_3_0.html#a3b18

示例DEMO:http://lbsyun.baidu.com/jsdemo.htm#gImageGround

var map = new BMapGL.Map('container');
map.centerAndZoom(new BMapGL.Point(117.200, 36.2437), 18);
map.enableScrollWheelZoom(true);
map.setTilt(45);
map.setDisplayOptions({
    poiText: false,  // 隐藏poi标注
    poiIcon: false,  // 隐藏poi图标
    building: false  // 隐藏楼块
});


var pStart = new BMapGL.Point(117.19635, 36.24093);
var pEnd = new BMapGL.Point(117.20350, 36.24764);
var bounds = new BMapGL.Bounds(new BMapGL.Point(pStart.lng, pEnd.lat), new BMapGL.Point(pEnd.lng, pStart.lat));
var imgOverlay = new BMapGL.GroundOverlay(bounds, {
    type: 'image',
    url: '/jsdemo/img/shouhuimap.png',
    opacity: 1
});
map.addOverlay(imgOverlay);


xoyozo 3 年前
4,349