Стиль курсора OpenLayers 3 при рисовании фигур - PullRequest
Новая
       18

Стиль курсора OpenLayers 3 при рисовании фигур

0 голосов
/ 30 августа 2018

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

Решение включает в себя добавление атрибута стиля. Мне нужны подробности того, как реализовать атрибут style для курсора без изображения, который похож на синий круг по умолчанию, но вместо этого на квадрат. Спасибо! 

$scope.drawBoundingBox = () => {
    const bbVector = new ol.source.Vector({ wrapX: false });
    const vector = new ol.layer.Vector({
      source: bbVector
    });
    bbVector.on("addfeature", evt => {
      $scope.coords = evt.feature.getGeometry().getCoordinates();
    });
    const style = new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: "#FFF",
        width: 3
      }),
      fill: new ol.style.Fill({
        color: [255, 255, 255, 0]
      })
    });
    const geometryFunction = ol.interaction.Draw.createRegularPolygon(4);
    draw = new ol.interaction.Draw({
      source: bbVector,
      type: "Circle",
      geometryFunction
    });
    vector.set("name", "boundingBox");
    vector.setStyle(style);
    map.addLayer(vector);
    map.addInteraction(draw);
  };

1 Ответ

0 голосов
/ 31 августа 2018

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

  $scope.drawBoundingBox = () => {
    const bbVector = new ol.source.Vector({ wrapX: false });
    const vector = new ol.layer.Vector({
      source: bbVector
    });
    bbVector.on("addfeature", evt => {
      $scope.coords = evt.feature.getGeometry().getCoordinates();
    });

    const geometryFunction = ol.interaction.Draw.createRegularPolygon(4);

    draw = new ol.interaction.Draw({
      source: bbVector,
      type: "Circle",
      geometryFunction: geometryFunction,
      style: new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: "#FFF",
          width: 3
        }),
        fill: new ol.style.Fill({
          color: [255, 255, 255, 0]
        }),
        geometryFunction,
        image: new ol.style.RegularShape({
          fill: new ol.style.Fill({
            color: '#FFF'
          }),
          stroke: new ol.style.Stroke({
            color: "blue",
            width: 3
          }),
          points: 4,
          radius: 10,
          angle: Math.PI / 4
        }),
      }),
    });
    vector.set("name", "boundingBox");
    map.addLayer(vector);
    map.addInteraction(draw);
  };
...