Можем ли мы использовать HTML-теги и CSS для стилизации функций в openlayers? - PullRequest
Новая
       17

Можем ли мы использовать HTML-теги и CSS для стилизации функций в openlayers?

2 голосов
/ 22 марта 2019

У меня есть функция многоугольника в OpenLayers 5. У нее есть некоторый случайный идентификатор, который мне нужно показать в центре многоугольника, немного выровненный по правому краю.

Я использовал стиль ol.style.Text() для отображения идентификаторана полигоне.Я могу управлять выравниванием, используя параметры класса offsetX и offsetY, но как я могу отображать текст в HTML-элементах или имитировать его, потому что ol.style.Text() принимает только текстовые данные.

Наложения в открытых слояхопределенно решит проблему, я смог получить среднюю точку многоугольника, используя getInteriorPoint() по геометрии, но я не хочу использовать наложения, потому что на карте может быть много полигонов, и добавление наложения для каждого из них может ухудшить производительность и памятьИспользование.

Вот ожидаемый результат / я пытаюсь достичь:

Expected output

Вот мой код:

Текущий код

Также проверьте, что я сделал, чтобы включить или выключить Id, и укажите, можно ли это улучшить.Идентификатор может быть включен и выключен в зависимости от уровня масштабирования.

1 Ответ

1 голос
/ 22 марта 2019

Вместо использования CSS вы можете нарисовать фон в элементе canvas и использовать его в виде значка. И используйте функцию стиля для оформления внутренней точки многоугольника без необходимости создавать дополнительные функции: 

var canvas = document.createElement("canvas");
canvas.width = ??;
canvas.height = ??;
var ctx = canvas.getContext("2d");

// draw an arraw and rounded box
.....
.....

var iconUrl = canvas.toDataURL();



var offStyle = new ol.style.Style({
                            fill: new ol.style.Fill({
                                color: 'rgba(255,255,255,0)'
                            }),
                            stroke: new ol.style.Stroke({
                                color: 'green',
                                width: 1.5
                            })
});

var onStyle =  new ol.style.Style({
                            fill: new ol.style.Fill({
                                color: 'rgba(255,255,255,0)'
                            }),
                            stroke: new ol.style.Stroke({
                                color: 'black',
                                width: 1.5
                            })
});


var styleFunction = function (feature, resolution) {

    if (off) {  // or use (resolution > ????)
        return offStyle;
    else {
         var styles = [onStyle];
         if (feature.getGeometry().getType == 'Polygon') {
             styles.push( new ol.style.Style({
                       geometry: feature.getGeometry().getInteriorPoint(),
                       image: new ol.style.Icon({
                                src: iconUrl,

                                // options to anchor the icon
                                ....

                       }),
                       text: new ol.style.Text({
                                scale: 1,
                                text: feature.get('.....'),
                                font: 'normal 10px FontAwesome',
                                fill: new ol.style.Fill({
                                  color: 'black'
                              }),
                            }),
                            zIndex: 100
            }));
        }
        return styles;
   }
}
...