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

Question

我有一个带有圆形特征的 map 加上一个多字符串（ here ），当我检查该特征是否存在时，我找到了它，选择的样式取自这个示例，所以我认为问题不在于那个。

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

知道我做错了什么吗？

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

代码片段（来自链接的小提琴）：

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