OpenLayers入门①（引入的是一个高德地图）

檀玥2024-05-04 8:49

OpenLayers入门（一） - 知乎

html 复制代码 
<!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">
    <title>Document</title>
    <!-- 1.导入ol依赖 -->
    <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>
    <style>
        .ol-zoomslider {
            top: 7.5em;
        }
    </style>
</head>

<body>
    <!-- 2.设置地图的挂载点 -->
    <div id="map">

    </div>
    <script>
        // 3.初始化一个高德图层
        const gaode = new ol.layer.Tile({
            title: "高德地图",
            source: new ol.source.XYZ({
                url: 'https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
                wrapX: false
            })
        });

        // 4.初始化openlayer地图
        const map = new ol.Map({
            // 将初始化的地图设置到id为map的DOM元素上
            target: "map",
            // 设置图层
            layers: [gaode],
            view: new ol.View({
                center: [114.30, 30.50],
                // 设置地图放大级别
                zoom: 14,
                projection: "EPSG:4326"
            })
        })
        // 视图跳转控件
        const ZoomToExtent = new ol.control.ZoomToExtent({
            extent: [126.4, 45.7, 126.7, 45.9]
        })
        map.addControl(ZoomToExtent)

        // 放大缩小控件
        const zoomslider = new ol.control.ZoomSlider();
        map.addControl(zoomslider)

        // 全屏控件
        const fullScreen = new ol.control.FullScreen();
        map.addControl(fullScreen);



        // 1.通用样式信息和几何信息构建点要素
        // 几何
        const point = new ol.Feature({
            geometry: new ol.geom.Point([126.5350, 45.8021])
        });

        let style = new ol.style.Style({
            // image属性设置点要素的样式
            image: new ol.style.Circle({
                // radius设置点的半径 单位degree
                radius: 10,
                fill: new ol.style.Fill({
                    color: "#ff2d51"
                }),
                stroke:new ol.style.Stroke({
                    width:2,
                    color:"#333"
                })
            })
        })
        point.setStyle(style);
        // 2.将要素添加到矢量数据源
        let source = new ol.source.Vector({
            features: [point]
        })
        // 3.将矢量数据源添加到矢量图层
        let layer = new ol.layer.Vector({
            source
        })
        // 4.添加矢量图层到地图容器
        map.addLayer(layer)
    </script>

</body>

</html>

geojson

html 复制代码 
<!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">
    <title>Document</title>
    <!-- 1.导入ol依赖 -->
    <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>
    <style>
        .ol-zoomslider {
            top: 7.5em;
        }
    </style>
</head>

<body>
    <!-- 2.设置地图的挂载点 -->
    <div id="map">

    </div>
    <script>
        // 3.初始化一个高德图层
        const gaode = new ol.layer.Tile({
            title: "高德地图",
            source: new ol.source.XYZ({
                url: 'https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
                wrapX: false
            })
        });

        // 4.初始化openlayer地图
        const map = new ol.Map({
            // 将初始化的地图设置到id为map的DOM元素上
            target: "map",
            // 设置图层
            layers: [gaode],
            view: new ol.View({
                center: [114.30, 30.50],
                // 设置地图放大级别
                zoom: 14,
                projection: "EPSG:4326"
            })
        })
        // 视图跳转控件
        const ZoomToExtent = new ol.control.ZoomToExtent({
            extent: [126.4, 45.7, 126.7, 45.9]
        })
        map.addControl(ZoomToExtent)

        // 放大缩小控件
        const zoomslider = new ol.control.ZoomSlider();
        map.addControl(zoomslider)

        // 全屏控件
        const fullScreen = new ol.control.FullScreen();
        map.addControl(fullScreen);



        // 创建geojson数据
        var data = {
            type:"FeatureCollection",
            features:[
                {
                    type:"Feature",
                    geometry:{
                        type:"Point",
                        coordinates:[114.30,30.50]
                    }
                }
            ]
        }
        // 将数据添加到矢量数据源中
        var source = new ol.source.Vector({
            features:new ol.format.GeoJSON().readFeatures(data)
        })
        // 设置矢量图层
        var layer = new ol.layer.Vector({
            source
        })
        const style = new ol.style.Style({
            image:new ol.style.Circle({
                radius:10,
                fill:new ol.style.Fill({
                    color:"#ff2d51"
                }),
                stroke:new ol.style.Stroke({
                    color:"#333"
                })
            })
        })
        layer.setStyle(style)
        // 添加矢量图层到地图容器
        map.addLayer(layer)
    </script>

