leaflet——Lmap

添加插件(當小模塊使用的時候,可以不引用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();
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章