【问题标题】:OpenLayers 5 RegularShape feature is offset from specified coordinatesOpenLayers 5 RegularShape 特征偏离指定坐标
【发布时间】:2019-02-05 18:30:38
【问题描述】:

我在矢量图层上放置自定义标记,但是坐标点从地图的上边缘向下越远,标记形状从该点向上偏移的越多。

我正在使用不同的地图投影 (EPSG:5514),所以那里可能有连接。

我需要知道的是,在我的代码中进行哪些更改以使标记形状在指定坐标上居中。

代码的相关部分:

var stroke = new ol.style.Stroke({color: 'red', width: 1});
var fill = new ol.style.Fill({color: 'red'});

function styleFunction(feature, text) {
    feature.displayText = text;
    return [
        new ol.style.Style({
            image: new ol.style.RegularShape({
                fill: fill,
                stroke: stroke,
                points: 3,
                radius: 8,
                rotation: 0,
                angle: 0
            }),
            text: new ol.style.Text({
                font: '14px Calibri,sans-serif',
                fill: new ol.style.Fill({ color: markerTextColor }),
                stroke: new ol.style.Stroke({
                  color: textcolor_DKM, width: 1
                }),
                textAlign: 'left',
                offsetX: 10,
                offsetY: -2,
                text: text
              })
        })
    ];
}

var vectorSource = new ol.source.Vector();
var markerVectorLayer = new ol.layer.Vector({
    title: 'Notes',
    visible: false,
    source: vectorSource
});

var feature = new ol.Feature({
    geometry: new ol.geom.Point(
        ol.proj.fromLonLat([Number(lon), Number(lat)], 'EPSG:5514')
    )
});
feature.setStyle(styleFunction(feature, desc));
vectorSource.addFeature(feature);

如果您需要更多信息,请告诉我。

【问题讨论】:

    标签: openlayers openlayers-5


    【解决方案1】:

    使用最新的 proj4.js 库和 OGC WKT 字符串。在此处获取 proj4.js:

    https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.5.0/proj4.js

    您可以使用以下代码行进行投影定义:

    proj4.defs('EPSG:5514', 'PROJCS["S-JTSK / Krovak East North",GEOGCS["S-JTSK",DATUM["System_Jednotne_Trigonometricke_Site_Katastralni",SPHEROID["Bessel 1841",6377397.155,299.1528128,AUTHORITY["EPSG","7004"]],TOWGS84[589,76,480,0,0,0,0],AUTHORITY["EPSG","6156"]],PRIMEM["Greenwich",0,AUTHORITY["EPSG","8901"]],UNIT["degree",0.0174532925199433,AUTHORITY["EPSG","9122"]],AUTHORITY["EPSG","4156"]],PROJECTION["Krovak"],PARAMETER["latitude_of_center",49.5],PARAMETER["longitude_of_center",24.83333333333333],PARAMETER["azimuth",30.28813972222222],PARAMETER["pseudo_standard_parallel_1",78.5],PARAMETER["scale_factor",0.9999],PARAMETER["false_easting",0],PARAMETER["false_northing",0],UNIT["metre",1,AUTHORITY["EPSG","9001"]],AXIS["X",EAST],AXIS["Y",NORTH],AUTHORITY["EPSG","5514"]]');
    

    那么当你需要使用投影时,使用:

    var proj = ol.proj.get('EPSG:5514');
    

    【讨论】:

    • 感谢您的回答。还是没有变化。标记点就位,我通过检测放置鼠标光标的像素处的特征知道这一点,但特征形状(在本例中为红色三角形)从该位置向上偏移。
    • 如果您可以通过codepen或jsfiddle分享一些演示情况的代码,我可能会有所帮助。
    • 我做了一个 jsfiddle 示例,它按预期工作,所以我的代码肯定有问题。感谢您的宝贵时间。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-12-10
    相关资源
    最近更新 更多