三.矢量瓦片图

前言

矢量切片可以以三种形式呈现：GeoJSON、TopoJSON 和 MapBox Vector Tile(.mvt)，矢量切片技术继承了矢量数据和切片地图的双重优势，有以下优点：

• 瓦片以 mvt 格式的存储，是以每一个瓦片号为基准进行存储的。大小都是 256*256；粒度更小，信息接近无损；前端可根据数据定制渲染样式；数据更新快，更灵活；
• .mvt 压缩率更高，体积更小；

1.Mapbox 矢量瓦片图

• VectorTileLayer

查看代码详情

<template>
  <div ref="map" class="map"></div>
</template>

<script>
export default {
  mounted() {
    let {
      format: { MVT },
      Map,
      View,
      layer: { VectorTile: VectorTileLayer },
      source: { VectorTile: VectorTileSource },
      style: { Fill, Icon, Stroke, Style, Text },
      proj: { fromLonLat },
    } = ol

    const map = new Map({
      layers: [
        new VectorTileLayer({
          declutter: true,
          source: new VectorTileSource({
            attributions:
              '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> ' +
              '© <a href="https://www.openstreetmap.org/copyright">' +
              "OpenStreetMap contributors</a>",
            format: new MVT(),
            url:
              "https://{a-d}.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/" +
              "{z}/{x}/{y}.vector.pbf?access_token=" +
              mapkeys.mapbox,
          }),
          style: createMapboxStreetsV6Style(Style, Fill, Stroke, Icon, Text),
        }),
      ],
      target: this.$refs.map,
      view: new View({
        center: [12579156, 3274244],
        zoom: 12,
      }),
    })
  },
}
</script>

2.OGCVectorTile

查看代码详情

<template>
    <div ref="map" class="map"></div>
  </template>
  
  <script>
  export default {
    mounted() {
      let {
        Map,
        View,
        layer: { VectorTile: VectorTileLayer },
        source: { OGCVectorTile },
        format: { MVT },
      } = ol
      const map = new Map({
        target: this.$refs.map,
        layers: [
          new VectorTileLayer({
            source: new OGCVectorTile({
              url: "https://maps.ecere.com/ogcapi/collections/NaturalEarth:cultural:ne_10m_admin_0_countries/tiles/WebMercatorQuad",
              format: new MVT(),
            }),
          }),
        ],
        view: new View({
          center: [12579156, 3274244],
          zoom: 1,
        }),
      })
    },
  }
  </script>