yjdp-web/public/lib/mapbox/mapbox-gl-draw/mapbox-gl-draw-ellipse.js

"use strict";

var doubleClickZoom = {
    enable: function enable(ctx) {
        setTimeout(function () {
            if (!ctx.map || !ctx.map.doubleClickZoom || !ctx._ctx || !ctx._ctx.store || !ctx._ctx.store.getInitialConfigValue) return;
            if (!ctx._ctx.store.getInitialConfigValue("doubleClickZoom")) return;
            ctx.map.doubleClickZoom.enable();
        }, 0);
    },
    disable: function disable(ctx) {
        setTimeout(function () {
            if (!ctx.map || !ctx.map.doubleClickZoom) return;
            ctx.map.doubleClickZoom.disable();
        }, 0);
    }
};

var DrawEllipse = {
    onSetup: function onSetup(opts) {
        this.eccentricity = opts.eccentricity >= 0 && opts.eccentricity < 1 ? opts.eccentricity : 0.8;
        this.divisions = opts.divisions || 60;

        var ellipse = this.newFeature({
            type: "Feature",
            properties: {},
            geometry: {
                type: "Polygon",
                coordinates: [[]]
            }
        });
        this.addFeature(ellipse);
        this.clearSelectedFeatures();
        doubleClickZoom.disable(this);
        this.updateUIClasses({mouse: "add"});
        this.setActionableState({
            trash: true
        });
        return {
            ellipse: ellipse
        };
    },
    // 支持移动端触摸
    onTap: function onTap(state, e) {
        if (state.center) this.onMouseMove(state, e);
        this.onClick(state, e);
    },
    // 每当用户点击地图时，Draw将调用`onClick`
    onClick: function onClick(state, e) {
        // 如果state.center存在，则表示其第二次单击
        // 更改为simple_select模式
        if (state.center && state.center[0] !== e.lngLat.lng && state.center[1] !== e.lngLat.lat) {
            this.updateUIClasses({mouse: "pointer"});
            this.changeMode("simple_select", {featuresId: state.ellipse.id});
        }
        // 在第一次单击时，保存单击的点坐标作为椭圆的中心点
        state.center = [e.lngLat.lng, e.lngLat.lat];
    },
    onMouseMove: function onMouseMove(state, e) {
        // 根据椭圆离心率e=√(1-b^2/a^2)，计算出b=a√(1-e^2)
        if (state.center) {
            var xRadius = Math.sqrt(Math.pow(e.lngLat.lng - state.center[0], 2) + Math.pow(e.lngLat.lat - state.center[1], 2));
            var yRadius = xRadius * Math.sqrt(1 - Math.pow(this.eccentricity, 2));

            var radian = Math.atan2(e.lngLat.lat - state.center[1], e.lngLat.lng - state.center[0]);

            var twoPi = Math.PI * 2;

            for (var i = 0, length = this.divisions; i <= length; i++) {
                var t = i / length;
                var angle = t * twoPi;

                var x = state.center[0] + xRadius * Math.cos(angle);
                var y = state.center[1] + yRadius * Math.sin(angle);

                if (radian !== 0) {
                    var cos = Math.cos(radian);
                    var sin = Math.sin(radian);

                    var tx = x - state.center[0];
                    var ty = y - state.center[1];

                    // 围绕椭圆中心旋转点。
                    x = tx * cos - ty * sin + state.center[0];
                    y = tx * sin + ty * cos + state.center[1];
                }

                // 更新要素坐标
                state.ellipse.updateCoordinate("0." + i, x, y);
            }
        }
    },
    // 每当用户在聚焦地图时点击某个键时，它将在此处发送
    onKeyUp: function onKeyUp(state, e) {
        if (e.keyCode === 27) return this.changeMode("simple_select");
    },
    onStop: function onStop(state) {
        doubleClickZoom.enable(this);
        this.updateUIClasses({mouse: "none"});
        this.activateUIButton();

        // 检查我们是否删除了此要素
        if (this.getFeature(state.ellipse.id) === undefined) return;

        if (state.ellipse.isValid()) {
            this.map.fire("draw.create", {
                features: [state.ellipse.toGeoJSON()]
            });
        } else {
            this.deleteFeature([state.ellipse.id], {silent: true});
            this.changeMode("simple_select", {}, {silent: true});
        }
    },
    toDisplayFeatures: function toDisplayFeatures(state, geojson, display) {
        var isActivePolygon = geojson.properties.id === state.ellipse.id;
        geojson.properties.active = isActivePolygon ? "true" : "false";
        if (!isActivePolygon) return display(geojson);

        if (!state.center) return;
        return display(geojson);
    },
    onTrash: function onTrash(state) {
        this.deleteFeature([state.ellipse.id], {silent: true});
        this.changeMode("simple_select");
    }
};