openlayers坐标点添加圆形、自定义图片和内容，popup弹框、添加多个text文本和样式、点聚合、清除坐标点、画闭合区域及其样式功能集合。

已于 2024-12-06 11:08:51 修改
阅读量883 收藏 6
点赞数 9
文章标签： 前端 javascript 开发语言
于 2024-11-25 16:40:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_40992252/article/details/144028750
版权

目录

1.页面初始化加载地图

2.渲染圆点到地图上

3.渲染自定义图片坐标点到地图上

4.清除坐标点及其样式

5.为地图上的坐标点添加点击事件

6.监听地图上的鼠标滚动事件

7.监听地图上的坐标点的鼠标滑过事件，并为其添加一个popup框

8.点聚合功能，添加多个text文本和样式

9.画闭合区域

1.页面初始化加载地图

      <div class="map" id="map"></div>

      onMounted(() => {
            group.map = new ol.Map({
                target: "map",
                layers: [
                    new ol.layer.Tile({
                        source: new ol.source.XYZ({
                            //地图瓦片地址
                            url: "http://192.168.1.3:8080/gaode/roadmap/{z}/{x}/{y}.png",
                        }),
                    }),
                ],
                view: new ol.View({
                    projection: "EPSG:4326",
                    center: [113.56,38.88],  //地图中心点
                    zoom: 7,   //地图缩放比例
                }),
            });
           
        });


坐标点的基本信息：

        //vue3的写法，mapData为坐标点信息
           let group = reactive({
            mapData: [],
            map: {},
            features: [],
            layers:[],
            popData: null,
            mouseLon: null,
            mouseLat: null,
            zoom: null,
            mapData：[{
                        NAME: '坐标点1',
                        LONGITUDE: 101.877771,
                        LATITUDE: 36.433518
                    },
                    {
                        NAME: '坐标点2',
                        LONGITUDE: 100.69129,
                        LATITUDE: 36.59583
                    }
                ]
             })

2.渲染圆点到地图上
 

               group.mapData.forEach((element) => {
                //在feature中添加坐标点的一些基本信息
                  let feature = new ol.Feature({
                    title: element.NAME,
                    data: element,
                    geometry: new ol.geom.Point([
                        element.LONGITUDE,
                        element.LATITUDE,
                    ]),
                });
                feature.setStyle(new ol.style.Style({
                   //添加坐标点
                    image: new ol.style.Circle({
                        fill: new ol.style.Fill({
                              color: "red",
                         }),
                        radius: 10,
                     }),
                   }));
                  let source = new ol.source.Vector();
                  source.addFeature(feature);
                  let layer = new ol.layer.Vector();
                  layer.setSource(source);
                  group.map.addLayer(layer);
                });

页面效果： 

3.渲染自定义图片坐标点到地图上

               group.mapData.forEach((element) => {
                //在feature中添加坐标点的一些基本信息
                  let feature = new ol.Feature({
                    title: element.NAME,
                    data: element,
                    geometry: new ol.geom.Point([
                        element.LONGITUDE,
                        element.LATITUDE,
                    ]),
                });
                feature.setStyle(new ol.style.Style({
                   //添加文字及其样式
                    text: new ol.style.Text({
                        text: element.NAME,
                        offsetY: -30,
                        font: '12px Calibri,sans-serif',
                        fill: new ol.style.Fill({
                            color: '#fff'
                        }),
                        backgroundFill: new ol.style.Stroke({
                            color: '#0EC743'
                        }), // 使用与填充相同的背景填充样式
                        padding: [5, 10, 5, 10], // 文本周围的填充，上右下左（像素）
                        cursor: 'pointer'
                    }),
                   //添加图片坐标点
                    image: new ol.style.Icon({
                        src: './point.png',
                        scale: 0.2
                    }),
                   }));
                  let source = new ol.source.Vector();
                  source.addFeature(feature);
                  let layer = new ol.layer.Vector();
                  layer.setSource(source);
                  group.map.addLayer(layer);
                });

页面效果： 


4.清除坐标点及其样式

      group.features=[]
      group.layers=[]


      let source = new ol.source.Vector();
      source.addFeature(feature);
     //用一个数组将feature都放在features数组中
      group.features.push(feature)

      let layer = new ol.layer.Vector();
      layer.setSource(source);
      group.map.addLayer(layer);
     //用一个数组将feature都放在features数组中
      group.layers.push(layer)


  
        //清除坐标点
        if (group.features.length > 0) {
              group.features.forEach(feature => {
                 feature.setStyle(null)
               })
           }
        if (group.layers.length > 0) {
              group.layers.forEach(layer => {
                group.map.removeLayer(layer);
            })
        }

