@h21-map/yandex-drawing-manager - npm Package Compare versions

Comparing version 2.0.6 to 4.0.2

index.js

@@ -0,1 +1,418 @@
+
+ymaps.modules.define('DrawingManager',
+    function (
+        provide
+    ) {
+        let DRAWING_MODE_MARKER = "marker";
+        let DRAWING_MODE_CIRCLE = "circle";
+
+        var DrawingManager = function (map, opts) {
+
+            this.map = map;
+            this._opts = opts;
+            this._drawingType = opts.drawingMode || DRAWING_MODE_MARKER;
+            this._fitBounds = opts._fitBounds || true;
+            this.markerOptions = opts.markerOptions || {};
+            this.circleOptions = opts.circleOptions || {};
+            this._enableDraw = opts.enableDraw;
+            this.radius = opts.circleOptions.radius;
+
+
+        };
+
+        DrawingManager.prototype.setDrawingMode = function (drawingType) {
+
+            let me = this;
+            this._drawingType = drawingType;
+
+            switch (drawingType) {
+                case DRAWING_MODE_MARKER:
+                    me._bindMarker();
+                    break;
+                case DRAWING_MODE_CIRCLE:
+                    me._bindCircle();
+                    break;
+            }
+        };
+
+        DrawingManager.prototype.setPosition = function (latitude, longitude) {
+
+            let me = this;
+            me.position = null;
+            me.position = [latitude, longitude];
+        };
+
+        DrawingManager.prototype._setPosition = function (e) {
+
+            let me = this;
+            me.position = null;
+            me.position = e.get('coords');
+
+        };
+
+        DrawingManager.prototype.setEnableDraw = function (enabled) {
+
+            this._enableDraw = enabled;
+        };
+
+
+        DrawingManager.prototype.setDefaultCursor = function (cursor) { };
+
+        DrawingManager.prototype.setAreaFitBounds = function () { };
+
+        DrawingManager.prototype.setMarkerFitBounds = function () { };
+
+        DrawingManager.prototype.setCircleFitBounds = function () { };
+
+        DrawingManager.prototype._getInfo = function () { };
+
+        DrawingManager.prototype._vertexMarkerAddEventListener = function () { };
+
+        DrawingManager.prototype._bindMarker = function () {
+
+            let me = this;
+
+            if (me._centerMarker) {
+                me.map.geoObjects.removeAll();
+                me._centerMarker = null;
+                me.map.container.events.remove('click');
+            }
+
+            var createCenterMarker = (e) => {
+
+                if (me._centerMarker) {
+                    me.map.geoObjects.removeAll();
+                    me._centerMarker = null;
+                }
+
+                if (e) {
+                    me._setPosition(e);
+                }
+
+
+                if (me.position) {
+                    const geo = {
+                        geometry: {
+                            type: "Point",
+                            coordinates: me.position
+                        }
+                    }
+
+                    options = {
+                        iconLayout: 'default#image',
+                        iconImageSize: [24, 28],
+                        iconImageOffset: [0, 0],
+                        iconImageHref: me.markerOptions.iconUrl,
+                        draggable: false,
+
+                    }
+
+                    me._centerMarker = new ymaps.GeoObject(geo, options);
+                    me.map.geoObjects.add(me._centerMarker);
+
+                    me.map.setCenter(me.position, 9, {
+                        checkZoomRange: true
+                    });
+
+                    me.position = null;
+
+                    me.map.events.fire('draw:marker_create', null);
+
+                }
+
+            }
+
+            if (!this._enableDraw) {
+                createCenterMarker();
+                me.map.container.events.remove('click');
+
+            }
+
+            this.map.container.events.add('click', (event) => {
+                event.stopImmediatePropagation();
+                if (this._enableDraw) {
+                    createCenterMarker(event)
+                }
+            });
+
+        };
+
+        DrawingManager.prototype._bindCircle = function () {
+
+            let me = this;
+
+            if (me.circle) {
+                me.map.geoObjects.remove(me.circle);
+                me.map.geoObjects.remove(me._vertexMarker);
+                me.map.events.fire('draw:circle_remove', null);
+            }
+
+            if (me._centerMarker) {
+                const position = [me._centerMarker.geometry.getCoordinates(), me.radius];
+
+                const options = {
+                    fillColor: me.circleOptions.fillColor,
+                    fillOpacity: me.circleOptions.fillOpacity,
+                    strokeColor: me.circleOptions.strokeColor,
+                    strokeOpacity: me.circleOptions.strokeOpacity,
+                    strokeWidth: me.circleOptions.strokeWeight,
+
+                }
+
+                this.circle = new ymaps.Circle(position, {}, options);
+
+                me.map.geoObjects.add(this.circle);
+
+                me.map.events.fire('draw:circle_create', me._getInfo());
+
+                me.map.setBounds(this.circle.geometry.getBounds());
+
+                me._centerMarker.options.set({
+                    draggable: true,
+                });
+
+                me._centerMarker.options.set({
+                    cursor: 'move',
+                });
+
+                me._centerMarker.options.set({
+                    zIndex: 9999,
+                });
+
+                me._centerMarkerAddEventListener();
+                me._createVertexMarker();
+
+            }
+
+        };
+
+        DrawingManager.prototype._centerMarkerAddEventListener = function () {
+
+            let me = this;
+
+            me._centerMarker.events.add('drag', function (event) {
+
+                var coords = event.get('target').geometry.getCoordinates();
+                me.circle.geometry.setCoordinates(coords);
+
+                let to = me.destination(coords, 90, me.radius);
+
+                if (me._vertexMarker) {
+                    me._vertexMarker.geometry.setCoordinates(to);
+                };
+
+                me.map.events.fire('draw:circle_centre_change', me._getInfo());
+
+            })
+
+            me._centerMarker.events.add('dragend', () => {
+
+                me.map.events.fire('draw:circle_center_complete', me._getInfo());
+
+            });
+
+
+            me._centerMarker.events.add('mouseover', () => {
+
+                me.map.events.fire('draw:marker_mouseover', me._getInfo());
+
+            });
+
+
+            me._centerMarker.events.add('mouseout', () => {
+
+                me.map.events.fire('draw:marker_mouseout', me._getInfo());
+
+            });
+
+            me._centerMarker.events.add('click', () => {
+
+                me.map.events.fire('draw:marker_click', me._getInfo());
+
+            })
+
+        };
+
+        DrawingManager.prototype._createVertexMarker = function () {
+
+            let me = this;
+
+            me.to = null;
+            me.to = me.destination(me._centerMarker.geometry.getCoordinates(), 90, me.radius);
+
+            const g = {
+                geometry: {
+                    type: "Point",
+                    coordinates: me.to
+                }
+            }
+
+            const svg = [
+                '<?xml version="1.0"?>',
+                '<svg width="15px" height="15px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">',
+                '<circle stroke="#003dd9" fill="white" stroke-width="10" cx="50" cy="50" r="35"/>',
+                '</svg>'
+            ].join('\n');
+
+            const opt = {
+                iconLayout: 'default#imageWithContent',
+                iconImageSize: [24, 28],
+                iconImageOffset: [-9, -5],
+                iconImageHref: '',
+                draggable: true,
+                iconContentLayout: ymaps.templateLayoutFactory.createClass(svg),
+
+            }
+
+            me._vertexMarker = new ymaps.GeoObject(g, opt);
+            me.map.geoObjects.add(me._vertexMarker);
+
+            me._vertexMarker.options.set({
+                cursor: 'col-resize',
+            });
+
+            me._vertexMarkerAddEventListener();
+
+        };
+
+        DrawingManager.prototype._vertexMarkerAddEventListener = function () {
+
+            let me = this;
+
+            me._vertexMarker.events.add('drag', (event) => {
+
+                var coords = event.get('target').geometry.getCoordinates();
+                let distance = me.getDistanceTo(me._centerMarker.geometry.getCoordinates(), coords);
+
+                me.radius = distance;
+
+                if (me.circle) {
+                    me.circle.geometry.setRadius(distance);
+                }
+
+                let pixel = {
+                    clientX: event.get('domEvent').get('clientX'),
+                    clientY: event.get('domEvent').get('clientY'),
+                }
+                let ev = {
+                    pixel,
+                    radius: me.circle.geometry.getRadius(),
+
+                }
+
+                me.map.events.fire('draw:circle_radius_change', ev);
+
+            });
+
+            me._vertexMarker.events.add('dragend', () => {
+
+                me.map.events.fire('draw:circle_radius_complete', me._getInfo());
+
+            })
+        };
+
+
+        DrawingManager.prototype._getInfo = function () {
+
+            let me = this;
+
+            let position = {
+                latitude: me._centerMarker.geometry.getCoordinates()[0],
+                longitude: me._centerMarker.geometry.getCoordinates()[1]
+            }
+            let info = {
+                radius: me.circle.geometry.getRadius(),
+                position
+            };
+
+            return info;
+        }
+
+        DrawingManager.prototype.destination = function (latlng, heading, distance) {
+
+            heading = (heading + 360) % 360;
+            var rad = Math.PI / 180,
+                radInv = 180 / Math.PI,
+                R = 6378137,
+                lon1 = latlng[1] * rad,
+                lat1 = latlng[0] * rad,
+                rheading = heading * rad,
+                sinLat1 = Math.sin(lat1),
+                cosLat1 = Math.cos(lat1),
+                cosDistR = Math.cos(distance / R),
+                sinDistR = Math.sin(distance / R),
+                lat2 = Math.asin(sinLat1 * cosDistR + cosLat1 *
+                    sinDistR * Math.cos(rheading)),
+                lon2 = lon1 + Math.atan2(Math.sin(rheading) * sinDistR *
+                    cosLat1, cosDistR - sinLat1 * Math.sin(lat2));
+            lon2 = lon2 * radInv;
+            lon2 = lon2 > 180 ? lon2 - 360 : lon2 < -180 ? lon2 + 360 : lon2;
+            return [lat2 * radInv, lon2]
+
+        };
+
+        DrawingManager.prototype.degreeToRad = function (degree) {
+
+            return Math.PI * degree / 180;
+        };
+
+        DrawingManager.prototype._getRange = function (v, a, b) {
+
+            if (a != null) {
+                v = Math.max(v, a);
+            }
+            if (b != null) {
+                v = Math.min(v, b);
+            }
+            return v;
+        };
+
+        DrawingManager.prototype._getLoop = function (v, a, b) {
+
+            while (v > b) {
+                v -= b - a
+            }
+            while (v < a) {
+                v += b - a
+            }
+            return v;
+        };
+
+        DrawingManager.prototype.getDistanceTo = function (point1, point2) {
+
+            var me = this;
+
+            point1[1] = me._getLoop(point1[1], -180, 180);
+            point1[0] = me._getRange(point1[0], -74, 74);
+            point2[1] = me._getLoop(point2[1], -180, 180);
+            point2[0] = me._getRange(point2[0], -74, 74);
+
+            var x1, x2, y1, y2;
+            x1 = this.degreeToRad(point1[1]);
+            y1 = this.degreeToRad(point1[0]);
+            x2 = this.degreeToRad(point2[1]);
+            y2 = this.degreeToRad(point2[0]);
+
+            return 6370996.81 * Math.acos((Math.sin(y1) * Math.sin(y2) + Math.cos(y1) * Math.cos(y2) * Math.cos(x2 - x1)));
+        };
+
+
+        DrawingManager.prototype.setMap = function (map) {
+
+        };
+
+        DrawingManager.prototype.destroy = function () {
+            this._data = null;
+            this.setMap(null);
+        };
+
+        DrawingManager.prototype._refresh = function () {
+            if (this._layer) {
+                this._layer.update();
+            }
+            return this;
+        };
+
+        provide(DrawingManager);
+    });
 function DrawingManager(map, opts) {
@@ -9,2 +426,6 @@
 
+
+
+
+
     var DRAWING_MODE_MARKER = "marker",
@@ -24,2 +445,7 @@ DRAWING_MODE_CIRCLE = "circle",
     me.radius = opts.circleOptions.radius;
+    me.vertex = [];
+    me.vertexCount = 0;
+    me.polygonArea = new Map();
+    me.isMoreArea = opts.areaOptions.isMoreArea || false;
+    me.squareArea = opts.areaOptions.areaMaxSquare || 1400;
 
@@ -71,3 +497,3 @@ me.map.events.add('boundschange', () => {
             }
-            if (drawingType == DRAWING_MODE_FITBOUNDS) { return false }
+            if (drawingType == DRAWING_MODE_FITBOUNDS || drawingType == DRAWING_MODE_AREA) { me._drawingType = null; return false }
             me._drawingType = drawingType;
@@ -224,6 +650,9 @@ }
         me.map.container.events.types.click = undefined;
-        me._removeArea();
+        if (!me.isMoreArea) {
+            me._removeArea();
+        }
         me._removeCenterMarker();
         me._removeCircle();
 
+        if (me.isMoreArea && me.polygonArea.size === 5) { return false }
         var createArea = () => {
@@ -247,2 +676,3 @@
             me.map.container.events.add('mousemove', (event) => {
+
                 if (typeof event.get('coords') !== "undefined") {
@@ -255,3 +685,2 @@ patch.push(event.get('coords'));
             me.map.container.events.once('mouseup', () => {
-
                 me.map.container.events.remove('mousemove');
@@ -263,2 +692,4 @@ me.map.container.events.types.mousemove = undefined;
                 me.map.geoObjects.add(me._area);
+                me.vertexCount++;
+                me.polygonArea.set(me.vertexCount, me._area);
                 me.map.events.fire('draw:area_create', me._convertCoordinates(patch));
@@ -270,2 +701,30 @@
 
+                if (me.isMoreArea) {
+                    patchAreaLatLng = patch;
+                    let patchAreaLatLngMax = me.findRoundPoints(patchAreaLatLng, 0.001);
+                    if (patchAreaLatLngMax) {
+                        if (patchAreaLatLngMax.length == 0) {
+                            patchAreaLatLngMax = me.findRoundPoints(patchAreaLatLng, 0.01);
+                        }
+                        if (patchAreaLatLngMax.length == 0) {
+                            patchAreaLatLngMax = me.findRoundPoints(patchAreaLatLng, 1);
+                        }
+                        if (patchAreaLatLngMax.length == 0) {
+                            patchAreaLatLngMax = patchAreaLatLng;
+                        }
+                    }
+
+                    var pointSelect = null;
+                    var pointSelect = patchAreaLatLngMax[0];
+
+                    for (var n = 0; n < patchAreaLatLngMax.length; n++) {
+                        let item = patchAreaLatLngMax[n];
+                        if (item[1] > pointSelect[1]) {
+                            pointSelect = item;
+                        }
+                    }
+
+                    me.createVertexArea(pointSelect);
+                }
+
             });
@@ -284,2 +743,168 @@ }
 
+    DrawingManager.prototype.createVertexArea = function (pointSelect) {
+        me = this;
+        const geo = {
+            geometry: {
+                type: "Point",
+                coordinates: pointSelect
+            }
+        }
+
+        options = {
+            iconLayout: 'default#image',
+            iconImageSize: [24, 24],
+            iconImageOffset: [-20, -5],
+            iconImageHref: me.areaOptions.areaIconVertex,
+            draggable: false,
+            id: me.vertexCount,
+        }
+
+        _vertex = new ymaps.GeoObject(geo, options);
+        me.map.geoObjects.add(_vertex);
+
+        _vertex.events.add('click', function (e) {
+            if (me.polygonArea.get(e.get('target').options.get('id'))) {
+                let id = me.polygonArea.get(e.get('target').options.get('id'));
+                me.map.geoObjects.remove(e.get('target'));
+                me.map.geoObjects.remove(id);
+                me.polygonArea.delete(id);
+                me.map.events.fire('draw:area_remove', me._convertCoordinates());
+            }
+        });
+
+        me.vertex.push(_vertex);
+
+    },
+
+        DrawingManager.prototype.findRoundPoints = function (patch, round) {
+            let me = this;
+            var center = ymaps.util.bounds.getCenter(me._area.geometry.getBounds());
+            var result = [];
+            var roundMinLat = center[0] - round;
+            var roundMaxLat = center[0] + round;
+            for (var n = 0; n < patch.length; n++) {
+                let item = patch[n];
+                if (item[0] >= roundMinLat && item[0] <= roundMaxLat) {
+                    if (item[1] > center[1]) {
+                        result.push(item);
+                    }
+                }
+            }
+
+            return result;
+        },
+
+        DrawingManager.prototype.calculateArea = function (feature) {
+            let me = this;
+            var geoJsonGeometry = me.getGeoJsonGeometry(feature);
+            return me.calculateJsonGeometryArea(geoJsonGeometry);
+        },
+
+        DrawingManager.prototype.getGeoJsonGeometry = function (feature) {
+            let me = this;
+            if (feature.type == 'Feature') {
+                return feature.geometry;
+            } else if (feature.geometry && feature.geometry.getType) {
+                if (feature.geometry.getType() == 'Circle') {
+                    return {
+                        type: 'Circle',
+                        coordinates: feature.geometry.getCoordinates(),
+                        radius: feature.geometry.getRadius(),
+                    }
+                }
+                return {
+                    type: feature.geometry.getType(),
+                    coordinates: feature.geometry.getCoordinates(),
+                }
+            } else {
+                throw new Error('util.calculateArea: Unknown input object.');
+            }
+        },
+
+        DrawingManager.prototype.calculateJsonGeometryArea = function (geometry) {
+            let me = this;
+            let area = 0;
+            let i;
+            switch (geometry.type) {
+                case 'Polygon':
+                    return me.polygonAreas(geometry.coordinates);
+                case 'MultiPolygon':
+                    for (i = 0; i < geometry.coordinates.length; i++) {
+                        area += me.polygonAreas(geometry.coordinates[i]);
+                    }
+                    return area;
+                case 'Rectangle':
+                    return me.polygonAreas([[
+                        geometry.coordinates[0],
+                        [geometry.coordinates[0][0], geometry.coordinates[1][1]],
+                        geometry.coordinates[1],
+                        [geometry.coordinates[1][0], geometry.coordinates[0][1]],
+                        geometry.coordinates[0]
+                    ]]);
+                case 'Circle':
+                    return Math.PI * Math.pow(geometry.radius, 2);
+                case 'Point':
+                case 'MultiPoint':
+                case 'LineString':
+                case 'MultiLineString':
+                    return 0;
+            }
+        },
+
+        DrawingManager.prototype.polygonAreas = function (coords) {
+            let me = this;
+            let area = 0;
+            if (coords && coords.length > 0) {
+                area += Math.abs(me.ringArea(coords[0]));
+                for (var i = 1; i < coords.length; i++) {
+                    area -= Math.abs(me.ringArea(coords[i]));
+                }
+            }
+            return area;
+        },
+
+        DrawingManager.prototype.ringArea = function (coords) {
+            var p1;
+            var p2;
+            var p3;
+            var lowerIndex;
+            var middleIndex;
+            var upperIndex;
+            var i;
+            var area = 0;
+            var coordsLength = coords.length;
+            var longitude = ymaps.meta.coordinatesOrder == 'latlong' ? 1 : 0;
+            var latitude = ymaps.meta.coordinatesOrder == 'latlong' ? 0 : 1;
+
+            if (coordsLength > 2) {
+                for (i = 0; i < coordsLength; i++) {
+                    if (i === coordsLength - 2) {
+                        lowerIndex = coordsLength - 2;
+                        middleIndex = coordsLength - 1;
+                        upperIndex = 0;
+                    } else if (i === coordsLength - 1) {
+                        lowerIndex = coordsLength - 1;
+                        middleIndex = 0;
+                        upperIndex = 1;
+                    } else {
+                        lowerIndex = i;
+                        middleIndex = i + 1;
+                        upperIndex = i + 2;
+                    }
+                    p1 = coords[lowerIndex];
+                    p2 = coords[middleIndex];
+                    p3 = coords[upperIndex];
+                    area += (rad(p3[longitude]) - rad(p1[longitude])) * Math.sin(rad(p2[latitude]));
+                }
+                let RADIUS = 6378137;
+                area = area * RADIUS * RADIUS / 2;
+            }
+
+            return area;
+        },
+
+        DrawingManager.prototype.rad = function (_) {
+            return _ * Math.PI / 180;
+        }
+
     DrawingManager.prototype._redrawArea = function () {
@@ -373,3 +998,3 @@ let me = this;
                 me.map.setCenter(me._centerMarker.geometry.getCoordinates(), me.map.getZoom(), {
-                    checkZoomRange: true
+                    checkZoomRange: true,
                 });
@@ -379,3 +1004,3 @@ }
                 me.map.setCenter(me._centerMarker.geometry.getCoordinates(), 9, {
-                    checkZoomRange: true
+                    checkZoomRange: true,
                 });
@@ -387,17 +1012,44 @@ }
     DrawingManager.prototype._convertCoordinates = function (coordinates) {
-
+        let me = this;
         let positions = [];
+        if (!me.isMoreArea) {
+            for (var n = 0; n < coordinates.length; n++) {
+                let item = coordinates[n];
+                let position = {
+                    latitude: item[0],
+                    longitude: item[1],
+                }
+                positions.push(position);
+            }
 
-        for (var n = 0; n < coordinates.length; n++) {
-            let item = coordinates[n];
-            let position = {
-                latitude: item[0],
-                longitude: item[1],
+            let pos = {
+                positions
             }
-            positions.push(position);
+
+            return pos;
+
+        } else {
+            me.polygonArea.forEach((key) => {
+                let latLng = [];
+                for (var n = 0; n < key.geometry.getCoordinates().length; n++) {
+                    let item = key.geometry.getCoordinates()[n];
+                    for (var i = 0; i < item.length; i++) {
+                        let it = item[i];
+                        let lnlt = {
+                            latitude: it[0],
+                            longitude: it[1],
+                        }
+                        latLng.push(lnlt);
+                    }
+                    positions.push(latLng);
+                }
+            });
+
+            const pos = {
+                positions
+            }
+            return pos;
         }
-        let pos = {
-            positions
-        }
-        return pos;
+
+
     };
@@ -687,3 +1339,3 @@
 
-            me.map.events.fire('draw:circle_remove', null);
+            me.map.events.fire('draw:circle_remove', []);
         }
@@ -706,4 +1358,16 @@ };
             me._area = null;
-            me.map.events.fire('draw:area_remove', null);
+            me.map.events.fire('draw:area_remove', []);
         }
+
+        me.polygonArea.forEach((key) => {
+            me.map.geoObjects.remove(key);
+        });
+
+        me.vertex.forEach((key) => {
+            me.map.geoObjects.remove(key);
+        });
+
+        me.polygonArea.clear();
+        me.vertex = [];
+        me.currentAreaCount = 0;
     };
@@ -710,0 +1374,0 @@

package.json

@@ -0,23 +1,23 @@
+
 {
     "name": "@h21-map/yandex-drawing-manager",
-    "scope":"@h21-map",
-    "version": "2.0.6",
+    "scope": "@h21-map",
+    "version": "4.0.2",
     "description": "A library of Yandex Map JS API",
     "main": "index.js",
     "scripts": {
-      "test": "echo \"Error: no test specified\" && exit 1"
+        "test": "echo \"Error: no test specified\" && exit 1"
     },
     "repository": {
-      "type": "git",
-      "url": "git+https://github.com/novakand/h21-map-yandex-drawing-manager"
+        "type": "git",
+        "url": "git+https://github.com/novakand/h21-map-yandex-drawing-manager"
     },
     "keywords": [
-      "yandex",
-      "yandex-map",
-      "drawing-manager",
-      "angular"
+        "yandex",
+        "yandex-map",
+        "drawing-manager",
+        "angular"
     ],
     "author": "",
     "license": ""
-  }
-  
+}

README.md

@@ -8,4 +8,5 @@ # h21-map/yandex-drawing-manager
 ### How to use
+Load google maps javascript api asynchronously
 ```bash
 import { DrawingManager} from '@h21-map/yandex-drawing-manager'
 ```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

48621

increased by81.81%

Lines of code

1166

increased by75.87%

Number of lines in readme file

12

increased by9.09%

No dependency changes