</body>

</html>
html 复制代码 
<!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">
    <title>Document</title>
    <!-- 1.导入ol依赖 -->
    <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>
</head>

<body>
    <!-- 2.设置地图的挂载点 -->
    <div id="map">

    </div>
    <script>
        // 3.初始化一个高德图层
        const gaode = new ol.layer.Tile({
            title: "高德地图",
            source: new ol.source.XYZ({
                url: 'https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
                wrapX: false
            })
        });

        // 4.初始化openlayer地图
        const map = new ol.Map({
            // 将初始化的地图设置到id为map的DOM元素上
            target: "map",
            // 设置图层
            layers: [gaode],
            view: new ol.View({
                center: [114.30, 30.50],
                // 设置地图放大级别
                zoom: 14,
                projection: "EPSG:4326"
            })
        })


    // 区域要素
        // 设置line要素的geojson数据
        var data = {
            type:"FeatureCollection",
            features:[{
                type:"Feature",
                geometry:{
                    type:"LineString",
                    coordinates:[
                        [114.30,30.50],
                        [116,30.31]
                    ]
                }
            },{
                type:"Feature",
                geometry:{
                    type:"Polygon",
                    coordinates:[[
                        [114.30,30.50],
                        [116,30.50],
                        [116,30]
                    ]]
                }
            }]
        }
        // 设置矢量数据源读取数据
        let source = new ol.source.Vector({
            features:new ol.format.GeoJSON().readFeatures(data)
        })
        // 设置矢量图层
        let layer = new ol.layer.Vector({
            source
        })
        let style = new ol.style.Style({
            // stroke线设置样式
            stroke: new ol.style.Stroke({
                color:"#ff2d51",
                width:3
            }),
            fill:new ol.style.Fill({
                color:"rgba(50,50,50,0.3)"
            })
        })
        layer.setStyle(style)
        // 添加到地图容器
        map.addLayer(layer)
    </script>

</body>

</html>

加载本地的geojson数据

html 复制代码 
<!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">
    <title>Document</title>
    <!-- 1.导入ol依赖 -->
    <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>
</head>

<body>
    <!-- 2.设置地图的挂载点 -->
    <div id="map">

    </div>
    <script>
        // 3.初始化一个高德图层
        const gaode = new ol.layer.Tile({
            title: "高德地图",
            source: new ol.source.XYZ({
                url: 'https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
                wrapX: false
            })
        });

        // 4.初始化openlayer地图
        const map = new ol.Map({
            // 将初始化的地图设置到id为map的DOM元素上
            target: "map",
            // 设置图层
            layers: [gaode],
            view: new ol.View({
                center: [114.30, 30.50],
                // 设置地图放大级别
                zoom: 14,
                projection: "EPSG:4326"
            })
        })


        // 设置矢量数据源加载geojson数据
        var source = new ol.source.Vector({
            url:"./data/map.geojson",
            format:new ol.format.GeoJSON()
        })
        // 设置矢量图层
        var layer = new ol.layer.Vector({
            source
        })
        const style = new ol.style.Style({
            image:new ol.style.Circle({
                radius:8,
                fill:new ol.style.Fill({
                    color:"#ff2d51"
                })
            })
        })
        layer.setStyle(style)
        // map
        map.addLayer(layer)
    </script>

</body>

</html>
html 复制代码 
<!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">
    <title>Document</title>
    <!-- 1.导入ol依赖 -->
    <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>
