Блог

Главная - Вопросы по программированию - Как мне изменить стиль круга, чтобы внутри него был значок аналогичного размера?

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

#openlayers #openlayers-3 #openlayers-6

#openlayers #openlayers-3 #openlayers-6

Вопрос:

У меня есть следующий пример

 var circle = new ol.geom.Circle([-2.59394, 51.45271], 0.001).transform('EPSG:4326', 'EPSG:3857');

//circle.transform('EPSG:4326', 'EPSG:3857');
var feature=new ol.Feature({
    geometry: circle
});

var congestionLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
        features: [feature]
    }),
    //style: styleFunction,
    style: new ol.style.Style({
        fill: new ol.style.Fill({
            color: 'rgba(0, 255,0, 0.3)'
        }),
        stroke: new ol.style.Stroke({
            color: '#737373',
            width: 2
        }),
        image: new ol.style.Circle({
            radius: 70,
            fill: new ol.style.Fill({
                color: '#ffcc33'
            })
        })
    }),
    visible: true
})

var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        }),
        congestionLayer
    ],
    view: new ol.View({
        center: ol.proj.fromLonLat([-2.59394, 51.45271]),
        projection: 'EPSG:3857',
        zoom: 14
    })
});

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

Комментарии:

1. @geocodezip Я, должно быть, ошибочно изменил его, я просто исправил его … у него есть взаимодействие с рисованием круга, но вместо отображения круга значок будет отображаться пропорционально размеру круга

2. Какой значок вы хотите изменить? Стилизованный круг?

3. @geocodezip Я хочу изменить стиль первого примера, чтобы круги отображались в виде значков соответствующего размера (как в примере рисования)

Ответ №1:

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

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
    <link rel="stylesheet" href="https://openlayers.org/en/v6.4.3/css/ol.css" type="text/css">
    <script src="https://openlayers.org/en/v6.4.3/build/ol.js"></script>
    <style>
      html, body, .map {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
      }
      .map {
        position: absolute;
      }
    </style>
</head>
<body>
    <div id="map" class="map"></div>
<script>

var circle = new ol.geom.Circle([-2.59394, 51.45271], 0.001).transform('EPSG:4326', 'EPSG:3857');

var feature=new ol.Feature({
    geometry: circle
});

var style1 = new ol.style.Style({
        fill: new ol.style.Fill({
            color: 'rgba(0, 255,0, 0.3)'
        }),
        stroke: new ol.style.Stroke({
            color: '#737373',
            width: 2
        })
    });

var style2 = new ol.style.Style({
        image: new ol.style.Icon({
            src: 'https://openlayers.org/en/latest/examples/data/icon.png'
        })
    });

var congestionLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
        features: [feature]
    }),
    style: function(feature, resolution) {
        var styles = [style1];
        if (feature.getGeometry().getType() == 'Circle') {
            style2.setGeometry(new ol.geom.Point(feature.getGeometry().getCenter()));
            style2.getImage().setScale(feature.getGeometry().getRadius() / (40 * resolution));
            styles.push(style2);
        }
        return styles;
    },
    updateWhileAnimating: true,
    visible: true
})

var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        }),
        congestionLayer
    ],
    view: new ol.View({
        center: ol.proj.fromLonLat([-2.59394, 51.45271]),
        projection: 'EPSG:3857',
        zoom: 14
    })
});

   </script>
</body>
</html>
Метки: ,