vue3使用@antv/l7--引入自定义第三方底图瓦片-可离线部署使用

前言

之前关注过蚂蚁金服这个 WebGL 的框架，但是因为项目部署是内网使用，想用它搞离线部署地图瓦片，结果没搞出来，最后放弃了！后来选择的使用maptalks开发的，现在闲了，看翻开官网（https://l7.antv.antgroup.com/tutorial/l7）发现有离线部署的文档了；好了言归正传，上代码！

通过 npm 引入

// 安装L7 依赖
npm install --save @antv/l7
// 安装第三方底图依赖
npm install --save @antv/l7-maps

基本用法

import { Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';

const scene = new L7.Scene({
  id: 'map',
  map: new L7.GaodeMap({
    style: 'dark',
    center: [110.770672, 34.159869],
    pitch: 45,
  }),
});

组件代码

<template>
  <div>
    <div class="map2" id="map2"></div>
</template>

<script>
import { Scene, RasterLayer} from '@antv/l7';
import { Map } from '@antv/l7-maps';
export default {
   name: '',
   props: [],
   setup() {
     const data = reactive({
      scene:null,//离线第三方地图 场景实例
     })
     onMounted(() => {
       initMap2();
     })
    const initMap2 = () => {
      data.scene = new Scene({
        id: 'map2',
        map: new Map({
          center: [114.514722,38.045724],
          zoom:15
        })
      });
      data.scene.on('loaded', () => {
        // 底图服务
        const baseLayer = new RasterLayer({ zIndex: 1 }).source(
          'https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}',
          {
            parser: {
              type: 'rasterTile',
              tileSize: 256,
            }
          }
        );
        // 注记服务
        const annotionLayer = new RasterLayer({ zIndex: 2 }).source(
          'https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}',
          {
            parser: {
              type: 'rasterTile',
              tileSize: 256,
            }
          }
        );
        data.scene.addLayer(baseLayer);
        data.scene.addLayer(annotionLayer);
      });
    }
     const refData = toRefs(data);
     return {
        ...refData,
      }
   }
}
</script>

参考官方文档：https://l7.antv.antgroup.com/tutorial/tile/vectortile