项目中使用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 }
}
效果图: