leaflet結合Leaflet-Geoman插件實現繪製以及動態配置樣式(附源碼下載)

前言

leaflet 入門開發系列環境知識點了解：

• leaflet api文檔介紹，詳細介紹 leaflet 每一個類的函數以及屬性等等
• leaflet 在線例子
• leaflet 插件，leaflet 的插件庫，很是有用

內容概覽

leaflet結合Leaflet-Geoman插件實現繪製以及動態配置樣式
源代碼demo下載

效果圖以下：

具體實現思路：
利用Leaflet-Geoman插件繪製點線面，而後結合colorPick顏色帶器拾取RGB顏色值，前端leaflet地圖動態設置點線面不一樣樣式Style。
Leaflet-Geoman插件

• 核心代碼，完整源碼見尾部下載

var weight = 3;
var dashArray = [0,0];
//多邊形默認樣式
var geoJsonStyle_Polygon = {
color: '#3388ff',
weight: 3,
opacity: 1,
fillColor: '#3388ff',
fillOpacity: 0.2,
//dashArray:[5,5],
fill: true,
stroke: true
};
 
window.colorPick = new DCI.Pick.colorPick();//建立顏色器的對象
colorPick.G2 = 135;
colorPick.B2 = 255;
colorPick.R = 51;
colorPick.G = 135;
colorPick.B = 255;
 
var map = L.map('map');
L.tileLayer('http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}').addTo(map);
var geojsonLayers = L.featureGroup([]).addTo(map);
//監聽圖層鼠標事件
geojsonLayers.on('click', onClickGeojsonLayers);
map.setView(L.latLng(37.550339, 104.114129), 4); //設置縮放級別及中心點
//繪製工具draw
map.pm.addControls({
position: 'topleft',
drawMarker:true,
drawCircleMarker:false,
drawPolyline:true,
drawRectangle:true,
drawPolygon:true,
drawCircle: true,
editMode:false,
dragMode:false,
cutPolygon:false,
removalMode:true,
});
map.pm.setLang("zh");
map.on('pm:create', e => {
//console.log(e);
switch(e.shape) {
case "Rectangle":
case "Polygon":
case "Circle":
case "Line":
e.layer.options ={...geoJsonStyle_Polygon,shape:e.shape};
break;
}
geojsonLayers.addLayer(e.layer);
});
 
