openlayers 2实现vector图层文字标注

图层绑定要素属性实现文字标注,注意是openlayers2不是3
大概的思路是,继承OpenLayers.Layer.Vector,监听图层添加要素的事件,创建dom节点,添加到map的容器之中,同时地图放大缩小,文字标注跟随移动(根据分辨路重新计算位置),图层移除要素,移除标注;
初始化

/**
     * Constructor: OpenLayers.Layer.E_Vector
     */
    initialize : function(layerName,options) {
        OpenLayers.Layer.Vector.prototype.initialize.apply(this,arguments);
        this.annotations = [];  
    },

创建标注

/**
     * 创建标注
     * @param data
     */
    createAnnotation :function(data){
        if(!this.annotationsVisible && data.feature.layer != this)return;
        if(data.feature.attributes != null
            && data.feature.attributes.annotationDisplay != null
            && data.feature.attributes.annotationDisplay==false)
            return;
        if(data.feature.attributes.hasOwnProperty(this.bindFiled)==false)return;
        for (var i = 0, len = this.annotations.length; i < len; i++) {
            if (this.annotations[i].feature == data.feature) {
                return;
            }
        }
        var lglt = null;
        if (data.feature.geometry instanceof OpenLayers.Geometry.Point) {
            lglt = data.feature.geometry.getBounds().getCenterLonLat();
        } else if (data.feature.geometry instanceof OpenLayers.Geometry.LineString) {  //取线图形的中部作为展示标注的位置
            var lineGeos = data.feature.geometry.getVertices();
            lglt = lineGeos[parseInt(lineGeos.length / 2)].getBounds().getCenterLonLat();
        } else if (data.feature.geometry instanceof OpenLayers.Geometry.Polygon) {    //取面图形的中心作为展示标注的位置
            var point = data.feature.geometry.getCentroid();
            lglt = point.getBounds().getCenterLonLat();
        }
        var px = this.map.getLayerPxFromLonLat(lglt).add(this.annotationOffset.x,this.annotationOffset.y);
        //size 可以根据自己需要写到外部
        var size = new OpenLayers.Size(120,30);
        var divId = OpenLayers.Util.createUniqueID("E_Annotation"+"_");
        var anDiv = OpenLayers.Util.createDiv(divId, px, size,null, null, null, "hidden");
        this.map.layerContainerDiv.appendChild(anDiv);
        anDiv.innerHTML = data.feature.attributes[this.bindFiled];
        anDiv.style.zIndex = 250;
        this.annotations.push({feature:data.feature,div:anDiv});
    },

初始化标注的时候监听

        this.events.on({"featureadded": this.createAnnotation});//监听featureadded事件
        this.events.on({"featureremoved": this.deleteAnnotation});//监听featureremoved事件

大概的思路就这样,最后贴代码:
https://git.oschina.net/leez/OpenLayers2_EXT.git

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
实现根据坐标进行地图标注可以通过 `ol.Feature` 和 `ol.source.Vector` 来实现。下面是一个简单的示例代码: ```javascript var iconFeature = new ol.Feature({ geometry: new ol.geom.Point(ol.proj.fromLonLat([116.3975, 39.9082])), name: '北京天安门广场' }); var iconStyle = new ol.style.Style({ image: new ol.style.Icon({ anchor: [0.5, 46], anchorXUnits: 'fraction', anchorYUnits: 'pixels', src: 'https://openlayers.org/en/latest/examples/data/icon.png' }) }); iconFeature.setStyle(iconStyle); var vectorSource = new ol.source.Vector({ features: [iconFeature] }); var vectorLayer = new ol.layer.Vector({ source: vectorSource }); var map = new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }), vectorLayer ], target: 'map', view: new ol.View({ center: ol.proj.fromLonLat([116.3975, 39.9082]), zoom: 10 }) }); ``` 其中,`ol.Feature` 表示一个要素对象,可以包含几何信息和属性信息;`ol.source.Vector` 是数据源,可以包含多个要素对象;`ol.layer.Vector` 是图层对象,用于显示数据源中的要素对象。 在上面的示例代码中,创建了一个 `ol.Feature` 对象,并指定它的几何信息为 `ol.geom.Point` 类型,坐标为 `[116.3975, 39.9082]`,表示北京天安门广场的经纬度坐标。然后创建了一个 `ol.style.Icon` 类型的图标样式,并将其设置为 `ol.Feature` 对象的样式。接着将 `ol.Feature` 对象添加到 `ol.source.Vector` 数据源中,最后将 `ol.source.Vector` 添加到 `ol.layer.Vector` 图层中,并将图层添加到地图中即可。 需要注意的是,需要将经纬度坐标转换为地图坐标。在上面的示例代码中,使用了 `ol.proj.fromLonLat` 方法进行坐标转换。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值