openlayers笔记

于 2024-06-14 11:27:20 发布
阅读量100 收藏
点赞数 3
分类专栏： WebGis 文章标签： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_36152801/article/details/139677138
版权

使用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>

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"
        })
    })


    // 区域要素
    // 设置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>

{
 "type":"FeatureCollection",
 "features":[
  {
   "type":"Feature",
   "geometry":{
     "type":"Point",
     "coordinates":[
         114.30,
           30.50
     ]
   }
  }
 ]

}

克里斯蒂亚诺更新
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
openlayers：实现加载高德地图（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
02-06 848
openlayers：实现加载高德地图（附完整源码）
009：vue+openlayer加载高德地图（4种形式）
大剑师兰特的GIS世界
08-09 1372
本示例的目的是介绍演示如何在vue+openlayers中添加高德地图，并且含多种的表现形式。直接复制 vue+openlayers源代码，操作2分钟即可运行实现效果
openlayers 4.2 加载百度 高德
08-19
openlayers 4.2 加载百度地图（在线 离线） 高德地图（在线 离线）
OpenLayers入门①（引入的是一个高德地图）
Mmj_mmj的博客
04-29 1313
【代码】OpenLayers入门①（引入的是一个高德地图）
Openlayers实战：加载高德地图
大剑师兰特的GIS世界
07-14 1045
在国内地图市场上，高德地图占据了重要的地位。Openlayers可以加载高德地图，这其中根据不同的参数，可以显示遥感地图，矢量地图等，可以显示中文，英文。
openlayers笔记1：加载矢量地图数据的方法以及应对跨域问题的解决方法
01-08
OpenLayers笔记1：加载矢量地图数据的方法以及应对跨域问题的解决方法加载矢量地图数据的两种方法加载本地geojson格式文件出现的跨域问题及解决方法。向geoserver请求WFS服务出现的跨域问题及解决方法。 加载矢量...
OpenLayers 笔记4：矢量图层交互与选定矢量要素突出显示
01-08
OpenLayers提供ol.interaction.Select类，来实现对矢量图层的交互。 也是通过监听地图、窗口事件，触发交互，使对应矢量要素产生动态变化。 ol.interaction.Select概述 ol.interaction.Select类可供设置的属性主要...
openlayers笔记ol.layer.Tile
beiniao123的博客
10-18 3451
//在EPSG:4326中创建map <!DOCTYPE html> <html> <head> <title>EPSG:4326</title> <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="tex...
OpenLayers笔记--加载百度地图和添加比例尺
安暖的缝隙
03-08 2571
&lt;!DOCTYPE html&gt;    &lt;html&gt;    &lt;head&gt;    &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt;        &lt;title&gt;&lt;/title&gt;        &lt;link r
openlayers 基础知识+经验总结
最新发布
m0_64932903的博客
05-23 618
projection: 'EPSG:3857', ----对应坐标系代码 openlayers默认是3857，坐标系如下。center: [13225802.86902,4975701.82998], ----- 中心坐标。zoom: 17.6,-----缩放层级 一般市级 7.5 村级17.5。view: new View() -----只能有0个或者1个。=========================矢量图层==============这将返回一个新的坐标(并且不修改原来的坐标)。
openlayers 调用百度地图
08-19
openlayers 调用百度地图
openlayer加载
09-05
openlayer的加载原理以及如何加载openlayer的一个小例子
openlayers3添加各种地图资源
06-21
webgis开发，文件里包含用openlayers3加载百度地图、天地图、高德地图、google地图等源代码，很全很实用。
openlayers5加载百度地图.zip
06-18
此代码采用了最新的openlayers5，引用了在线的百度地图，可供学习者使用参考，欢迎改进开发。
使用OpenLayers库展示高德瓦片地图
k1121568的博客
11-24 1315
使用第三方库OpenLayers，展示高德的瓦片地图
前端-基于Vue，Openlayer进行地图展示，支持OSM，高德
GIS摆渡人
04-22 592
文章目录组件安装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加载高德离线地图简单实用
热门推荐
qq_25552049的博客
03-06 2万+
转载请标注：http://blog.csdn.net/qq_25552049/article/details/79453414概述  OpenLayers是一个用于开发WebGIS客户端的JavaScript包。OpenLayers 支持的地图来源包括Google Maps、Yahoo、 Map、微软Virtual Earth 等，用户还可以用简单的图片地图作为背景图，与其他的图层在OpenLay...
OpenLayers入门，OpenLayers如何使用高德地图底图作为图层图源
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
02-01 1015
只使用高德地图的底图，不使用高德开放平台的api，使用OpenLayer实现地图功能。
GeoServer与OpenLayers配置指南
“Geoserver OpenLayers 配置文档&rdquo; 本文档详细介绍了如何配置和使用GeoServer与OpenLayers进行地图服务的发布和展示。GeoServer是一个开源的GIS服务器，它允许用户发布地理空间数据并提供WMS（Web Map Service）和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值