添加插件(當小模塊使用的時候,可以不引用Lmap.js,直接引用相應插件)
paths
paths: {
"css":"css",
"leaflet": "leaflet-src",
"markercluster":"leaflet.markercluster",
"ChineseTmsProviders": "leaflet.ChineseTmsProviders",//切換地圖地圖插件
"measure": "leaflet.measure",//距離測量插件
"measureArea": "leaflet.area",//面積測量插件
"LMapDraw": "LMapDraw",
"terraformer": "terraformer",
"terraformer-wkt-parser": "terraformer-wkt-parser"
},
changeMap(改變圖層)
changeMap: function (map,layerType) {
if (MapObj.property.baseLayers) {
map.removeLayer(MapObj.property.baseLayers);
}
var Layers = [];
if (layerType == MapObj.property.mapLayerType.google) {
Layers.push(MapObj.mapOpetation.Layer.downloadimage.satellite.setZIndex(0));
Layers.push(MapObj.mapOpetation.Layer.downloadimage.overlay.setZIndex(1));
}
else if (layerType == MapObj.property.mapLayerType.googlevector)
{
//Layers.push(MapObj.mapOpetation.Layer.google.normalMap.setZIndex(0));
Layers.push(MapObj.mapOpetation.Layer.downloadimage.roadmap.setZIndex(0));
}
else if (layerType == MapObj.property.mapLayerType.tianditu)
{
Layers.push(MapObj.mapOpetation.Layer.tianditu.satelliteMap.setZIndex(0));
Layers.push(MapObj.mapOpetation.Layer.tianditu.asatelliteMap.setZIndex(1));
}
else if (layerType == MapObj.property.mapLayerType.tiandituvector)
{
Layers.push(MapObj.mapOpetation.Layer.tianditu.normalMap.setZIndex(0));
Layers.push(MapObj.mapOpetation.Layer.tianditu.annotion.setZIndex(1));
}
MapObj.property.baseLayers = L.layerGroup(Layers);
map.addLayer(MapObj.property.baseLayers);
},
showMap:顯示圖層
showMap: function (mapId, layerType, lon, lat, zoom) {//顯示基本地圖,地圖類型,經度,緯度,放大級別
if (!lat) {
lat = 42.48
}
if (!lon) {
lon = 126.29
}
if (!zoom) {
zoom = 10;
}
if (!layerType) {
layerType = 0;
}
var Layers = [];
if (layerType == MapObj.property.mapLayerType.tianditu) {
Layers.push(MapObj.mapOpetation.Layer.tianditu.satelliteMap);
Layers.push(MapObj.mapOpetation.Layer.tianditu.asatelliteMap);
}
if (layerType == MapObj.property.mapLayerType.tiandituvector) {
Layers.push(MapObj.mapOpetation.Layer.tianditu.normalMap);
Layers.push(MapObj.mapOpetation.Layer.tianditu.annotion);
}
else if (layerType == MapObj.property.mapLayerType.google) {
//__proto__.__proto__.options.__proto__.opacity =
//MapObj.mapOpetation.Layer.google.satelliteMap.setOpacity(1);
Layers.push(MapObj.mapOpetation.Layer.google.satelliteMap);
Layers.push(MapObj.mapOpetation.Layer.google.asatelliteMap);
//Layers.push(MapObj.mapOpetation.Layer.google.asatelliteMap);
}
else if (layerType == MapObj.property.mapLayerType.googlevector) {
Layers.push(MapObj.mapOpetation.Layer.google.normalMap);
}
MapObj.property.baseLayers = L.layerGroup(Layers);
var map = L.map(mapId, {
center: [lat, lon],
zoom: zoom,
doubleClickZoom:false,
//layers: Layers,
zoomControl: false
});
map.addLayer(MapObj.property.baseLayers);
MapObj.toolBar.printer = L.easyPrint({
tileLayer: Layers,
sizeModes: ['Current', 'A4Landscape', 'A4Portrait'],
filename: 'myMap',
exportOnly: true,
hideControlContainer: true
}).addTo(map);
$(".leaflet-control-easyPrint").css("display", "none");
return map
},
toolBar(地圖常用工具條)常用
printMap(打印地圖)
printMap: function (mapObj,name) {//打印地圖
width = mapObj.clientWidth,//shareContent.offsetWidth; //獲取dom 寬度
height = mapObj.clientHeight,//shareContent.offsetHeight; //獲取dom 高度
canvas = document.createElement("canvas"), //創建一個canvas節點
scale = 1; //定義任意放大倍數 支持小數
canvas.width = width * scale; //定義canvas 寬度 * 縮放
canvas.height = height * scale; //定義canvas高度 *縮放
canvas.style.width = mapObj.clientWidth * scale + "px";
canvas.style.height = mapObj.clientHeight * scale + "px";
canvas.getContext("2d").scale(scale, scale); //獲取context,設置scale
var opts = {
scale: scale, // 添加的scale 參數
canvas: canvas, //自定義 canvas
logging: false, //日誌開關,便於查看html2canvas的內部執行流程
width: width, //dom 原始寬度
height: height,
useCORS: true // 【重要】開啓跨域配置
};
var laymsg = layer.msg('生成圖片...', { icon: 16, shade: [0.5, '#f5f5f5'], scrollbar: false, offset: 'auto', time: 100000 });
html2canvas(mapObj.children[0], opts).then(function (canvas) {
// canvas寬度
var canvasWidth = canvas.width;
// canvas高度
var canvasHeight = canvas.height;
// 渲染canvas
//$('.toCanvas').after(canvas);
// 顯示‘轉成圖片’按鈕
//$('.toPic').show(1000);
// 點擊轉成圖片
Canvas2Image.saveAsImage(canvas, canvasWidth, canvasHeight, "png", name);
layer.close(laymsg);
});
},
measureDistince(距離測量)
measureDistince: function (map) {//距離測量
this.removeDrawState();
var config = {
lineColor: 'red',
lineWeight: 2,
lineDashArray: '20, 20',
lineOpacity: 1,
};
measure.initialize(config);
measure.measureDistance(map);
this.curDrawObj = measure;
},
measureArea(測量面積)
measureArea: function (map) {//距離測量
this.removeDrawState();
var config = {
lineColor: 'red',
lineWeight: 2,
lineDashArray: '20, 20',
lineOpacity: 1,
};
measureArea.initialize(config);
measureArea.measureArea(map);
this.curDrawObj = measureArea;
},
registerDrawComplete(註冊編輯事件)
registerDrawComplete: function (map,drawFun,editFun,isBingEdit)//註冊編輯事件
{
Draw.iniDrawComplete(map);
map.on(L.Draw.Event.CREATED, function (e) {
var res = "";
res = MapObj.convert.toWkt(e.layer)
Draw.drawItems.addLayer(e.layer)
drawFun(res,e.layer,e.layerType)
if (isBingEdit) {
//e.layer.on("mousedown", function (m) {
// if (m.originalEvent.button == 2) {
// e.layer.editing.enable();
// editFun(e.layer,e.layerType)
// }
//})
}
});
},
removeDrawState(刪除繪製狀態)
removeDrawState: function () {//刪除繪製狀態
if (this.curDrawObj) {
this.curDrawObj.disable();
}
},
drawLine(畫線)
drawLine: function (map, shapeOptions) {//畫線
this.removeDrawState();
this.curDrawObj = new L.Draw.Polyline(map)
if (shapeOptions) {
this.curDrawObj.options.shapeOptions = shapeOptions
}
this.curDrawObj.enable();
},
drawRectangle (畫矩形)
drawRectangle: function (map, shapeOptions) {
this.removeDrawState();
this.curDrawObj = new L.Draw.Rectangle(map)
if (shapeOptions) {
this.curDrawObj.options.shapeOptions = shapeOptions
}
this.curDrawObj.enable();
},
drawMark(畫圖標)
drawMark: function (map, icon) {//繪製圖標
this.removeDrawState();
this.curDrawObj = new L.Draw.Marker(map);
this.curDrawObj.options.icon = icon;
this.curDrawObj.enable();
},
drawPolygon(畫多邊形)
drawPolygon: function (map,shapeOptions) {//繪製多邊形
this.removeDrawState();
this.curDrawObj = new L.Draw.Polygon(map);
if (shapeOptions) {
this.curDrawObj.options.shapeOptions = shapeOptions
}
this.curDrawObj.enable();
},
drawCircle(畫圓)
drawCircle: function (map, shapeOptions) {//畫圓
this.removeDrawState();
this.curDrawObj = new L.Draw.Circle(map);
if (shapeOptions) {
this.curDrawObj.options.shapeOptions = shapeOptions
}
this.curDrawObj.enable();
}