OpenLayers +GeoJSON 绘制省边界

GeoJSON 数据

阿里云数据可视化平台

使用GeoJson 数据有两种方式

1、在线引入（注意，http 是不允许向https 发送请求的，想使用的话，保证域名是https 或者localhost）

 const source = new VectorSource({
        url: 'https://geo.datav.aliyun.com/areas_v3/bound/410000_full.json',
        format: new GeoJSON()
      })

2、将GeoJson 数据下载下来本地引入

 const features = (new GeoJSON({ featureProjection: 'EPSG:4326' })).readFeatures(数据地址)
      const source = new VectorSource({
        features
      })

将GeoJson 数据绘制到地图上

      const vectorLayer = new VectorLayer({
        source: source,
        style: {
          'fill-color': 'rgba(255, 255, 255, 0.6)',
          'stroke-width': 2,
          'stroke-color': '#1469e9',
          'circle-radius': 5,
          'circle-fill-color': 'rgba(255, 255, 255, 0.6)',
          'circle-stroke-width': 1,
          'circle-stroke-color': '#319FD3'
        }
      })
 this.map.addLayer(vectorLayer)
      const feature = source.getFeatures()[0]
      const polygon = feature.getGeometry()
      this.view.fit(polygon, { padding: [170, 50, 30, 150] })

完整代码

<template>
  <div class="map-container" ref="map"></div>
</template>
<script>
import { geojson} from '@/config' // geojson 本地数据
import 'ol/ol.css'
import { Map, View } from 'ol'
// import TileLayer from 'ol/layer/Tile'
// import OSM from 'ol/source/OSM'
import { Vector as VectorSource } from 'ol/source'
import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer'
import XYZ from 'ol/source/XYZ'
import GeoJSON from 'ol/format/GeoJSON'
import { Fill, Stroke, Style } from 'ol/style'
export default {
  data () {
    return {
      map: null,
      view: null,
      options: {
        zoom: 12,
        center: [113.570594, 34.829485]
      }
    }
  },
  mounted () {
    this.initMap(this.options)
  },
  methods: {
    initMap (options = {}) {
      this.view = new View({
        projection: 'EPSG:4326',
        center: options.center || [113.570594, 34.829485], // 郑州
        zoom: options.zoom || 2
      })
      this.map = new Map({
        target: this.$refs.map,
        layers: [
          new TileLayer({
            title: '网格',
            source: new XYZ({
              visible: true,
              wrapX: true,
              url: 'http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=apikey'

            })
          }),

          new TileLayer({
            title: '数据',
            source: new XYZ({
              visible: true,
              wrapX: true,
              url: 'http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=apikey'

            })
          })
        ],
        view: this.view
      })
      this.addGeoJson()
    },
    addGeoJson () {
      const features = (new GeoJSON({ featureProjection: 'EPSG:4326' })).readFeatures(geojson)
      const source = new VectorSource({
        features
        // url: 'https://geo.datav.aliyun.com/areas_v3/bound/410000_full.json',
        // format: new GeoJSON()
      })

      const vectorLayer = new VectorLayer({
        source: source,
        style: {
          'fill-color': 'rgba(255, 255, 255, 0.6)',
          'stroke-width': 2,
          'stroke-color': '#1469e9',
          'circle-radius': 5,
          'circle-fill-color': 'rgba(255, 255, 255, 0.6)',
          'circle-stroke-width': 1,
          'circle-stroke-color': '#319FD3'
        }
      })
      this.map.addLayer(vectorLayer)
      const feature = source.getFeatures()[0]
      const polygon = feature.getGeometry()
      this.view.fit(polygon, { padding: [170, 50, 30, 150] })
    }

  }
}
</script>
<style lang="scss" scoped>
  .map-container{
    width: 100%;
    height: 100%;
  }
</style>

效果

1662633126888.png