《Leaflet 基础知识点》- 绘制点（两种方式）

前言 

Leaflet 官方 API，有一个 L.point，但这并不是我们想要的。与 L.circle、L.rectangle 和 L.polygon 不一样。

从下图的 API 目录结构就能看出差异，L.point 在 Basic Types 中。

但...我们依旧能绘制出点，有两种方式：

一、L.circleMarker 方式

说明

1. API 地址
2. 半径 radius 默认值是 10，缩放时不会改变它的大小，也是与 L.circle 有所区别；
3. 默认样式是，带有蓝色实心边框且蓝色半透明填充的圆。这是用SVG绘制的，具体如何修改样式暂未研究；

示例

L.circleMarker([31.369,121.531],{ radius: 5 }).addTo(map);

效果

 

补充于(2021.12.4)，改为红色边框，白色实体色。 

L.circleMarker(
    [31.369,121.531],
    { 
        radius: 5, 
        color: '#C23531', 
        fillColor: '#fff',
        fillOpacity: 1 
    }
).addTo(map);

 

二、L.marker 方式

说明

1. API 地址
2. 其实就是添加标注，具体可查看我另一篇比较详细的文章 《Leaflet 基础知识点》- 添加图形标注；
3. 但这里变通了一下，图片是一个16*16蓝色圆形(下图所示)，在map中原点在左上角，所以要位移到圆形的中心点，也就是大小的一半；

示例

// vue 中图片需要 import
import remarkIcon from './point.png';
 
// 图标对象
let icon = L.icon({
    iconUrl: remarkIcon,
    iconSize: [16, 16],// 图片大小
    iconAnchor: [8, 8] //图片是一个16*16圆形，在map中原点在左上角，所以要位移到圆形的中心点，也就是大小的一半
});
 
// 添加
L.marker([31.369,121.531],{ icon: icon }).addTo(map);

效果