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

已于 2024-04-30 09:43:05 修改
阅读量1.1k 收藏 6
点赞数 5
分类专栏： openlayers 文章标签： openplayers
于 2024-04-29 23:30:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mmj_mmj/article/details/138326150
版权

 OpenLayers入门（一） - 知乎

<!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

<!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>

<!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数据

 

 

<!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>

<!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直播

<!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>

檀玥
关注
  • 5
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
Openlayers实战：加载高德地图
大剑师兰特的GIS世界
07-14 1014
在国内地图市场上，高德地图占据了重要的地位。Openlayers可以加载高德地图，这其中根据不同的参数，可以显示遥感地图，矢量地图等，可以显示中文，英文。
前端-基于Vue，Openlayer进行地图展示，支持OSM，高德
GIS摆渡人
04-22 573
文章目录组件安装Vue代码展示 组件安装 cnpm i ol -S Vue代码 <template> <div id="map" ref="rootmap"></div> </template> <script> import 'ol/ol.css' import { Map, View } from 'ol' import TileLayer from 'ol/layer/Tile' import OSM from 'ol/source
openlayers 4.2 加载百度 高德
08-19
openlayers 4.2 加载百度地图（在线 离线） 高德地图（在线 离线）
2. Openlayers加载天地图、百度、高德、ArcGIS、Bing、OSM、Google地图 （结合Vue 详细教程）
热门推荐
全栈三维GIS开发工程师，擅长Cesium、OpenLayers、Three.js、WebGL、Vue、Django、GDAL和QGIS技术。在这个博客里，我将分享我的开发经验、技术心得和项目案例，希望能为GIS爱好者和开发者提供有价值的参考。
06-11 1万+
本文介绍了如何在 OpenLayers 中加载不同类型的地图数据源，包括天地图、百度地图、高德地图、ArcGIS、Bing Maps、OpenStreetMap (OSM) 和 Google 地图。针对每种数据源，本文提供了相应的示例代码，展示了如何使用专用加载器或通用加载器实现底图加载。通过遵循本文的示例和指南，您可以轻松地将各种地图数据源添加到您的 OpenLayers 项目中，并根据自己的需求进行修改和调整。
高德谷歌腾讯天地图地图瓦片url
最新发布
州仔
05-30 753
高德谷歌腾讯天地图地图瓦片url
openlayers切换加载天地图和高德地图
ssy001128的博客
06-09 1127
openlayers切换加载天地图和高德地图
OpenLayers 6加载各种地图源的方法(天地图、百度、高德、ArcGIS、Bing、OSM、Google等)
liu2004051957的博客
11-18 1万+
OpenLayers是一个用于开发WebGIS客户端的JavaScript包。OpenLayers 支持多种常用的地图来源，包括天地图、百度地图、高德地图、ArcGIS地图、Bing地图、OSM地图、Google地图等。
OpenLayers地图
weixin_39150852的博客
11-20 1439
搭建本地环境,配置瓦片数据,下载文件并找到相应路径 链接: https://pan.baidu.com/s/1c6nfZodGBzUxyG2PhmFzPA 提取码: p3qi 开启本地服务器 导入本地包 链接: https://pan.baidu.com/s/1qhe4kxwpmez5-7dBVA1S1g 提取码: w6hp 将文件解压放到asset文件夹 在index.htm...
openlayer加载
09-05
openlayer的加载原理以及如何加载openlayer的一个小例子
openlayers：实现加载高德地图（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
02-06 724
openlayers：实现加载高德地图（附完整源码）
openlayers实现地图显示功能
weixin_46429290的博客
01-07 2059
openlayers作为开源GIS，是一个模块化、高性能并且功能丰富的WebGIS客户端的JavaScript包，用于显示地图及空间数据，并与之进行交互，具有灵活的扩展机制。 基于openlayers的API显示一个瓦片地图，瓦片数据源很多都有提供开源的，比如百度、高德、天地图等 在进行瓦片地图显示时，需要创建一个地图容器对象（ol.Map）来加载瓦片图层俩绑定对应的瓦片数据源 在进行脚本区域编写代码，实现瓦片加载的功能，即创建一个地图容器对象（ol.Map），通过target参数关联到地图容器中（ID为m
openlayers3添加各种地图资源
06-21
webgis开发，文件里包含用openlayers3加载百度地图、天地图、高德地图、google地图等源代码，很全很实用。
高德地图风场效果demo源代码
10-29
【高德地图风场效果demo源代码】是一个用于展示如何在地图上实现风场效果的示例项目。这个源代码提供了在本地运行的环境，使开发者可以观察到动态的风场特效。它不仅局限于高德地图，还兼容了其他地图服务，如百度...
openlayers加载瓦片地图并手动标记坐标点
04-29
OpenLayers 是一个强大的开源JavaScript库，用于在Web浏览器中创建交互式地图应用。它支持多种数据源，包括瓦片地图，使得开发者可以轻松地将地理信息集成到网站中。本教程将详细介绍如何使用OpenLayers加载瓦片地图...
使用openlayers加载离线地图实例
10-06
在IT行业中，前端开发是构建Web应用程序的关键部分，而OpenLayers是一个流行的JavaScript库，用于创建交互式的、基于Web的地图应用。本实例将详细介绍如何利用OpenLayers加载离线地图，并通过mui将其打包成移动应用...
openlayers 调用百度地图
08-19
OpenLayers是一个开源JavaScript库，用于创建交互式的地图应用，而百度地图是中国领先的在线地图服务提供商，提供丰富的地图数据和API。 要实现OpenLayers调用百度地图，我们需要做以下几步： 1. **理解OpenLayers...
openLayers基础地图操作
前端小记
02-14 7104
和高德地图，百度地图，腾讯地图，Arcgis一样，OpenLayers是一个用于开发WebGIS客户端的JavaScript包。
openlayers6【二】Map地图详解，初始化一个map地图
@必意玲
04-02 8415
openlayers 6【二】vue 初始化map地图详解
（五）openlayers加圆形以及引入element-ui组件
fang427的博客
04-26 461
openlayers加圆形以及引入elemen-ui组件
openlayers 高德地图
07-28
OpenLayers是一个开源的JavaScript库，用于在Web页面上显示交互式地图。高德地图是国内一家知名的地图服务提供商，OpenLayers可以通过加载高德地图的图层来显示高德地图数据。 在OpenLayers中加载高德地图时，需要使用高德地图的瓦片图层URL和投影方式。通过设置正确的投影方式，可以确保地图数据在OpenLayers中正确显示。在代码中，可以使用类似下面的方式加载高德地图图层： ```javascript var gdMapLayer = new TileLayer({ source: new XYZ({ projection: gcj02Mecator, url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}' }), zIndex: 0 }); ``` 这段代码中，`gcj02Mecator`是高德地图的投影方式，`url`是高德地图瓦片的URL模板。通过设置正确的URL和投影方式，可以加载高德地图的图层并在OpenLayers中显示。 然而，根据引用\[1\]和引用\[3\]的描述，切换到高德地图后可能会出现坐标点偏移的问题。这可能是由于高德地图和其他地图服务商使用不同的坐标系统导致的。在切换地图时，需要确保坐标点的转换和显示方式正确，以避免出现位置偏移的情况。 总结来说，OpenLayers可以通过加载高德地图的图层来显示高德地图数据。但在切换地图时，需要注意坐标点的转换和显示方式，以确保地图数据在不同地图之间正确显示。 #### 引用[.reference_title] - *1* *2* *3* [vue openlayers 加载高德地图等 gcj02 的图层偏移问题](https://blog.csdn.net/weixin_42776111/article/details/126539024)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值