openlayers在地图上添加maker

朱雀 2022-11-25 10:10 263阅读 0赞

如下图所示，点击地图的时候，显示一个小红点

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xoanVlamlhbmc_size_16_color_FFFFFF_t_70][]

初始化一个图层

function initMaker() {
    
        makerLayer = new ol.layer.Vector({
    
            source: null,
    
            style: null,
    
            zIndex: 11
    
        })
    
        map.addLayer(makerLayer)
    
    }

点击地图的时候添加

map.on('click', function(e) {
    
        // console.log(e, 'e')
    
        addMaker(e.coordinate)
    
    })

添加的函数

function addMaker(coordinate) {
    
        makerLayer.setSource(null);
    
        var feature = new ol.Feature({
    
            geometry: new ol.geom.Point(coordinate)
    
        });
    
        var source = new ol.source.Vector();
    
        source.addFeatures([feature]);
    
        makerLayer.setSource(source)
    
        var style = new ol.style.Style({
    
            image: new ol.style.Circle({
    
                radius: 7,
    
                fill: new ol.style.Fill({
    
                    color: '#ff0000'
    
                })
    
            })
    
        });
    
        makerLayer.setStyle(style);
    
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xoanVlamlhbmc_size_16_color_FFFFFF_t_70]: /images/20221124/e0b1bd6f9d36461e8a29a06228dd9b0f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，263人围观）

还没有评论，来说两句吧...

相关阅读

相关 Openlayers实战：加载google地图

google地图在业界一直是标杆的存在，其zoomlevel超级大，可看到非常精细的程度。 Openlayers中如何加载谷歌地图呢？同样是XYZ的挂载方式，根据参数的不同，

左手的ㄟ右手/ 2024年03月17日 17:47/ 0 赞/ 56 阅读

相关 Openlayers实战：地图上显示经纬度坐标

Openlayers地图中，鼠标移动，其位置的经纬度坐会经常显示在页面中。在我们的实战课程里，详细讲一下其做法，成为一个主力的应用。效果图 ![在这里插入图片描述]

深藏阁楼爱情的钟/ 2024年03月17日 14:54/ 0 赞/ 29 阅读

相关 ol-地图上添加图标

先总结：用到的核心知识 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4

桃扇骨/ 2022年11月29日 12:22/ 0 赞/ 132 阅读

相关 openlayers在地图上添加maker

如下图所示，点击地图的时候，显示一个小红点 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ib

朱雀/ 2022年11月25日 10:10/ 0 赞/ 264 阅读

相关 Openlayers中实现地图上添加一条红色直线

场景 Openlayers中加载Geoserver切割的EPSG:900913离线瓦片地图并显示： [https://blog.csdn.net/BADAO\_LIUM

ゞ浴缸里的玫瑰/ 2022年10月19日 04:10/ 0 赞/ 346 阅读

相关 OpenLayers项目分析（七）地图表现

一开始看到OpenLayers，就有一个问题。就是它作为WebGIS的前端，通俗地说，是“显示”地图的。那么，它显示的地图是什么，是怎么显示的，又是怎么实现的？——暂且把这个问

傷城~/ 2022年08月08日 11:52/ 0 赞/ 245 阅读

相关 OpenLayers 在地图上画线，获取点坐标（以天地图为例）

应用场景：最近在开发过程中，有个需求，需要在天地图中画线，结束后获取对应的坐标集合，查阅 OpenLayers API 和网上的相关资料后得以实现，特此记录

亦凉/ 2022年05月27日 23:39/ 0 赞/ 3571 阅读

相关 openLayers地图插件的写法

/\\ \ FROM：xph \ 主要功能： \ 1 简单加载离线地图（因为百度地图算法问题，仅支持google） \ 2 地图元素加载，点和线 \ 3 事

待我称王封你为后i/ 2022年05月08日 00:08/ 0 赞/ 258 阅读

相关 openlayes3在地图上画点线

地图是由图层组成的，而图层又分为ol.layer.Tile和ol.layer.Vector,ol.layer.Tile可以构建底图，ol.layer.Vector指定矢量图层，

悠悠/ 2022年04月22日 02:08/ 0 赞/ 350 阅读

相关 openlayes 3 根据视野在建筑物上添加文字

1. 先将图层发布成geoserver服务 2.具体实现代码 var tempUrl = '' //发布的wfs图层 var poi_style

谁借莪１个温暖的怀抱￠/ 2022年03月30日 04:12/ 0 赞/ 149 阅读