leaflet的使用
layui.define([\'jquery\'], function (exports) {
let $ = layui.jquery;
function leafLetHelper() {
}
leafLetHelper.prototype.render = function (option) {
this.config = $.extend({}, this.defaultConfig, option);
this.initLeafLetMap();
if ((this.config.imgUrl || "") !== "") {
this.setLeatletImage(this.config.imgUrl);
}
var _that = this;
return {
changImage: function (imgUrl, successCallback) {
// 更换图片
_that.config.imgUrl = imgUrl;
_that.setLeatletImage(_that.config.imgUrl, successCallback);
},
addMarker: function (option) {
// 添加标记
return _that.addMarker(option);
},
isDisabledMapClick: function (isClick) {
// 是否允许地图点击，设置地图事件时，有效
_that.config.disabledMapClick = isClick;
},
clearAllMarker: function () {
// 清楚所有标记
_that.clearAllMarker();
},
removeSingleMarker: function (id) {
_that.removeSingleMarker(id);
},
addPopup: function (option) {
// 标记点添加弹框
_that.addPopup(option);
},
getImgSize: function () {
// 图片原始大小
return _that.imgSize;
},
setMapBounds: function () {
_that.map.fitBounds(_that.bounds);
_that.map.setZoom(-1);
},
closePopup: function () {
// 关闭弹框
_that.closePopup();
},
openMarkerPopup: function (id) {
_that.openMarkerPopup(id);
},
addTextMarker: function (option) {
return _that.addTextMarker(option);
},
assignBeginIDRemoveMarker: function (beginId) {
_that.assignBeginIDRemoveMarker(beginId);
},
assignBeginIDSetMarkerIcon: function (option) {
_that.assignBeginIDSetMarkerIcon(option);
},
bindDrawPolyline: function (option) {
_that.bindDrawPolyline(option);
},
clearAllPolyline: function () {
_that.clearAllPolyline();
},
bindMapClick: function (callback) {
_that.bindMapClick(callback);
},
addPolyline: function (option) {
_that.addPolyline(option);
}
};
}
// leaflet map对象
leafLetHelper.prototype.map = undefined;
// leaflet 图片范围
leafLetHelper.prototype.bounds = undefined;
// leaflet 图片对象
leafLetHelper.prototype.image = undefined;
// leaflet 弹框对象
leafLetHelper.prototype.popup = undefined;
// 点标记
leafLetHelper.prototype.markers = {};
// 图片原始大小
leafLetHelper.prototype.imgSize = [];
// 默认配置
leafLetHelper.prototype.defaultConfig = {
mapContainer: "map", // map容器（标签ID）
imgUrl: "", // 图层路径
};
// 当前配置
leafLetHelper.prototype.config = {};
/**
* @description: 获取图片真实宽高
* @param {String} data.imgUrl 图片路径
* @param {CallableFunction} data.callback 回掉函数
* @return {VoidFunction}
*/
leafLetHelper.prototype.getImgSize = function (data) {
if ((data.imgUrl || "") === "") {
console.error("图片地址错误");
return;
}
var img = new Image();
img.src = data.imgUrl;
// 如果图片被缓存，则直接返回缓存数据
if (img.complete) {
data.callback(img.width, img.height);
} else {
img.onload = function () {
data.callback(img.width, img.height);
};
}
};
/**
* @description: 获取guid
* @return {String}
*/
leafLetHelper.prototype.newGuid = function () {
return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
var r = (Math.random() * 16) | 0,
v = c == "x" ? r : (r & 0x3) | 0x8;
return v.toString(16);
});
};
/**
* @description: 初始化地图对象
* @return {VoidFunction}
*/
leafLetHelper.prototype.initLeafLetMap = function () {
this.map = L.map(this.config.mapContainer, {
crs: L.CRS.Simple,
minZoom: -5,
maxZoom: 5,
});
if (typeof this.config.mapClick === "function") {
var _that = this;
this.map.on("click", function (e) {
if (_that.config.disabledMapClick) {
return;
}
_that.config.mapClick(e);
});
}
};
/**
* 绑定地图点击
* @param {any} callback
*/
leafLetHelper.prototype.bindMapClick = function (callback) {
this.map.off("click");
this.map.off(\'contextmenu\');
this.map.on("click", function (e) {
callback && callback(e);
});
}
// 线路缓存
leafLetHelper.prototype.polylines = {};
// 画线辅助变量
leafLetHelper.prototype.polyline;
leafLetHelper.prototype.drawing = false;
/**
* 画线
*/
leafLetHelper.prototype.bindDrawPolyline = function (option) {
let latlngs = [];
let realPoint = [];
let realline = undefined;
let _this = this;
option = option || {};
let lineStyle = option.lineStyle || {
weight: \'10\',
color: \'red\'
};
this.map.off(\'click\')
this.map.on(\'click\', function (e) {
// 开始画之前
if (!_this.drawing) {
option.beforeDraw && option.beforeDraw();
}
if (!_this.drawing) {
// 开始画
_this.drawing = true;
$(\'.leaflet-grab\').addClass(\'leaflet-draw\')
_this.map.on(\'mousemove\', function (e) {
realPoint[1] = [e.latlng.lat, e.latlng.lng]
if (realline) {
//realline.remove();
realline.setLatLngs(realPoint);
}
else {
realline = L.polyline(realPoint, lineStyle).addTo(_this.map);
}
})
}
// 记录画的每个点
latlngs.push([e.latlng.lat, e.latlng.lng])
// 显示画的线
if (latlngs.length > 1) {
if (_this.polyline) {
//_this.polyline.remove();
_this.polyline.addLatLng([e.latlng.lat, e.latlng.lng]);
}
else {
_this.polyline = L.polyline(latlngs, lineStyle).addTo(_this.map);
}
}
realPoint[0] = latlngs[latlngs.length - 1];
})
this.map.off(\'contextmenu\')
this.map.on(\'contextmenu\', function (e) {
if (!_this.drawing) {
return;
}
// 结束画线
_this.drawing = false;
// 最后一次显示线
let line = L.polyline(latlngs, lineStyle).addTo(_this.map);
// 保存线路坐标
option.id = option.id || _this.newGuid();
_this.polylines[option.id] = line;
// 点击事件
if (option.click) {
line.on(\'click\', function (e) {
option.click({
id: option.id,
latlngs: line.getLatLngs(),
polyline: line
});
L.DomEvent.stopPropagation(e);
})
}
// 返回坐标
option.completeDraw && option.completeDraw({
id: option.id,
latlngs: line.getLatLngs(),
polyline: line
})
_this.map.off(\'mousemove\')
// 清空当前正在画的记录
if (_this.polyline) {
_this.polyline.remove();
_this.polyline = undefined;
latlngs = [];
}
if (realline) {
realline.remove();
realline = undefined;
realPoint = [];
}
$(\'.leaflet-grab\').removeClass(\'leaflet-draw\')
})
}
/**
* 添加线
* @param {object} option
*/
leafLetHelper.prototype.addPolyline = function (option) {
let _this = this;
// 样式
let lineStyle = option.lineStyle || {
weight: \'10\',
color: \'red\'
};
let line = L.polyline(option.latlngs, lineStyle).addTo(_this.map);
// 保存线路坐标
option.id = option.id || _this.newGuid();
_this.polylines[option.id] = line;
if (option.click) {
line.on(\'click\', function (e) {
option.click({
id: option.id,
latlngs: line.getLatLngs(),
polyline: line
});
L.DomEvent.stopPropagation(e);
})
}
// 返回坐标
option.complete && option.complete({
id: option.id,
latlngs: line.getLatLngs(),
polyline: line
})
}
/**
* 按ID删除线
* @param {any} key
*/
leafLetHelper.prototype.removeSinglePlyline = function (id) {
if (this.polylines[id]) {
this.polylines[id].remove();
delete this.polylines[id];
}
}
/**
* 删除全部线条
*/
leafLetHelper.prototype.clearAllPolyline = function () {
let _this = this;
$.each(_this.polylines, function (i, item) {
item.remove();
})
_this.polylines = {};
}
/**
* @description: 设置图层
* @param {String} 图片路径
* @return {VoidFunction}
*/
leafLetHelper.prototype.setLeatletImage = function (imgUrl, callback) {
var _that = this;
this.getImgSize({
imgUrl: imgUrl,
callback: function (w, h) {
_that.bounds = [
[0, 0],
[h, w],
];
if (_that.image) {
_that.image.setUrl(imgUrl);
_that.image.setBounds(_that.bounds);
} else {
_that.image = L.imageOverlay(imgUrl, _that.bounds).addTo(_that.map);
_that.map.fitBounds(_that.bounds);
}
_that.map.setZoom(-1);
_that.imgSize = [w, h];
// 限定拖动范围
//_that.map.setMaxBounds(_that.bounds)
// 切换成功后的执行函数
if (typeof callback === \'function\') {
callback(w, h)
}
},
});
};
/**
* @description: 添加标记
* @param {object} option.icon leaflet icon对象
* @param {Array} option.position 图标位置
* @param {String} option.id 标记唯一标识
* @return {marker} marker对象
*/
leafLetHelper.prototype.addMarker = function (option) {
icon = option.icon || {};
var myIcon = L.icon({
iconUrl: icon.iconUrl || "/images/d_marker.png",
iconSize: icon.iconSize || [32, 32],
iconAnchor: icon.iconAnchor || [16, 32],
popupAnchor: icon.popupAnchor || [0, -32], // 弹框打开得坐标
});
option.id = option.id || this.newGuid();
var marker = L.marker(option.position, { icon: myIcon }).addTo(this.map);
this.markers[option.id] = marker;
if (typeof option.iconClick === "function") {
marker.on("click", function (e) {
option.iconClick(e, option.data);
L.DomEvent.stopPropagation(e);
});
}
return marker;
};
/**
* @description: 清除所有标记
* @return {VoidFunction}
*/
leafLetHelper.prototype.clearAllMarker = function () {
$.each(this.markers, function (i, item) {
item.remove();
});
this.markers = {};
};
/**
* @description: 删除指定的marker
* @param {String} id 唯一标记
* @return {VoidFunction}
*/
leafLetHelper.prototype.removeSingleMarker = function (id) {
var marker = this.markers[id];
if (marker) {
marker.remove();
}
delete marker;
}
/**
* @description: 按ID起始匹配，删除指定的marker
* @param {String} beginID ID开头部分
* @return {VoidFunction}
*/
leafLetHelper.prototype.assignBeginIDRemoveMarker = function (beginID) {
var tempMarkerIds = [];
var _that = this;
$.each(this.markers, function (key, marker) {
if (key.indexOf(beginID) == 0) {
tempMarkerIds.push(key);
marker.remove();
}
})
$.each(tempMarkerIds, function (i, item) {
delete _that.markers[item];
})
}
leafLetHelper.prototype.assignBeginIDSetMarkerIcon = function (option) {
var tempMarkers = [];
$.each(this.markers, function (key, marker) {
if (key.indexOf(option.beginId) == 0) {
tempMarkers.push(marker);
}
})
icon = option.iconSize || {};
icon.iconSize = option.iconSize || [45, 45];
$.each(tempMarkers, function (i, item) {
var myIcon = item.getIcon()
myIcon.options = {
iconUrl: myIcon.options.iconUrl,
iconSize: icon.iconSize,
iconAnchor: icon.iconAnchor || [icon.iconSize[0] / 2, icon.iconSize[1]],
popupAnchor: icon.popupAnchor || [0, -icon.iconSize[1]], // 弹框打开得坐标
}
item.setIcon(myIcon);
})
}
/**
* @description: 添加弹框（可封装可不封装）
* @param {layer} layer layer对象
* @param {String} html 弹框中的内容
* @param {String} className 自定义样式
* @param {Boolean} isOpen 是否默认打开
* @return {VoidFunction}
*/
leafLetHelper.prototype.addPopup = function (option) {
//marker, html, className, isOpen, isShowCloseBtn
var layer = option.layer;
var html;
if (option.html && option.html.jquery) { // is jQuery对象
html = option.html[0]
}
else {
html = option.html
}
this.popup = layer.bindPopup(html, {
className: option.className || "",
closeButton: option.isShowCloseBtn === undefined ? true : option.isShowCloseBtn
});
if (option.isOpen) {
this.popup.openPopup();
}
};
/**
* @description: 关闭弹框
* @return {VoidFunction}
*/
leafLetHelper.prototype.closePopup = function () {
if (this.popup) {
this.popup.closePopup();
}
}
/**
* @description: 打开指定marker的弹框
* @param {String} id marker的唯一标识
* @return {VoidFunction}
*/
leafLetHelper.prototype.openMarkerPopup = function (id) {
var marker = this.markers[id]
if (marker) {
marker.openPopup();
}
}
/**
* @description: 添加文字marker
* @param {String} option.className 自定义类名
* @param {Object} option.html 自定义html内容
* @param {Number} option.lat 纬度
* @param {Number} option.lng 经度
* @param {Function} option.iconClick marker点击事件
* @return {VoidFunction}
*/
leafLetHelper.prototype.addTextMarker = function (option) {
var html = \'\';
if (option.html && option.html.jquery) { // is jQuery对象
html = option.html[0]
}
else {
html = option.html
}
var myIcon = L.divIcon({
className: option.className || \'\',
html: html || \'\'
});
var marker = L.marker([option.lat, option.lng], { icon: myIcon }).addTo(this.map);
if (typeof option.iconClick === "function") {
marker.on("click", function (e) {
option.iconClick(e, option.data);
});
}
return marker;
}
exports(\'leaflet\', new leafLetHelper());
})
版权声明：本文为zhoushangwu原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。