vue3.0与leaflet的搭建和简易demo

hint：
node => 14.17.5
npm => 6.14.14

选择安装leaflet版本 '^1.7.1'
以实现散点图的业务为驱动

Map的承载Div

初始化地图并且实现了几个简易功能点:

1. 根据数个点位生成polygon并加载
2. 随机点位加载svg标记点
3. 加载标记点后重新设置标记点大小颜色再次重绘

这是封装的layer生成模块=>layers.js
"leaflet.markercluster": "^1.5.0",

import L from 'leaflet'
/**
 * add polygon
 * @param {*} latlngs 
 */
export function addPloygon (latlngs ) {
    var layer = L.polygon(latlngs , {color: 'rgb(80,227,194)'})
    return layer
}

/**
 * add scatterPoint
 * @param {*} latlngs 
 */
 export function addScatterPoint (latlng) {
    let circleMarker = L.circle(latlng,{
        radius:800000,
        fillColor:'red',
        fillOpacity:'1',
        color: 'red', //颜色
    })
    circleMarker.on('mouseover',function(){
        circleMarker.bindPopup(`
Hello world!
This is a nice popup.
`).openPopup();
    })
    circleMarker.on('mouseout', function(){
        circleMarker.closePopup()
    });
    return circleMarker
}



/**
 * add scatterPoint VIP
 * @param {*} latlngs 点经纬度
 */
 export function addScatterPointIcon2 (latlng) {
    var iconSettings = {
        mapIconUrl: '',
        mapIconColor: 'red',
        mapIconColorInnerCircle: '#fff',
        pinInnerCircleRadius:48
    };
    var divIcon = L.divIcon({
        className: "leaflet-data-marker",
      html: L.Util.template(iconSettings.mapIconUrl, iconSettings), //.replace('#','%23'),
      iconAnchor  : [12, 32],
      iconSize    : [30, 30],
      popupAnchor : [0, -28]
    });
    var marker = L.marker(latlng, {
        icon: divIcon,
        id: 'scatter'
    });
    return marker
}
/**
 * new scatterPoint style
 * marker.setIcon(newScatterStyle);
 * @param {*} color 颜色
 * @param {*} radius 半径
 * @param {*} isVip 是否是vip
 */
 export function newScatterStyle (color,radius,isVip) {
    var iconSettings
     if(isVip){
        iconSettings = {
            mapIconUrl: '',
            mapIconColor: color,
            mapIconColorInnerCircle: '#fff',
            pinInnerCircleRadius:61
        };
     }else{
        iconSettings = {
            mapIconUrl: '',
            mapIconColor: color,
            mapIconColorInnerCircle: '#fff',
            pinInnerCircleRadius:61
        };
     }
    var divIcon = L.divIcon({
        className: "leaflet-data-marker",
      html: L.Util.template(iconSettings.mapIconUrl, iconSettings), //.replace('#','%23'),
      iconAnchor  : [12, 32],
      iconSize    : [radius, radius],
      popupAnchor : [0, -28]
    });
    return divIcon
}

总结：以前都是用的supermap的leaflet库，初次用vue3.0配合原生leaflet。目的也是为了去熟悉原生leaflet的文档，不得不说他的文档写的很不错，比openlayer好很多。学习中成长吧，为初学者留下一点案例资料。
原作者地址：https://segmentfault.com/u/yo...

下面补充一下聚合图的实例