Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/448.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 绘制形状时设置OpenLayers 3光标的样式_Javascript_Gis_Openlayers_Openlayers 3 - Fatal编程技术网

Javascript 绘制形状时设置OpenLayers 3光标的样式

Javascript 绘制形状时设置OpenLayers 3光标的样式,javascript,gis,openlayers,openlayers-3,Javascript,Gis,Openlayers,Openlayers 3,我有一个功能,允许用户在OpenLayers地图上绘制正方形或矩形。我想更改光标的样式。默认情况下,光标为蓝色圆圈。我想将其更改为正方形,以便符号与用户可能创建的形状相匹配 解决方案包括添加样式属性。我需要关于如何为非图像光标实现样式属性的详细信息,该光标类似于默认的蓝色圆圈,而是正方形。谢谢 $scope.drawBoundingBox = () => { const bbVector = new ol.source.Vector({ wrapX: false }); c

我有一个功能,允许用户在OpenLayers地图上绘制正方形或矩形。我想更改光标的样式。默认情况下,光标为蓝色圆圈。我想将其更改为正方形,以便符号与用户可能创建的形状相匹配

解决方案包括添加样式属性。我需要关于如何为非图像光标实现样式属性的详细信息,该光标类似于默认的蓝色圆圈,而是正方形。谢谢

$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);
  };

下面是一个可行的解决方案,它将默认的蓝色圆圈光标更改为正方形,并允许用户在地图上创建正方形或矩形

  $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);
  };