0

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

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

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

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

4

1 回答 1

0

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

请在这里找到答案

于 2018-09-06T13:58:12.550 回答