Leaflet弹框Popup带输入框input、按钮button

效果如图：

点击某个图层弹框，带输入框input、按钮button，同时还要能获取输入框的值（使用 Leaflet 自带的Popup）。本来这个功能用 iview 的 Modal 实现了，但是用 Leaflet 自带的Popup 实现一直没找到该怎么做，故记录一下。

1、基本用法

 官网的例子：Quick Start Guide - Leaflet - 一个交互式地图 JavaScript 库

marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
circle.bindPopup("I am a circle.");
polygon.bindPopup("I am a polygon.");

2、添加输入框、按钮：

需要用到原生的 javascript 创建元素，之前没写过，找了很久。

1. 通过 element.value 获取元素的值。
2. 通过 element.onclick 绑定点击事件。
3. 通过 element.appendChild 添加子元素。
4. 通过 layer.bindPopup(element) 绑定弹框到某个图层。
5. 通过 layer.openPopup() 打开弹框。
6. 通过 layer.closePopup() 关闭弹框。

//创建了commit按钮
var buttonDiv = document.createElement('div');
var commitButton = document.createElement('input');
commitButton.type = 'button';
commitButton.value = "提交";
commitButton.onclick = function () {
  let layerProperties = e.layer.options;
  //-----------------获取输入框的值------------
  layerProperties.name = nameInput.value;
  layerProperties.num = numInput.value;
  layerProperties.description = descriptionInput.value;
  //------------------------------
  // console.log(e.layer.options);
  e.layer.closePopup();
  geojsonLayers.addLayer(e.layer);
};
buttonDiv.appendChild(commitButton);

var deleteButton = document.createElement('input');
deleteButton.type = 'button';
deleteButton.value = "删除";
deleteButton.onclick = function () {
  e.layer.closePopup();
  // 此时还未add
  // geojsonLayers.removeLayer(e.layer);
};
buttonDiv.appendChild(deleteButton);
var parentDiv = document.createElement('div');

var commentDiv = document.createElement('div');
// 区域名称
var nameSpan = document.createTextNode('区域名称: ');
var nameInput = document.createElement('input');
nameInput.type = 'text';
nameInput.size = 20;
commentDiv.appendChild(nameSpan);
commentDiv.appendChild(nameInput);
// 编号
var numSpan = document.createTextNode('编号: ');
var numInput = document.createElement('input');
numInput.type = 'text';
numInput.size = 20;
commentDiv.appendChild(numSpan);
commentDiv.appendChild(numInput);
// 描述
var descriptionSpan = document.createTextNode('描述: ');
var descriptionInput = document.createElement('input');
descriptionInput.type = 'text';
descriptionInput.size = 20;
commentDiv.appendChild(descriptionSpan);
commentDiv.appendChild(descriptionInput);

parentDiv.appendChild(commentDiv);
parentDiv.appendChild(buttonDiv);

//bindPopup绑定弹窗，openPopup打开弹窗
e.layer.bindPopup(parentDiv).openPopup();