OpenLayers 3地图添加图标

最新推荐文章于 2025-04-16 16:26:19 发布
最新推荐文章于 2025-04-16 16:26:19 发布
阅读量3.5k 收藏 24
点赞数 5
分类专栏： OpenLayers 3 文章标签： OpenLayers 3 overlay Feature + Style canvas styleFunction
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43521890/article/details/122126151
版权

OpenLayers 3地图添加图标

一、overlay方式在地图添加图标

1、项目结构

在这里插入图片描述
在这里插入图片描述

2、map.html
<!Doctype html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
    <meta http-equiv='Content-Type' content='text/html;charset=utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
    <meta content='always' name='referrer'>
    <title>OpenLayers 3 :overlay方式在地图添加图标</title>
    <link href='ol.css ' rel='stylesheet' type='text/css'/>
    <script type='text/javascript' src='ol.js' charset='utf-8'></script>
</head>

<body>

<div id='map' style='width: 800px;height: 500px;margin: auto'></div>
<div id="anchor"><img src="images/user.png" alt="图标"/></div>

<script>

    /**
     *  创建地图
     */
    var map = new ol.Map({

        // 设置地图图层
        layers: [
            //创建一个使用Open Street Map地图源的图层
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],

        // 设置显示地图的视图
        view: new ol.View({
            center: [0, 0],       // 设置地图显示中心于经度0度，纬度0度处
            zoom: 5           // 设置地图显示层级为5
        }),

        // 让id为map的div作为地图的容器
        target: 'map'

    });

    /**
     * 创建覆盖对象，覆盖对象引用的是地图上的图片
     */
    var anchor = new ol.Overlay({
        element: document.getElementById('anchor')
    });

    /**
     * 设置覆盖对象位置
     */
    anchor.setPosition([0, 0])

    /**
     * 将覆盖对象添加到地图上
     */
    map.addOverlay(anchor)


</script>
</body>
</html>
3、运行结果

在这里插入图片描述

二、Feature + Style方式在地图添加图标

1、map2.html
<!Doctype html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
    <meta http-equiv='Content-Type' content='text/html;charset=utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
    <meta content='always' name='referrer'>
    <title>OpenLayers 3 :Feature + Style方式在地图添加图标</title>
    <link href='ol.css ' rel='stylesheet' type='text/css'/>
    <script type='text/javascript' src='ol.js' charset='utf-8'></script>
</head>

<body>

<div id='map' style='width: 800px;height: 500px;margin: auto'></div>

<script>


    /**
     * 创建一个Vector的layer来放置图标
     */
    var layer = new ol.layer.Vector({
        source: new ol.source.Vector()
    })

    /**
     *  创建地图
     */
    var map = new ol.Map({

        // 设置地图图层
        layers: [
            //创建一个使用Open Street Map地图源的图层
            new ol.layer.Tile({
                source: new ol.source.OSM()
            }),
            layer
        ],

        // 设置显示地图的视图
        view: new ol.View({
            center: [0, 0],       // 设置地图显示中心于经度0度，纬度0度处
            zoom: 10           // 设置地图显示层级为5
        }),

        // 让id为map的div作为地图的容器
        target: 'map'

    });

    //创建一个Feature，并设置好在地图的位置
    var anchor = new ol.Feature({
        geometry: new ol.geom.Point([0, 0])
    });

    // 设置Feature样式，在样式中就可以设置图标
    anchor.setStyle(new ol.style.Style({
        image: new ol.style.Icon({
            src: 'images/user.png'
        })
    }));

    // 将Feature添加到之前的创建的layer中去
    layer.getSource().addFeature(anchor);


    // 监听地图层级变化
    map.getView().on('change:resolution', function(){
        //获取图标的样式对象
        var style = anchor.getStyle();

        // 重新设置图标的缩放率，基于层级10来做缩放
        style.getImage().setScale(this.getZoom() / 10);

        anchor.setStyle(style);

    })


</script>
</body>
</html>
2、运行结果

在这里插入图片描述

三、地图添加svg图标

1、map3.html
<!Doctype html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
    <meta http-equiv='Content-Type' content='text/html;charset=utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
    <meta content='always' name='referrer'>
    <title>OpenLayers 3 :地图添加svg图标</title>
    <link href='ol.css ' rel='stylesheet' type='text/css'/>
    <script type='text/javascript' src='ol.js' charset='utf-8'></script>
</head>

<body>

<div id='map' style='width: 800px;height: 500px;margin: auto'></div>

