enhancement: 图层添加hitDetect: boolean禁用或者开启鼠标检测 close maptalks#1040

sakitam-gis · Dec 5, 2019 · 9090bc2 · 9090bc2
1 parent 809ec11
commit 9090bc2
Show file tree

Hide file tree

Showing 3 changed files with 191 additions and 2 deletions.
diff --git a/src/layer/Layer.js b/src/layer/Layer.js
@@ -5,6 +5,7 @@ import JSONAble from '../core/JSONAble';
 import Renderable from '../renderer/Renderable';
 import CanvasRenderer from '../renderer/layer/CanvasRenderer';
 import Geometry from '../geometry/Geometry';
+import Browser from '../core/Browser';
 
 /**
  * @property {Object}  [options=null] - base options of layer.
@@ -14,6 +15,7 @@ import Geometry from '../geometry/Geometry';
  * @property {Boolean} [options.visible=true] - whether to display the layer.
  * @property {Number}  [options.opacity=1] - opacity of the layer, from 0 to 1.
  * @property {Number}  [options.zIndex=undefined] - z index of the layer
+ * @property {Boolean} [options.hitDetect=true] - Whether to enable hit detection for layers for cursor styles on this map, disable it to improve performance.
  * @property {String}  [options.renderer=canvas]  - renderer type, "canvas" in default.
  * @property {String}   [options.globalCompositeOperation=null] - (Only for layer rendered with [CanvasRenderer]{@link renderer.CanvasRenderer}) globalCompositeOperation of layer's canvas 2d context.
  * @property {String}   [options.debugOutline='#0f0']  - debug outline's color.
@@ -37,7 +39,10 @@ const options = {
     'cssFilter': null,
     'forceRenderOnMoving' : false,
     'forceRenderOnZooming' : false,
-    'forceRenderOnRotating' : false
+    'forceRenderOnRotating' : false,
+    'hitDetect': (function () {
+        return !Browser.mobile;
+    })()
 };
 
 /**

diff --git a/src/renderer/map/MapCanvasRenderer.js b/src/renderer/map/MapCanvasRenderer.js
@@ -429,7 +429,8 @@ class MapCanvasRenderer extends MapRenderer {
         let counter = 0;
         for (let i = layers.length - 1; i >= 0; i--) {
             const layer = layers[i];
-            if (layer.isEmpty && layer.isEmpty()) {
+            // 此处如果未开启，无需执行后面判断
+            if (!layer.options['hitDetect'] || (layer.isEmpty && layer.isEmpty())) {
                 continue;
             }
             const renderer = layer._getRenderer();

diff --git a/test/layer/LayerSpec.js b/test/layer/LayerSpec.js
@@ -377,4 +377,187 @@ describe('Layer.Spec', function () {
         // }, 60);
     });
 
+    describe('hitDetect', function () {
+        var innerMap, eventContainer;
+        var layer, center = new maptalks.Coordinate(-0.11304900000004636, 51.49855999999997), pixel;
+
+        beforeEach(function () {
+            var ctx = COMMON_CREATE_MAP(center, null, {
+                width: 500,
+                height: 500,
+                zoomAnimationDuration : 50,
+                zoom: 14,
+            });
+            innerMap = ctx.map;
+
+            var rect = new maptalks.Circle(
+                [-0.11304900000004636, 51.49855999999997], 500,
+                {
+                    symbol: {
+                        lineColor: '#34495e',
+                        lineWidth: 2,
+                        polygonFill: '#1bbc9b',
+                        polygonOpacity: 0.4
+                    }
+                }
+            );
+
+            pixel = innerMap.coordinateToContainerPoint(center);
+
+            layer = new maptalks.VectorLayer('vector', null, {
+                // hitDetect: false,
+            }).addTo(innerMap);
+
+            layer.addGeometry(rect, true);
+
+            container = ctx.container;
+            eventContainer = innerMap._panels.canvasContainer;
+        });
+
+        afterEach(function () {
+            innerMap.remove();
+            REMOVE_CONTAINER(container);
+        });
+
+        it('set layer hitDetect true', function (done) {
+            var spy = sinon.spy();
+            layer.config({
+                hitDetect: true,
+            });
+
+            var renderer = layer._getRenderer();
+
+            renderer.hitDetect = spy;
+
+            happen.mousemove(eventContainer, {
+                'clientX': pixel.x,
+                'clientY': pixel.y
+            });
+            setTimeout(function () {
+                expect(spy.called).to.be.ok();
+                done();
+            }, 100);
+        });
+
+        it('set layer hitDetect false', function (done) {
+            var spy = sinon.spy();
+            layer.config({
+                hitDetect: false,
+            });
+
+            var renderer = layer._getRenderer();
+
+            renderer.hitDetect = spy;
+
+            happen.mousemove(eventContainer, {
+                'clientX': pixel.x,
+                'clientY': pixel.y
+            });
+
+            setTimeout(function () {
+                expect(spy.called).not.to.be.ok();
+                done();
+            }, 100);
+        });
+
+        it('set map hitDetect true and layer hitDetect true', function (done) {
+            var spy = sinon.spy();
+            innerMap.config({
+                hitDetect: true,
+            });
+
+            layer.config({
+                hitDetect: true,
+            });
+
+            var renderer = layer._getRenderer();
+
+            renderer.hitDetect = spy;
+
+            happen.mousemove(eventContainer, {
+                'clientX': pixel.x,
+                'clientY': pixel.y
+            });
+
+            setTimeout(function () {
+                expect(spy.called).to.be.ok();
+                done();
+            }, 100);
+        });
+
+        it('set map hitDetect false and layer hitDetect true', function (done) {
+            var spy = sinon.spy();
+            innerMap.config({
+                hitDetect: false,
+            });
+
+            layer.config({
+                hitDetect: true,
+            });
+
+            var renderer = layer._getRenderer();
+
+            renderer.hitDetect = spy;
+
+            happen.mousemove(eventContainer, {
+                'clientX': pixel.x,
+                'clientY': pixel.y
+            });
+
+            setTimeout(function () {
+                expect(spy.called).not.to.be.ok();
+                done();
+            }, 100);
+        });
+
+        it('set map hitDetect true and layer hitDetect false', function (done) {
+            var spy = sinon.spy();
+            innerMap.config({
+                hitDetect: true,
+            });
+
+            layer.config({
+                hitDetect: false,
+            });
+
+            var renderer = layer._getRenderer();
+
+            renderer.hitDetect = spy;
+
+            happen.mousemove(eventContainer, {
+                'clientX': pixel.x,
+                'clientY': pixel.y
+            });
+
+            setTimeout(function () {
+                expect(spy.called).not.to.be.ok();
+                done();
+            }, 100);
+        });
+
+        it('set map hitDetect false and layer hitDetect false', function (done) {
+            var spy = sinon.spy();
+            innerMap.config({
+                hitDetect: false,
+            });
+
+            layer.config({
+                hitDetect: false,
+            });
+
+            var renderer = layer._getRenderer();
+
+            renderer.hitDetect = spy;
+
+            happen.mousemove(eventContainer, {
+                'clientX': pixel.x,
+                'clientY': pixel.y
+            });
+
+            setTimeout(function () {
+                expect(spy.called).not.to.be.ok();
+                done();
+            }, 100);
+        });
+    });
 });