function onClickGeojsonLayers(e){
var layer = e.layer;
var style2 = "solid";
var mWidth = "3px";
var html = "";
switch(layer.options.shape) {
case "Rectangle":
case "Polygon":
case "Circle":
case "Line":
html = "<div style='width:225px; color: rgb(51, 51, 51); font-size:12px; word-wrap: break-word; '>" +
"<div id='infowin' class='pointInfowin'>" +
"<div id='pointInfoP' style='display: block; '>" +
"<div class='style_line_polygon'>" +
"<div class='line_shape'>" +
"<span>線型</span>" +
"<div class='line_shape_list'>" +
"<div id='solid_line_shape' onClick='changelinestyle(" + 0 + ");'></div>" +
"<div id='dashed_line_shape' onClick='changelinestyle(" + 1 + ");'></div>" +
"</div>" +
"</div>" +
"<div class='line_thick'>" +
"<span>線寬</span>" +
"<div id='line_thick_list'>" +
"<div id='thick_line_2' onClick='changelinewidth(" + 2 + ");'></div>" +
"<div id='thick_line_3' onClick='changelinewidth(" + 3 + ");'></div>" +
"<div id='thick_line_4' onClick='changelinewidth(" + 4 + ");'></div>" +
"</div>" +
"</div>" +
"<div class='line_color_opacity'>" +
"<div class='line_color'>" +
"<span>線型顏色</span>" +
"<div class='color_line_selector' onclick='coloropen(\"line\")' id='inputcolor'></div>" +
"<div id='colorpane' style='position:absolute;z-index:999;display:none;'></div>" +
"</div>" +
"<div class='line_opacity'>" +
"<span>透明度</span>" +
"<input id='lAlphaText' type='text' value='100' maxlength='3' id='borderOpacity' class='opacity_line_selector'>%</div>" +
"<div class='clear'></div>" +
"</div>" +
"<div class='fill_color_opacity'>" +
"<div class='fill_color'>" +
"<span>填充顏色</span>" +
"<div class='color_fill_selector' onclick='coloropen(\"fill\")' id='inputcolor2'></div>" +
"<div id='colorpane2' style='position:absolute;z-index:999;display:none;'></div>" +
"</div>" +
"<div class='fill_opacity'>" +
"<span>透明度</span>" +
"<input id='mMAlphaText' type='text' value='20' maxlength='3' id='fillOpacity' class='opacity_fill_selector'>%</div>" +
"</div>" +
"<div class='fill_color_preview'>" +
"<span>填充效果</span>" +
"<div class='preview_fill_selector'>" +
"<div id='fill_preview' style='border-top-color: rgb(" + colorPick.R2 + "," + colorPick.G2 + "," + colorPick.B2 + "); '></div>" +
"</div>" +
"</div>" +
"<div class='line_color_preview' id='line_color_preview'>" +
"<span>邊框效果</span>" +
"<div class='preview_line_selector'>" +
"<div id='line_preview' style='border-top-style:" + style2 + "; border-top-width: " + mWidth + "; border-top-color: rgb(" + colorPick.R + "," + colorPick.G + "," + colorPick.B + "); '></div>" +
"</div>" +
"</div>" +
"<button id='PolygonStyle' type='button'>肯定</button>"+
"</div></div></div></div></div>";
break;
default: //Marker
html =`<div id="markerIMG">
<img loading="lazy" src="marker-icon.png" alt="" width="25" height="41">
<img loading="lazy" src="gpsRed.png" alt="" width="32" height="32">
<img loading="lazy" src="gpsYellow.png" alt="" width="32" height="32">
<img loading="lazy" src="gpsGreen.png" alt="" width="32" height="32">
</div>`;
}
var elements = html;
layer.bindPopup(elements).openPopup(e.latlng);
//動態修改線和麪樣式
$("#PolygonStyle").click(function(e){
var style ={
color: "rgb(" + colorPick.R + "," + colorPick.G + "," + colorPick.B + ")",
weight: weight,
opacity: document.getElementById("lAlphaText").value / 100,
fillColor: "rgb(" + colorPick.R2 + "," + colorPick.G2 + "," + colorPick.B2 + ")",
fillOpacity: layer.options.shape === "Line" ? 0 : document.getElementById("mMAlphaText").value / 100,
dashArray:dashArray,
fill: true,
stroke: true
};
layer.setStyle(style);
});
//動態修改點樣式
$("#markerIMG img").click(function(e){
console.log('e',e.target.src);
var icon = L.icon({
iconUrl: e.target.src,
iconSize: [e.target.width,e.target.height],
});
layer.setIcon(icon);
});
}
 
/**
* 彈出顏色選擇器面板
*/
function coloropen(type) {
//初始化顏色面板
colorPick.init();
colorPick.type = type;
document.getElementById("colorpane").style.display = "";
}
/**
* 更改線型
*/
function changelinestyle(index) {
if (index == "0") {
$("#line_preview").css("border-top-style", "solid");
dashArray = [0,0];
}
else {
$("#line_preview").css("border-top-style", "dashed");
dashArray = [5,5];
}
}
/**
* 更改線寬
*/
function changelinewidth(width) {
if (width == "2") {
$("#line_preview").css("border-top-width", "2px");
}
else if (width == "3") {
$("#line_preview").css("border-top-width", "3px");
}
else if (width == "4") {
$("#line_preview").css("border-top-width", "4px");
}
else {
$("#line_preview").css("border-top-width", "8px");
}
weight = width;
}

完整demo源碼見小專欄文章尾部：小專欄

文章尾部提供源代碼下載，對本專欄感興趣的話，能夠關注一波