<script>


    /**
     * 创建一个Vector的layer来放置图标
     */
    var layer = new ol.layer.Vector({
        source: new ol.source.Vector()
    })

    /**
     *  创建地图
     */
    var map = new ol.Map({

        // 设置地图图层
        layers: [
            //创建一个使用Open Street Map地图源的图层
            new ol.layer.Tile({
                source: new ol.source.OSM()
            }),
            layer
        ],

        // 设置显示地图的视图
        view: new ol.View({
            center: [0, 0],       // 设置地图显示中心于经度0度，纬度0度处
            zoom: 10           // 设置地图显示层级为5
        }),

        // 让id为map的div作为地图的容器
        target: 'map'
    });


    //创建一个Feature，并设置好在地图的位置
    var anchor = new ol.Feature({
        geometry: new ol.geom.Point([0,0])
    });

    //构建svg的Image对象
    // svg图标代码
    var svg = '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="30px" height="30px" viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">'+
        '<path fill="#156BB1" d="M22.906,10.438c0,4.367-6.281,14.312-7.906,17.031c-1.719-2.75-7.906-12.665-7.906-17.031S10.634,2.531,15,2.531S22.906,6.071,22.906,10.438z"/>'+
        '<circle fill="#FFFFFF" cx="15" cy="10.677" r="3.291"/></svg>';
    //创建图片对象
    var mysvg = new Image();
    mysvg.src = 'data:image/svg+xml,' + escape(svg);


    //图标设置样式
    anchor.setStyle(new ol.style.Style({
        image: new ol.style.Icon({
            img: mysvg,    // 设置Image对象
            imgSize: [30, 30]    // 及图标大小
        })
    }));

    // 将Feature添加到之前的创建的layer中去
    layer.getSource().addFeature(anchor);


</script>
</body>
</html>
2、运行结果

在这里插入图片描述

四、规则几何体图标

1、map4.html
<!Doctype html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
    <meta http-equiv='Content-Type' content='text/html;charset=utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
    <meta content='always' name='referrer'>
    <title>OpenLayers 3 :规则几何体图标</title>
    <link href='ol.css ' rel='stylesheet' type='text/css'/>
    <script type='text/javascript' src='ol.js' charset='utf-8'></script>
</head>

<body>

<div id='map' style='width: 800px;height: 500px;margin: auto'></div>

<script>

    /**
     * 创建一个Vector的layer来放置图标
     */
    var layer = new ol.layer.Vector({
        source: new ol.source.Vector()
    })


    /**
     *  创建地图
     */
    var map = new ol.Map({

        // 设置地图图层
        layers: [
            //创建一个使用Open Street Map地图源的图层
            new ol.layer.Tile({
                source: new ol.source.OSM()
            }),
            layer
        ],

        // 设置显示地图的视图
        view: new ol.View({
            center: [0, 0],       // 设置地图显示中心于经度0度，纬度0度处
            zoom: 10,           // 设置地图显示层级为10
            projection: 'EPSG:4326' //设置投影
        }),

        // 让id为map的div作为地图的容器
        target: 'map'
    });

    // 添加一个三角形
    var shape = new ol.Feature({
        geometry: new ol.geom.Point([0, 0])
    });
    shape.setStyle(new ol.style.Style({
        image: new ol.style.RegularShape({
            points: 3,    // 顶点数
            radius: 10,    // 图形大小，单位为像素
            stroke: new ol.style.Stroke({ // 设置边的样式
                color: 'red',
                size: 2
            })
        })
    }));

    // 将Feature添加到之前的创建的layer中去
    layer.getSource().addFeature(shape);

    // 添加一个五星
    var star = new ol.Feature({
        geometry: new ol.geom.Point([0.1, 0.1])
    });
    star.setStyle(new ol.style.Style({
        image: new ol.style.RegularShape({
            points: 5,    // 顶点个数
            radius1: 20, // 外圈大小
            radius2: 10, // 内圈大小
            stroke: new ol.style.Stroke({ // 设置边的样式
                color: 'red',
                size: 2
            }),
            fill: new ol.style.Fill({ // 设置五星填充样式
                color: 'blue'
            })
        })
    }));

    // 将Feature添加到之前的创建的layer中去
    layer.getSource().addFeature(star);


</script>
</body>
</html>
2、运行结果

在这里插入图片描述

五、canvas自绘图标

1、map5.html
<!Doctype html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
    <meta http-equiv='Content-Type' content='text/html;charset=utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
    <meta content='always' name='referrer'>
    <title>OpenLayers 3 :canvas自绘图标</title>
    <link href='ol.css ' rel='stylesheet' type='text/css'/>
    <script type='text/javascript' src='ol.js' charset='utf-8'></script>
