IT博客汇 | 超图框选

超图框选

zongyan86发表于 2023-04-25 02:54:28

直接上代码，当然也可以结合桌面端，进行范围，集合，数据集等查询

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

getSuperMap2d() {

let url = window.bimgisConfig.iserverURL;
// 初始化地图
this.map = new SuperMap.Map('map', {
controls: [
new SuperMap.Control.Navigation(),
new SuperMap.Control.Zoom()
]
});
this.map.addControl(new SuperMap.Control.MousePosition());
// 初始化图层
let layer = new SuperMap.Layer.TiledDynamicRESTLayer('China', url, null, { maxResolution: 'auto' });
// 监听图层信息加载完成事件
let that = this;
layer.events.on({ 'layerInitialized': addLayer });

function addLayer() {
that.map.addLayer(layer);
// 显示地图范围
that.map.setCenter(new SuperMap.LonLat(117.42, 24.26), 1.000000865364);// 漳州
}

that.markers = new SuperMap.Layer.Markers('Markers');
that.map.addLayer(that.markers);

// 框选
that.vectorLayer = new SuperMap.Layer.Vector('Vector Layer');// 新建一个vectorLayer的矢量图层
that.map.addLayer(that.vectorLayer);
that.drawFeature = new SuperMap.Control.DrawFeature(that.vectorLayer, SuperMap.Handler.Box, { 'handlerOptions': { 'cursorCSS': 'crosshair' }});
that.drawFeature.events.on({
'featureadded': function(obj) {

that.vectorLayer.removeAllFeatures();

that.drawFeature.deactivate();
let feature = obj.feature;
feature.style = {
strokeColor: '#304DBE',
strokeWidth: 1,
pointerEvents: 'visiblePainted',
fillColor: '#304DBE',
fillOpacity: 0.3
};
that.vectorLayer.addFeatures(feature);

let queryBounds = feature.geometry.bounds;
console.log(queryBounds);

let projectIds = that.getProjectId(queryBounds);

//过滤数据

}
});
that.map.addControl(that.drawFeature);

},
getProjectId(queryBounds) {
let projectIds = [];
this.makerList.map(item => {
if (item.longitude >= queryBounds.left && item.longitude <= queryBounds.right && item.latitude >= queryBounds.bottom && item.latitude <= queryBounds.top) {
projectIds.push(item.id);
}
});
return projectIds;
},
drawGeometry() {
// 先清除
this.vectorLayer.removeAllFeatures();

//过滤数据
...

this.drawFeature.activate();
},

声明: 本文采用 BY-NC-SA 协议进行授权 | WEB开发分享
转载请注明转自《超图框选》