/*
|
* L.CircleEditor is an extension of L.Circle, just to add the edition part (remember, radius in meters).
|
*/
|
'use strict'
|
/* eslint-disable */
|
import dragPng from '../../assets/images/map-pages/buffer/area_query_drag.png'
|
// const init = (L) => {
|
L.CircleEditor = L.Circle.extend ({
|
|
options: {
|
icon: new L.Icon({
|
iconUrl: dragPng,
|
iconSize: [30,30],
|
//className: 'leaflet-div-icon leaflet-editing-icon'
|
}),
|
extendedIconClass : 'extend-icon'
|
},
|
|
onAdd: function (map) {
|
L.Path.prototype.onAdd.call(this, map);
|
|
this.addHooks();
|
},
|
|
onRemove: function (map) {
|
this.removeHooks();
|
|
L.Path.prototype.onRemove.call(this, map);
|
},
|
|
|
addHooks: function () {
|
if (this._map) {
|
if (!this._markerGroup) {
|
this._initMarkers();
|
}
|
this._map.addLayer(this._markerGroup);
|
}
|
},
|
|
removeHooks: function () {
|
if (this._map) {
|
this._map.removeLayer(this._markerGroup);
|
delete this._markerGroup;
|
delete this._markers;
|
}
|
},
|
|
updateMarkers: function () {
|
this._markerGroup.clearLayers();
|
this._initMarkers();
|
},
|
|
_initMarkers: function () {
|
this._markerGroup = new L.LayerGroup();
|
this._markers = [];
|
|
var markerCenter = this._createMarker(this._latlng, 0, true);
|
this._markers.push(markerCenter);
|
|
var circleBounds = this.getBounds(),
|
center = circleBounds.getCenter(),
|
neCoord = circleBounds.getNorthEast(),
|
northCenterCoord = new L.LatLng(center.lat, neCoord.lng, true);
|
var markerNorthCenter = this._createMarker(northCenterCoord, 1);
|
this._markers.push(markerNorthCenter);
|
|
//xinzeng label
|
var newNeCoord = Number(neCoord.lng.toFixed(6))+Number(0.006030);
|
var labelCenterCood = new L.LatLng(center.lat,newNeCoord, true);
|
var markerLabel = this._createLableMaker(labelCenterCood,2,this.getRadius())
|
this._markers.push(markerLabel);
|
},
|
|
_createLableMaker:function(latlng,index,radius){
|
var html = parseInt(radius/1000) + "Km";
|
var icon = new L.DivIcon({
|
html:html,
|
iconSize: new L.Point(30, 15),
|
className: 'customLabel'
|
});
|
var marker = new L.Marker(latlng, {
|
// draggable: true,
|
icon: icon
|
});
|
marker._origLatLng = latlng;
|
marker._index = index;
|
// marker._isCenter = isCenter;
|
this._markerGroup.addLayer(marker);
|
return marker;
|
},
|
|
_createMarker: function (latlng, index, isCenter) {
|
if(isCenter){
|
var marker = new L.Marker(latlng, {
|
draggable: true,
|
icon: this.options.icon,
|
opacity :0
|
});
|
}else{
|
var marker = new L.Marker(latlng, {
|
draggable: true,
|
icon: this.options.icon
|
});
|
}
|
|
|
if (isCenter === undefined) {
|
isCenter = false;
|
}
|
//console.log("this is center point: " + isCenter);
|
|
marker._origLatLng = latlng;
|
marker._index = index;
|
marker._isCenter = isCenter;
|
|
if (isCenter) {
|
//marker.on('drag', this._onCenterMove, this)
|
// .on('dragend', this._onCenterMoveEnd, this);
|
} else {
|
marker.on('drag', this._onMarkerDrag, this);
|
marker.on('dragend', this._fireEdit, this)
|
.on('mouseover', this._onMouseOver, this)
|
.on('mouseout', this._onMouseOut, this);
|
}
|
|
|
this._markerGroup.addLayer(marker);
|
|
return marker;
|
},
|
_onMouseOver: function (e) {
|
var target = e.target,
|
icon = target._icon,
|
classValues = icon.getAttribute("class");
|
//icon.setAttribute("class", "extend-icon " + classValues);
|
icon.setAttribute("class", this.options.extendedIconClass + " " + classValues);
|
},
|
_onMouseOut: function (e) {
|
var target = e.target,
|
icon = target._icon,
|
classValues = icon.getAttribute("class");
|
//icon.setAttribute("class", classValues.replace("extend-icon", ""));
|
icon.setAttribute("class", classValues.replace(this.options.extendedIconClass, ""));
|
},
|
|
_fireEdit: function () {
|
this.fire('edit');
|
},
|
|
_onCenterMove: function (e) {
|
var marker = e.target;
|
//console.log("center move - START");
|
|
L.Util.extend(marker._origLatLng, marker._latlng);
|
|
var mm = this._markers[1];
|
mm.setOpacity(0.1);
|
|
this.redraw();
|
|
//console.log("END");
|
},
|
|
_onCenterMoveEnd: function (e) {
|
var marker = e.target;
|
|
//now resetting the side point
|
var circleBounds = this.getBounds(),
|
center = circleBounds.getCenter(),
|
neCoord = circleBounds.getNorthEast(),
|
northCenterCoord = new L.LatLng(center.lat, neCoord.lng, true);
|
|
var mm = this._markers[1];
|
mm.setLatLng(northCenterCoord);
|
mm.setOpacity(1);
|
|
this.fire('centerchange');
|
},
|
|
_onMarkerDrag: function (e) {
|
var marker = e.target;
|
//console.log("marker drag - START");
|
var center = this._markers[0].getLatLng();
|
var axis = marker._latlng;
|
|
var distance = center.distanceTo(axis);
|
|
this.setRadius(distance);
|
|
this.redraw();
|
//console.log("END");
|
|
this.fire('radiuschange');
|
|
|
this._markerGroup.removeLayer(this._markers[2]);
|
this._markers.pop();
|
|
var circleBounds = this.getBounds(),
|
center = circleBounds.getCenter(),
|
neCoord = circleBounds.getNorthEast();
|
var newNeCoord = Number(neCoord.lng.toFixed(6))+Number(0.011010);
|
var labelCenterCood1 = new L.LatLng(center.lat,newNeCoord, true);
|
var markerLabel1 = this._createLableMaker(labelCenterCood1,2,this.getRadius())
|
this._markers.push(markerLabel1);
|
},
|
|
centerchange: function() {},
|
radiuschange: function() {}
|
});
|
// }
|
//
|
// export default {
|
// init
|
// }
|