</head>

<body>

<div id='map' style='width: 800px;height: 500px;margin: auto'></div>

<script>

    /**
     * 创建一个Vector的layer来放置图标
     */
    var layer = new ol.layer.Vector({
        source: new ol.source.Vector()
    })

    /**
     *  创建地图
     */
    var map = new ol.Map({

        // 设置地图图层
        layers: [
            //创建一个使用Open Street Map地图源的图层
            new ol.layer.Tile({
                source: new ol.source.OSM()
            }),
            layer
        ],

        // 设置显示地图的视图
        view: new ol.View({
            center: [0, 0],       // 设置地图显示中心于经度0度，纬度0度处
            zoom: 10           // 设置地图显示层级为5
        }),

        // 让id为map的div作为地图的容器
        target: 'map'

    });

    // 使用canvas绘制一个不规则几何图形
    var canvas =document.createElement('canvas');
    canvas.width = 20;
    canvas.height = 20;
    var context = canvas.getContext("2d");
    context.strokeStyle = "red";
    context.lineWidth = 1;
    context.beginPath();
    context.moveTo(0, 0);
    context.lineTo(20, 10);
    context.lineTo(0, 20);
    context.lineTo(10, 10);
    context.lineTo(0, 0);
    context.stroke();

    // 把绘制了的canvas设置到style里面
    var style = new ol.style.Style({
        image: new ol.style.Icon({
            img: canvas,
            imgSize: [canvas.width, canvas.height],
            rotation: 90 * Math.PI / 180
        })
    });

    //创建一个Feature，并设置好在地图的位置
    var shape = new ol.Feature({
        geometry: new ol.geom.Point([0, 0])
    });

    // 应用具有不规则几何图形的样式到Feature
    shape.setStyle(style);

    // 将Feature添加到之前的创建的layer中去
    layer.getSource().addFeature(shape);


</script>
</body>
</html>
2、运行结果

在这里插入图片描述

六、文字标注

1、map6.html
<!Doctype html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
    <meta http-equiv='Content-Type' content='text/html;charset=utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
    <meta content='always' name='referrer'>
    <title>OpenLayers 3 :文字标注</title>
    <link href='ol.css ' rel='stylesheet' type='text/css'/>
    <script type='text/javascript' src='ol.js' charset='utf-8'></script>
</head>

<body>

<div id='map' style='width: 800px;height: 500px;margin: auto'></div>

<script>


    /**
     * 创建一个Vector的layer来放置图标
     */
    var layer = new ol.layer.Vector({
        source: new ol.source.Vector()
    })

    /**
     *  创建地图
     */
    var map = new ol.Map({

        // 设置地图图层
        layers: [
            //创建一个使用Open Street Map地图源的图层
            new ol.layer.Tile({
                source: new ol.source.OSM()
            }),
            layer
        ],

        // 设置显示地图的视图
        view: new ol.View({
            center: [0, 0],       // 设置地图显示中心于经度0度，纬度0度处
            zoom: 10           // 设置地图显示层级为5
        }),

        // 让id为map的div作为地图的容器
        target: 'map'

    });

    //创建一个Feature，并设置好在地图的位置
    var anchor = new ol.Feature({
        geometry: new ol.geom.Point([0, 0])
    });


    // 设置文字style
    anchor.setStyle(new ol.style.Style({
        text: new ol.style.Text({
            font: '10px sans-serif', //默认这个字体，可以修改成其他的，格式和css的字体设置一样
            text: '你好 OpenLayers 3',
            fill: new ol.style.Fill({
                color: 'red'
            })
        })
    }));

    // 将Feature添加到之前的创建的layer中去
    layer.getSource().addFeature(anchor);


</script>
</body>
</html>
2、运行结果

在这里插入图片描述

七、styleFunction方式在地图添加图标

1、map7.html
<!Doctype html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
    <meta http-equiv='Content-Type' content='text/html;charset=utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
    <meta content='always' name='referrer'>
    <title>OpenLayers 3 :文字标注</title>
    <link href='ol.css ' rel='stylesheet' type='text/css'/>
    <script type='text/javascript' src='ol.js' charset='utf-8'></script>
</head>

<body>

<div id='map' style='width: 800px;height: 500px;margin: auto'></div>

