框选查询

ゞ浴缸里的玫瑰 2023-03-14 08:17 11阅读 0赞

1：先在页面上弄一个div，给它设置样式，并且给它点击事件drawGeometry()，创建矢量图层：

markerLayer = new  
SuperMap.Layer.Markers(“Markers”)；

把创建的矢量图层添加到Map地图里面：

map.addLayers(markerLayer);

然后创建方框区域控制：

drawFeaturequery = new SuperMap.Control.DrawFeature(vectorLayer,  
SuperMap.Handler.Box, \{ “handlerOptions”: \{ “cursorCSS”: “crosshair” \} \});

drawFeaturequery.events.on({

“featureadded”:  
drawCompletedquery \});

2:写击事件，每次点击的时候都要清除上一次的查询，然后开始绘制方框：

function drawGeometry() {
    
             markerLayer.clearMarkers();

drawFeaturequery.activate();

}

3：根据需要查询的条件查询数据：

function drawCompletedquery(obj) {
    
            drawFeaturequery.deactivate();
    
            var feature = obj.feature;
    
            feature.style = styleque;
    
            vectorLayer.addFeatures(feature);
    
            var queryBounds = feature.geometry.bounds;
    
    
    
            var queryParam, queryByBoundsParams, queryService;
    
            queryParam = new

SuperMap.REST.FilterParameter(\{ name: “P15医疗服务\_point\_1@ChronicDisease” \});

queryByBoundsParams = new SuperMap.REST.QueryByBoundsParameters({

queryParams: \[queryParam\], bounds: queryBounds \});

queryService = new

SuperMap.REST.QueryByBoundsService(url, \{

eventListeners: {
    
                    "processCompleted": processCompleted,
    
                    "processFailed": processFailed
    
                }
    
            });

queryService.processAsync(queryByBoundsParams);

}

4：获取上一步查询到的数据，然后设置标记点，再设置点击标记点事件，将详细信息显示出现：

代码截图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MzEzMQ_size_16_color_FFFFFF_t_70]

5：当点击标记点时，如果想要出现弹框显示详细信息，那么则需要：

function openInfoWin() {
    
            closeInfoWin()
    
            var marker = this;
    
            var lonlat = marker.getLonLat();
    
            var contentHTML = "<div style='font-size:.8em; opacity: 0.8;

overflow-y:hidden;text-align:left;padding-left: 20px;’>";

contentHTML += "<div

class=‘row pt-2’>" + “单位名称：” + marker.NAME + “” + “

” + “拼音名称：” + marker.PYNAME + “

” + “

” + “单位地址：” + marker.ADDRESS + “

” + “

” + “联系电话：” + marker.TELEPHONE

*  “”;
    
        var size = new SuperMap.Size(0, 33);
        
              var offset = new SuperMap.Pixel(0, -size.h);
        
              var icon = new SuperMap.Icon("/SuperMap/theme/images/marker.png", size, offset);
        
              var popup = new SuperMap.Popup.FramedCloud("popwin",
        
              new SuperMap.LonLat(lonlat.lon, lonlat.lat),
        
              null,
        
              contentHTML,
        
              icon,
        
              true);
        
        
        
              infowin = popup;
        
              map.addPopup(popup);
        
          }

6：最后在浏览器看一下效果：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MzEzMQ_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MzEzMQ_size_16_color_FFFFFF_t_70]: /images/20230312/24f23522e0f84a618d59ed5b00cfe4d9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MzEzMQ_size_16_color_FFFFFF_t_70 1]: /images/20230312/1b945081fd7442cea6b4a582b1e580bc.png