如何在 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>

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

How to add style in polyline in openLayers?

openlayers

polyline

openlayers-6