OpenLayers + TopoJSON 绘制边界

一、准备TopoJson 数据
可以在 DataV.GeoAtlas上下载

1663222270105.png

二、引入TopoJson 数据，并绘制

addTopoJson () {
      console.log(this.geoJSonData)
      const features = new TopoJSON({
        featureProjection: 'EPSG:4326'
      }).readFeatures(this.geoJSonData)
      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.01)',
          'stroke-width': 5,
          '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] })
    },

三、绘制地图

initMap (options = {}) {
      this.view = new View({
        projection: 'EPSG:4326',
        center: options.center || [113.625351, 34.746303], // 郑州
        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=地图key'
            })
          }),

          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=地图key'
            })
          })
        ],
        view: this.view
      })
      // this.addGeoJson()
      // this.addGif()
      this.addTopoJson()
    },

四、结果

1663222502761.png