[Webgis][地图加载]Openlayer添加点线面

已于 2023-12-20 16:41:22 修改
阅读量729 收藏 8
点赞数 19
分类专栏： Openlayer学习 文章标签： 前端 javascript html
于 2023-12-20 16:33:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44341012/article/details/135110988
版权

描述在前

本文继续以项目需求为方向，进行学习记录，在Web地图应用中，常见的需求就是在地图上添加点Point（图片或点），添加多段线Polyline，以及添加多边形Polygon，下面上代码，方便理解。

代码在后

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/ol@v8.2.0/dist/ol.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v8.2.0/ol.css">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

    <style>
        html { height: 100% }
        body { height: 100%;margin: 0px;padding: 0px }

        ul,li{
            margin:0;
            padding:0;
            list-style:none;
        }
        p{font-size:12px;}
        li{
            line-height:28px;
        }
        #container{
            width: 100%;
            height: 100%;
            overflow: hidden;
            position: absolute;
        }
        .unselectMap{
            float: left;
            box-shadow: rgba(0, 0, 0, 0.35) 2px 2px 3px; 
            border-left: 1px solid rgb(139, 164, 220); 
            border-top: 1px solid rgb(139, 164, 220); 
            border-bottom: 1px solid rgb(139, 164, 220); 
            background: rgb(255, 255, 255); 
            padding: 2px 6px; 
            font-style: normal; 
            font-variant: normal; 
            font-kerning: auto; 
            font-optical-sizing: auto; 
            font-feature-settings: normal; 
            font-variation-settings: normal; 
            font-stretch: normal; 
            font-size: 12px; 
            line-height: 1.3em; 
            font-family: arial, sans-serif; 
            text-align: center; 
            white-space: nowrap; 
            border-radius: 3px 0px 0px 3px; 
            color: rgb(0, 0, 0);
        }
        .selectMap{
            float: left;
            box-shadow: rgba(0, 0, 0, 0.35) 2px 2px 3px; 
            border-width: 1px; 
            border-style: solid; 
            border-color: rgb(139, 164, 220); 
            background: rgb(142, 168, 224); 
            padding: 2px 6px; 
            font: bold 12px / 1.3em arial, sans-serif; 
            text-align: center; 
            white-space: nowrap; 
            border-radius: 0px 3px 3px 0px; 
            color: rgb(255, 255, 255);
        }
        .mapChange{
            margin-left: 4rem;
            padding-left: 40px;
            padding-top: 10px;
            white-space: nowrap; 
            cursor: pointer; 
            position: absolute; 
            z-index: 1; 
            text-size-adjust: none;
        }
        .drawing-panel {
            z-index: 999;
            position: fixed;
            bottom: 1rem;
            right: 0.2rem;
            margin-left: 0.2rem;
            padding: 0.1rem 0.1rem;
            border-radius: .25rem;
            background-color: transparent;
            /* 设置阴影 */
            box-shadow: 0 0px 0px 0 rgba(27, 142, 236, 0.5); 
        }
        .pos {
	        width: 150px;
            height: 30px;
            float: left;
            background-color: #fff;
            color: rgba(27, 142, 236, 1);
            font-size: 13px;
            border:1px solid rgba(27, 142, 236, 1);
            border-radius: 5px;
            margin: 0 5px;
            text-align: center;
            line-height: 30px;
        }
        .pos2 {
            width: 180px;
            height: 30px;
            float: left;
            background-color: #fff;
            color: red;
            font-size: 13px;
            border:1px solid rgba(27, 142, 236, 1);
            border-radius: 5px;
            margin: 0 5px;
            text-align: center;
            line-height: 30px;
        }

        /* 比例尺的样式 */
        .my-scale-line {
            position: absolute;
            right: 75px;
            font-weight: 700;
            font-size: 12px;
            color: white;
            bottom: 60px;
            left: auto;
            border: 2px solid white;
            border-top: none;
            text-align: center;
            background-color: hsla(0, 0%, 100%, 0);
            height: 8px;
            line-height: 0;
        }

        /* 设置缩放按钮与滑块的样式 */
        .ol-zoom .ol-zoom-out {
            margin-top: 200px;
        }
        .ol-zoomslider {
            background-color: transparent;
            top: calc(0.5em + 2px + 1px + 1.14 * 1.375em);
        }

        .ol-touch .ol-zoom .ol-zoom-out {
            margin-top: 212px;
        }
        .ol-touch .ol-zoomslider {
            top: 2.75em;
        }

        .ol-zoom-in.ol-has-tooltip:hover [role=tooltip],
        .ol-zoom-in.ol-has-tooltip:focus [role=tooltip] {
            top: 3px;
        }

        .ol-zoom-out.ol-has-tooltip:hover [role=tooltip],
        .ol-zoom-out.ol-has-tooltip:focus [role=tooltip] {
            top: 232px;
        }
    </style>

    <title>Tool</title>

