0

我对以下代码有一个奇怪的问题

<html>
<head>
<title>Vector Style Examples</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/css/ol.css">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Teko" rel="stylesheet"> 
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/build/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<script>
var map = new ol.Map({
      view: new ol.View({center: ol.proj.transform([16.9278, 52.4044], 'EPSG:4326', 'EPSG:3857'), zoom:11}),
      layers: [new ol.layer.Tile({source: new ol.source.OSM()})],
      target:'map'
  });

  var tree_coordinates = [[16.9071388, 52.4901917],[16.964607, 52.483672],[16.924611, 52.422056],[16.9207344, 52.4116696],[16.931853, 52.407052],
  [16.9175298, 52.4045977],[16.9001992, 52.4026734],[16.9022317, 52.4062569],[17.021935, 52.400591],[16.82640,52.46133],[17.0587858,52.4159424],[17.022485,52.415796],
  [17.020697,52.399145],[16.916187,52.390276],[17.029799,52.395083],[16.828552,52.464013]];
  var forest_coordinates = [[16.901194,52.488556],[16.847889,52.460917],[16.841861,52.448778],[16.891983,52.452014],[16.878281,52.432017],
  [16.894575,52.425061],[16.922955,52.414592],[16.923432,52.413709],[16.888663,52.4091499],[16.8480334,52.3875927],[16.9269882,52.3785911],[16.986917,52.305361]];
  var stone_coordinates = [[16.897222,52.488056],[16.942774,52.463806],[16.881964,52.419917]];

  var tree = [];
  var forest = [];
  var stone = [];

  for(i=0;i<=15;i++){
    tree.push(this["tree"+i] = new ol.Feature({
    geometry: new ol.geom.Point(ol.proj.transform(tree_coordinates[i], 'EPSG:4326', 'EPSG:3857')),
    }));
  }

  for(i=0;i<=11;i++){
    forest.push(this["forest"+i] = new ol.Feature({
    geometry: new ol.geom.Point(ol.proj.transform(forest_coordinates[i], 'EPSG:4326', 'EPSG:3857')),
    }));
  }

  for(i=0;i<=2;i++){
    stone.push(this["stone"+i] = new ol.Feature({
    geometry: new ol.geom.Point(ol.proj.transform(stone_coordinates[i], 'EPSG:4326', 'EPSG:3857')),
    }));
  }

  var tree_markers = new ol.source.Vector({
      features: tree,
  });


  var forest_markers = new ol.source.Vector({
      features: forest,
  });

  var stone_markers = new ol.source.Vector({
      features: stone,
  });


  var treeVectorLayer = new ol.layer.Vector({
      source: tree_markers,
  });


  var forestVectorLayer = new ol.layer.Vector({
      source: forest_markers,
  });

  var stoneVectorLayer = new ol.layer.Vector({
      source: stone_markers,
  });


  map.addLayer(treeVectorLayer);
  map.addLayer(forestVectorLayer);
  map.addLayer(stoneVectorLayer);

  treeVectorLayer.setStyle(new ol.style.Style({
      image: new ol.style.Icon(({
          src:'https://image.flaticon.com/icons/svg/46/46564.svg',
          scale:0.08,
      }))
  }))


  forestVectorLayer.setStyle(new ol.style.Style({
      image: new ol.style.Icon(({
          src:'https://image.flaticon.com/icons/svg/1081/1081231.svg',
          scale:0.08,
      }))
  }))

  stoneVectorLayer.setStyle(new ol.style.Style({
      image: new ol.style.Icon(({
          src:'https://image.flaticon.com/icons/svg/826/826968.svg',
          scale:0.08,
      }))
  }))



</script>
</body>
</html>

我不明白为什么“setStyle”不在“stoneVectorLayer”上显示图像图标。一切都与其他两个有效的矢量图层相同。标记在那里，因为当我删除“setStyle”时我可以看到它们。“setStyle”以某种方式起作用，因为它使这些标记消失或至少不可见，但我不明白为什么它不显示图标。

我做了一些测试，看起来图像有问题。当我把它放在那里时，有些图像可以工作，但有些则不能。此代码中使用的图像也不适用于其他图层，所以问题是为什么 OpenLayers 不渲染某些图像？相同图标的 .png 副本也不起作用。

该图标也可以在 Edge 浏览器中正确显示，但在 Firefox 中不正确。

4

1 回答 1

5

问题在于图标本身 ( https://image.flaticon.com/icons/svg/826/826968.svg)。它不包含高度或宽度（所有其他人都这样做）。

概念证明（只是石头图标）

概念证明（原创，带工作石图标）

改变：

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve">

至（添加width="590.074px" height="590.073px"）：

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    width="590.074px" height="590.073px"  viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve">

结果地图的屏幕截图

代码片段：

var stone_coordinates = [
  [16.897222, 52.488056],
  [16.942774, 52.463806],
  [16.881964, 52.419917]
];

var map = new ol.Map({
  view: new ol.View({
    center: ol.proj.transform(stone_coordinates[1], 'EPSG:4326', 'EPSG:3857'),
    zoom: 11
  }),
  layers: [new ol.layer.Tile({
    source: new ol.source.OSM()
  })],
  target: 'map'
});

var stone = [];

for (i = 0; i < stone_coordinates.length; i++) {
  stone.push(new ol.Feature({
    geometry: new ol.geom.Point(ol.proj.transform(stone_coordinates[i], 'EPSG:4326', 'EPSG:3857')),
  }));
}

var stone_markers = new ol.source.Vector({
  features: stone,
});

var stoneVectorLayer = new ol.layer.Vector({
  source: stone_markers,
});
map.addLayer(stoneVectorLayer);

stoneVectorLayer.setStyle(new ol.style.Style({
  image: new ol.style.Icon(({
    // icon must be served over https to work on stackoverflow code snippet
    src: 'https://www.geocodezip.net/mapIcons/stone.svg',
    scale: 0.08,
  }))
}))
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/css/ol.css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/build/ol.js"></script>
<div id="map" class="map"></div>

于 2018-09-01T00:43:15.750 回答