在 Openlayers 中保持多边形大小相同

Question

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

我使用包裹打包器创建了测试版本。我在您的站点中看到了 OverLay 示例，其中标记在对地图进行缩放 In/Out 时保持相同大小，同样，我正在寻找使用多边形作为站点标记的可能性。

为简单起见，我删除了以下 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;
}

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

Answer 1

@ChaseChoi 我和来自 Stack Exchange 的 Mike 一起工作并找到了解决方案。

请找出答案here

在 Openlayers 中保持多边形大小相同

Keeping the polygon size same in Openlayers

openlayers

openlayers-5