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

完整代码

效果

1662633126888.png