vue3 + openlayers---使用GeoJSON的方式加载点线面

点

const layer = new VectorLayer({
  source: new VectorSource({
    features: new GeoJSON().readFeatures(
      {
        type: 'FeatureCollection',
        features: [
          {
            type: 'Feature',
            geometry: {
              type: 'MultiPoint',
              coordinates: [
                [117.283042, 31.86119],
                [121.687899486, 31.24916171]
                ...............
                ...............
              ]
            }
          }
        ]
      },
      {
        dataProjection: 'EPSG:4326', // 原始数据坐标系
        featureProjection: 'EPSG:3857' // 需要显示的坐标系
      }
    )
  }),
  style: new Style({
    image: new StyleCircle({
      radius: 6,
      fill: new Fill({
        color: '#f00'
      }),
      stroke: new Stroke({
        color: '#ff0',
        width: 2
      })
    })
  })
})
window.olMap.addLayer(layer)

线

const layer = new VectorLayer({
  source: new VectorSource({
    features: new GeoJSON().readFeatures(
      {
        type: 'FeatureCollection',
        features: [
          {
            type: 'Feature',
            geometry: {
              type: 'LineString',
              coordinates: [
                [117.283042, 31.86119],
                [121.687899486, 31.24916171],
                ...............
                ...............
              ]
            }
          }
        ]
      },
      {
        dataProjection: 'EPSG:4490',
        featureProjection: 'EPSG:3857'
      }
    )
  }),
  style: new Style({
    stroke: new Stroke({
      color: '#f00',
      width: 3
    })
  })
})
window.olMap.addLayer(layer)

面

const layer = new VectorLayer({
  source: new VectorSource({
    // anHui 是安徽省 GeoJSON 面数据  大家可以网上自行下载导入
    features: new GeoJSON().readFeatures(anHui, {
      dataProjection: 'EPSG:4490', // 原数据的投影坐标
      featureProjection: 'EPSG:3857' // 规定要素以哪种坐标显示
    })
  }),
  style: new Style({
    fill: new Fill({
      //矢量图层填充颜色，以及透明度
      color: 'rgba(33,194,219,0.5)'
    }),
    stroke: new Stroke({
      //边界样式
      color: 'rgba(100, 90, 209, 0.6)',
      width: 3
    }),
    text: new Text({
      //文本样式
      font: '12px Calibri,sans-serif',
      fill: new Fill({
        color: '#000'
      }),
      stroke: new Stroke({
        color: '#fff',
        width: 3
      })
    })
  })
})
window.olMap.addLayer(layer)