在Openlayers中保持多边形大小不变

我已经创建了一些代码来在Openlayers地图中创建两个多边形，并尝试在缩放时保持相同的大小，但在缩放地图时，大小也在减小。 我的意图是使用多边形作为站点标记。 你能帮我使用多边形作为场地标记并在缩小和放大时保持大小不变吗

我已经使用parcel bundler创建了测试构建。 我在您的站点中看到了覆盖示例，其中标记在放大/缩小地图时保持相同大小，类似地，我正在寻找将多边形用作站点标记的可能性

为了简单起见，我删除了下面JS代码的导入部分

下面是JS代码：

//Position of our map center

var pos = fromLonLat([76.87403794962249, 8.569385045000772]);

//Position for our Triangle Polygon

var pos1 = fromLonLat([76.85860825505787, 8.575525035547585]);

//The below line is to check the Longitude and Latitude
//console.log(toLonLat(pos1));

var pos2 = fromLonLat([76.85286067404068, 8.56925661298456]);

var pos3 = fromLonLat([76.86300346314657, 8.56917303421666]);

//Position for arrow Polygon

var arrowOne = fromLonLat([76.86219331461274, 8.565926475435887]);

var arrowTwo = fromLonLat([76.86584111887299, 8.566053785302557]);

var arrowThree = fromLonLat([76.86566945749604, 8.56758150037902]);

var arrowFour = fromLonLat([76.87034723001801, 8.56456850087342]);

var arrowFive = fromLonLat([76.86635610300385, 8.562064722566959]);

var arrowSix = fromLonLat([76.86627027231538, 8.5638470749155]);

var arrowSeven = fromLonLat([76.86163541513764, 8.564016822322785]);

//OSM() Tile layer for our Map

var tileLayer = new TileLayer({
    source: new OSM()
});

//Setting View for our Map

var viewOne = new View({
    center: pos,
    zoom: 15
});

//Coordinates for our Polygons
var cordTriangle = [pos1, pos2, pos3, pos1];
var cordArrow = [arrowOne, arrowTwo, arrowThree, arrowFour, arrowFive, 
arrowSix, arrowSeven, arrowOne];

var polyTriangle = new Polygon([cordTriangle]);

var polyArrow = new Polygon([cordArrow])

//Adding the Feature for our Polygons
var featureTriangle = new Feature(polyTriangle);

var featureArrow = new Feature(polyArrow);

//vectorSource.addFeature(feature);

var vectorSource = new VectorSource({
    projection: 'EPSG:4326',
    features: [featureTriangle, featureArrow]
});

// The below Select is needed if we have to select a feature before move
//var select = new Select();

//The below will select all the Features and add it for Translate
var translate = new Translate();

//Setting custom styles for our Polygons

featureTriangle.setStyle(new Style({
    fill: new Fill({
        color: 'red'
    })
}));

featureArrow.setStyle(new Style({
    stroke: new Stroke({
        color: 'green',
        width: 2
    }),
    fill: new Fill({
        color: 'cyan'
    })
}));

var vectorLayer = new VectorLayer({
    source: vectorSource,
    updateWhileAnimating: true,
    updateWhileInteracting: true
});



// Adding all Layers and creating our Map
var map = new Map({
    interactions: defaultInteractions().extend([ /*select,*/ translate]),
    target: 'map',
    layers: [tileLayer, vectorLayer],
    view: viewOne
});


//To get the Lon and Lat of clicked location over map. This will be 
displayed in the console.

$(document).ready(function () {
    map.on('click', function (event) {
        let cordClick = toLonLat(event.coordinate);
        console.log(cordClick);
    });
});

2018年8月31日增加的变更：

var resol = viewOne.getResolution();

console.log('The Resolution is : ' + resol);

var cordVary = function () {

    for (var outer = 0; outer < cordArrow.length; outer++) {

        var cordArrow1 = [
            [0, 0],
            [0, 0],
            [0, 0],
            [0, 0],
            [0, 0],
            [0, 0],
            [0, 0],
            [0, 0]
        ];

        for (var inner = 0; inner < cordArrow[outer].length; inner++) {

            cordArrow1[outer][inner][0] = cordArrow[outer][inner][0] * resol;
            cordarrow1[outer][inner][1] = cordArrow[outer][inner][1] * resol;
            //console.log(outer, inner);
        }
    }
    return cordArrow1;
}

var resol=viewOne.getResolution（）；
console.log（'分辨率为：'+分辨率）；
var cordvarie=函数（）{
对于（var outer=0；outer

---

我试图在放大地图时更新坐标，以保持多边形的大小相同

@ChaseChoi I和Stack Exchange的Mike一起工作，找到了解决方案

---

请找到答案

您最好将多边形创建为图像，并将其添加为标记。多边形（特征）打算与其坐标保持一致，因此应更新其大小以进行缩放。查看实现静态大小多边形的代码。有点乱，也不是很正确。好的@ChaseChoi，那么你能分享一下将多边形作为图像并添加到ovelay中的步骤吗？建议你使用其他工具，如Paint或photoshop来创建多边形图像。谢谢@ChaseChoi，当我在Openlayers API中搜索标记时，与标记无关。我认为不推荐使用标记。因此，您可以共享一些代码片段来添加图像多边形并创建为覆盖吗？请参见

overlay

示例