openLayer-空间分析

@仗剑走天涯

已于 2024-04-29 19:12:34 修改

阅读量117

点赞数 2

文章标签：前端图像处理 html javascript vue

于 2024-04-29 19:09:55 首次发布

本文链接：https://blog.csdn.net/zhushanlin/article/details/138322552

版权

1、方法一（不清楚选择框）

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1、导入openlayers的依赖 -->
    <link rel="stylesheet" href="https://lib.baomitu.com/ol3/4.6.5/ol.css">
    <script src="https://lib.baomitu.com/ol3/4.6.5/ol.js"></script>
    <script src="./utils/index.js"></script>
    <script src="./utils/createDraw.js"></script>
    <script src="./utils/setAnimateStyle.js"></script>
    <script src="https://lib.baomitu.com/Turf.js/latest/turf.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #map {
            width: 100vw;
            height: 100vh;
        }

        #btn {
            position: absolute;
            z-index: 1000;
            top: 20px;
            left: 60px;
            border: none;
            color: #fff;
            width: 100px;
            height: 60px;
            border-radius: 10px;
            background-color: #157347;
        }
    </style>
</head>

<body>
    <button id="btn" onclick="activeDraw()">空间分析</button>
    <!-- 2、设置地图容器的挂载点 -->
    <div id="map">

    </div>
    <script>
        /* 3、设置一个瓦片图层 */
        const gaode = new ol.layer.Tile({
            title: "高德地图",
            source: new ol.source.XYZ({
                url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
                wrapX: false
            })
        });
        /* 4、实例化地图 */
        /* new Vue({
            el
        }) */
        const map = new ol.Map({
            /* 将实例化的地图挂载到对应的DOM元素上 */
            target: "map",
            layers: [gaode],
            /* 设置地图以中心点显示/坐标显示/方法级别显示 */
            view: new ol.View({
                center: [114.30, 30.50],
                zoom: 6,
                /* 坐标 */
                projection: "EPSG:4326"
            })

        })
        const source = new ol.source.Vector({
            format: new ol.format.GeoJSON(),
            url: "./data/data.json"
        })
        const layer = new ol.layer.Vector({
            source,
            style: setPntStyle({
                fill: "#ff2d5180"
            })
        })
        map.addLayer(layer);

        /* 创建画布 -画笔 */
        let draw_layer = new ol.layer.Vector({
            source: new ol.source.Vector({

            })
        })
        map.addLayer(draw_layer);
        let draw = createDraw({
            type: "Box",
            source: draw_layer.getSource()
        })
        let btn = document.getElementById("btn");
        function activeDraw() {
            /* 激活画笔 */
            map.addInteraction(draw);
            /* 禁止样式 */
            btn.disabled = true;
            btn.style.cursor = "no-drop"
        }

        /* 高亮图层 */
        const high_layer = new ol.layer.Vector({
            source: new ol.source.Vector({

            }),
            style: setAnimateStyle({ map })
        })
        map.addLayer(high_layer)
        draw.on("drawend", evt => {
            /* 默认样式 start */
            btn.disabled = false;
            btn.style.cursor = "default"
            map.removeInteraction(draw)
            /* 默认样式 end */
            let feature = evt.feature;
            /* feature-geojson */
            let polygon = new ol.format.GeoJSON().writeFeatureObject(feature);
            console.log(polygon);
            /* 获取所有的source要素
            1、如果在polygon中的就高亮
            2、不在的不高亮
             */
            let features = source.getFeatures();
            /* 清空画布 */
            high_layer.getSource().clear();
            draw_layer.getSource().clear();
            features.forEach(item => {

                let point = new ol.format.GeoJSON().writeFeatureObject(item);
                var result = turf.booleanContains(polygon, point);
                if (result) {

                    console.log(item);
                    high_layer.getSource().addFeature(item);
                }
            })
        })
    </script>
</body>

</html>

2、方法二（清除选择框）

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1、导入openlayers的依赖 -->
    <link rel="stylesheet" href="https://lib.baomitu.com/ol3/4.6.5/ol.css">
    <script src="https://lib.baomitu.com/ol3/4.6.5/ol.js"></script>
    <script src="./utils/index.js"></script>
    <script src="./utils/createDraw.js"></script>
    <script src="./utils/setAnimateStyle.js"></script>
    <script src="https://lib.baomitu.com/Turf.js/latest/turf.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #map {
            width: 100vw;
            height: 100vh;
        }

        #btn {
            position: absolute;
            z-index: 1000;
            top: 20px;
            left: 60px;
            border: none;
            color: #fff;
            width: 100px;
            height: 60px;
            border-radius: 10px;
            background-color: #157347;
        }
    </style>
</head>

<body>
    <button id="btn" onclick="activeDraw()">空间分析</button>
    <!-- 2、设置地图容器的挂载点 -->
    <div id="map">

    </div>
    <script>
        /* 3、设置一个瓦片图层 */
        const gaode = new ol.layer.Tile({
            title: "高德地图",
            source: new ol.source.XYZ({
                url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
                wrapX: false
            })
        });
        /* 4、实例化地图 */
        /* new Vue({
            el
        }) */
        const map = new ol.Map({
            /* 将实例化的地图挂载到对应的DOM元素上 */
            target: "map",
            layers: [gaode],
            /* 设置地图以中心点显示/坐标显示/方法级别显示 */
            view: new ol.View({
                center: [114.30, 30.50],
                zoom: 6,
                /* 坐标 */
                projection: "EPSG:4326"
            })

        })
        const source = new ol.source.Vector({
            format: new ol.format.GeoJSON(),
            url: "./data/data.json"
        })
        const layer = new ol.layer.Vector({
            source,
            style: setPntStyle({
                fill: "#ff2d5180"
            })
        })
        map.addLayer(layer);

        /* 创建画布 -画笔 */
        let draw_layer = new ol.layer.Vector({
            source: new ol.source.Vector({

            }),
            style: setAnimateStyle({ map })
        })
        map.addLayer(draw_layer);
        let draw = createDraw({
            type: "Box",
            source: draw_layer.getSource()
        })
        let btn = document.getElementById("btn");
        function activeDraw() {
            /* 激活画笔 */
            map.addInteraction(draw);
            /* 禁止样式 */
            btn.disabled = true;
            btn.style.cursor = "no-drop"
        }

        /* 高亮图层 */
        // const high_layer = new ol.layer.Vector({
        //     source: new ol.source.Vector({

        //     }),
        //     style: setAnimateStyle({ map })
        // })
        // map.addLayer(high_layer)
        draw.on("drawend", evt => {
            /* 默认样式 start */
            btn.disabled = false;
            btn.style.cursor = "default"
            map.removeInteraction(draw)
            /* 默认样式 end */
            let feature = evt.feature;
            /* feature-geojson */
            let polygon = new ol.format.GeoJSON().writeFeatureObject(feature);
            console.log(polygon);
            /* 获取所有的source要素
            1、如果在polygon中的就高亮
            2、不在的不高亮
             */
            let features = source.getFeatures();
            /* 清空画布 */
            // high_layer.getSource().clear();
            draw_layer.getSource().clear();
            features.forEach(item => {

                let point = new ol.format.GeoJSON().writeFeatureObject(item);
                var result = turf.booleanContains(polygon, point);
                if (result) {
                    draw_layer.getSource().addFeature(item);
                    console.log(item);

                }
            })
        })
    </script>
</body>

</html>