Vue工程搭建Leaflet项目第二弹：Marker && Icon展示

前言

除了标注、图例外，对于地图上的图层要素、几何对象等进行一定的内容显示或者信息提示是有必要的。在WebGIS开发中通常是通过Popup类来实现，而对于Leaflet来说，除了Popup类之外，还有一个ToolTip类，都是结合Marker类等来展示。

1.定义图标

var myIcon = L.icon({
    iconUrl: Icon,
    iconSize: [0, 0],   // 图标尺寸
    iconAnchor: [0, 0], // 图标放置位置
    popupAnchor: [0, 0], // 弹出框偏移量
    shadowUrl: IconShadow,
    shadowSize: [0, 0],
    shadowAnchor: [-2, 0]
});

2.加载Marker

const latlng1 = L.latLng([24.89299, 102.836694]);
const latlng2 = L.latLng([24.85101, 102.795231]);
const latlng3 = L.latLng([24.79112, 102.795231]);
   
const marker1 = L.marker(latlng1, { icon: myIcon }).addTo(map);
const marker2 = L.marker(latlng2, { icon: myIcon }).addTo(map);
const marker3 = L.marker(latlng3, { icon: myIcon }).addTo(map);

3.定义Popup以及ToolTip并添加到地图

let popup1 = L.popup();
let popup2 = L.popup();

// let toolTip = L.tooltip({
//   pane: "tooltipPane"
// });
popup1
    .setLatLng(latlng1)
    .setContent("<p>Hello world1!<br />This is a nice popup.</p>");

popup2
    .setLatLng(latlng2)
    .setContent("<p>Hello world2!<br />This is a nice popup.</p>");

marker1.bindPopup(popup1);
marker2.bindPopup(popup2);

marker3.bindTooltip("my tooltip text").openTooltip();

// popup弹出事件
marker1.on("popupopen", evt => {
    console.log("evtopen:", evt);
});
// popup关闭事件
marker1.on("popupclose", evt => {
    console.log("evtclose:", evt);
});

4.图标偏移

5.图标路径

对于使用的图标应使用import导入图标路径，否则图标无法显示

import Icon from "./marker-icon.png";
import IconShadow from "./marker-shadow.png";

const myIcon = L.icon({
    iconUrl: Icon,
    // iconSize: [40, 40],
    // iconAnchor: [22, 94],
    iconAnchor: [0, 0],
    // popupAnchor: [-3, -76]
    shadowUrl: IconShadow,
    // shadowSize: [40, 40],
    // shadowAnchor: [-2, 0]
    shadowAnchor: [0, 0]
});

6.效果展示

欢迎大家关注我的公众号，我也会在公众号同步更新。

若大家对进阶打怪有兴趣的话，欢迎订阅以下专栏

地址：WebGIS入门和进阶实战