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

Question

我有一张带有圆形特征的地图加上一个多字符串 (here)，当我检查该特征是否存在时，我找到了它，选择的样式取自这个 example，所以我不认为问题就在于此。

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

知道我做错了什么吗？

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

代码 sn-p（来自链接的小提琴）：

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 几何体的坐标。