具有自己的符号的开放层图形功能

Question

如示例 http://openlayers.org/dev/examples/graphic-name.html...我尝试将特征几何图形绘制为标志，但我意识到 OpenLayers 始终使用几何图形的质心将特征放置在指定点（纬度/经度），而我希望将标志的底部放置在指定点。更改 Renderer.symbol 的值不会产生任何影响，graphicXOffset/graphicYOffset 也没有产生任何影响。

//my flag geometry
OpenLayers.Renderer.symbol.flag = [0, 0, 0, 140, 120, 140, 120, 60, 4, 60, 4, 0, 0, 0];
//create vector layer with default and select styles
myVectorLayer = new OpenLayers.Layer.Vector("Flag Geometry", {
    renderers: renderer,
    isBaseLayer: true,
    graphicName: flag,
    rotation: 180,
    pointRadius: 15,
    projection: new OpenLayers.Projection("EPSG:900913"),
    styleMap: new OpenLayers.StyleMap({
        "default": new OpenLayers.Style(OpenLayers.Util.applyDefaults({
            fillColor: "red",
            strokeColor: "gray",
            label: "${label}",
            fontColor: "${favColor}",
            fontSize: "12px",
            fontFamily: "Courier New, monospace",
            fontWeight: "bold",
            labelYOffset: 2 //for flag
        }, OpenLayers.Feature.Vector.style["default"])),
        "select": new OpenLayers.Style(OpenLayers.Util.applyDefaults({
        }, OpenLayers.Feature.Vector.style["select"]))
    })
});
var flag = new OpenLayers.Geometry.Point(latitude, longitude);
var flagFeature = new OpenLayers.Feature.Vector(flag);
myVectorLayer.addFeatures([flagFeature]);

Answer 1

为了克服这个基点问题，我更改了绘图方法，如下所示：

myVectorLayer = new OpenLayers.Layer.Vector("Flag Geometry", {
renderers: renderer,
isBaseLayer: true,
projection: new OpenLayers.Projection("EPSG:900913"),
styleMap: new OpenLayers.StyleMap({
    "default": new OpenLayers.Style(OpenLayers.Util.applyDefaults({
        fillColor: "red",
        strokeColor: "gray",
        label: "${label}",
        fontColor: "${favColor}",
        fontSize: "12px",
        fontFamily: "Courier New, monospace",
        fontWeight: "bold",
        labelYOffset: 2 //for flag
    }, OpenLayers.Feature.Vector.style["default"])),
        "select": new OpenLayers.Style(OpenLayers.Util.applyDefaults({
    }, OpenLayers.Feature.Vector.style["select"]))
})
});
var pointList = [];
var xs = [0, 0, 240, 240, 8, 8, 0];
var ys = [0, 280, 280, 120, 120, 0, 0];
for(var p=0; p<6; ++p) {
    var newPoint = new OpenLayers.Geometry.Point(camera.get('latitude') + xs[p],
        camera.get('longitude') + ys[p]);
    pointList.push(newPoint);
}
pointList.push(pointList[0]);
var linearRing = new OpenLayers.Geometry.LinearRing(pointList);
var flagVector = new OpenLayers.Feature.Vector(
        new OpenLayers.Geometry.Polygon([linearRing]));
flagVector.attributes= {
    label: 'label',
    favColor: 'blue', //favorite color
    align: "cm"
};
myVectorLayer.addFeatures([flagVector]);

不过，这将使几何图形缩放与地图缩放不同。