项目中使用AntV L7地图（二）----地图添加marker,添加PointLayer，添加popup

原创已于 2024-01-11 10:35:54 修改 · 2.8k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#开发语言 #前端

于 2024-01-11 10:35:28 首次发布

AntV L7 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了如何在AntVL7项目中添加Marker和PointLayer，包括引入相关组件、处理数据、设置样式，并展示了如何集成Popup以显示信息。通过实例代码展示了地图上添加标记点和自定义信息框的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目中使用`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();
  });
}