Merge branch 'master' into master

Author: fuzhenn

src/core/Browser.js

@@ -2,7 +2,7 @@ import { isFunction } from './util/common';
 import { IS_NODE } from './util/env';
 
 let Browser = {};
-const maps = {};
+// const maps = {};
 
 function getDevicePixelRatio() {
     return (window.devicePixelRatio || (window.screen.deviceXDPI / window.screen.logicalXDPI));
@@ -126,11 +126,11 @@ if (!IS_NODE) {
         monitorDPRChange: true,
         supportsPassive,
         proxy,
-        removeDPRListening: (map) => {
-            if (map) {
-                delete maps[map.id];
-            }
-        },
+        // removeDPRListening: (map) => {
+        //     // if (map) {
+        //     //     delete maps[map.id];
+        //     // }
+        // },
         checkDevicePixelRatio: () => {
             if (typeof window !== 'undefined' && Browser.monitorDPRChange) {
                 const devicePixelRatio = getDevicePixelRatio();
@@ -142,55 +142,11 @@ if (!IS_NODE) {
             }
             return false;
         },
-        addDPRListening: (map) => {
-            if (map) {
-                maps[map.id] = map;
-            }
-        }
+        // addDPRListening: (map) => {
+        //     // if (map) {
+        //     //     maps[map.id] = map;
+        //     // }
+        // }
     };
-    //monitor devicePixelRatio change
-    if (typeof window !== 'undefined' && window.matchMedia) {
-        for (let i = 1; i < 500; i++) {
-            const dpi = (i * 0.01).toFixed(2);
-            const screen = window.matchMedia(`screen and (resolution: ${dpi}dppx)`);
-            if (screen) {
-                if (screen.addEventListener) {
-                    screen.addEventListener('change', Browser.checkDevicePixelRatio);
-                } else if (screen.addListener) {
-                    screen.addListener(Browser.checkDevicePixelRatio);
-                }
-            }
-        }
-
-    }
-
-    if (Browser.devicePixelRatio) {
-        let tempDPI = Browser.devicePixelRatio;
-        Object.defineProperty(Browser, 'devicePixelRatio', {
-            get: () => {
-                return tempDPI;
-            },
-            set: (value) => {
-                if (value === tempDPI) {
-                    return;
-                }
-                //when devicePixelRatio change force resize all layers
-                tempDPI = value;
-                if (!Browser.monitorDPRChange) {
-                    return;
-                }
-                for (const mapId in maps) {
-                    const map = maps[mapId];
-                    if (!map || !map.options || map.options['devicePixelRatio'] || !map.checkSize || !map.getRenderer) {
-                        continue;
-                    }
-                    const renderer = map.getRenderer();
-                    if (renderer) {
-                        map.checkSize(true);
-                    }
-                }
-            }
-        });
-    }
 }
 export default Browser;

src/core/GlobalEvent.js

@@ -0,0 +1,71 @@
+import Eventable from './Eventable';
+import Browser from './Browser';
+import { addDomEvent } from './util/dom';
+
+class Base {
+
+}
+
+class GlobalEventable extends Eventable(Base) {
+
+}
+
+// this is global event bus for doc state change
+// such as : devicePixelRatio ,visibilitychange,... etc
+
+export const GlobalEvent = new GlobalEventable();
+
+export const EVENT_DPR_CHANGE = 'dprchange';
+export const EVENT_DOC_VISIBILITY_CHANGE = 'docvisibilitychange';
+export const EVENT_DOC_DRAGSTART = 'dragstart';
+export const EVENT_DOC_DRAGEND = 'dragend';
+
+
+//monitor devicePixelRatio change
+if (typeof window !== 'undefined' && window.matchMedia) {
+    for (let i = 1; i < 500; i++) {
+        const dpi = (i * 0.01).toFixed(2);
+        const screen = window.matchMedia(`screen and (resolution: ${dpi}dppx)`);
+        if (screen) {
+            if (screen.addEventListener) {
+                screen.addEventListener('change', Browser.checkDevicePixelRatio);
+            } else if (screen.addListener) {
+                screen.addListener(Browser.checkDevicePixelRatio);
+            }
+        }
+    }
+
+}
+
+if (Browser.devicePixelRatio) {
+    let tempDPI = Browser.devicePixelRatio;
+    Object.defineProperty(Browser, 'devicePixelRatio', {
+        get: () => {
+            return tempDPI;
+        },
+        set: (value) => {
+            if (value === tempDPI) {
+                return;
+            }
+            //when devicePixelRatio change force resize all layers
+            tempDPI = value;
+            if (!Browser.monitorDPRChange) {
+                return;
+            }
+            GlobalEvent.fire(EVENT_DPR_CHANGE, { devicePixelRatio: value });
+        }
+    });
+}
+
+//monitor document visibilitychange change
+if (Browser.webgl && typeof document !== 'undefined') {
+    addDomEvent(document, 'visibilitychange', () => {
+        GlobalEvent.fire(EVENT_DOC_VISIBILITY_CHANGE, { visibilityState: document.visibilityState });
+    });
+    addDomEvent(document, 'dragstart', () => {
+        GlobalEvent.fire(EVENT_DOC_DRAGSTART);
+    });
+    addDomEvent(document, 'dragend', () => {
+        GlobalEvent.fire(EVENT_DOC_DRAGEND);
+    });
+}

src/core/util/style.js

@@ -194,6 +194,9 @@ function parseStops(value, replacer) {
         value['default'] = defaultValue.replace(URL_PATTERN, replacer);
     }
     const stops = value.stops;
+    if (!stops) {
+        return value;
+    }
     for (let i = 0; i < stops.length; i++) {
         if (!Array.isArray(stops[i])) {
             continue;

src/geometry/Ellipse.js

@@ -88,12 +88,18 @@ class Ellipse extends CenterMixin(Polygon) {
         this.onShapeChanged();
         return this;
     }
-
     /**
      * Gets the shell of the ellipse as a polygon, number of the shell points is decided by [options.numberOfShellPoints]{@link Circle#options}
      * @return {Coordinate[]} - shell coordinates
      */
     getShell() {
+        if (this.isRotated()) {
+            return this.getRotatedShell();
+        }
+        return this._getShell();
+    }
+
+    _getShell() {
         const measurer = this._getMeasurer(),
             center = this.getCoordinates(),
             numberOfPoints = this.options['numberOfShellPoints'],
@@ -122,6 +128,11 @@ class Ellipse extends CenterMixin(Polygon) {
         return shell;
     }
 
+    _getPrjShell() {
+        const shell = super._getPrjShell();
+        return this._rotatePrjCoordinates(shell);
+    }
+
     /**
      * Ellipse won't have any holes, always returns null
      * @return {Object[]} an empty array
@@ -148,6 +159,9 @@ class Ellipse extends CenterMixin(Polygon) {
     }
 
     _computePrjExtent() {
+        if (this.isRotated()) {
+            return this._computeRotatedPrjExtent();
+        }
         return Circle.prototype._computePrjExtent.apply(this, arguments);
     }
 

src/geometry/Geometry.js

@@ -25,6 +25,7 @@ import Painter from '../renderer/geometry/Painter';
 import CollectionPainter from '../renderer/geometry/CollectionPainter';
 import SpatialReference from '../map/spatial-reference/SpatialReference';
 import { isFunctionDefinition } from '../core/mapbox';
+import { getDefaultBBOX, pointsBBOX } from '../core/util/bbox';
 
 const TEMP_POINT0 = new Point(0, 0);
 const TEMP_EXTENT = new PointExtent();
@@ -929,6 +930,10 @@ class Geometry extends JSONAble(Eventable(Handlerable(Class))) {
      * @returns {Geometry} this
      */
     rotate(angle, pivot) {
+        if (!isNumber(angle)) {
+            console.error(`angle:${angle} is not number`);
+            return this;
+        }
         if (this.type === 'GeometryCollection') {
             const geometries = this.getGeometries();
             geometries.forEach(g => g.rotate(angle, pivot));
@@ -939,12 +944,18 @@ class Geometry extends JSONAble(Eventable(Handlerable(Class))) {
         } else {
             pivot = new Coordinate(pivot);
         }
+        this._angle = angle;
+        this._pivot = pivot;
         const measurer = this._getMeasurer();
         const coordinates = this.getCoordinates();
         if (!Array.isArray(coordinates)) {
-            if (pivot.x !== coordinates.x || pivot.y !== coordinates.y) {
+            //exclude Rectangle ,Ellipse,Sector by shell judge
+            if ((pivot.x !== coordinates.x || pivot.y !== coordinates.y) && !this.getShell) {
                 const c = measurer._rotate(coordinates, pivot, angle);
                 this.setCoordinates(c);
+            } else {
+                //only redraw ,not to change coordinate
+                this.onPositionChanged();
             }
             return this;
         }
@@ -955,6 +966,65 @@ class Geometry extends JSONAble(Eventable(Handlerable(Class))) {
         return this;
     }
 
+    _rotatePrjCoordinates(coordinates) {
+        if (!coordinates || this._angle === 0 || !this._pivot) {
+            return coordinates;
+        }
+        const projection = this._getProjection();
+        if (!projection) {
+            return coordinates;
+        }
+        let offsetAngle = 0;
+        const isArray = Array.isArray(coordinates);
+        const coord = isArray ? coordinates : [coordinates];
+        const rotatePrjCoordinates = [];
+        let cx, cy;
+        //sector is special
+        if (this.getRotateOffsetAngle) {
+            offsetAngle = this.getRotateOffsetAngle();
+            const center = coord[coord.length - 1];
+            cx = center.x;
+            cy = center.y;
+        } else {
+            const bbox = getDefaultBBOX();
+            //cal all points center
+            pointsBBOX(coord, bbox);
+            const [minx, miny, maxx, maxy] = bbox;
+            cx = (minx + maxx) / 2;
+            cy = (miny + maxy) / 2;
+        }
+        //图形按照自身的几何中心旋转
+        for (let i = 0, len = coord.length; i < len; i++) {
+            const c = coord[i];
+            const { x, y } = c;
+            const dx = x - cx, dy = y - cy;
+            const r = Math.sqrt(dx * dx + dy * dy);
+            const sAngle = getSegmentAngle(cx, cy, x, y);
+            const rad = (sAngle - this._angle + offsetAngle) / 180 * Math.PI;
+            const rx = Math.cos(rad) * r, ry = Math.sin(rad) * r;
+            const rc = new Coordinate(cx + rx, cy + ry);
+            rotatePrjCoordinates.push(rc);
+        }
+        const prjCenter = projection.project(this._pivot);
+        const rx = prjCenter.x, ry = prjCenter.y;
+        //translate rotate center
+        const translateX = cx - rx, translateY = cy - ry;
+        //平移到指定的选中中心点
+        for (let i = 0, len = rotatePrjCoordinates.length; i < len; i++) {
+            const c = rotatePrjCoordinates[i];
+            c.x -= translateX;
+            c.y -= translateY;
+        }
+        if (isArray) {
+            return rotatePrjCoordinates;
+        }
+        return rotatePrjCoordinates[0];
+    }
+
+    isRotated() {
+        return isNumber(this._angle) && this._pivot;
+    }
+
     /**
      * Get the connect points for [ConnectorLine]{@link ConnectorLine}
      * @return {Coordinate[]} connect points
@@ -1557,7 +1627,7 @@ function getGeometryCoordinatesAlts(geometry, layerAlt, enableAltitude) {
         coordinatesHasAlt(coordinates, tempAlts);
         if (tempAlts.length) {
             const alts = getCoordinatesAlts(coordinates, layerAlt, enableAltitude);
-            if (geometry.getShell) {
+            if (geometry.getShell && Array.isArray(alts[0])) {
                 return alts[0][0];
             }
             return alts;
@@ -1606,5 +1676,20 @@ function getCoordinatesAlts(coordinates, layerAlt, enableAltitude) {
     }
 }
 
+function getSegmentAngle(cx, cy, x, y) {
+    if (cx === x) {
+        if (y > cy) {
+            return -90;
+        }
+        return 90;
+    }
+    x -= cx;
+    y -= cy;
+    //经纬坐标系和屏幕坐标正好相反,经纬度向上递增,而屏幕坐标递减
+    y = -y;
+    const rad = Math.atan2(y, x);
+    return rad / Math.PI * 180;
+}
+
 export default Geometry;