如何添加图标和提示信息到地图上呢?

一、应用overlay

<!Doctype html>
<html lang="ch" >
<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 地图示例</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: 800px"></div>
<div id="anchor"><img src="美队.png" alt="示例锚点"/></div>
<script type="text/javascript">var map = new ol.Map({layers: [new ol.layer.Tile({source: new ol.source.OSM()})],target: 'map',view: new ol.View({projection: 'EPSG:4326',center: [104, 30],zoom: 10})});// 下面把上面的图标附加到地图上，需要一个ol.Overlayvar anchor = new ol.Overlay({element: document.getElementById('anchor')});// 关键的一点，需要设置附加到地图上的位置anchor.setPosition([104, 30]);// 然后添加到map上map.addOverlay(anchor);
</script>
</body></html>

运行结果:

缺点
当图标比较多的情况下，如果采用这种方式，那么我们会加入非常多的HTML元素，从而造成效率降低。关于效率的测试，大家可以自行测试。为什么会这样呢？因为界面上元素的遍历在数量比较多的情况下，会变慢，基于此基础上的渲染，鼠标事件都会变慢。

优点
这种使用传统的方式显示图标可以应用传统的HTML技术，比如鼠标移动到图标上，鼠标图标变成手势。我们可以用css来处理就可以了，比如在head里面添加下面的代码：

<style type="text/css">#anchor {cursor:pointer;}
</style>

就可以看到鼠标放到锚点上去的时候，鼠标图标从箭头，变成手了。类似的其他技术都可以应用上去，比如css动画。

<!Doctype html>
<html lang="ch" >
<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 地图示例</title><link href="ol.css" rel="stylesheet" type="text/css"/><script type="text/javascript" src="ol.js" charset="utf-8"></script><!--定义动画，图标先放大，再缩小--><style type="text/css">@keyframes zoom{from {top: 0; left: 0; width: 32px; height: 32px;}50% {top: -16px; left: -16px; width: 64px; height: 64px;}to {top: 0; left: 0; width: 32px; height: 32px;}}@-moz-keyframes zoom /* Firefox */{from {top: 0; left: 0; width: 32px; height: 32px;}50% {top: -16px; left: -16px; width: 64px; height: 64px;}to {top: 0; left: 0; width: 32px; height: 32px;}}@-webkit-keyframes zoom /* Safari 和 Chrome */{from {top: 0; left: 0; width: 32px; height: 32px;}50% {top: -16px; left: -16px; width: 64px; height: 64px;}to {top: 0; left: 0; width: 32px; height: 32px;}}@-o-keyframes zoom /* Opera */{from {top: 0; left: 0; width: 32px; height: 32px;}50% {top: -16px; left: -16px; width: 64px; height: 64px;}to {top: 0; left: 0; width: 32px; height: 32px;}}/* 应用css动画到图标元素上 */#anchorImg{display: block;position: absolute;animation: zoom 5s;animation-iteration-count: infinite; /* 一直重复动画 */-moz-animation: zoom 5s; /* Firefox */-moz-animation-iteration-count: infinite; /* 一直重复动画 */-webkit-animation: zoom 5s;  /* Safari 和 Chrome */-webkit-animation-iteration-count: infinite; /* 一直重复动画 */-o-animation: zoom 5s; /* Opera */-o-animation-iteration-count: infinite; /* 一直重复动画 */}</style>
</head>
<body >
<div id="map" style="width: 800px;height: 800px"></div>
<div id="anchor" style="width: 64px;height: 64px;" ><img id='anchorImg' src="美队.png" alt="示例锚点"/></div>
<script type="text/javascript">var map = new ol.Map({layers: [new ol.layer.Tile({source: new ol.source.OSM()})],target: 'map',view: new ol.View({projection: 'EPSG:4326',center: [104, 30],zoom: 10})});var anchor = new ol.Overlay({element: document.getElementById('anchor')});anchor.setPosition([104, 30]);map.addOverlay(anchor);
</script>
</body></html>

这一段代码就实现了图片的大小缩放动画效果

