超图框选

时间:23-04-25 栏目:web前端 作者:zongyan86 评论:0 点击: 259 次

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

超图

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();
    },


声明: 本文由( zongyan86 )原创编译,转载请保留链接: 超图框选

关注我们