AntvL7地图(二)

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

1、地图添加marker

官网地址：

l7.antv.antgroup.com/examples/co…

• 首先在项目中引入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 --点图层

官网地址：l7.antv.antgroup.com/zh/examples…

• 首先在项目中引入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 信息框

官网地址：l7.antv.antgroup.com/api/compone…

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();
  });
}

效果