热点图像区域编辑功能的实现，能够在图片上绘

leaflet(v0.7.7)
leaflet.draw(v0.4.9)
leaflet.label
sweetalert2
pinyinjs
jquery(v3.1.1)

http://demo.laji.blog/hotspots

https://github.com/xiaomai0830/leaflet-image-hotspots

###遇到的各种问题的解决方法和解答出处

应该addTo(drawnItems)而不是addTo(map)
Leaflet/Leaflet.draw#159

添加以下代码：

L.Edit.Circle.include({ _move: function (latlng) { var resizemarkerPoint = this._getResizeMarkerPoint(latlng); // Move the resize marker this._resizeMarkers[0].setLatLng(resizemarkerPoint); // Move the circle this._shape.setLatLng(latlng); // output the radius, for debugging purpose. document.getElementById("radius").innerHTML = this._shape._radius; } }); // Correct Leaflet L.Circle for use with flat map. Comment the following function to see the original impact on radius when the circle is dragged along the vertical axis. L.Circle.include({ _getLngRadius: function () { return this._getLatRadius(); } });

https://stackoverflow.com/questions/29366268/leaflet-circle-drawing-editing-issue
http://jsfiddle.net/jameslaneconkling/mhpd9ca5

方法一：通过修改Marker的icon来实现
https://stackoverflow.com/questions/41082236/leafletjs-l-divicon-html-marker-text-scale-relative-to-map-zoom

方法二：添加以下代码(参照别人的代码改的,但在画polygon的时候会出现无法使用setText方法的问题，后来改用include就可以了)：

//添加文字 var original_getPathString_circle = L.Circle.prototype.getPathString; L.Circle.include({ getPathString: function () { var center = this._point, r = this._radius; if (this._textNode && this._textNode.parentNode) { this._path.parentNode.removeChild(this._textNode); delete this._textNode; } var textNode = L.Path.prototype._createElement('text'); textNode.setAttribute('text-anchor', 'middle'); textNode.setAttribute('style', 'font-weight:bold'); textNode.setAttribute('x', center.x); textNode.setAttribute('y', center.y); var font_size; if(this._map.getZoom()>0){ font_size = (textFontSize_default+4) * this._map.getZoom()*2; }else{ font_size = textFontSize_default; } textNode.setAttribute('font-size', font_size ); textNode.appendChild(document.createTextNode((this.text)?this.text:'')); this._path.parentNode.appendChild(textNode); this._textNode = textNode; return original_getPathString_circle.call(this); }, setText: function (text) { this.text = text; return this.redraw(); } }); var original_getPathString_rectangle = L.Rectangle.prototype.getPathString; L.Rectangle.include({ getPathString: function () { var center = map.latLngToLayerPoint(this.getBounds().getCenter()); if (this._textNode && this._textNode.parentNode) { this._path.parentNode.removeChild(this._textNode); delete this._textNode; } var textNode = L.Path.prototype._createElement('text'); textNode.setAttribute('text-anchor', 'middle'); textNode.setAttribute('style', 'font-weight:bold'); textNode.setAttribute('x', center.x); textNode.setAttribute('y', center.y); var font_size; if(this._map.getZoom()>0){ font_size = (textFontSize_default+4) * this._map.getZoom()*2; }else{ font_size = textFontSize_default; } textNode.setAttribute('font-size', font_size ); textNode.appendChild(document.createTextNode((this.text)?this.text:'')); this._path.parentNode.appendChild(textNode); this._textNode = textNode; return original_getPathString_rectangle.call(this); }, setText: function (text) { this.text = text; return this.redraw(); } }); var original_getPathString_polygon = L.Polygon.prototype.getPathString; L.Polygon.include({ getPathString: function () { var center = map.latLngToLayerPoint(this.getBounds().getCenter()); if (this._textNode && this._textNode.parentNode) { this._path.parentNode.removeChild(this._textNode); delete this._textNode; } var textNode = L.Path.prototype._createElement('text'); textNode.setAttribute('text-anchor', 'middle'); textNode.setAttribute('style', 'font-weight:bold'); textNode.setAttribute('x', center.x); textNode.setAttribute('y', center.y); var font_size; if(this._map.getZoom()>0){ font_size = (textFontSize_default+4) * this._map.getZoom()*2; }else{ font_size = textFontSize_default; } textNode.setAttribute('font-size', font_size ); textNode.appendChild(document.createTextNode((this.text)?this.text:'')); this._path.parentNode.appendChild(textNode); this._textNode = textNode; return original_getPathString_polygon.call(this); }, setText: function (text) { this.text = text; return this.redraw(); } });

https://stackoverflow.com/questions/39367040/can-i-have-fixed-text-in-leaflet

Circle可直接用_point属性，Rectangle、Polygon要用map.latLngToLayerPoint(this.getBounds().getCenter())来获取。
https://stackoverflow.com/questions/13316925/simple-label-on-a-leaflet-geojson-polygon