leaflet-创建点标记

在项目中经常会遇到有要求在地图固定的经纬度上添加一个点或者添加一个图形标记来展示标志性的地方,一般就是带颜色的点或者一个小图片。

1点的创建

要是从文档找点，是找不到的，但是可以找到创建圆的，通过L.circleMarker就可以

let marker = L.circleMarker(new L.LatLng(38, 107), { // 创建点 (38, 107)为经纬度
	color: '#000', //线颜色
	weight: 5, //线宽度
	opacity: 1, //透明度
	fillColor: '#00e400', //填充色
	fillOpacity: 0.5, //填充透明度
	radius: 20, //半径
}).addTo(this.yuangroup); //添加到this.yuangroup图层

用这个方法可以解决一些圆点标记或者环状标记的需求,但也有些需要需要用到其他的图片来进行标记,这个时候就要用另一种方法了

2marker

//创建图形标记
this.shipWreckIcon = L.icon({
	iconUrl: require('../assets/imges/aaaa.jpg'),//图片路径
	iconSize: [30, 30]//图片大小设置
});
//创建marker
let marker = L.marker(new L.LatLng(37, 90), { // 创建点
	draggable: true, //是否可以移动（拖动）默认为否
	icon: this.shipWreckIcon //将marker设置为上面引用的图形
}).addTo(this.newgroup)//添加到图层

 

如果icon不设置，显示的就是默认的图标 ，是之前在main中设置的，可以看第一篇

之前在main.js中设置的

/* leaflet icon */
delete L.Icon.Default.prototype._getIconUrl
L.Icon.Default.mergeOptions({
  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
  iconUrl: require('leaflet/dist/images/marker-icon.png'),
  shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
})

 3还可以给点添加提示文字

let marker = L.marker(new L.LatLng(37, 90), { // 创建点
	draggable: true, //可移动
	icon: this.shipWreckIcon //图
}).addTo(this.newgroup)
.bindTooltip('我是标记', { //添加提示文字
    permanent: true, //是永久打开还是悬停打开
	direction: 'top' //方向
}).openTooltip(); //在图层打开