</head>
<body>

    <div id="container"></div>
    <script>

        // 核心图层layer 为三种地图形式创建各自的 Layer，其中混合地图需要 路网地图AMapLayerRoadNet 与 卫星地图AMapLayerSatellite 叠加
        // AMapLayer 为普通地图的 Layer
        AMapLayer = new ol.layer.Tile({
            // 每个图层有对应的数据源（Source）
            source: new ol.source.XYZ({
                // 该url为高德瓦片地图地址
                url:'https://wprd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}'
            })
        });
        // AMapLayerRoadNet 为路网地图的 Layer
        AMapLayerRoadNet = new ol.layer.Tile({
            // 每个图层有对应的数据源（Source）
            source: new ol.source.XYZ({
                // 该url为高德瓦片地图地址
                url:'https://wprd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
            })
        });
        // AMapLayerSatellite 为卫星地图的 Layer
        AMapLayerSatellite = new ol.layer.Tile({
            // 每个图层有对应的数据源（Source）
            source: new ol.source.XYZ({
                // 该url为高德瓦片地图地址
                url:'https://wprd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=6&x={x}&y={y}&z={z}'
            })
        });
        // 把整个地图看作一个容器（Map）
        var map = new ol.Map({
            target: 'container',
            // 核心为地图图层（Layer），若想实现路网与卫星地图混合，AMapLayerSatellite 需要在 AMapLayerRoadNet 之前
            layers: [AMapLayer,AMapLayerSatellite,AMapLayerRoadNet], 
            // 并由地图视图（View）进行地图表现
            view: new ol.View({
                //设定默认坐标系
                projection: 'EPSG:3857', 
                //设定中心点，因为默认坐标系为 3587，所以要将我们常用的经纬度坐标系4326 转换为 3587坐标系
                center: ol.proj.transform([120.266053,31.550228], 'EPSG:4326', 'EPSG:3857'), 
                // 默认显示级别，相当于瓦片地图的 Z 级别
                zoom: 5,
                // 最小显示级别
                minZoom:3, 
                // 最大显示级别
                maxZoom:19
            })
        });
        // 默认显示普通地图，所以将 AMapLayer 的 Visible 设定为true，其他设定为fasle
        AMapLayer.setVisible(true);
		AMapLayerRoadNet.setVisible(false);
		AMapLayerSatellite.setVisible(false);

        // 创建坐标显示框
        function createMapShowBar(){
            let htmlBottomShow = "";
            htmlBottomShow += "<li id=\"position0\" class=\"pos\">0.0,0.0</li>";
            let htmlBottomUl = document.createElement("ul");
            htmlBottomUl.className = "drawing-panel";
            htmlBottomUl.innerHTML = htmlBottomShow;
            document.body.appendChild(htmlBottomUl);
        }
        // 创建地图形式切换按钮
        function createMapChangeBar(){
            let htmllet = "";
            htmllet += "<div title=\"显示普通地图\" id=\"usualMap\" class=\"selectMap\">地图</div>";
            htmllet += "<div title=\"显示卫星地图\" id=\"satelliteMap\" class=\"unselectMap\">卫星</div>";
            htmllet += "<div title=\"显示混合地图\" id=\"hybridMap\" class=\"unselectMap\">混合</div>";
            let p = document.createElement("div");
            p.className = "mapChange";
            p.innerHTML = htmllet;
            document.body.appendChild(p);
        }
        // 设定地图形式切换按钮的响应函数
        function mapTypeChangeMap() {
            createMapShowBar();
            createMapChangeBar();
            var usualMap=document.getElementById("usualMap");
            var satelliteMap=document.getElementById("satelliteMap");
            var hybridMap=document.getElementById("hybridMap");
            usualMap.addEventListener('click',function(){
                usualMap.className="selectMap";
                satelliteMap.className="unselectMap";
                hybridMap.className="unselectMap";
                AMapLayer.setVisible(true);
                AMapLayerRoadNet.setVisible(false);
                AMapLayerSatellite.setVisible(false);
            })
            satelliteMap.addEventListener('click',function(){
                usualMap.className="unselectMap";
                satelliteMap.className="selectMap";
                hybridMap.className="unselectMap";
                AMapLayer.setVisible(false);
                AMapLayerRoadNet.setVisible(false);
                AMapLayerSatellite.setVisible(true);
            })
            hybridMap.addEventListener('click',function(){
                usualMap.className="unselectMap";Polygon
                satelliteMap.className="unselectMap";
                hybridMap.className="selectMap";

                AMapLayer.setVisible(false);
                AMapLayerRoadNet.setVisible(true);
                AMapLayerSatellite.setVisible(true);
            })
        }
        mapTypeChangeMap();

        // 添加比例尺
        map.addControl(new ol.control.ScaleLine({
            units: 'metric', // 设置单位
            className: 'my-scale-line'
        }));
        // 添加缩放滑块
        map.addControl(new ol.control.ZoomSlider());
        // 添加全局视图小控件
        map.addControl(new ol.control.OverviewMap({
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.XYZ({
                        // 该url为高德瓦片地图地址
                        url:'https://wprd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}'
                    })
                })
            ],
        }));
        
        // 监听鼠标移动，显示实时坐标
        var moveSignal = map.on('pointermove',(evt)=>{
            let movePoint = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326')
            document.getElementById('position0').innerText = movePoint[0].toFixed(7) + "," + movePoint[1].toFixed(7);
        });


        //============ 本文实现功能从此处开始 ================//
        
        // 定义一个保存添加点的数组
        var addPoints = [];
        // 定义一个 线LineString
        var wayPolyline;
        // 定义一个 多边形Polygon
        var wayPolygon;
        // 定义一个画图的图层，后面添加的 点线面 都是在此图层上添加
        var drawLayer = new ol.layer.Vector({
            // 定义图层数据源，给图层数据源添加数据
            source: new ol.source.Vector()
        });
        // 将画图的图层添加给地图
        map.addLayer(drawLayer);  

        // 定义一个函数，功能为创建 Point 图形的样式，path为图片的路径，name为图片上显示的信息
        function createPointStyle(path,name) {
            return new ol.style.Style({
                image: new ol.style.Icon({
                    anchor: [0.5, 1], //中心改到图片下面
                    src:path
                }),
                text: new ol.style.Text({
                    textAlign: 'center',            //位置
                    textBaseline: 'middle',         //基准线
                    font: 'normal 14px 微软雅黑',    //文字样式
                    text: name,                     //文本内容
                    offsetY:-19,                    //Y偏移值，目的是使文字居中
                    fill: new ol.style.Fill({       //文本填充样式（即文字颜色)
                        color: '#fff'
                    }),
                })
            });
        }
        //定义一个函数，功能为增加点
        function pointAdd(point) {
            // 创建 Point 
            let pointGeom = new ol.geom.Point(point);
            // 创建 Feature
            let addMarker = new ol.Feature(pointGeom);
            // 设置样式
            addMarker.setStyle(createPointStyle('image/marker.png',String(addPoints.length)));
            // 将 Feature 添加到图层
            drawLayer.getSource().addFeature(addMarker);
        }
        // 定义一个函数，功能为增加线段
        function polylineAdd(points){
            wayPolyline = new ol.geom.LineString(points);
            // 创建 Feature
            let wayPolylineF = new ol.Feature(wayPolyline);
            wayPolylineF.setStyle(
                new ol.style.Style({
                    // 点断颜色
                    stroke: new ol.style.Stroke({
                        color: 'red',
                        width: 2,
                        // 虚线 20 为虚线小线段长度
                        lineDash: [20], 
                    }),
                })
            )
            drawLayer.getSource().addFeature(wayPolylineF);
            // 定位到画图位置
            // map.getView().fit(wayPolyline, { duration: 500, padding: [150, 150, 150, 150] });
        }
        polylineAdd([]);
        // 定义一个函数，功能为增加多边形
        function polygonAdd(points){
            wayPolygon = new ol.geom.Polygon([points]);	
            // 创建 Feature
            let addPolyon = new ol.Feature(wayPolygon);
            addPolyon.setStyle(
                new ol.style.Style({
                    // 多边形填充颜色
                    fill: new ol.style.Fill({
                        color: 'rgba(0, 255, 0, 0.5)',
                    }),
                    // 多边形边框颜色
                    stroke: new ol.style.Stroke({
                        color: 'white',
                        width: 2,
                    }),
                })
            )
            drawLayer.getSource().addFeature(addPolyon);
        }
        polygonAdd([]);

        // 监听鼠标点击
        var clickSignal = map.on('click',(evt)=>{
            // 添加点
            pointAdd(evt.coordinate);
            // 保存点到数组
            addPoints.push(evt.coordinate);
            // 大于一个点时，可画线段
            if(addPoints.length>1) {
                console.log("add polyline");
                wayPolyline.setCoordinates(addPoints);
               
            } 
            // 大于两个点时可画多边形
            if(addPoints.length>2) {
                console.log("add polygon");
                wayPolygon.setCoordinates([addPoints]);
            }
        })

    </script>
