From f0e2d194aed374074c221b41267dc13e8e801678 Mon Sep 17 00:00:00 2001 From: xiongjiaojiao Date: Wed, 27 Mar 2024 16:49:09 +0800 Subject: [PATCH] =?UTF-8?q?=E3=80=90fix=E3=80=91ISVJ-7804;=20review=20by?= =?UTF-8?q?=20songym?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web-map/control/identify/Identify.vue | 23 +-- .../control/identify/IdentifyViewModel.js | 6 +- .../identify/__tests__/Identify.spec.js | 133 ++++++++++++++++++ 3 files changed, 143 insertions(+), 19 deletions(-) diff --git a/src/mapboxgl/web-map/control/identify/Identify.vue b/src/mapboxgl/web-map/control/identify/Identify.vue index 62998003..87eb4b6f 100644 --- a/src/mapboxgl/web-map/control/identify/Identify.vue +++ b/src/mapboxgl/web-map/control/identify/Identify.vue @@ -120,17 +120,6 @@ export default { } } return style; - }, - layersOnMap() { - let layersOnMap = []; - if (this.map) { - for (let i = 0; i < this.layers.length; i++) { - if (this.map.getLayer(this.layers[i])) { - layersOnMap.push(this.layers[i]); - } - } - } - return layersOnMap; } }, watch: { @@ -176,7 +165,7 @@ export default { layerStyle: this.layerStyle }); this.map && this.bindMapClick(this.map); - this.changeClickedLayersCursor(this.layersOnMap); + this.changeClickedLayersCursor(this.layers); } }, // 给图层绑定popup和高亮 @@ -206,14 +195,15 @@ export default { } }, // 给layer绑定queryRenderedFeatures - bindQueryRenderedFeatures(e, layers = this.layersOnMap) { + bindQueryRenderedFeatures(e, layers = this.layers) { let map = e.target; + const layersOnMap = layers.filter(item => !!map.getLayer(item)); let bbox = [ [e.point.x - this.clickTolerance, e.point.y - this.clickTolerance], [e.point.x + this.clickTolerance, e.point.y + this.clickTolerance] ]; let features = map.queryRenderedFeatures(bbox, { - layers + layers: layersOnMap }); return features; }, @@ -281,12 +271,13 @@ export default { changeCursorPointer() { this.changeCursor('pointer', this.map); }, - removeCursorEvent(layers = this.layersOnMap) { + removeCursorEvent(layers = this.layers) { if (!this.map) { return; } + const layersOnMap = layers.filter(item => !!this.map.getLayer(item)); this.map.off('click', this.sourceMapClickFn); - layers.forEach(layer => { + layersOnMap.forEach(layer => { this.map.off('mousemove', layer, this.changeCursorPointer); this.map.off('mouseleave', layer, this.changeCursorGrab); this.changeCursor('grab', this.map); diff --git a/src/mapboxgl/web-map/control/identify/IdentifyViewModel.js b/src/mapboxgl/web-map/control/identify/IdentifyViewModel.js index 8714baae..e46d2769 100644 --- a/src/mapboxgl/web-map/control/identify/IdentifyViewModel.js +++ b/src/mapboxgl/web-map/control/identify/IdentifyViewModel.js @@ -83,12 +83,12 @@ export default class IdentifyViewModel extends mapboxgl.Evented { } let layerStyle = this._setDefaultPaintWidth(this.map, type, id, defaultPaintTypes[type], this.layerStyle); if (type === 'circle' || type === 'line' || type === 'fill') { - layerStyle = layerStyle[type]; + const _layerStyle = layerStyle[type]; let highlightLayer = Object.assign({}, layer, { id: id + '-identify-SM-highlighted', type, - paint: (layerStyle && layerStyle.paint) || Object.assign({}, paint, mbglStyle[type]), - layout: (layerStyle && layerStyle.layout) || { visibility: 'visible' }, + paint: (_layerStyle && _layerStyle.paint) || Object.assign({}, paint, mbglStyle[type]), + layout: (_layerStyle && _layerStyle.layout) || { visibility: 'visible' }, filter }); this.map.addLayer(highlightLayer); diff --git a/src/mapboxgl/web-map/control/identify/__tests__/Identify.spec.js b/src/mapboxgl/web-map/control/identify/__tests__/Identify.spec.js index b87a3aa9..91ff2246 100644 --- a/src/mapboxgl/web-map/control/identify/__tests__/Identify.spec.js +++ b/src/mapboxgl/web-map/control/identify/__tests__/Identify.spec.js @@ -3,6 +3,7 @@ import SmIdentify from '../Identify.vue'; import Identify from '../index'; import SmWebMap from '../../../WebMap.vue'; import mapLoaded from 'vue-iclient/test/unit/mapLoaded.js'; +import { LineStyle, CircleStyle, FillStyle } from '../../../../_types/index'; describe('Identify.vue', () => { let wrapper; @@ -105,6 +106,138 @@ describe('Identify.vue', () => { done(); }); + it('clcik layer on map', async done => { + // 设置外界传入的参数,对面填充和边框的颜色 + const color = '#FF0000'; + wrapper = mount({ + template: ` + + + + `, + components: { + SmIdentify, + SmWebMap + }, + data() { + return { + mapInfo: { + extent: { + leftBottom: { x: 0, y: 0 }, + rightTop: { x: 0, y: 0 } + }, + level: 5, + center: { x: 0, y: 0 }, + baseLayer: { + mapId: 1160955209, + layerType: 'TILE', + name: 'China', + url: 'http://172.16.14.44:8190/iportal' + }, + layers: [], + description: '', + projection: 'EPSG:3857', + title: 'testMap', + version: '1.0' + }, + layerStyles: { + line: new LineStyle({ 'line-width': 3, 'line-color': '#3fb1e3' }), + circle: new CircleStyle({ 'circle-color': '#3fb1e3', 'circle-radius': 6 }), + fill: new FillStyle({ 'fill-color': '#3fb1e3', 'fill-opacity': 0.8 }), + stokeLine: new LineStyle({ 'line-width': 3, 'line-color': color }) + } + }; + } + }); + const callback = jest.fn(); + identifyWrapper = wrapper.vm.$children[0].$children[0]; + identifyWrapper.$on('loaded', callback); + await mapLoaded(wrapper.vm.$children[0]); + identifyWrapper.setViewModel(); + const spy = jest.spyOn(identifyWrapper.viewModel, 'addOverlayToMap'); + // 手动设置点击事件的参数,确认是再点击面 + const layer = { + id: '第七次人口普查全国各省人口数(未包含港澳台', + type: 'fill', + source: '第七次人口普查全国各省人口数(未包含港澳台', + minzoom: 0, + maxzoom: 22, + layout: {}, + paint: { + 'fill-color': { r: 0.5098039215686274, g: 0.42745098039215684, b: 0.7294117647058823, a: 1 }, + 'fill-opacity': 0.9 + } + }; + // 设置过了条件,点击的行政区域 + const filter = '["all",["==","地区","青海"]]'; + + // + identifyWrapper.viewModel.addOverlayToMap(layer, filter); + + // 确保修改图层的函数被执行 + expect(spy).toHaveBeenCalledTimes(1); + + // 判断图层颜色是否被修改 + expect(identifyWrapper.viewModel.layerStyle.stokeLine.paint['line-color']).toBe(color); + + done(); + }); + + it('clcik layer not on map', async done => { + wrapper = mount({ + template: ` + + `, + components: { + SmIdentify, + SmWebMap + }, + data() { + return { + mapInfo: { + extent: { + leftBottom: { x: 0, y: 0 }, + rightTop: { x: 0, y: 0 } + }, + level: 5, + center: { x: 0, y: 0 }, + baseLayer: { + mapId: 1160955209, + layerType: 'TILE', + name: 'China', + url: 'http://172.16.14.44:8190/iportal' + }, + layers: [], + description: '', + projection: 'EPSG:3857', + title: 'testMap', + version: '1.0' + } + }; + } + }); + const callback = jest.fn(); + identifyWrapper = wrapper.vm.$children[0].$children[0]; + identifyWrapper.$on('loaded', callback); + await mapLoaded(wrapper.vm.$children[0]); + identifyWrapper.bindQueryRenderedFeatures( + { + target: { + getLayer: jest.fn(), + queryRenderedFeatures: (a, b) => { + expect(b.layers.length).toBe(0); + done(); + } + }, + point: { x: 0, y: 0 } + }, + ['test'] + ); + }); + it('grab', async done => { wrapper = mount({ template: `