行政边界添加样式 #

import { Fill, Style, Stroke, Text } from 'ol/style.js'
import VectorSource from 'ol/source/Vector'
import VectorLayer from 'ol/layer/Vector'
import GeoJSON from 'ol/format/GeoJSON'


let boundaryLayer = new VectorLayer({
  name: boundary.name,
  source: new VectorSource({
    url: boundary.url,
    format: new GeoJSON({
      defaultDataProjection: sourcePro,
      projection: destinationPro
    })
  }),
  style: new Style({
    stroke: new Stroke({
      color: boundary.color ? boundary.color : 'rgba(43, 140, 218, 0.9)',
      width: boundary.width ? boundary.width : 2,
      lineCap: "butt",
      lineJoin: "bevel",
      lineDash: [8],
      lineDashOffset: "5"
    }),
    fill: new Fill({
      color: boundary.fillColor ? boundary.fillColor : 'rgba(0, 0, 0, 0)'
    })
  }),
});

//另一种style样式 蓝底 黑色字体 白色边界
let style = new Style({
  fill: new Fill({
    color: 'rgba(0, 0, 255, 0.9)'
  }),
  stroke: new Stroke({
    color: '#319FD3',
    width: 1
  }),
  text: new Text({
    font: '12px Calibri,sans-serif',
    fill: new ol.style.Fill({
      color: '#00008B'
    }),
    stroke: new Stroke({
      color: '#fff',
      width: 3
    })
  })
});

// map变量是初始化的地图对象
map.addLayer(boundaryLayer);