您的位置:首页 > 运维架构

openlayers select-feature show polygon dimension label

2013-08-08 09:41 381 查看

1,在底图上加点要素层,label标记。

 var vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry", {

            styleMap: new OpenLayers.StyleMap({'default':{

          /*      strokeColor: "red",

                strokeOpacity: 0,

                strokeWidth: 3,

                fillColor: "green",

                fillOpacity: 0,

                pointRadius: 6,*/

                rotation: 60,

                pointerEvents: "unvisiblePainted",                

                // label with \n linebreaks

                label : " ${length}",  

                labelSelect: "${Select}",

                fontColor: "${favColor}",

                fontSize: "12px",

                fontFamily: "Courier New, monospace",

                fontWeight: "bold",

                labelAlign: "${align}",

                labelXOffset: "${xOffset}",

                labelYOffset: "${yOffset}",

                labelOutlineColor: "none",  

                angle: "${angle}",

                labelOutlineWidth: 1                

            }}),

            renderers: renderer

        });

         2,旋转label标记

for a map i needed rotated labels and after some research i found thachun's post on the mailing list http://osgeo-org.1560.n6.nabble.com/How-to-rotate-a-label-in-IE-td3923751.html.
He uses a modified version of the SVG-Renderer and the VML-Renderer in OL 2.8. I couldn't use the VML-Renderer, because it is for line features, but I modified the OL 2.11 SVG-Renderer to rotate labels (point or line, no difference). This works in all Browsers
except Internet explorer below 9. You can see a working example at  http://www.gorjanci.at/zemljevid/karta.html

Maybe there is someone interested in developing it further, especially for VML to obtain browser compatibility.

The Changes in the SVG.js would be:
/**
* Method: drawText
* This method is only called by the renderer itself.
*
* Parameters:
* featureId - {String}
* style -
* location - {<OpenLayers.Geometry.Point>}
*/
drawText: function(featureId, style, location) {
var resolution = this.getResolution();

//add this for rotation----------------------------------------
var layer = this.map.getLayer(this.container.id);
var feature = layer.getFeatureById(featureId);
location = (feature.attributes.centroid ? feature.attributes.centroid : location);
/////////////////////////----------------------------------------

var x = (location.x / resolution + this.left);
var y = (location.y / resolution - this.top);

var label = this.nodeFactory(featureId + this.LABEL_ID_SUFFIX, "text");

label.setAttributeNS(null, "x", x);
label.setAttributeNS(null, "y", -y);

//add this for rotation----------------------------------------
if (style.angle || style.angle == 0) {
var rotate = 'rotate(' + style.angle + ',' + x + "," + -y + ')';
label.setAttributeNS(null, "transform", rotate);
}
/////////////////////////----------------------------------------

if (style.fontColor) {
label.setAttributeNS(null, "fill", style.fontColor);
}
if (style.fontOpacity) {
label.setAttributeNS(null, "opacity", style.fontOpacity);
}
if (style.fontFamily) {
label.setAttributeNS(null, "font-family", style.fontFamily);
}

.
.
.

StyleMap with angle-Attribute:

var styleMap = new OpenLayers.StyleMap({
label : "${label}",
cursor: "pointer",
labelXOffset: 0,
labelYOffset: 0,
fontColor: "black",
fontSize: "24px",
fontFamily: "Arial",
labelSelect: true,
labelAlign: "cm",
angle: "${angle}"
});


And the Layer with the new renderer:

var vectorLayer = new OpenLayers.Layer.Vector("newLayer", {
styleMap: myStylemap,
strategies: [myStrategy],
renderers: ["CustomSVG", "VML"], //VML only for IE <= 8, labels are not rotated
protocol: new OpenLayers.Protocol.HTTP({
url: "gml/myGML.gml", // or some other source
format: new OpenLayers.Format.GML()
})
});


I created a patch for OL 2.11, additionally I am attaching thachun's original files.
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  openlayers label rotation