openlayers在地图上添加maker

朱雀 2022-11-25 10:10 329阅读 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 条评论，329人围观）

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

相关阅读

相关 095：vue+openlayers 地图上添加网格线（示例代码）

![在这里插入图片描述][a957f6e5910d474facb7f2ad7fab4ce3.png_pic_center] 第095个 [点击查看专栏目录][Link 1]

谁借莪１个温暖的怀抱￠/ 2024年04月08日 11:36/ 0 赞/ 80 阅读

相关 157：vue+openlayers 地图上添加Echarts饼图

![在这里插入图片描述][a957f6e5910d474facb7f2ad7fab4ce3.png_pic_center] 第157个 [点击查看专栏目录][Link 1]

深藏阁楼爱情的钟/ 2024年04月01日 09:19/ 0 赞/ 51 阅读

相关 160：vue+openlayers 地图上添加Echarts柱状图

![在这里插入图片描述][a957f6e5910d474facb7f2ad7fab4ce3.png_pic_center] 第160个 [点击查看专栏目录][Link 1]

朱雀/ 2024年04月01日 06:26/ 0 赞/ 60 阅读

相关 240：vue+openlayers上传CSV文件，在地图上显示信息

![在这里插入图片描述][a957f6e5910d474facb7f2ad7fab4ce3.png_pic_center] 第240个 [点击查看专栏目录][Link 1]

╰+哭是因爲堅強的太久メ/ 2024年03月16日 13:37/ 0 赞/ 44 阅读

相关 openlayers 地图添加比例尺

知识点： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2

太过爱你忘了你带给我的痛/ 2023年07月18日 02:17/ 0 赞/ 18 阅读

相关 ol-地图上添加图标

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

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

相关 openlayers在地图上添加maker

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

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

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

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

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

相关 openlayes3在地图上画点线

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

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

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

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

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