如何在openLayers中的折线中添加样式

Question

我想使用openlayers向折线添加自定义样式，如何添加自定义样式？

var coord = "atmwRgnhG_nAhz@i@Fk@Og@Ee@DoK|C^|ABr@Iz@S`@mApA_Az@kHbHcNxLgDtC";

var route =  new Polyline().readGeometry(coord, {
dataProjection: 'EPSG:4326',
featureProjection: 'EPSG:3857',
});

var featureList = new Feature({
type: 'route',
geometry: route,
});

Answer 1

feature.setStyle(myStyle)将为功能添加样式。

var coord = "atmwRgnhG_nAhz@i@Fk@Og@Ee@DoK|C^|ABr@Iz@S`@mApA_Az@kHbHcNxLgDtC";

var route =  new Polyline().readGeometry(coord, {
dataProjection: 'EPSG:4326',
featureProjection: 'EPSG:3857',
});

var featureList = new Feature({
type: 'route',
geometry: route,
});
var trackStyle =  new Style({
stroke: new Stroke({
width: 6,
color: [237, 212, 0, 0.8],
}),
})
featureList.setStyle(trackStyle);

代码片段：

var coord = "atmwRgnhG_nAhz@i@Fk@Og@Ee@DoK|C^|ABr@Iz@S`@mApA_Az@kHbHcNxLgDtC";

var route = new ol.format.Polyline({
factor: 1e6,
}).readGeometry(coord, {
dataProjection: 'EPSG:4326',
featureProjection: 'EPSG:3857',
});
var featureList = new ol.Feature({
type: 'route',
geometry: route,
});
var trackStyle = new ol.style.Style({
stroke: new ol.style.Stroke({
width: 6,
color: [237, 212, 0, 0.8],
}),
})
featureList.setStyle(trackStyle);
var vectorLayer = new ol.layer.Vector({ // VectorLayer({
source: new ol.source.Vector({ // VectorSource({
features: [featureList]
})
});
var layer = new ol.layer.Tile({
source: new ol.source.OSM()
});
var center = [15038.762268462691, 1159972.4683343808];
var view = new ol.View({
center: center,
zoom: 6
});
var map = new ol.Map({
target: 'map',
layers: [layer, vectorLayer],
view: view
});
var extent = vectorLayer.getSource().getExtent();
map.getView().fit(extent, {
size: map.getSize(),
padding: [100, 100, 100, 100]
});

html,
body,
#map {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}

<link rel="stylesheet" href="https://openlayers.org/en/v6.4.3/css/ol.css" type="text/css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v6.4.3/build/ol.js"></script>
<div id="map" class="full-map"></div>