5.为地图上的坐标点添加点击事件
 

               // 为地图添加点击事件监听
                group.map.on('click', function (evt) {
                    //点击到地图的经纬度信息
                    const coordinate = evt.coordinate;
                    group.longitude = coordinate[0].toFixed(6)
                    group.latitude = coordinate[1].toFixed(6)

                    //判断是否为添加的坐标点
                    var feature = group.map.forEachFeatureAtPixel(evt.pixel, function 
                    (feature) {
                        return feature;
                    });
                    if (feature) {
                       //feature.values_.data为点击的坐标点的基本信息
                       //后续操作。。。。
                    }
                });

6.监听地图上的鼠标滚动事件

 group.map.on('wheel', function (event) {
    // 这里的 `event` 包含了鼠标滚动的详细信息，例如滚动的方向和滚动的像素值
        group.zoom = group.map.getView().getZoom().toFixed(2)
  });

7.监听地图上的坐标点的鼠标滑过事件，并为其添加一个popup框

   <div id="popup" class="ol-popup">
        <div id="popup-content" class="popup-content">
           <div title="关闭弹框" id="popup-closer">
               <i class="ivu-icon ivu-icon-md-close"></i>
           </div>
            <div class="content">
               //弹窗里面的内容{{popData}}
            </div>
        </div>
        <div class="arrow"><i class="ivu-icon ivu-icon-md-arrow-dropdown"></i></div>
    </div>


      // 获取popup的dom对象
      var container = document.getElementById('popup');
      var closer = document.getElementById('popup-closer');

      // 创建popup
        var popup = new ol.Overlay({
           element: container,
           positioning: 'bottom-center',
           stopEvent: true,
           autoPanAnimation: {
                 duration: 250
            }
         });
        group.map.addOverlay(popup);
        //监听鼠标滑过事件
          group.map.on('pointermove', function (e) {
                    const coordinate = e.coordinate;
                    //监听鼠标所在经纬度信息
                    group.mouseLon = coordinate[0].toFixed(6)
                    group.mouseLat = coordinate[1].toFixed(6)
                    // 监听鼠标移动事件，移动到feature后弹出popup
                    var feature = group.map.forEachFeatureAtPixel(e.pixel, function 
                     (feature, layer) {
                        return feature;
                    });
                    if (feature) {
                        group.popData = feature.values_.data
                        popup.setPosition(coordinate);
                        //鼠标经过坐标点变成小手模式
                        group.map.getTargetElement().style.cursor = 'pointer';
                    }else{
                        group.map.getTargetElement().style.cursor = '';
                    

      // 关闭popup
        closer.onclick = function () {
             popup.setPosition(undefined);
             closer.blur();
             return false;
         };

8.点聚合功能，添加多个text文本和样式

               // 创建聚合源
                var clusterSource = new ol.source.Cluster({
                    distance: 100, // 点的聚合距离
                    source: new ol.source.Vector({
                       //features中添加坐标点的信息
                        features: group.mapData.map(function (element) {
                            return new ol.Feature({
                                title: element.NAME,
                                data: element,
                                geometry: new ol.geom.Point([
                                    element.LONGITUDE,
                                    element.LATITUDE,
                                ]),
                            });
                        })
                    })
                });
                // 创建聚合图层
                var clusterLayer = new ol.layer.Vector({
                    source: clusterSource,
                    style: function (feature) {
                        var styles = []
                        var features = feature.get('features');
                        console.log('features', features)
                        var size = feature.get('features').length;
                        let nameString = features[0].values_.title
                       //聚合的情况
                        if (size > 1) {
                            features.forEach((ele, index) => {
                                if (index > 0) {
                                    nameString = nameString + '\n' + ele.values_.title
                                }
                            })
                            var style = new ol.style.Style({
                                image: new ol.style.Circle({
                                    radius: 20,
                                    stroke: new ol.style.Stroke({
                                        color: '#fff'
                                    }),
                                    fill: new ol.style.Fill({
                                        color: 'blue'
                                    })
                                }),
                                text: new ol.style.Text({
                                    text: size.toString() > 1 ? size.toString() : '',
                                    fill: new ol.style.Fill({
                                        color: '#fff'
                                    }),
                                    stroke: new ol.style.Stroke({
                                        color: '#000'
                                    })
                                })
                            });
                            var style2 = new ol.style.Style({
                                text: new ol.style.Text({
                                    text: nameString,
                                    offsetY: -30,
                                    font: '12px Calibri,sans-serif',
                                    fill: new ol.style.Fill({
                                        color: '#fff'
                                    }),
                                    backgroundFill: new ol.style.Stroke({
                                        color: '#0EC743'
                                    }), // 使用与填充相同的背景填充样式
                                    padding: [5, 10, 5, 10], // 文本周围的填充
                                })
                            });
                           //有多个text或者多个样式的话用数组的形式
                            styles = [style, style2]
                            return styles;
                        } else if (size = 1) {
                            //不聚合的情况
                            nameString = features[0].values_.title
                            var style = new ol.style.Style({
                                text: new ol.style.Text({
                                    text: nameString,
                                    offsetY: -30,
                                    font: '12px Calibri,sans-serif',
                                    fill: new ol.style.Fill({
                                        color: '#fff'
                                    }),
                                    backgroundFill: new ol.style.Stroke({
                                        color: '#0EC743'
                                    }), // 使用与填充相同的背景填充样式
                                    padding: [5, 10, 5, 10], // 文本周围的填充
                                }),
                                image: new ol.style.Icon({
                                    src: './point.png',
                                    scale: 0.2
                                }),
                            });
                            styles.push(style);
                            return styles;
                        }
                    }
                });

                // 将聚合图层添加到地图上
                group.map.addLayer(clusterLayer);

聚合前：


聚合后： 


9.画闭合区域

        //画闭合曲线
        // 模拟创建一组闭合曲线的坐标点数组
        const coordinates = [
          [100.67691802343751, 36.3730079046798],
          [100.35831450781251, 36.274017329374914],
          [100.07266997656251, 36.043039320330166],
          [100.05069732031251, 35.658075971922266],
          [100.31436919531251, 35.350105293195945],
          [100.63297271093751, 35.22911681226775],
          [100.98453521093751, 35.22911681226775],
          [101.22623442968751, 35.350105293195945],
          [101.29215239843751, 35.66907492473392],
          [101.24820708593751, 35.92205083940197],
          [101.08341216406251, 36.17502675407002],
          [100.89664458593751, 36.34001104624484],
          [100.76480864843751, 36.3730079046798],
          [100.67691802343751, 36.3730079046798],
        ];
        
        // 创建线条几何对象
        const lineString = new ol.geom.LineString(coordinates);
      
        // 创建多边形几何对象
        const polygon = new ol.geom.Polygon([lineString.getCoordinates()]);
      

        // 创建包含多边形的特征
        const feature = new ol.Feature({
          title: "po1",
          geometry: polygon,
        });
      
        // 创建特征源
        const vectorSource = new ol.source.Vector({
          features: [feature],
        });
       

        // 创建矢量层并将其添加到地图上
        const vectorLayer = new ol.layer.Vector({
          source: vectorSource,
          style: new ol.style.Style({
            fill: new ol.style.Fill({
              color: "#e8d938", // 填充颜色，红色
            }),
            stroke: new ol.style.Stroke({
              color: "red", // 边界颜色
              width: 0.2,
            }),
          }),
        });

        group.map.addLayer(vectorLayer);
      }

 

Openlayers 教程 08 - 圆的操作 - 几何圆与地理圆（正多边形）
非科班Java出身GISer的博客
03-21 2271
Openlayers 圆的操作，介绍创建圆的方法以及根据圆获取圆形多边形的方法。
openlayers：实现画圆（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
02-06 480
openlayers：实现画圆（附完整源码）
OpenLayers 地图标注之Popup标注
最新发布
GIS之路
06-03 329
注：当前使用的是 ol版本，天地图使用的key请到天地图官网申请，并替换为自己的key地图标注是将空间位置信息点与地图关联、通过图标、窗口等形式把相关信息展现到地图上。在 我WebGIS中地图标注是重要的功能之一，可以为用户提供个性化服务，如兴趣点等。地图标注表现方式有图文标注、Popup标注、聚合标注等。本节主要介绍加载。
Openlayers3 绘制圆
04-26
NULL 博文链接：https://jjxliu306.iteye.com/blog/2371473
openlayers 添加图片和文字点位图层
收集、分享
04-16 219
openlayers 添加图片和文字点位图层
（五）openlayers加圆形以及引入element-ui组件
fang427的博客
04-26 753
openlayers加圆形以及引入elemen-ui组件
openLayer-popup弹窗
zhushanlin的博客
05-21 650
在 OpenLayers 中，ol.Overlay 用于在地图上叠加自定义的 HTML 元素，如弹出框、提示信息等。下面是一个简单的示例，演示如何创建并使用 ol.Overlay 来显示一个点击地图上要素后弹出的提示信息框.创建 Overlay 实例: 使用 ol.Overlay 创建一个新的覆盖物实例，并指定其位置、元素和定位方式。添加到地图: 通过 map.addOverlay() 方法将覆盖物添加到地图上。创建地图: 首先，你需要有一个基础的地图实例。
OpenLayers6入门，OpenLayers点聚合（聚散点）动态样式，根据周围聚集数量不同切换多种颜色显示，点击聚集点散开和地图放大后显示要素图片
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
01-16 661
OpenLayers入门，OpenLayers点聚合（聚散点）功能，地图缩小显示聚集数量，点击聚集点散开和地图放大后显示要素图片》，我们已经实现了简单的点聚合功能。本章在上一章基础上增加更多动态效果，如根据周围聚集数量不同切换多种颜色显示功能。
vue-openlayers实现地图坐标弹框效果
10-14
在本文中，我们将深入探讨如何使用Vue框架与OpenLayers库结合来实现在地图上点击时显示坐标信息的弹框效果。Vue是一个流行的前端JavaScript框架，而OpenLayers则是一个功能强大的开源JavaScript库，用于创建交互式...
openlayers3添加闪烁点
12-20
在OpenLayers 3中添加闪烁点是一项常见的需求，特别是在地理信息系统（GIS）应用中，用于突出显示特定位置或实时更新的数据。OpenLayers 是一个流行的JavaScript库，用于在Web浏览器中展示地图，支持多种数据源和...
vue使用openlayers实现移动点动画
10-14
在Vue项目中，结合OpenLayers库实现移动点动画是一个常见的需求，这有助于为地图应用添加动态效果，例如模拟物体在地图上的移动轨迹。本示例主要讲解如何在Vue组件中设置和控制移动点动画。 首先，确保已经正确安装...
openlayers5绘制点线面圆.zip
08-01
利用openlayer5在地图上进行绘制点，圆，参考自openlayers5官网。
OpenLayers 画点、线、及删除点、线 封装的js工具类
10-12
个人用了两三天时间，研究OpenLayers 框架，并成功在地图上画点、线、以及删除等方法，都封装在一个js工具类，方便用户的开发、、、、
openlayers加载瓦片地图并手动标记坐标点
04-29
通过以上步骤，你可以在OpenLayers加载的瓦片地图上手动添加和显示坐标点。如果需要处理多个标记点，只需重复创建特征对象和矢量图层的步骤即可。同时，OpenLayers提供了丰富的API，可以实现更复杂的交互功能，如...
openlayers.Popup
D.調の華麗
11-04 2884
OpenLayers.Popup： fixPadding：处理边界间隙。3.0版本将废弃 initialize：初始化 destroy：销毁 draw：绘制 updatePosition：更新位置 moveTo：移动 visible：判断弹出窗口是否可见 toggle：反转可见性 show：显示弹出窗口 hide：隐藏弹出窗口 setSize：设置弹出窗口尺寸 setBac
OpenLayers3基础教程——OL3之Popup
LZUGIS
07-07 6610
本节重点讲述OpenLayers3中Popup的调用时实现，OL3改用Overlay代替OL2的Popup功能。
在vue2中，使用openlayers在图层上构建一个圆圈
weixin_56205895的博客
07-10 711
第一步：下载对应的openlayers.
openLayers实战(七)：根据坐标信息绘制圆形
在下魔王ii的博客
08-18 1394
要解决这个问题，你可以尝试使用一个更适合的地图投影，例如使用球面墨卡托投影。球面墨卡托投影是一种常见的投影方式，它可以在保持形状不变的同时，将地球表面展示在平面上。地图投影的目的是将球形地球表面展示在二维平面上，但由于地球的形状是椭球形的，所以无法完美地展示。记住，在地图展示上，我们无法完美地呈现地球的真实形状，追求完美的圆形可能并不现实。在球形地球上，绘制的圆会是一个完美的圆形，但当我们在地图上使用椭球形投影时，圆形会变得扁扁的。确保设置正确的投影参数和地理坐标系，以及正确的单位，以获得更准确的圆形。
（转）OpenLayers3基础教程——OL3之Popup
06-09 311
http://blog.youkuaiyun.com/gisshixisheng/article/details/46794813 概述： 本节重点讲述OpenLayers3中Popup的调用时实现，OL3改用Overlay代替OL2的Popup功能。 接口简介： overlay跟ol.control.Control一样，是一个可见的窗口，但是不和Control一样，不是固定在地图区域...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值