изменение размера иконки с масштабированием карты - PullRequest
Новая
       11

изменение размера иконки с масштабированием карты

0 голосов
/ 30 июня 2019

Я использую значок 20x20 pxl для отображения на карте с кодом ниже:

Когда я увеличиваю карту, значок кажется маленьким, как я могу изменить размер значка с масштабированием карты? 

 <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
 <script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script>

<script>
var baseMapLayer = new ol.layer.Tile({
    source: new ol.source.OSM()
  });

var view = new ol.View({
            center: ol.proj.fromLonLat([-74.0061,40.712]), 
            zoom: 17 //Initial Zoom Level
})

var map = new ol.Map({
    target: 'map',
    layers: [ baseMapLayer],
    view: view
});

// Make a new feature marker
var marker = new ol.Feature({
    name: 'Null Island',
    population: 4000,
    rainfall: 500,
    geometry: new ol.geom.Point(
      ol.proj.fromLonLat([-74.006,40.7127])  // new Point([0, 0])
    ),  // Cordinates of New York's Town Hall
});

// Style the marker
var iconStyle = new ol.style.Style({
    image: new ol.style.Icon(({
        color: '#ffcd46',
        crossOrigin: 'anonymous',
        src: 'http://127.0.0.1:8081/static/img/truck.png'
    }))
});

marker.setStyle(iconStyle);

// Make a source for the feature 
var vectorSource = new ol.source.Vector({
    features: [marker]
});
// Make a new layer
var markerVectorLayer = new ol.layer.Vector({
    source: vectorSource,
});

map.addLayer(markerVectorLayer);
</script>

1 Ответ

1 голос
/ 30 июня 2019

Вы можете сделать это с помощью функции стиля, изменяющей масштаб при изменении разрешения. Разрешение может сильно измениться, поэтому вы можете изменить масштаб в обратном соотношении квадратный корень или кубический корень из разрешения, поэкспериментируйте, чтобы увидеть, что подходит вашему приложению.

Если установлено для функции, синтаксис зависит от версии OpenLayers

OpenLayers 4: 

marker.setStyle(function(resolution) {
    iconStyle.getImage().setScale(1/Math.pow(resolution, 1/3));
    return iconStyle;
});

OpenLayers 5: 

marker.setStyle(function(feature, resolution) {
    iconStyle.getImage().setScale(1/Math.pow(resolution, 1/3));
    return iconStyle;
});

Или вы можете установить стиль на слое, где синтаксис одинаков в обеих версиях 

var markerVectorLayer = new ol.layer.Vector({
    source: vectorSource,
    style: function(feature, resolution) {
        iconStyle.getImage().setScale(1/Math.pow(resolution, 1/3));
        return iconStyle;
    }
});
...