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

hint：
node => 14.17.5
npm => 6.14.14
选择安装leaflet版本 '^1.7.1'
以实现散点图的业务为驱动
Map的承载Div

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

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

这是封装的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: '【vue3.0与leaflet的搭建和简易demo】', 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...
下面补充一下聚合图的实例