Openlayers图形功能与自己的符号

时间:2012-09-19 14:24:54

标签: javascript openlayers graphic sproutcore

如示例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]);

1 个答案:

答案 0 :(得分:2)

为了克服这个基点问题,我改变了绘图方法如下:

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]);

这会使几何变焦与地图缩放不同,不像以前那样。