<script>


    /**
     * 创建一个Vector的layer来放置图标
     */
    var layer = new ol.layer.Vector({
        source: new ol.source.Vector()
    })


    /**
     *  创建地图
     */
    var map = new ol.Map({

        // 设置地图图层
        layers: [
            //创建一个使用Open Street Map地图源的图层
            new ol.layer.Tile({
                source: new ol.source.OSM()
            }),
            layer
        ],

        // 设置显示地图的视图
        view: new ol.View({
            center: [0, 0],       // 设置地图显示中心于经度0度，纬度0度处
            zoom: 10           // 设置地图显示层级为5
        }),

        // 让id为map的div作为地图的容器
        target: 'map'

    });

    //创建一个Feature，并设置好在地图的位置
    var anchor = new ol.Feature({
        geometry: new ol.geom.Point([0, 0])
    });

    // 应用style function，动态的获取样式
    anchor.setStyle(function(resolution){
        return [new ol.style.Style({
            image: new ol.style.Icon({
                src: 'images/user.png',
                scale: map.getView().getZoom() / 10
            })
        })];
    });

    // 将Feature添加到之前的创建的layer中去
    layer.getSource().addFeature(anchor);


</script>
</body>
</html>
2、运行结果

在这里插入图片描述

openlayers 地图上加图标_openlayers地图添加标志物
weixin_29658015的博客
01-28 1248
openlayers是最好的开源地图引擎，我们开发主要在地图上标记兴趣点，画区域，任意图形，运动轨迹等等。在ol地图上画东西其实非常简单，只需要按以下步骤执行Pointpoint是一个ol坐标点，例如根据经纬度来转为ol对应的坐标var lonLat = [114.158648, 22.284701];var transPoint = ol.proj.fromLonLat(lonLat);Feat...
openlayers 地图上加图标_OpenLayers学习笔记中级篇（四、地图图标操作）
weixin_39630909的博客
12-19 944
图标是GIS应用中必不可少的要素，比如在地图上标注饭店，学校，加油站等，就需要添加图标，点击图标，可能需要提示更为详细的信息，比如地址，评价，或者更为复杂的业务信息。本节将从基本的应用入手讲解，直到比较高级一些的自定义特色图标和信息展示。在OpenLayer3中添加图标有两种方式，一种是我们这一小节马上就要介绍的，比较传统的overlay，另一种是下一小节马上就要介绍的Feature+Styl...
openlayers实现本地图片作为背景，添加marker标记
06-09
刚刚使用openlayers做了一个简单的小例子，注释很全，很简单，将本地的图片作为背景，能够按照坐标添加任意个标记
openlayers轨迹绘制、轨迹回放
weixin_54514048的博客
09-27 415
【代码】openlayers轨迹绘制、轨迹回放。
openlayers 添加图片和文字点位图层
最新发布
收集、分享
04-16 222
openlayers 添加图片和文字点位图层
vue3 openlayers--添加图片图标
M__O__M的博客
08-02 3465
vue3+ts openlayers--添加图标
【openlayers-3】加载图标
WXG1011的博客
12-30 1102
openlayers添加图标
Openlayers实现地图全屏显示
10-14
3. 初始化地图实例，设置图层和视图。 4. 实例化全屏控制，并将其添加到地图。 5. 用户可以通过点击全屏图标或使用Esc键在全屏和非全屏模式之间切换。 通过以上步骤，我们可以为用户提供一个更加沉浸式的地图体验，...
openlayers3添加闪烁点
12-20
通过以上步骤，我们就成功地在OpenLayers 3地图上添加了一个闪烁的点。这个点会根据设定的时间间隔在可见和不可见之间切换，从而达到闪烁的效果。你可以根据需要调整动画的速度、颜色和形状，以满足具体项目的需求。...
openlayers实现图标拖动获取坐标
10-14
要将这个拖动交互应用到地图上，我们需要创建一个OpenLayers地图实例`map`，并将其与`app.Drag`实例关联起来： ```javascript var map = new ol.Map({ target: &#39;map&#39;, view: new ol.View({ center: [0, 0], ...
openlayers 地图上加图标_openlayers在底图上添加静态icon
weixin_39945445的博客
12-19 1377
越学习openlayer你会发现openlayer是真的很强大，今天记录一下学习的成果，需求是做那种室内的CAD的场景然后里面展示人员icon并且实时展示人员的位置信息，以及点击弹出对应人员的一些位置信息，姓名，电话等等，这个在工业互联网中是很常见的，接下来就开始操作了由于我是在vue+ts中写的，所以下面的代码片段可能是基于vue来写的第一步，我们需要建立一个底图，这个底图可以是谷歌地图也可以是...
openlayers 地图上加图标_Openlayers绘制地图标注
weixin_39817012的博客
12-19 1336
本文实例为大家分享了Openlayers绘制地图标注的具体代码，供大家参考，具体内容如下1、标注的简介标注简单点说就是通过图标、文字等方式将我们想展示的内容显示在地图上，着重突出人们所关注的专题内容，从而为用户提供个性化的地图服务；2、标注方式在Openlayers3里面，有两种对地理位置点进行标注的方法，一种是通过创建矢量图层然后设置其样式的方法，还有一种就是创建Overlay覆盖层的方法；对于...
openlayers 地图上加图标_openlayers添加地图标记
weixin_39593523的博客
12-19 497
html,body {width: 100%;height: 100%;margin: 0;}.map {width: 100%;height: 100%;background: #f6f6f4;}var map;$(function () {InitMap();AddPoint();})var layer;//地图初始化function InitMap() {//初始化地图layer = new...
openlayers图标（ol.Overlay）
隔壁家的小屁孩
03-16 1144
<template> <div class="myMap"> <div id="map" style="height: 100%; width: 100%;"></div> <!--下面就是传统的显示一个图片图标的方式，用img--> <div id="anchor"><img src="../assets/fy.jpg" alt="示例锚点" /></div&g
openlayers 创建图标
adai_zhu的专栏
02-28 1198
//将点的信息存入self中*** let feature = new Feature({ geometry: new Point(coordinates), self: result.result || {} }); let markerStyle = new Style({ //设置icon大小 image: new Icon({ // ...
openlayers 地图上加图标_openlayers 添加标记点击弹窗 定位图标闪烁
weixin_29817791的博客
01-28 1101
//矢量标注样式设置函数，设置image为图标ol.style.Iconfunction createLabelStyle(feature, icon, scale, opacity) {return (new ol.style.Style({image: new ol.style.Icon({opacity: opacity,src: icon,scale: scale // 标注图标大小}),...
openlayers三：添加图片和图标
weixin_30410119的博客
06-13 3318
openlayers添加图片是指： 　　添加在地图上的图片会跟随地图同步放大缩小 而添加图标是指： 　　添加在地图上的图片不会跟随地图同步放大缩小 添加图片： 　　首先初始化图片图层： 1 initImageLayer: function (extent) { 2 this.imageLayer = new ol.layer.Image({ 3 ...
利用Openlayers2给地图添加Icon标注
qq_37385726的博客
06-17 2459
实现效果代码
openlayers3加图标定位
热门推荐
mashang666的博客
06-23 1万+
首先想说的是我也是刚刚接触openlayers，因为公司的需求所以开始学习openlayers，刚开始想学openlayers2，但是试过几次发现openlayers2的浏览效果不好，还存在一些浏览卡顿不流畅等问题，于是我转向openlayers3,发现openlayers3确实在效果上好了很多，但是openlayers3在很多语法方面做了较大调整。由于我也是刚刚接触ol3，所以做出的功能也许不多
openlayers地图添加的图标实现旋转动画
05-11
要在OpenLayers地图上添加旋转动画的图标，可以使用OpenLayers的VectorLayer和Style功能来实现。您可以按照以下步骤操作： 1. 创建一个VectorLayer图层并将其添加到地图上： ``` var vectorLayer = new ol.layer.Vector({ source: new ol.source.Vector(), }); map.addLayer(vectorLayer); ``` 2. 创建一个Feature并将其添加到VectorLayer中： ``` var iconFeature = new ol.Feature({ geometry: new ol.geom.Point(ol.proj.fromLonLat([lon, lat])), name: &#39;My Icon&#39;, }); vectorLayer.getSource().addFeature(iconFeature); ``` 3. 创建一个旋转动画的样式： ``` var iconStyle = new ol.style.Style({ image: new ol.style.Icon({ anchor: [0.5, 0.5], anchorXUnits: &#39;fraction&#39;, anchorYUnits: &#39;fraction&#39;, src: &#39;path/to/icon.png&#39;, rotation: 0, // 初始旋转角度为0 }), }); ``` 4. 创建一个动画函数，该函数将更新图标的旋转角度： ``` function animateIcon(feature) { var icon = feature.getStyle().getImage(); var rotation = icon.getRotation(); icon.setRotation(rotation + Math.PI / 100); // 每次增加 Math.PI/100 的角度 feature.setStyle(new ol.style.Style({ image: icon, })); requestAnimationFrame(function() { animateIcon(feature); }); } ``` 5. 调用animateIcon函数开始动画： ``` animateIcon(iconFeature); ``` 这样，您就可以在OpenLayers地图上添加一个旋转动画的图标了。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大树下躲雨

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值