Openlayers2图层加载(四)marker图层

Marker图层

marker图层非常适合在地图对一些特殊的点位标记进行展示,如想在地图上标记出所有的空气监测站、标记移动监测车的实时位置等。
marker图层的使用方法很简单,主要涉及到以下几个Openlayers2对象:

  • OpenLayers.Icon,图标对象
  • OpenLayers.Marker,marker点对象
  • OpenLayers.Layer.Markers,markers图层
  • OpenLayers.LonLat,坐标
  • OpenLayers.Size:marker图标的大小
    示例代码:
function initMap(){
	var map,baseLayer	
	map = new OpenLayers.Map("map");

	baseLayer = new OpenLayers.Layer.WMS(
			"basic",
			"http://localhost:8080/geoserver/chinaNS/wms",
			{
                    layers: "chinaNS:shengjie"
			},
			{isBaseLayer:true}
    );
    //定义marker图层
    var markerLayer = new OpenLayers.Layer.Markers("markerLayer");

    //随机写的4组坐标
    var LonLatList = [[98,43],[120,34],[117,32],[115,27]];

    //定义marker图标的尺寸及相对于坐标点的偏移量
    var size = new OpenLayers.Size(32,32);
    var offset = new OpenLayers.Pixel(0,0);

    //生成marker并装载到markerLayer图层中
    LonLatList.forEach(element => {
        var icon = new OpenLayers.Icon('../img/marker.png',size,offset);
        var marker = new OpenLayers.Marker(new OpenLayers.LonLat(element[0],element[1]),icon);
        markerLayer.addMarker(marker);
    });
    
	map.addLayers([baseLayer,markerLayer]);
	map.setCenter(new OpenLayers.LonLat(108, 34), 4);
}

结果
marker示例图片

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值