</head>

<body>
    <!-- 2.设置地图的挂载点 -->
    <div id="map">

    </div>
    <script>
        // 3.初始化一个高德图层
        const gaode = new ol.layer.Tile({
            title: "高德地图",
            source: new ol.source.XYZ({
                url: 'https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
                wrapX: false
            })
        });

        // 4.初始化openlayer地图
        const map = new ol.Map({
            // 将初始化的地图设置到id为map的DOM元素上
            target: "map",
            // 设置图层
            layers: [gaode],
            view: new ol.View({
                center: [114.30, 30.50],
                // 设置地图放大级别
                zoom: 4,
                projection: "EPSG:4326"
            })
        })

        // 加载网络geojson数据
        const china_source = new ol.source.Vector({
            url:"https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json",
            format:new ol.format.GeoJSON()
        })
        const china_layer = new ol.layer.Vector({
            source:china_source
        })
        const china_style = new ol.style.Style({
            fill:new ol.style.Fill({
                color:'rgba(50,50,50,0.4)'
            }),
            stroke:new ol.style.Stroke({
                color:"#ff2d5180",
                width:2
            })
        })
        china_layer.setStyle(china_style)
        map.addLayer(china_layer)


        // 湖北
        const huibei_source = new ol.source.Vector({
            url:"https://geo.datav.aliyun.com/areas_v3/bound/420000_full.json",
            format:new ol.format.GeoJSON()
        })
        const huibei_layer = new ol.layer.Vector({
            source:huibei_source
        })
        const huibei_style = new ol.style.Style({
            fill:new ol.style.Fill({
                color:'#333'
            }),
        })
        huibei_layer.setStyle(huibei_style)
        map.addLayer(huibei_layer)
    </script>

</body>

</html>

地图事件及漫游

地图事件及漫游-CSDN直播

html 复制代码 
<!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">
    <title>Document</title>
    <!-- 1.导入ol依赖 -->
    <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>
    <style>
        .btn{
            position: fixed;
            z-index: 100;
            top: 30px;
            right: 50px;
        }
    </style>
</head>

<body>
    <!-- 2.设置地图的挂载点 -->
    <div id="map">

    </div>
    <button class="btn">复位地图</button>
    <script>
        // 3.初始化一个高德图层
        const gaode = new ol.layer.Tile({
            title: "高德地图",
            source: new ol.source.XYZ({
                url: 'https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
                wrapX: false
            })
        });

        // 4.初始化openlayer地图
        const map = new ol.Map({
            // 将初始化的地图设置到id为map的DOM元素上
            target: "map",
            // 设置图层
            layers: [gaode],
            view: new ol.View({
                center: [114.30, 30.50],
                // 设置地图放大级别
                zoom: 14,
                projection: "EPSG:4326"
            })
        })

        // source-layer
        var source = new ol.source.Vector({})
        var layer = new ol.layer.Vector({
            source
        })
        map.addLayer(layer);
        // 给地图绑定一个点击事件
        map.on("click", (evt) => {
            var { coordinate } = evt;
            console.log(coordinate)
            var point = new ol.Feature({
                geometry: new ol.geom.Point(coordinate)
            })
            source.addFeature(point);



            // 实现飞行视角--漫游
            const view = map.getView();
            view.animate({
                center: coordinate
            })
        })


        // 复位按钮
        var btn = document.querySelector(".btn");
        btn.onclick = function () {
            map.getView().animate({
                center:[114.30,30.50],
                zoom:6,
                duration:3000
            })
        }
    </script>

</body>

</html>
热门推荐
0119个Web前端交互式3D JavaScript框架和库02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04RAG 实践- Ollama+RagFlow 部署本地知识库05【一文读懂】NTN（非地面网络）技术介绍06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07ZZ038 物联网应用与服务赛题第J套08组基轨迹建模 GBTM的介绍与实现（Stata 或 R）09Docker 夺命连环 15 问10VSCode插件 —— Cody AI （免费AI助手！）