html+js+openlayer的框选事件

qq_32736535

已于 2022-06-01 09:54:47 修改

阅读量150

点赞数

分类专栏： openlayes 文章标签： javascript html 前端

于 2022-06-01 09:53:12 首次发布

本文链接：https://blog.csdn.net/qq_32736535/article/details/125078214

版权

openlayes 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./ol.css" type="text/css" />
    <script src="./jquery-1.8.3.min.js"></script>
    <script src="./ol.js"></script>
    <style>
        .map {
            width: 100%;
        }
    </style>
    <title>Document</title>
</head>

<body>
    <div id="map" class="map"></div>
    <script type="text/javascript">
        var colorLayer = []; //选中区域的填色图层

        $("#map").css("height", ($(window).height() - 20) + "px");
        var map_ter = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: "http://t3.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=你的天地图key",
            }),
            zIndex: 0,
        });
        var map_ter2 = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: "http://t1.tianditu.com/DataServer?T=cva_w&X={x}&Y={y}&L={z}&tk=你的天地图key",
            }),
            zIndex: 0,
        });
        var map = new ol.Map({
            target: 'map',
            layers: [map_ter, map_ter2],
            view: new ol.View({
                center: [119.2, 36.3],
                projection: "EPSG:4326",
                zoom: 7.5,
            }),
        });

        //添加选择和框选控件，按住Ctr键，使用鼠标框选采样点
        let select = new ol.interaction.Select();
        map.addInteraction(select);
        let dragBox = new ol.interaction.DragBox({
            condition: ol.events.condition.platformModifierKeyOnly,
        });
        map.addInteraction(dragBox);
        var data = [{
            V_LON: 119.2,
            V_LAT: 36.3,
            V_STATION_NUM: "测试"
        }];
        console.log(data);
        var WFSVectorSource = new ol.source.Vector();
        for (let i = 0; i < data.length; i++) {
            var feature = new ol.Feature({
                geometry: new ol.geom.Point([data[i].V_LON, data[i].V_LAT]),
                popupData: {
                    V_STATION_NUM: data[i].V_STATION_NUM,
                },
            });
            feature = setFeature(feature);
            WFSVectorSource.addFeature(feature);
        }
        var WFSVectorLayer = new ol.layer.Vector({
            source: WFSVectorSource,
        });
        map.addLayer(WFSVectorLayer);
        dragBox.on("boxend", () => {
                let extent = dragBox.getGeometry().getExtent();
                WFSVectorSource.forEachFeatureIntersectingExtent(
                    extent,
                    (feature) => {

                        let coordinate = [
                            [
                                [extent[0], extent[1]],
                                [extent[0], extent[3]],
                                [extent[2], extent[3]],
                                [extent[2], extent[1]],
                                [extent[1], extent[2]],
                            ],
                        ];
                        var boxFeature = new ol.Feature({
                            geometry: new ol.geom.Polygon(coordinate),
                        });
                        colorLayer = new ol.layer.Vector({
                            source: new ol.source.Vector({
                                features: [boxFeature],
                            }),
                            style: new ol.style.Style({
                                fill: new ol.style.Fill({
                                    color: "rgba(0, 0, 0, 0.3)",
                                }),
                            }),
                        });
                        map.addLayer(colorLayer);



                        console.log(feature.A.popupData);
                    }
                );
            })
            //下一次选中取消上次的区域
        dragBox.on("boxstart", () => {
            map.removeLayer(colorLayer);
        });

        //点击地图的时候让选中区域可以取消
        map.on("click", function(e) {
            // map.removeLayer(feature);
            map.removeLayer(colorLayer);
            //获取当前的feaure
            // let pixel = e.map.getEventPixel(e.originalEvent);
            // let hit = map.hasFeatureAtPixel(pixel);
            // if (hit) {
            //     let feature = e.map.forEachFeatureAtPixel(pixel, function(feature) {
            //         return feature;
            //     });
            //     if (!feature.A.popupData) {
            //         map.removeLayer(feature);
            //         map.removeLayer(colorLayer);
            //         return;
            //     }
            // }
        })

        //填色
        function setFeature(feature) {
            feature.setStyle(
                new ol.style.Style({
                    image: new ol.style.Circle({
                        radius: 6,
                        fill: new ol.style.Fill({
                            color: "#00F"
                        }),
                    }),
                })
            );
            return feature;
        }
    </script>
</body>

</html>