一、style及应用

我们同样可以通过Feature+style设置图标的样式

<!Doctype html>
<html lang="ch" >
<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 地图示例</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: 800px"></div>
<script type="text/javascript">// 我们需要一个vector的layer来放置图标var layer = new ol.layer.Vector({source: new ol.source.Vector()})var map = new ol.Map({layers: [new ol.layer.Tile({source: new ol.source.OSM()}),layer],target: 'map',view: new ol.View({projection: 'EPSG:4326',center: [104, 30],zoom: 10})});// 创建一个Feature，并设置好在地图上的位置var anchor = new ol.Feature({geometry: new ol.geom.Point([104, 30])});// 设置样式，在样式中就可以设置图标anchor.setStyle(new ol.style.Style({image: new ol.style.Icon({src: '美队.png'})}));// 添加到之前的创建的layer中去layer.getSource().addFeature(anchor);
</script>
</body></html>

效果与之前的使用overlay是完全一样的,但从代码上来看，是不一样的:

首先overlay需要HTML元素img，但这种方式不需要
overlay是添加在map上的，但是这种方式需要一个Vector的layer，并添加在其上
没有办法像overlay那样使用一些HTML技术

设置图标位置

image: new ol.style.Icon({src: '美队.png',anchor: [0.5, 1]    // 设置图标位置
})

\默认情况下，位置坐标是按照比例的方式来设置的，范围从0到1，x轴上0表示最左边，1表示最右边，y轴上0表示最上边，1表示最下边。如代码所示，x设置为0.5可以让图片在x方向上居中，y设置为1可以让图片在y方向上移动到最底端。
除了按照比例进行移动之外，还可以按照像素来计算位置，但必须显示设置anchorXUnits或 anchorYUnits为pixels。根据不同的需要，可以采用不同的单位来设置。

根据层级放大缩小图标

<div id="map" style="width: 100%"></div>
<script type="text/javascript">var layer = new ol.layer.Vector({source: new ol.source.Vector()})var map = new ol.Map({layers: [new ol.layer.Tile({source: new ol.source.OSM()}), layer],target: 'map',view: new ol.View({projection: 'EPSG:4326',center: [104, 30],zoom: 10})});var anchor = new ol.Feature({geometry: new ol.geom.Point([104, 30])});anchor.setStyle(new ol.style.Style({image: new ol.style.Icon({src: '美队.png'})}));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>

设置SVG图标

<div id="map" style="width: 100%"></div>
<script type="text/javascript">var layer = new ol.layer.Vector({source: new ol.source.Vector()})var map = new ol.Map({layers: [new ol.layer.Tile({source: new ol.source.OSM()}), layer],target: 'map',view: new ol.View({projection: 'EPSG:4326',center: [104, 30],zoom: 10})});var anchor = new ol.Feature({geometry: new ol.geom.Point([104, 30])});// 构建svg的Image对象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]    // 及图标大小
//          src: 'http://www.williambuck.com/portals/0/Skins/WilliamBuck2014/images/location-icon.svg',
//          size: [30, 30]})}));layer.getSource().addFeature(anchor);
</script>

前半部分代码都一样，最后设置样式的时候，可以根据注释来理解不一样的代码，构建Image对象，设置src是关键。

规则几何体图标

<div id="map" style="width: 100%"></div>
<script type="text/javascript">var layer = new ol.layer.Vector({source: new ol.source.Vector()})var map = new ol.Map({layers: [new ol.layer.Tile({source: new ol.source.OSM()}), layer],target: 'map',view: new ol.View({projection: 'EPSG:4326',center: [104, 30],zoom: 10})});// 添加一个三角形var shape = new ol.Feature({geometry: new ol.geom.Point([104, 30])});shape.setStyle(new ol.style.Style({image: new ol.style.RegularShape({points: 3,    // 顶点数radius: 10,    // 图形大小，单位为像素stroke: new ol.style.Stroke({ // 设置边的样式color: 'red',size: 2})})}));layer.getSource().addFeature(shape);// 添加一个五星var star = new ol.Feature({geometry: new ol.geom.Point([104.1, 30.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'})})}));layer.getSource().addFeature(star);</script>

