项目中使用AntV L7地图（四）使用初始化地图并添加地图底图

项目中使用AntV L7地图（四）使用初始化地图并添加地图底图

官网地址https://l7.antv.antgroup.com/examples/map/map/#gaodemap

1、新建一个文件，用于传入高德地图实例

import { load } from "@amap/amap-jsapi-loader";
export async function CreateMap() {
  const AMap = await load({
    key: "",//高德地图的key
    version: "2.0",
    plugins: [
      "AMap.DistrictSearch",
      "AMap.DistrictLayer",
      "AMap.TileLayer",
      "AMap.Polygon",
      "AMap.GeoJSON",
      "AMap.Weather",
    ],
  });

  let map = new AMap.Map('map', {
    rotateEnable:false//是否允许旋转
    center: []//初始化地图中心点
    zoom:11.6, //初始化缩放等级
    pitch: "45",//地图倾角
    viewMode: "3D",
    layers: [
      new AMap.TileLayer.Satellite()
    ]
  });
  return { AMap, map }
}

2、在vue中引入高德地图，并初始化地图

import { CreateMap } from "../lib/registerMap";
import { GaodeMap } from "@antv/l7-maps";
import { Scene} from "@antv/l7";
import { onMounted} from "vue";

// 初始化地图
async function initMap() {
  const { map } = await CreateMap();
  scene = new Scene({
    id: "map",
    logoVisible: false,
    map: new GaodeMap({
      mapInstance: map
    })
  });
  // 禁止双击放大
  scene.setMapStatus({ doubleClickZoom: false });
}

onMounted(() => {
  initMap();
});

效果图：

3、使用天地图为地图底图

官网地址：https://www.tianditu.gov.cn/

import { load } from "@amap/amap-jsapi-loader";
export async function CreateMap() {
  const AMap = await load({
    key: "",
    version: "2.0",
    plugins: [
      "AMap.DistrictSearch",
      "AMap.DistrictLayer",
      "AMap.TileLayer",
      "AMap.Polygon",
      "AMap.GeoJSON",
      "AMap.Weather",
    ],
  });
  let map = new AMap.Map('map', {
    center:
    zoom:11.6, 
    pitch: "45",
    viewMode: "3D",
    layers: [
      new AMap.TileLayer.Satellite()
    ]
  });
//新增代码
   let wmsImg = new AMap.TileLayer({
   zIndex: 2,
   getTileUrl: (x: any, y: any, z: any) => {
   return `https://t0.tianditu.gov.cn/DataServer?T=img_w&tk=‘天地图的key’&x=${x}&y=${y}&l=${z}`
  }
   })
 wmsImg.setMap(map)
  return { AMap, map }
}

效果图：