Skip to content

Commit

Permalink
【fix】ISVJ-7804; review by songym
Browse files Browse the repository at this point in the history
  • Loading branch information
@xiongjiaojiao
xiongjiaojiao committed Mar 27, 2024
1 parent 533847d commit f0e2d19
Show file tree
Hide file tree
Showing 3 changed files with 143 additions and 19 deletions.
23 changes: 7 additions & 16 deletions src/mapboxgl/web-map/control/identify/Identify.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down Expand Up @@ -176,7 +165,7 @@ export default {
layerStyle: this.layerStyle
});
this.map && this.bindMapClick(this.map);
this.changeClickedLayersCursor(this.layersOnMap);
this.changeClickedLayersCursor(this.layers);
}
},
// 给图层绑定popup和高亮
Expand Down Expand Up @@ -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;
},
Expand Down Expand Up @@ -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);
Expand Down
6 changes: 3 additions & 3 deletions src/mapboxgl/web-map/control/identify/IdentifyViewModel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
133 changes: 133 additions & 0 deletions src/mapboxgl/web-map/control/identify/__tests__/Identify.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -105,6 +106,138 @@ describe('Identify.vue', () => {
done();
});

it('clcik layer on map', async done => {
// 设置外界传入的参数，对面填充和边框的颜色
const color = '#FF0000';
wrapper = mount({
template: `
<sm-web-map style="height:700px" :mapId="mapInfo">
<sm-identify
:fields="['地区','人口数']"
:layerStyle="layerStyles"
:layers="['第七次人口普查全国各省人口数(未包含港澳台','第七次人口普查全国各省人口数(未包含港澳台-strokeLine']">
</sm-identify>
</sm-web-map> `,
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: `<sm-web-map style="height:700px" :mapId="mapInfo">
<sm-identify :layers="['test']"></sm-identify>
</sm-web-map>`,
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: `
Expand Down

0 comments on commit f0e2d19

Please sign in to comment.