利用Canvas自绘图标

<div id="map" style="width: 100%"></div>
<script type="text/javascript">var layer = new ol.layer.Vector({source: new ol.source.Vector()})var map = new ol.Map({layers: [new ol.layer.Tile({source: new ol.source.OSM()}), layer],target: 'map',view: new ol.View({projection: 'EPSG:4326',center: [104, 30],zoom: 10})});// 使用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})});// 创建一个Featurevar shape = new ol.Feature({geometry: new ol.geom.Point([104, 30])});// 应用具有不规则几何图形的样式到Featureshape.setStyle(style);layer.getSource().addFeature(shape);
</script>

动态改变图标

<div id="map" style="width: 100%"></div>
<script type="text/javascript">var layer = new ol.layer.Vector({source: new ol.source.Vector()})var map = new ol.Map({layers: [new ol.layer.Tile({source: new ol.source.OSM()}), layer],target: 'map',view: new ol.View({projection: 'EPSG:4326',center: [104, 30],zoom: 10})});// 添加一个空心的五星var star = new ol.Feature({geometry: new ol.geom.Point([104, 30])});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})})}));layer.getSource().addFeature(star);// 监听地图点击事件map.on('click', function(event){var feature = map.forEachFeatureAtPixel(event.pixel, function(feature){return feature;});if (feature) {// 将空心五星为红色实心五星var style = feature.getStyle().getImage();feature.setStyle(new ol.style.Style({image: new ol.style.RegularShape({points: 5,radius1: 20,radius2: 10,stroke: style.getStroke(),fill: new ol.style.Fill({color: 'red'})})}));}});</script>

文字标注

<div id="map" style="width: 100%"></div>
<script type="text/javascript">var layer = new ol.layer.Vector({source: new ol.source.Vector()})var map = new ol.Map({layers: [new ol.layer.Tile({source: new ol.source.OSM()}), layer],target: 'map',view: new ol.View({projection: 'EPSG:4326',center: [104.06, 30.67],zoom: 10})});var anchor = new ol.Feature({geometry: new ol.geom.Point([104.06, 30.67])});// 设置文字styleanchor.setStyle(new ol.style.Style({text: new ol.style.Text({// font: '10px sans-serif' 默认这个字体，可以修改成其他的，格式和css的字体设置一样text: '淡叔所在地成都',fill: new ol.style.Fill({color: 'red'})})}));layer.getSource().addFeature(anchor);
</script>

styleFunction应用

我们可以通过预先设定stylefunction进行判断来设置样式

<div id="map" style="width: 100%"></div>
<script type="text/javascript">var layer = new ol.layer.Vector({source: new ol.source.Vector()})var map = new ol.Map({layers: [new ol.layer.Tile({source: new ol.source.OSM()}), layer],target: 'map',view: new ol.View({projection: 'EPSG:4326',center: [104, 30],zoom: 10})});var anchor = new ol.Feature({geometry: new ol.geom.Point([104, 30])});// 应用style function，动态的获取样式anchor.setStyle(function(resolution){return [new ol.style.Style({image: new ol.style.Icon({src: '../img/anchor.png',scale: map.getView().getZoom() / 10})})];});layer.getSource().addFeature(anchor);
</script>

