leaflet二次封装

1.相关插件

       "leaflet": "^1.3.4",
        "leaflet-draw": "^1.0.4",
        "leaflet-imageoverlay-rotated": "^0.2.1",
        "leaflet-measure": "^3.1.0",
        "leaflet-side-by-side": "^2.1.0",
        "leaflet.measurecontrol": "^1.1.0",
       "wkt-parser-helper": "^2.0.0"//wkt和Geojson转换工具

import * as L from "leaflet";
import Vue from "vue";
import {
    WMTS
} from "./WMTS";

import {
    DomUtil
} from "leaflet/dist/leaflet-src.esm";
let VCharts = require("echarts/lib/echarts");
require("echarts/lib/chart/bar");
require("echarts/lib/chart/pie");
// 引入提示框和title组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
import icon from "leaflet/dist/images/marker-icon.png";
import iconShadow from "leaflet/dist/images/marker-shadow.png";
Vue.config.productionTip = false;
Vue.use(VCharts);
let esri = require("esri-leaflet");
// import
let GeowayMap = function() {
    /**
     * 地图对象
     */
    this.geowayMap = null;
    /**
     *获取地图对象
     **/
    this.getMap = () => this.geowayMap;
    /**
     *编辑图层
     **/

    this.editLayer = null;
    // 卷帘
    this.mapSplitControl = null;
    /**
     *获取编辑图层
     */
    this.DRAWING = false; // 是否正在绘制
    this.BarDRAWLAYERS = []; // 测距图层存储
    this.ISMEASURE = true; // 是否是量距
    this.MEASURETOOLTIP; // 量距提示
    this.DRAWMOVEPOLYLINE; // 绘制过程中的折线
    this.DRAWPOLYLINEPOINTS = []; // 绘制的折线的节点集
    this.MEASURERESULT = 0;
    this.DRAWMOVEPOLYGON; // 绘制过程中的面
    this.DRAWPOLYGONPOINTS = []; // 绘制的面的节点集
    this.BarAreaLAYERS = [];
    this.DRAWPOLYGON;
    this.markerGroups = null; //聚合点存放
    this.getEditLayer = () => this.editLayer;
    this.getContainer = function() {
        return this.geowayMap._container;
    };
    // 测距
    this.startDrawLine = function(ISMEASURE) {
        let DRAWPOLYLINE = [];
        let _this = this;
        _this.ISMEASURE = ISMEASURE;
        _this.getContainer().style.cursor = "crosshair";
        _this.MEASURERESULT = 0;
        // _this.geowayMap.getContainer().style.cursor = "crosshair";
        _this.geowayMap.on("mousedown", function(e) {
            _this.DRAWING = true;
            _this.DRAWPOLYLINEPOINTS.push(e.latlng);
            if (_this.DRAWPOLYLINEPOINTS.length > 1 && _this.ISMEASURE) {
                _this.MEASURERESULT += e.latlng.distanceTo(
                    _this.DRAWPOLYLINEPOINTS[_this.DRAWPOLYLINEPOINTS.length - 2]
                );
            }
            DRAWPOLYLINE.addLatLng(e.latlng);
        });
        _this.geowayMap.on("mousemove", function(e) {
            if (_this.DRAWING) {
                if (
                    _this.DRAWMOVEPOLYLINE != undefined &&
                    _this.DRAWMOVEPOLYLINE != null
                ) {
                    _this.editLayer.removeLayer(_this.DRAWMOVEPOLYLINE);
                }
                let prevPoint =
                    _this.DRAWPOLYLINEPOINTS[_this.DRAWPOLYLINEPOINTS.length - 1];
                _this.DRAWMOVEPOLYLINE = new L.Polyline(
                    [prevPoint, e.latlng],
                    shapeOptions
                );
                _this.editLayer.addLayer(_this.DRAWMOVEPOLYLINE);

                if (ISMEASURE) {
                    let distance =
                        _this.MEASURERESULT +
                        e.latlng.distanceTo(
                            _this.DRAWPOLYLINEPOINTS[_this.DRAWPOLYLINEPOINTS.length - 1]
                        );
                    _this.MEASURETOOLTIP.updatePosition(e.latlng);
                    _this.MEASURETOOLTIP.updateContent({
                        text: "单击确定点，双击结束！",
                        subtext: "总长：" + (distance / 1000).toFixed(2) + "公里",
                    });
                }
            }
        });

        _this.geowayMap.on("dblclick", function(e) {
            _this.getContainer().style.cursor = "";
            if (_this.DRAWING) {
                if (
                    _this.DRAWMOVEPOLYLINE != undefined &&
                    _this.DRAWMOVEPOLYLINE != null
                ) {
                    _this.editLayer.removeLayer(_this.DRAWMOVEPOLYLINE);
                    _this.DRAWMOVEPOLYLINE = null;
                }

                if (_this.DRAWPOLYLINEPOINTS.length > 1 && ISMEASURE) {
                    _this.MEASURERESULT += e.latlng.distanceTo(
                        _this.DRAWPOLYLINEPOINTS[_this.DRAWPOLYLINEPOINTS.length - 2]
                    );

                    let distanceLabel = L.marker(
                        _this.DRAWPOLYLINEPOINTS[_this.DRAWPOLYLINEPOINTS.length - 1], {
                            icon: new L.divIcon({
                                className: "DistanceLabelStyle",
                                iconAnchor: [-8, 15],
                                html: "<span class='bubbleLabel'><span class='bubbleLabel-bot bubbleLabel-bot-left'></span><span class='bubbleLabel-top bubbleLabel-top-left'></span><span>总长：" +
                                    (_this.MEASURERESULT / 1000).toFixed(2) +
                                    "公里" +
                                    "</span></span>",
                            }),
                        }
                    ).addTo(_this.editLayer);

                    _this.BarDRAWLAYERS.push(distanceLabel);
                }

                // 移除提示框
                if (_this.MEASURETOOLTIP) {
                    _this.MEASURETOOLTIP.dispose();
                }
                _this.BarDRAWLAYERS.push(DRAWPOLYLINE);
                _this.DRAWPOLYLINEPOINTS = [];
                _this.DRAWING = false;
                _this.ISMEASURE = false;
                _this.geowayMap.off("mousedown");
                _this.geowayMap.off("mousemove");
                _this.geowayMap.off("dblclick");
            }
        });
        let shapeOptions = {
            color: "#F54124",
            weight: 3,
            opacity: 0.8,
            fill: false,
            clickable: true,
        };
        DRAWPOLYLINE = new L.Polyline([], shapeOptions);
        _this.editLayer.addLayer(DRAWPOLYLINE);
        if (_this.ISMEASURE) {
            _this.MEASURETOOLTIP = new L.Tooltip(_this.geowayMap);
        }
    };
    // 测面
    this.startDrawPolygon = function(ISMEASURE) {
        let _this = this;
        _this.ISMEASURE = ISMEASURE;
        _this.MEASURERESULT = 0;
        _this.getContainer().style.cursor = "crosshair";
        _this.geowayMap.on("mousedown", function(e) {
            _this.DRAWING = true;
            _this.DRAWPOLYGONPOINTS.push(e.latlng);
            _this.DRAWPOLYGON.addLatLng(e.latlng);
        });
        _this.geowayMap.on("mousemove", function(e) {
            if (_this.DRAWING) {
                if (
                    _this.DRAWMOVEPOLYGON != undefined &&
                    _this.DRAWMOVEPOLYGON != null
                ) {
                    _this.editLayer.removeLayer(_this.DRAWMOVEPOLYGON);
                }
                let prevPoint =
                    _this.DRAWPOLYGONPOINTS[_this.DRAWPOLYGONPOINTS.length - 1];
                let firstPoint = _this.DRAWPOLYGONPOINTS[0];
                _this.DRAWMOVEPOLYGON = new L.Polygon(
                    [firstPoint, prevPoint, e.latlng],
                    shapeOptions
                );
                _this.editLayer.addLayer(_this.DRAWMOVEPOLYGON);

                if (_this.ISMEASURE && _this.DRAWPOLYGONPOINTS.length > 1) {
                    let tempPoints = [];
                    for (let i = 0; i < _this.DRAWPOLYGONPOINTS.length; i++) {
                        tempPoints.push(_this.DRAWPOLYGONPOINTS[i]);
                    }
                    tempPoints.push(e.latlng);
                    let distance = _this.calArea(tempPoints);
                    _this.MEASUREAREATOOLTIP.updatePosition(e.latlng);
                    _this.MEASUREAREATOOLTIP.updateContent({
                        text: "单击确定点，双击结束！",
                        subtext: "总面积：" + (distance / 1000000).toFixed(3) + "平方公里",
                    });
                }
            }
        });

        _this.geowayMap.on("dblclick", function(e) {
            _this.getContainer().style.cursor = "";
            if (_this.DRAWING) {
                if (
                    _this.DRAWMOVEPOLYGON != undefined &&
                    _this.DRAWMOVEPOLYGON != null
                ) {
                    _this.editLayer.removeLayer(_this.DRAWMOVEPOLYGON);
                    _this.DRAWMOVEPOLYGON = null;
                }

                if (_this.DRAWPOLYGONPOINTS.length > 2 && _this.ISMEASURE) {
                    _this.MEASURERESULT = _this.calArea(_this.DRAWPOLYGONPOINTS);

                    let distanceLabel = L.marker(e.latlng, {
                        icon: new L.divIcon({
                            className: "DistanceLabelStyle",
                            iconAnchor: [-8, 15],
                            html: "<span class='bubbleLabel'><span class='bubbleLabel-bot bubbleLabel-bot-left'></span><span class='bubbleLabel-top bubbleLabel-top-left'></span><span>总面积：" +
                                (_this.MEASURERESULT / 1000000).toFixed(3) +
                                "平方公里" +
                                "</span></span>",
                        }),
                    }).addTo(_this.editLayer);

                    _this.BarDRAWLAYERS.push(distanceLabel);
                }

                // 移除提示框
                if (_this.MEASUREAREATOOLTIP) {
                    _this.MEASUREAREATOOLTIP.dispose();
                }

                _this.BarDRAWLAYERS.push(_this.DRAWPOLYGON);
                _this.DRAWPOLYGONPOINTS = [];
                _this.DRAWING = false;
                _this.ISMEASURE = false;
                _this.geowayMap.off("mousedown");
                _this.geowayMap.off("mousemove");
                _this.geowayMap.off("dblclick");
            }
        });

        let shapeOptions = {
            color: "#F54124",
            weight: 3,
            opacity: 0.8,
            fill: true,
            fillColor: null,
            fillOpacity: 0.2,
            clickable: true,
        };
        _this.DRAWPOLYGON = new L.polygon([], shapeOptions);
        _this.editLayer.addLayer(_this.DRAWPOLYGON);
        if (_this.ISMEASURE) {
            _this.MEASUREAREATOOLTIP = new L.Tooltip(_this.editLayer);
        }
    };
    // 面积计算
    this.calArea = function(latLngs) {
        let pointsCount = latLngs.length,
            area = 0.0,
            d2r = Math.PI / 180,
            p1,
            p2;
        if (pointsCount > 2) {
            for (let i = 0; i < pointsCount; i++) {
                p1 = latLngs[i];
                p2 = latLngs[(i + 1) % pointsCount];
                area +=
                    (p2.lng - p1.lng) *
                    d2r *
                    (2 + Math.sin(p1.lat * d2r) + Math.sin(p2.lat * d2r));
            }
            area = (area * 6378137.0 * 6378137.0) / 2.0;
        }
        return Math.abs(area);
    };
    // 清除测面、测距
    this.clearMap = function() {
        let _this = this;
        // 关闭测距提示框
        if (_this.MEASURETOOLTIP) {
            _this.MEASURETOOLTIP.dispose();
        }
        // 关闭测面提示框
        if (_this.MEASUREAREATOOLTIP) {
            _this.MEASUREAREATOOLTIP.dispose();
        }

        // array exists and is not empty
        if (_this.BarDRAWLAYERS.length > 0) {
            for (let i = 0; i < _this.BarDRAWLAYERS.length; i++) {
                _this.geowayMap.removeLayer(_this.BarDRAWLAYERS[i]);
            }
            _this.BarDRAWLAYERS = [];
        }
        // 清除聚合点
        if (_this.markerGroups) {
            _this.markerGroups.clearLayers();
        }
    };
    /**
     * 初始化地图
     */
    this.initMap = function(mapdiv, cfg) {
        this.mapLayer = null;
        this.editLayer = null;
        this.geowayMap = null;
        this.geowayMap = L.map(mapdiv, {
            crs: cfg.mapInfo.crs,
            zoomControl: true,
            center: cfg.mapInfo.center,
            zoom: cfg.mapInfo.level,
            // minZoom: cfg.mapInfo.minlevel,
            // maxZoom: cfg.mapInfo.maxlevel,
            doubleClickZoom: false,
            // measureControl: true,
            /* fullscreenControl: true,
                  fullscreenControlOptions: { // optional
                    title:"全屏",
                    position: 'topright'
                  } */
            // maxBounds:cfg.mapInfo.maxBounds
        });
        this.initMapLayer();
        this.initManagerLayer();
        this.Switchmap();
        // this.getMapServer(config)
    };
    /**
     *添加辅助图层管理
     */
    this.initManagerLayer = function() {
        // 编辑图层
        this.editLayer = L.featureGroup();
        this.geowayMap.addLayer(this.editLayer);
    };
    /**
     *添加底图图层管理
     */
    this.initMapLayer = function() {
        //编辑图层
        this.mapLayer = L.featureGroup();
        this.geowayMap.addLayer(this.mapLayer);
    };
    /**
     *初始化地图控件
     *map 地图对象
     *config 控件显示配置
     **/
    this.initBaseControls = (config) => {
        if (typeof config === "undefined") config = {};
        // 加载比例尺
        if (!config.hasOwnProperty("IsScale") || config.IsScale == true) {
            L.control.scale().addTo(this.geowayMap);
            L.control
                .zoom({
                    zoomInTitle: "放大",
                    zoomOutTitle: "缩小",
                    position: "topright",
                })
                .addTo(this.geowayMap);
            L.control.mousePosition().addTo(this.geowayMap);
        }
    };
    this.dynamicMapLayerLoadMap = (config) => {
        let envLayer = esri
            .dynamicMapLayer({
                url: config.url,
                opacity: config.opacity,
                f: config.f,
            })
            .addTo(this.editLayer);
        return envLayer;
    };
    /**
     *初始化图层
     *@param layers添加图层数组
     *@param config图层配置信息
     */
    this.addMapLayers = (layers, config) => {
        if (typeof config === "undefined") layers = [];
        for (let count = 0; count < layers.length; count++) {
            let layerinfo = layers[count];
            if (layerinfo.serviceType === "wmts") {
                this.addMapLayer(layerinfo);
            } else {
                L.tileLayer(layerinfo.url, {
                    tileSize: 256,
                    zoomOffset: 1,
                    attribution: layerinfo.attribution,
                    isBaseLayer: layerinfo.isBaseLayer,
                    subdomains: layerinfo.subdomains,
                }).addTo(this.geowayMap);
            }
        }
    };
    /**
     * 添加图层信息
     * @param layerinfo图层信息
     */
    this.addMapLayer = function(layerinfo) {
        let layer = null;
        let visibility =
            typeof layerinfo.visibility === "undefined" ? true : layerinfo.visibility;
        let isBaseLayer =
            typeof layerinfo.isBaseLayer === "undefined" ?
            false :
            layerinfo.isBaseLayer;
        switch (layerinfo.serviceType) {
            case "wmts":
                let style = "default";
                let format =
                    typeof layerinfo.format === "undefined" ?
                    "image/png" :
                    layerinfo.format;
                let layerleName;
                let tilematrixSet =
                    typeof layerinfo.tilematrixSet === "undefined" ?
                    "" :
                    layerinfo.tilematrixSet;
                const matrixIds = [];
                for (let i = 0; i < 15; ++i) {
                    matrixIds[i] = {
                        identifier: "" + (i + 1),
                        topLeftCorner: new L.LatLng(90, -180),
                    };
                }
                layer = new L.TileLayer.WMTS(layerinfo.url, {
                    layer: layerinfo.layer,
                    style: "",
                    tilematrixSet: tilematrixSet,
                    format: format,
                    matrixIds: matrixIds,
                    attribution: layerinfo.attribution,
                });
                break;
        }
        if (layer != null) {
            this.geowayMap.addLayer(layer);
        }
        return layer;
    };
    /**
     * 清除地图上所有图层
     */
    this.removeDrawLayer = () => {
        this.editLayer.clearLayers();
        if (this.mapSplitControl) {
            this.mapSplitControl.remove();
            this.mapSplitControl = null;
        }
    };
    /**
     * 清除地图底图所有图层
     */
    this.removeMapLayer = () => {
        this.mapLayer.clearLayers();
    };
    /**
     * 全幅
     */
    this.fullMap = () => {
        this.geowayMap.setView([37, 102], 3);
    };

    /**
     * 放大按钮
     */
    this.zoomOut = () => {
        this.geowayMap.zoomOut();
    };

    /**
     * 缩小按钮
     */
    this.zoomIn = () => {
        this.geowayMap.zoomIn();
    };
    /**
     * 绘制矩形
     */
    this.drawRectangle = (fn) => {
        // debugger;
        this.editLayer.clearLayers();
        let rectangle;
        let tmprec;
        let latlngs = [];
        this.geowayMap.dragging.disable();
        this.geowayMap.on("mousedown", (e) => {
            if (typeof tmprec !== "undefined") {
                tmprec.remove();
            }
            // 左上角坐标
            latlngs[0] = e.latlng;
            // 开始绘制，监听鼠标移动事件
            this.geowayMap.on("mousemove", (e) => {
                this.editLayer.clearLayers();
                latlngs[1] = e.latlng;
                // 删除临时矩形
                if (typeof tmprect !== "undefined") {
                    tmprec.remove();
                }
                // 添加临时矩形
                tmprec = L.rectangle(latlngs, this.drawStyleMap.Polygon).addTo(
                    this.editLayer
                );
            });
        });
        this.geowayMap.on("mouseup", (e) => {
            this.editLayer.clearLayers();
            // 矩形绘制完成，移除临时矩形，并停止监听鼠标移动事件
            this.geowayMap.off("mousedown");
            this.geowayMap.off("mousemove");
            this.geowayMap.off("mouseup");
            // 右下角坐标
            latlngs[1] = e.latlng;
            rectangle = L.rectangle(latlngs, this.drawStyleMap.Polygon);
            let result = [];
            result.push(latlngs);
            rectangle.addTo(this.editLayer);
            this.geowayMap.dragging.enable();
            if (fn) {
                // 如果需要获取到当前坐标  使用当前回调
                fn(latlngs);
            }
        });
    };
    /**
     * 绘制多边形
     */
    this.drawPolygon = function(fn) {
        this.editLayer.clearLayers();
        let points = [];
        const polygon = new L.polygon(points);
        this.geowayMap.addLayer(polygon);
        this.geowayMap.on("mousedown", (e) => {
            points.push([e.latlng.lat, e.latlng.lng]);
            this.geowayMap.on("mousemove", (event) => {
                polygon.setLatLngs([...points, [event.latlng.lat, event.latlng.lng]]);
            });
        });
        this.geowayMap.on("dblclick", () => {
            if (points.length) {
                this.geowayMap.off("mousedown");
                this.geowayMap.off("mousemove");
                this.geowayMap.off("dblclick");
                polygon.addTo(this.editLayer);
                if (fn) {
                    fn(points);
                }
            }
        });
    };

    /**
     * 绘制线
     */
    this.drawPolyline = () => {
        this.editLayer.clearLayers();
        let rectangle;
        let tmprec;
        let latlngs = [];
        this.geowayMap.dragging.disable();
        this.geowayMap.on("mousedown", (e) => {
            if (typeof tmprec !== "undefined") {
                tmprec.remove();
            }
            // 左上角坐标
            latlngs[0] = e.latlng;
            // 开始绘制，监听鼠标移动事件
            this.geowayMap.on("mousemove", (e) => {
                this.editLayer.clearLayers();
                latlngs[1] = e.latlng;
                // 删除临时矩形
                if (typeof tmprect !== "undefined") {
                    tmprec.remove();
                }
                // 添加临时矩形
                tmprec = L.polyline(latlngs, this.drawStyleMap.Line).addTo(
                    this.editLayer
                );
            });
        });
        this.geowayMap.on("mouseup", (e) => {
            this.editLayer.clearLayers();
            // 矩形绘制完成，移除临时矩形，并停止监听鼠标移动事件
            this.geowayMap.off("mousedown");
            this.geowayMap.off("mousemove");
            this.geowayMap.off("mouseup");
            // 右下角坐标
            latlngs[1] = e.latlng;
            rectangle = L.polyline(latlngs, this.drawStyleMap.Line);
            let result = [];
            result.push(latlngs);
            rectangle.addTo(this.editLayer);
            this.geowayMap.dragging.enable();
        });
    };
    /**
     * 绘制点
     */
    this.drawPoint = () => {
        this.editLayer.clearLayers();
        let rectangle;
        let tmprec;
        let latlngs = [];
        this.geowayMap.dragging.disable();
        this.geowayMap.on("mousedown", (e) => {
            if (typeof tmprec !== "undefined") {
                tmprec.remove();
            }
            // 左上角坐标
            latlngs[0] = e.latlng.lat;
            latlngs[1] = e.latlng.lng;
            // 开始绘制，监听鼠标移动事件
            this.geowayMap.on("mousemove", (e) => {
                this.editLayer.clearLayers();
                // 删除临时矩形
                if (typeof tmprect !== "undefined") {
                    tmprec.remove();
                }
                // 添加临时矩形
                tmprec = L.circle(
                    latlngs, {
                        radius: 1,
                    },
                    this.drawStyleMap.Line
                ).addTo(this.editLayer);
            });
        });
        this.geowayMap.on("mouseup", (e) => {
            this.editLayer.clearLayers();
            // 矩形绘制完成，移除临时矩形，并停止监听鼠标移动事件
            this.geowayMap.off("mousedown");
            this.geowayMap.off("mousemove");
            this.geowayMap.off("mouseup");
            rectangle = L.circle(
                latlngs, {
                    radius: 1,
                },
                this.drawStyleMap.Line
            );
            let result = [];
            result.push(latlngs);
            rectangle.addTo(this.editLayer);
            this.geowayMap.dragging.enable();
        });
    };

    /**
     *全局绘制样式配置
     **/
    this.drawStyleMap = {
        Point: {
            pointRadius: 5,
            graphicName: "circle",
            fillColor: "white",
            fillOpacity: 1,
            strokeWidth: 1,
            strokeOpacity: 1,
            strokeColor: "#ed7540",
            strokeLinecap: "round",
        },
        Line: {
            strokeWidth: 3,
            strokeOpacity: 1,
            strokeColor: "#ed7540",
            strokeDashstyle: "longdash",
            strokeLinecap: "butt",
        },
        Polygon: {
            color: "#3388FF",
            fillOpacity: 0.1,
            weight: 2,
        },
    };
    /**
     * 高亮选中图形
     */
    this.initHightPoly = function(
        coordinates,
        style,
        isView,
        onEachFeature,
        type,
        pane
    ) {
        if (type == undefined || type == null) {
            type = "Polygon";
        }
        // let states = [{
        //     type: 'Feature',
        //     properties: { party: 'Republican' },
        //     geometry: {
        //         type: type,
        //         coordinates: coordinates
        //     }
        // }]
        if (pane === null || pane === "" || pane == undefined) {
            pane = "overlayPane";
        }
        let geoJsonLayer = L.geoJson(coordinates, {
            style: style,
            pane: pane,
            onEachFeature: (feature, layer) => {
                if (onEachFeature) {
                    // feature, layer,默认参数
                    // color, style 手动传入参数
                    onEachFeature(feature, layer, style);
                }
            },
        }).addTo(this.editLayer);
        // this.editLayer.fitBounds()

        if (isView) {
            let latling = geoJsonLayer.getBounds().getCenter();
            let center = L.latLng(latling.lat, latling.lng);
            let currentZoom = this.getMap().getBoundsZoom(geoJsonLayer.getBounds()); // 缩放比例
            this.getMap().setView(center, currentZoom);
        }
        return geoJsonLayer;
    };
    this.initHightPolyMap = function(coordinates, style, isView, type, pane) {
        if (type == undefined || type == null) {
            type = "Polygon";
        }
        if (pane === null || pane === "" || pane == undefined) {
            pane = "overlayPane";
        }
        let geoJsonLayer = L.geoJson(coordinates, {
            style: style,
            pane: pane,
        }).addTo(this.geowayMap);
        if (isView) {
            let latling = geoJsonLayer.getBounds().getCenter();
            let center = L.latLng(latling.lat, latling.lng);
            let currentZoom = this.getMap().getBoundsZoom(geoJsonLayer.getBounds()); // 缩放比例
            this.getMap().setView(center, currentZoom);
        }
        return geoJsonLayer;
    };

    this.addAPolygon = function(geometry) {
        this.editLayer.clearLayers();
        let polygon = geometry.coordinates;
        let polygon1 = [];
        for (let item in polygon) {
            let cor = polygon[item];
            let cor1 = [];
            cor1[0] = cor[1];
            cor1[1] = cor[0];
            polygon1.push(cor1);
        }
        let polygon2 = L.polygon(polygon1, {
            color: "red",
            fillColor: "#f03",
            fillOpacity: 0.2,
        });
        polygon2.addTo(this.editLayer);
    };

    // 地图切换
    this.Switchmap = function() {
        this.removeMapLayer();
        this.mapLayer.addLayer(WMTS(config.skyMap1.url, config.skyMap1.opt));
        this.mapLayer.addLayer(WMTS(config.skyMap2.url, config.skyMap2.opt));
    };
    // 切换成地形
    this.TerrainSwitching = function() {
        this.removeMapLayer();
        this.mapLayer.addLayer(
            WMTS(config.skymapTopography1.url, config.skymapTopography1.opt)
        );
        this.mapLayer.addLayer(
            WMTS(config.skymapTopography2.url, config.skymapTopography2.opt)
        );
    };
    // 影像加载  该方法暂时用作初始化地图时候加载   todo...
    this.SwitchingImages = function(config) {
        // this.removeMapLayer();
        //   如果是wmts 则用wmts方式加载
        if (config.type == "WMTS") {
            var matrixIds = [];
            for (var i = config.blc; i < 21; ++i) {
                matrixIds[i] = {
                    identifier: "" + (i + config.identifier),
                    topLeftCorner: new L.LatLng(90, -180),
                };
            }
            config.opt.matrixIds = matrixIds;
            this.mapLayer.addLayer(WMTS(config.url, config.opt));
        }
        if (config.type == "dynamicMapLayer") {
            let envLayer = esri
                .dynamicMapLayer({
                    url: config.url,
                    opacity: config.opacity,
                    f: config.f,
                })
                .addTo(this.mapLayer);
            return envLayer;
        }
    };
    //   动态添加服务
    this.wmtAdd = function(Config) {
        var matrixIds = [];
        for (var i = 0; i < 21; ++i) {
            matrixIds[i] = {
                identifier: "" + (i + Config.identifier),
                topLeftCorner: new L.LatLng(90, -180),
            };
        }
        Config.opt.matrixIds = matrixIds;
        let wmtsobj = WMTS(Config.url, Config.opt).addTo(this.editLayer);
        return wmtsobj;
    };
    // 卷帘效果 skymapImage1 skymapImage2底图
    this.sideBySide = function(status) {
        if (this.mapSplitControl) {
            this.mapSplitControl.remove();
            this.mapSplitControl = null;
        } else {
            let this_ = this;
            let osmLayer = WMTS(
                config.skymapImage1.url,
                config.skymapImage1.opt
            ).addTo(this_.geowayMap);
            let stamenLayer = WMTS(
                config.skymapImage2.url,
                config.skymapImage2.opt
            ).addTo(this_.geowayMap);
            this_.mapSplitControl = L.control.sideBySide(osmLayer, stamenLayer);
            this_.mapSplitControl.addTo(this_.geowayMap);
        }
    };
    // 删除指定图层 removeLayer(marker)
    this.removeLayer = function(layer) {
        this.editLayer.removeLayer(layer);
        // this.geowayMap.removeLayer(layer)
    };
    // 删除geowayMap指定图层 removeLayer(marker)
    this.removeLayergeowayMap = function(layer) {
        this.geowayMap.removeLayer(layer);
        // this.geowayMap.removeLayer(layer)
    };
    // 删除mapLayer指定图层 removeLayer(marker)
    this.removeLayermapLayer = function(layer) {
        this.mapLayer.removeLayer(layer);
        // this.geowayMap.removeLayer(layer)
    };
    // 图片叠加
    this.imageOverlay = function(img, point1, point2, point3, isView) {
        let imageLayer = L.imageOverlay
            .rotated(img, point1, point2, point3, {
                opacity: 1,
                interactive: true,
                // attribution: ""
            })
            .addTo(this.editLayer);
        let bounds = new L.LatLngBounds(point1, point2).extend(point3);
        if (isView) {
            // let currentZoom = this.getMap().getBoundsZoom(geoJsonLayer.getBounds()); // 缩放比例
            // this.getMap().setView(center, currentZoom);
            this.getMap().fitBounds(bounds);
        }

        return imageLayer;
    };
    this.setGeoJsonView = function(geoJsonLayer) {
        this.getMap().fitBounds(geoJsonLayer.getBounds());

    };
    // 容器自适应 每次窗口大小改变后调用这个方法
    this.invalidateSize = function() {
        this.geowayMap.invalidateSize(true);
    };
    this.getRandomLatLng = function(num) {
        var bounds = num.getBounds(),
            //获取左下角坐标
            southWest = bounds.getSouthWest(),
            //获取右下角坐标
            northEast = bounds.getNorthEast(),
            //获取地图范围的长
            lngSpan = northEast.lng - southWest.lng,
            //获取地图范围的宽
            latSpan = northEast.lat - southWest.lat;
        return L.latLng(
            //返回任意地图范围内的x坐标
            southWest.lat + latSpan * Math.random(),
            //返回任意地图范围内的y坐标
            southWest.lng + lngSpan * Math.random()
        );
    };
    //  加载circleMarker
    this.circleMarkerPointer = function() {
        let _this = this;
        let content1 = "";
        let DefaultIcon = L.icon({
            iconUrl: icon,
            shadowUrl: iconShadow,
        });
        let layers = [];
        L.Marker.prototype.options.icon = DefaultIcon;
        for (let i = 0; i < 100; i++) {
            let numId = "mark" + i;
            let m = _this.getRandomLatLng(_this.geowayMap);
            let layer = new L.Marker(m);
            layers.push(layer);
            _this.markerGroups = L.layerGroup(layers);
            _this.editLayer.addLayer(_this.markerGroups);
            content1 =
                '<div style="width:260px;height:220px" id="' + numId + '"></div>';
            layer.bindPopup(content1, {});
            layer.on("popupopen", function(e) {
                let myChart = VCharts.init(document.getElementById(`${numId}`));
                let option = {
                    title: {
                        text: "测试",
                    },
                    tooltip: {},
                    legend: {
                        data: ["销量"],
                    },
                    xAxis: {
                        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子"],
                    },
                    yAxis: {},
                    series: [{
                        name: "销量",
                        type: "bar",
                        data: [5, 20, 36, 10],
                    }, ],
                };
                myChart.clear(); //清除历史数据
                myChart.setOption({}); //清除历史数据
                myChart.setOption(option); //重绘数据
            });
        }
    };
    // 加载GeoJSON
    this.showGeoJSON = function() {
        let someFeatures = [{
                type: "Feature",
                properties: {
                    party: "Republican",
                    name: "三角形",
                },
                geometry: {
                    type: "Polygon",
                    coordinates: [
                        [
                            [116.3, 40],
                            [116.37, 40],
                            [116.34, 40.05],
                        ],
                    ],
                },
            },
            {
                type: "Feature",
                properties: {
                    party: "Democrat",
                    name: "矩形",
                },
                geometry: {
                    type: "Polygon",
                    coordinates: [
                        [
                            [116.22, 40],
                            [116.26, 40],
                            [116.26, 40.05],
                            [116.22, 40.05],
                        ],
                    ],
                },
            },
        ];
        let layGeo = L.geoJson(someFeatures, {
            style: {
                color: "#00f",
                weight: 3,
                opacity: 0.5,
            },
        });
        layGeo.addTo(this.geowayMap);
    };
    //平移地图到指定位置
    this.MoveToMap = function(center) {
        let py = L.latLng(center);
        // let currentZoom = this.getMap().getBoundsZoom(geoJsonLayer.getBounds()); // 缩放比例
        this.getMap().setView(center, 16);
    };
    //绘制图表至地图上
    /**
     * 加载图表信息,用得时候去调用就好
     * latings:位置信息
     * option:图表数据配置  可以去官网找例子  https://echarts.apache.org/examples/zh/index.html#chart-type-pie
     *
     */
    this.addEcharts = function(latings, echartsid, option) {
        latings = latings ? latings : [23.1301964, 113.2592945];
        // 通过marker实现任意样式
        var cMark1 = new L.marker(latings, {
            icon: L.divIcon({
                className: "leaflet-echart-icon",
                iconSize: [30, 30],
                html: `<div id="${echartsid}" style="width:30px;height:30px;position:relative;background-color:transparent;"></div>`,
            }),
        }).addTo(this.editLayer); //查看代码可知  editLayer是gwMap得编辑图层
        var myChart = VCharts.init(document.getElementById(echartsid));

        // myChart.clear() //清除历史数据
        // myChart.setOption({}) //清除历史数据
        myChart.setOption(option); //重绘数据
    };
};
export default GeowayMap;

　　

一边整理一边写...