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」に画像アイコンを表示しない理由がわかりません。すべてが機能する他の 2 つのベクター レイヤーと同じです。「setStyle」を削除するとマーカーが表示されるので、そこにマーカーがあります。「setStyle」は、これらのマーカーを非表示にするか、少なくとも非表示にするため、何とか機能しますが、代わりにアイコンを表示しない理由はわかりません。

いくつかのテストを行ったところ、画像に問題があるようです。そこに配置すると機能する画像もあれば、機能しない画像もあります。このコードで使用されている画像は他のレイヤーでも機能しません。問題は、OpenLayers が一部の画像をレンダリングしない理由です。同じアイコンの .png コピーも機能しません。

アイコンは Edge ブラウザーでも正しく表示されますが、Firefox では表示されません。

4

1 に答える 1