本文共 2034 字，大约阅读时间需要 6 分钟。

OpenLayers GIS??????

1. Marker??

import {Style, Circle, Fill, Stroke} from 'ol/style';var pointStyle = new Style({  image: new Circle({    radius: 5,    fill: new Fill({      color: 'red'    }),    stroke: new Stroke({      color: 'black',      width: 1    })  })});var vectorSource = new VectorSource({  // ...???});var vectorLayer = new VectorLayer({  source: vectorSource,  style: pointStyle});

2. LineString?Polygon??

var lineStyle = new Style({  stroke: new Stroke({    color: 'blue',    width: 2  })});var vectorLayer = new VectorLayer({  source: vectorSource,  style: lineStyle});

3. Polygon??

var polygonStyle = new Style({  fill: new Fill({    color: 'rgba(255, 255, 0, 0.5)'  }),  stroke: new Stroke({    color: 'black',    width: 1  })});var vectorLayer = new VectorLayer({  source: vectorSource,  style: polygonStyle});

4. ????

var textStyle = new Style({  text: new Text({    font: '14px Arial',    text: 'Label Text',    fill: new Fill({      color: '#000'    }),    stroke: new Stroke({      color: '#fff',      width: 2    }),    offsetX: 10,    offsetY: 20  })});var featureStyle = [polygonStyle, lineStyle, pointStyle, textStyle];var vectorLayer = new VectorLayer({  source: vectorSource,  style: function(feature) {    return featureStyle;  }});

5. ??????

var vectorLayer = new VectorLayer({  source: vectorSource,  style: function(feature, resolution) {    var fillColor;    if (feature.get('type') === 'important') {      fillColor = 'red';    } else {      fillColor = 'green';    }    return [      new Style({        fill: new Fill({          color: fillColor        }),        stroke: new Stroke({          color: 'black',          width: 1        })      })    ];  }});

6. ????

import {Icon} from 'ol/style';var iconStyle = new Style({  image: new Icon({    src: 'path/to/icon.png',    anchor: [0.5, 46],    anchorXUnits: 'fraction',    anchorYUnits: 'pixels',    scale: 0.5  })});var vectorLayer = new VectorLayer({  source: vectorSource,  style: iconStyle});

??????????????OpenLayers????????????GIS????????

转载地址：http://kupfk.baihongyu.com/