From 7d054f1d172d8b8b13131cab5c3acc3e3e1675c3 Mon Sep 17 00:00:00 2001 From: yuzhiyao Date: Thu, 14 Nov 2019 08:36:53 +0800 Subject: [PATCH 1/2] =?UTF-8?q?[update]=20=E4=BC=98=E5=8C=96graphic=20?= =?UTF-8?q?=E7=82=B9=E5=87=BB=E9=80=89=E6=8B=A9=E8=AE=A1=E7=AE=97=E4=B8=8D?= =?UTF-8?q?=E5=87=86=E7=A1=AE=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/openlayers/overlay/Graphic.js | 53 ++++++++++++++++++++++++++++++- 1 file changed, 52 insertions(+), 1 deletion(-) diff --git a/src/openlayers/overlay/Graphic.js b/src/openlayers/overlay/Graphic.js index d53203fdbc..efbcf36489 100644 --- a/src/openlayers/overlay/Graphic.js +++ b/src/openlayers/overlay/Graphic.js @@ -151,6 +151,7 @@ export class Graphic extends ol.source.ImageCanvas { */ function _forEachFeatureAtCoordinate(coordinate, resolution, callback, evtPixel, e) { let graphics = me.getGraphicsInExtent(); + let includeGraphics = []; // 点密集的时候，符合条件的有多个 还需精确计算 for (let i = graphics.length - 1; i >= 0; i--) { let style = graphics[i].getStyle(); if (!style) { @@ -201,7 +202,8 @@ export class Graphic extends ol.source.ImageCanvas { extent[1] = center[1] - image.getAnchor()[1] * resolution; extent[3] = center[1] + image.getAnchor()[1] * resolution; if (ol.extent.containsCoordinate(extent, coordinate)) { - contain = true; + includeGraphics.push(graphics[i]); + // contain = true; } } @@ -218,11 +220,60 @@ export class Graphic extends ol.source.ImageCanvas { me._highLightClose(); } } + // 精确计算 + let exactGraphic = this._getExactGraphic(includeGraphics, evtPixel); + if(exactGraphic){ + let _style = exactGraphic.getStyle(), + _center = exactGraphic.getGeometry().getCoordinates(), + _image = new ol.style.Style({ + image: _style + }).getImage(); + + if (me.isHighLight) { + me._highLight(_center, _image, exactGraphic, evtPixel); + } + if (callback) { + callback(exactGraphic, e); + } + }else{ + if (me.isHighLight) { + me._highLightClose(); + } + } return undefined; } } + /** + * @private + * @function ol.source.Graphic.prototype._getExactGraphic + * @description 获取到精确的graphic。 + * @param {Array.} graphics - 点要素对象数组。 + * @param {ol.Pixel} evtPixel - 当前选中的屏幕像素坐标。 + */ + _getExactGraphic(graphics, evtPixel){ + if(graphics.length === 0){ + return false; + }else if(graphics.length === 1){ + return graphics[0]; + } else{ + let distances = []; + graphics.map((graphic, index) =>{ + let center = graphic.getGeometry().getCoordinates(), + centerPixel = this.map.getPixelFromCoordinate(center), + distance = Math.sqrt(Math.pow((centerPixel[0]-evtPixel[0]),2) + Math.pow((centerPixel[1]-evtPixel[1]),2)); + distances.push({distance: distance, index: index}); + return null; + }); + + distances.sort( (a,b) =>{ + return a.distance - b.distance + }); + return graphics[distances[0].index]; + } + } + /** * @function ol.source.Graphic.prototype.setGraphics * @description 设置绘制的点要素，会覆盖之前的所有要素。 From 49d8bd4d05c0afa2e0617ed9149257cd02018df8 Mon Sep 17 00:00:00 2001 From: yuzhiyao Date: Thu, 14 Nov 2019 10:16:34 +0800 Subject: [PATCH 2/2] =?UTF-8?q?[update]=20=E6=A0=BC=E5=BC=8F=E5=8C=96?= =?UTF-8?q?=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/openlayers/overlay/Graphic.js | 40 +++++++++++++++---------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/src/openlayers/overlay/Graphic.js b/src/openlayers/overlay/Graphic.js index efbcf36489..80bb5682d9 100644 --- a/src/openlayers/overlay/Graphic.js +++ b/src/openlayers/overlay/Graphic.js @@ -87,7 +87,7 @@ export class Graphic extends ol.source.ImageCanvas { if (options.onClick) { me.map.on('click', function (e) { - me.map.forEachFeatureAtPixel(e.pixel, options.onClick,{},e); + me.map.forEachFeatureAtPixel(e.pixel, options.onClick, {}, e); }); } @@ -151,7 +151,7 @@ export class Graphic extends ol.source.ImageCanvas { */ function _forEachFeatureAtCoordinate(coordinate, resolution, callback, evtPixel, e) { let graphics = me.getGraphicsInExtent(); - let includeGraphics = []; // 点密集的时候，符合条件的有多个 还需精确计算 + let includeGraphics = []; // 点密集的时候，符合条件的有多个 还需精确计算 for (let i = graphics.length - 1; i >= 0; i--) { let style = graphics[i].getStyle(); if (!style) { @@ -183,7 +183,7 @@ export class Graphic extends ol.source.ImageCanvas { for (let index = 0; index < 8; index++) { const radian = (ratation + index * perAngle) / 180 * Math.PI; coors.push([center[0] + r * Math.cos(radian), - center[1] - r * Math.sin(radian) + center[1] - r * Math.sin(radian) ]); } coors.push(center); @@ -222,20 +222,20 @@ export class Graphic extends ol.source.ImageCanvas { } // 精确计算 let exactGraphic = this._getExactGraphic(includeGraphics, evtPixel); - if(exactGraphic){ + if (exactGraphic) { let _style = exactGraphic.getStyle(), - _center = exactGraphic.getGeometry().getCoordinates(), - _image = new ol.style.Style({ - image: _style - }).getImage(); + _center = exactGraphic.getGeometry().getCoordinates(), + _image = new ol.style.Style({ + image: _style + }).getImage(); if (me.isHighLight) { me._highLight(_center, _image, exactGraphic, evtPixel); } if (callback) { callback(exactGraphic, e); - } - }else{ + } + } else { if (me.isHighLight) { me._highLightClose(); } @@ -252,22 +252,22 @@ export class Graphic extends ol.source.ImageCanvas { * @param {Array.} graphics - 点要素对象数组。 * @param {ol.Pixel} evtPixel - 当前选中的屏幕像素坐标。 */ - _getExactGraphic(graphics, evtPixel){ - if(graphics.length === 0){ + _getExactGraphic(graphics, evtPixel) { + if (graphics.length === 0) { return false; - }else if(graphics.length === 1){ + } else if (graphics.length === 1) { return graphics[0]; - } else{ + } else { let distances = []; - graphics.map((graphic, index) =>{ + graphics.map((graphic, index) => { let center = graphic.getGeometry().getCoordinates(), - centerPixel = this.map.getPixelFromCoordinate(center), - distance = Math.sqrt(Math.pow((centerPixel[0]-evtPixel[0]),2) + Math.pow((centerPixel[1]-evtPixel[1]),2)); - distances.push({distance: distance, index: index}); - return null; + centerPixel = this.map.getPixelFromCoordinate(center), + distance = Math.sqrt(Math.pow((centerPixel[0] - evtPixel[0]), 2) + Math.pow((centerPixel[1] - evtPixel[1]), 2)); + distances.push({ distance: distance, index: index }); + return null; }); - distances.sort( (a,b) =>{ + distances.sort((a, b) => { return a.distance - b.distance }); return graphics[distances[0].index]; pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy