项目中使用AntV L7
地图(二)----地图添加marker
,添加PointLayer
,添加popup
1、地图添加marker
官网地址:
https://l7.antv.antgroup.com/examples/component/marker/#markerlayer
- 首先在项目中引入
Marker
,MarkerLayer
import { Scene,Marker,MarkerLayer,} from "@antv/l7";
- 引入图标
import locationImg from "@/assets/screenImg/location.png";
- 引入需要添加marker的JSON数据
数据格式:{
“name”: “成都市”,
“center”: [
104.065735,
30.659462
]
},
import scCityCenter from "@/assets/json/sichuan-center.json";
- 定义添加marker的方法
let markerLayer:any = null
function addMaker() {
markerLayer = new MarkerLayer();
for (let i = 0; i < scCityCenter.length; i++) {
const el = document.createElement("label");
el.className = "labelclass";
el.style.background = `url(${locationImg}) no-repeat`;
el.style.width = `30px`;
el.style.color = `#fff`;
el.textContent = scCityCenter[i].properties.name;
el.style.lineHeight = `70px`;
el.style.textAlign = `center`;
el.style.height = `36px`;
el.style.backgroundSize = "100%";
const marker = new Marker({
element: el,
}).setLnglat({
lng: scCityCenter[i].properties.centroid[0],
lat: scCityCenter[i].properties.centroid[1],
});
markerLayer.addMarker(marker);
}
scene.addMarkerLayer(markerLayer);
}
效果图
2、地图添加PointLayer
--点图层
官网地址:https://l7.antv.antgroup.com/zh/examples/point/image/#image
- 首先在项目中引入
PointLayer
import { Scene, PointLayer } from '@antv/l7';
- 引入需要添加
PointLayer
的JSON
数据
import njCityCenter from "@/assets/json/neijiang.json";//使用的数据为内江的地图数据
- 引入
PointLayer
的图片,并完成注册
import candyImg from "@/assets/screenImg/candy.png";
function addImage() {
//注册图片
scene.addImage("candy", candyImg); //糖果
}
async function initMap() {
scene = new Scene({
id: "map",
logoVisible: false,
map: new Map({
center: [104.065735,30.659462],
zoom: 6,
maxZoom: 8,
minZoom: 4,
pitch: 10, // 地图倾斜度
style: "blank",
interact: false, // 高德地图是否允许地图可拖动,默认为true
}),
});
scene.on("loaded", () => {
addImage();
});
}
- 定义添加
PointLayer
的方法
let njLayer:any = null;
function addNjTypeLayer() {
let layerData: any = [];
njCityCenter.map((option: any) => {
const data = option.properties;
layerData.push({
name: data.name,
lng: data.centroid[0],
lat: data.centroid[1],
});
});
njLayer = new PointLayer()
.source(layerData, {
parser: {
type: "json",
x: "lng",
y: "lat",
},
})
.shape("name", ["candy"]) // shape 支持映射写法
.size(15);
scene.addLayer(njLayer);
}
效果
3、添加Popup
信息框
官网地址:https://l7.antv.antgroup.com/api/component/popup
import { Scene, Popup } from '@antv/l7';
let popup: any = null;
//在addNjTypeLayer()方法中添加鼠标移入添加popup信息框和鼠标移出隐藏信息框
function addNjTypeLayer() {
let layerData: any = [];
njCityCenter.map((option: any) => {
const data = option.properties;
layerData.push({
name: data.name,
lng: data.centroid[0],
lat: data.centroid[1],
});
});
njLayer = new PointLayer()
.source(layerData, {
parser: {
type: "json",
x: "lng",
y: "lat",
},
})
.shape("name", ["candy"]) // shape 支持映射写法
.size(15);
scene.addLayer(njLayer);
njLayer.on("mouseenter", (e: any) => {
popup = new Popup({
offsets: [0, 0],
closeButton: false,
})
.setLnglat(e.lngLat)
.setHTML(`<span>${e.feature.name}</span>`);
scene.addPopup(popup);
});
//鼠标移出
njLayer.on("mouseout", () => {
popup.hide();
});
}