多字符串功能未显示在 openlayers 地图上？

Question

我有一张地图，上面有圆形特征加上多字符串（here), when I check if the feature is there I find it, the style chosen is taken from this example 所以我认为问题不在于此。

var stringStyle = new ol.style.Style({
    stroke: new ol.style.Stroke({
        color: '#ffcc33',
        width: 10,
    }),
});

知道我做错了什么吗？

PS：要检查多行字符串的坐标，在上面的示例中将 vector2 的可见性设置为 true

代码片段（来自链接 fiddle）：

var i;
var circle;
var multiline;

var points = [
  [-284417.875175471, 6701738.296759888],
  [-284284.110375972, 6700467.531164646],
  [-283815.93357772526, 6701738.296759888],
  [-283190.1054086404, 6701766.960645495],
  [-283383.6952122001, 6701764.579775712],
  [-283284.2197027642, 6701589.0347590605],
  [-288756.07994830405, 6701766.960645495]
];

var multiline_points = [
  [-287570.90259223455, 6701938.9439591365],
  [-287083.6165369166, 6701317.893104319],
  [-286577.2212245273, 6702024.935615957],
  [-286137.7083118875, 6700840.161677537],
  [-285421.111171714, 6702607.767956631]
];

var concat_points = [];
concat_points = multiline_points;

var raster = new ol.layer.Tile({
  source: new ol.source.OSM(),
});

var source = new ol.source.Vector({
  wrapX: false
});
var source2 = new ol.source.Vector({
  wrapX: false
});

var vector = new ol.layer.Vector({
  source: source,
  /*style: new ol.style.Style({
        fill: new ol.style.Fill({
            color: 'rgba(0, 255,0, 0.9)'
        }),
        stroke: new ol.style.Stroke({
            color: '#737373',
            width: 2
        }),
        image: new ol.style.Circle({
            radius: 7,
            fill: new ol.style.Fill({
                color: '#ffcc33'
            })
        })
    }),*/
  visible: true
});

var vector2 = new ol.layer.Vector({
  source: source2,
  style: new ol.style.Style({
    fill: new ol.style.Fill({
      color: 'rgba(0, 255,0, 0.9)'
    }),
    stroke: new ol.style.Stroke({
      color: '#737373',
      width: 2
    }),
    image: new ol.style.Circle({
      radius: 7,
      fill: new ol.style.Fill({
        color: '#ffcc33'
      })
    })
  }),
  visible: false //true
});

var map = new ol.Map({
  layers: [raster, vector, vector2],
  target: 'map',
  view: new ol.View({
    center: points[0],
    zoom: 14,
  }),
});
var stringStyle = new ol.style.Style({
  stroke: new ol.style.Stroke({
    color: '#ffcc33',
    width: 10,
  }),
});
for (i = 0; i < points.length; i++) {
  circle = new ol.geom.Circle(points[i], 100);
  feature = new ol.Feature({
    geometry: circle
  });
  source.addFeature(feature);
}
multiline = new ol.geom.MultiLineString(multiline_points);
feature = new ol.Feature({
  geometry: multiline
});
feature.setStyle(stringStyle);
source.addFeature(feature);

for (i = 0; i < concat_points.length; i++) {
  circle = new ol.geom.Circle(concat_points[i], 100);
  feature = new ol.Feature({
    geometry: circle
  });
  source2.addFeature(feature);
}

.map {
  width: 100%;
  height: 300px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css" type="text/css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"></script>
<div id="map" class="map"></div>

Answer 1

您的 multiline_points 数组是单个 LineString 的坐标。使用 LineString 几何图形或使用一对额外的 [ ] 来为 MultiLineString 几何图形创建坐标。

多字符串功能未显示在 openlayers 地图上？

MultiString feature not showing up on openlayers map?

openlayers

openlayers-3

openlayers-6