<div id="map2" style="width: 100%"></div>
<script type="text/javascript">// 创建layer使用的style function，根据feature的自定义type，返回不同的样式var layerStyleFunction = function(feature, resolution) {var type = feature.get('type');var style = null;// 点if (type === 'point') {style = new ol.style.Style({image: new ol.style.Circle({radius: 1,fill: new ol.style.Fill({color: 'red'})})});} else if ( type === 'circle') { // 圆形style = new ol.style.Style({image: new ol.style.Circle({radius: 10,stroke: new ol.style.Stroke({color: 'red',size: 1})})});} else { // 其他形状style = new ol.style.Style({image: new ol.style.RegularShape({points: 5,radius: 10,fill: new ol.style.Fill({color: 'blue'})})});}// 返回 style 数组return [style];};var layer2 = new ol.layer.Vector({source: new ol.source.Vector(),style: layerStyleFunction // 应用上面创建的 style function});var map2 = new ol.Map({layers: [new ol.layer.Tile({source: new ol.source.OSM()}), layer2],target: 'map2',view: new ol.View({projection: 'EPSG:4326',center: [104, 30],zoom: 10})});// 添加三个feature，并设置自定义属性 typevar rect = new ol.Feature({geometry: new ol.geom.Point([104, 30])});layer2.getSource().addFeature(rect);var circle = new ol.Feature({geometry: new ol.geom.Point([104, 30])});circle.set('type', 'circle');layer2.getSource().addFeature(circle);var point = new ol.Feature({geometry: new ol.geom.Point([104, 30])});point.set('type', 'point');layer2.getSource().addFeature(point);</script>

Openlayer：学习笔记之图标与提示信息相关推荐

Qt5学习笔记之图标下载和转换
这里写目录标题概述下载图标图标转换测试图标概述学习Qt过程中,按照视频打包程序,想要找个自己的图标.发现视频内给出的网站是收费下载,目前只是学习了解Qt,暂时没有必要充值下载图标. 百度了 ...
Qt5学习笔记之串口助手三：打包成Windows软件
这里写目录标题添加图标打包程序测试打包好的软件添加图标图标的获取可以参考我的另一篇文章:Qt5学习笔记之图标下载和转换,这里只记录下Qt中使用图标的方法. 1.切换到release模式下进行 ...
Yii学习笔记：利用setFlash和runController打造个性化的提示信息页面
为什么80%的码农都做不了架构师?>>> 在实现Yii::success()这样的调用方式之前,你可能需要阅读我的这篇博文: <Yii学习笔记:扩展YiiBase入口类& ...
Mr.J-- jQuery学习笔记(十九)--自定义动画实现图标特效
之前有写过自定义动画Mr.J-- jQuery学习笔记(十八)--自定义动画这次实现一个小demo 图标特效页面渲染 <!DOCTYPE html> <html lang=&qu ...
amazeui学习笔记--css（常用组件6）--图标Icon
amazeui学习笔记--css(常用组件6)--图标Icon 一.总结 1.关注用法即可:在 HTML 上添加添加 am-icon-{图标名称} class. <span class=&quo ...
微信小程序学习笔记（七）----简单文章推荐列表和分类图标的实现
想要实现一个顶部是几篇纯文字的推荐文章,推荐文章下面是四个分类图标,具体实现出来是这个样子的,比较简单: 首先先来找一下素材,这几个图标是我在阿里巴巴图标库下载的,这里是下载地址: http://ww ...
迪文屏幕T5UID3平台学习笔记二：变量图标显示和按键返回值按钮学习
需要实现一个功能:当点击某个按钮时候,要求能够改变按钮的字体和颜色,比如: 点击strat按钮后,显示stop,这样再点击就实现Stop逻辑,同时显示变成Start,也就是说把Start和Stop按 ...
c#学习笔记05-treeview中添加图标
创建树目录前面在学习笔记03中已经提到过即树目录数据从XML文档中获取添加图标主要用到ImageList控件 1.ImageList控件在树目录对应存在的窗体中添加此控件添加图标: 2.tre ...
c++ qt工作量和移动端相比_学习笔记 --- QT
0.前序别问,问就是选修... 那毕竟3dMax动画那边结课了,我怎么就不能再发一篇笔记(极其嚣张) QT其实会去好好学的,虽然最近为了选修结课又得恶补一波不过以后给策划造编辑器是要用的,这篇笔记 ...
Python语言入门这一篇就够了-学习笔记(十二万字)
Python语言入门这一篇就够了-学习笔记(十二万字) 友情提示:先关注收藏,再查看,12万字保姆级 Python语言从入门到精通教程. 文章目录 Python语言入门这一篇就够了-学习笔记(十二万字 ...

Openlayer：学习笔记之图标与提示信息