</body>
</html>

显示效果如下
在这里插入图片描述

最后总结

以上代码添加的时候是响应Map的点击信号，实际应用中，可能是某个实时轨迹，或者某个实时位置，道理相同，调用对应的add功能块，即可添加图形。下一章，让我们记录一下，如何让添加的图片旋转起来。

小康UPUP
关注
  • 19
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
openlayers：实现添加线（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
01-31 113
openlayers：实现添加线（附完整源码）
openlayers：实现添加点（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
01-31 194
openlayers：实现添加点（附完整源码）
openlayers-06-坐标添加点、线、面
chuanren1991的博客
05-15 2601
openlayers坐标添加点、线、面。
openlayers绘制一个线段
最新发布
qq_45089709的博客
06-05 211
【代码】openlayers绘制一个线段。
【openlayers-5】地图点、线、面等要素添加
WXG1011的博客
01-01 1745
openlayers点、线、面等要素添加
openlayers添加坐标点
大家好，我是 ed.
03-25 3554
openlayers添加坐标点 上一节说了一下vue接入openlayer，这一节说一下在openlayer上面绘制点。 其实呢，openlayer还是蛮强大的，但是入门我觉得不容易，分享一张大神做的简化的openlayer结构图。 所以说通过这张图可以看出来，添加一个展示的坐标点，需要一个feature，一个source，一个layers。 下面是代码 // 初始化地图 initMap() { map = new Map({ layers: [
openlayers3添加闪烁点
12-20
使用openlayers3实现动态点闪烁功能，结合canvas技术，加载到点到地图上
openlayer3加载谷歌地图例.rar
05-27
本教程将详细讲解如何利用OpenLayer 3加载谷歌地图的三种不同类型：地形图、影像图和交通图。 首先，我们需要在HTML文件中引入OpenLayer 3库。你可以通过CDN链接或者下载库文件后本地引用。引入后，我们创建一个...
基于openlayer开发webgis.docx
04-29
接着，定义资源图层，将样式对象添加进去，然后使用`new GeoJSON()`对象加载GeoJSON数据。需要注意的是，因为坐标系的不同，需要设置转换格式，不然不显示遮罩区域也不会报错。 总结 基于OpenLayers开发WebGIS需要...
GIS系列介绍ArcGIS,WebGIS,Leaflet,openlayer,GeoServer,MapServer
01-10
GIS系列介绍ArcGIS,WebGIS,Leaflet,openlayer,GeoServer,MapServer
openlayer 官网 v6.1 例子代码与api参考文档
06-02
"加载地图例子"通常涉及以下几个步骤： 1. 引入OpenLayers库：在HTML文件中引入OpenLayers库的JS文件。 2. 创建Map对象：定义地图的基本属性，如视图、控件等。 3. 添加图层：根据需求添加不同类型的图层。 4. 将Map...
openlayers5加载线要素.zip
07-04
采用openlayers5，在天地图上画直线，此代码可供参考。
openlayers3 获取点图层数据并添加标注和展示标注信息实例
11-29
openlayers3 显示静态地图，从后台查询点数据（后台java代码没有提交，太简单了。。。）展示到地图并添加标注，给标注添加点击事件并展示标注信息，初次接触开源GIS，代码中有错误还请各位看官指正，感谢！
openlayers添加覆盖层
10-09
openlayers添加云层覆盖物至地图上，自定义移动范围，增添地图动态效果
OpenLayers 画点、线、及删除点、线 封装的js工具类
10-12
个人用了两三天时间，研究OpenLayers 框架，并成功在地图上画点、线、以及删除等方法，都封装在一个js工具类，方便用户的开发、、、、
openlayer4最新源码包
09-29
OpenLayers 支持Open GIS 协会制定的WMS（Web Mapping Service）和WFS（Web Feature Service）等网络服务规范，可以通过远程服务的方式，将以OGC 服务形式发布的地图数据加载到基于浏览器的OpenLayers 客户端中进行...
openlayers3——点
weixin_42255789的博客
01-07 3510
本篇文章主要是介绍运用openlayers3新增点、移动点，删除点。 新增点 步骤：1、新增元素 2、把元素添加到图层数据源上 3、把图层数据源放到图层上 4、把图层添加到地图上 // 新增元素 that.pointFeature = new ol.Feature({ geometry: new ol.geom.Point([data.longitude, data.latitude]), // 经纬度 key: data.id, }); // 把元素添加到图层数据
openLayers新手入门三：画点
qq_42323429的博客
02-09 2039
openLayer画点
初始化一个简单的openlayers地图
qq_45089709的博客
01-20 354
初始化一个简单的openlayers地图
openlayer创建点线面
07-29
在OpenLayers中，可以通过创建要素（Feature）并将其添加到矢量图层（VectorLayer）中来创建点线面。对于数据量不大的场景，可以直接从数据库读取数据，并将其转换为要素，然后添加到矢量图层中以在地图上展示。可以封装一个方法来方便地添加点线面。 例如，在WebGIS开发中，可以使用以下代码创建点线面图层： ```javascript // 创建点线面图层 addDrawLayer() { // 创建矢量数据源 const draw_source = new ol.source.Vector(); // 创建点线面图层 const draw_vector = new ol.layer.Vector({ source: draw_source, title: '自由图层绘制点线面', name: 'operateTu', visible: true, zIndex: 99999, style: new ol.style.Style({ fill: new ol.style.Fill({ color: "rgba(255, 255, 255, 0.2)", }), stroke: new ol.style.Stroke({ color: "#ffcc33", width: 3, }), image: new ol.style.Icon({ src: require('@/assets/index/dingwei-tu.png'), scale: 1, }), }), }); // 将图层添加到地图中 this.map.addLayer(draw_vector); } ``` 这段代码创建了一个名为`draw_vector`的矢量图层，并设置了图层的样式。可以根据需要自定义样式。然后，将该图层添加到地图中即可。 请注意，这只是一个示例代码，具体的实现可能会根据项目的需求有所不同。 #### 引用[.reference_title] - *1* [Openlayers 添加 WKT WKB GeoJson 格式点线面数据](https://blog.csdn.net/linzi19900517/article/details/123210537)[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] - *2* [openlayers6 第一篇绘制点线面](https://blog.csdn.net/m0_65607651/article/details/130517064)[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] - *3* [openlayers3基础点线面添加](https://blog.csdn.net/qq_35091287/article/details/109112342)[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 ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值