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

问题描述

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

name.value

解决方法

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.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',});

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

var trackStyle = new ol.style.Style({
  stroke: new ol.style.Stroke({
    width: 6,})

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]
});

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>