openlayers5中用iconfont作为图标
2019-03-20 本文已影响22人
牛老师讲webgis
概述
前面有文章openlayers4中用font设置图标样式就iconfont在ol5中的使用做了一个尝试，后面有很多童鞋问我说实现不了，一直没有时间去做一个详细的测试，最近在做了诸多测试后，觉得这种方式比较靠谱，在此分享出来，希望对用到的童鞋有所帮助和启示。
实现思路
实现的思路流程图如下：
实现思路
实现后效果
实现后效果如下：
效果1
效果2
实现代码
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ol3 wms</title>
<link rel="stylesheet" type="text/css" href="../../plugin/ol4/ol.css"/>
<link rel="stylesheet" type="text/css" href="css/font/iconfont.css"/>
<style type="text/css">
body, #map {
border: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-size: 13px;
}
.icon-font {
position: absolute;
top: 20px;
right: 20px;
margin: 0;
padding: 0;
list-style: none;
z-index: 99;
}
.icon-font li {
display: inline-block;
cursor: pointer;
border: 1px solid #9b9b9b;
border-radius: 50%;
padding: 5px;
}
.icon-font li:hover, li.active {
background-color: red;
color: white;
}
.icon-font li span {
font-size: 25px;
}
</style>
<script type="text/javascript" src="../../plugin/ol4/ol.js"></script>
<script type="text/javascript" src="../../plugin/jquery/jquery-3.1.1.min.js"></script>
</head>
<body>
<div id="map">
<ul class="icon-font" id="icons">
<li class="active">
<span class="iconfont" onclick="changeIconStyle(this)"></span>
</li>
<li>
<span class="iconfont" onclick="changeIconStyle(this)"></span>
</li>
<li>
<span class="iconfont" onclick="changeIconStyle(this)"></span>
</li>
<li>
<span class="iconfont" onclick="changeIconStyle(this)"></span>
</li>
</ul>
</div>
<script type="text/javascript">
var map;
var format = 'image/png';
var bounds = [73.4510046356223, 18.1632471876417,
134.976797646506, 53.5319431522236];
var untiled = new ol.layer.Image({
source: new ol.source.ImageWMS({
ratio: 1,
url: 'wms server url',
params: {'FORMAT': format,
'VERSION': '1.1.1',
LAYERS: 'layers',
STYLES: ''
}
})
});
var projection = new ol.proj.Projection({
code: 'EPSG:4326',
units: 'degrees'
});
map = new ol.Map({
controls: ol.control.defaults({
attribution: false
}),
target: 'map',
layers: [
untiled
],
view: new ol.View({
projection: projection
})
});
map.getView().fit(bounds, map.getSize());
var vectorSource = new ol.source.Vector({
url:"data/capital.geojson",
format: new ol.format.GeoJSON()
});
var vector = new ol.layer.Vector({
source: vectorSource,
style: styleFunc
});
map.addLayer(vector);
function changeIconStyle(self) {
var icons = document.getElementById('icons').children;
for(var i =0;i<icons.length;i++) {
icons[i].classList.remove('active');
}
self.parentNode.classList.add('active');
vector.setStyle(styleFunc());
}
function getCurrentIcon(fontSize, fillColor, strokeColor) {
var span = document.getElementsByClassName('active')[0].children[0];
var canvas = document.createElement('canvas');
canvas.width = fontSize;
canvas.height = fontSize;
// 获取画布
var context = canvas.getContext('2d');
context.font = fontSize + 'px iconfont';
context.textAlign="left";
context.textBaseline="top";
var content = span.textContent;
if(fillColor && fillColor!==""){
context.fillStyle = fillColor;
context.fillText(content, 0, 0);
}
if(strokeColor && strokeColor!==""){
context.strokeStyle = strokeColor;
context.strokeText(content, 0, 0);
}
return canvas.toDataURL('image/png');
}
function styleFunc() {
var zoom = map.getView().getZoom();
var scale = zoom/4;
if(scale<0.3) scale=0.3;
var styleIcon = new ol.style.Style({
image: new ol.style.Icon({
anchor: [0, 0],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
scale: scale,
src: getCurrentIcon(30, 'rgba(255,0,0,0.6)', 'blue')
})
});
return styleIcon;
}
</script>
</body>
</html>
技术博客
CSDN：http://blog.csdn.NET/gisshixisheng
在线教程
https://edu.csdn.net/course/detail/799
https://edu.csdn.net/course/detail/7471
联系方式
| 类型 | 内容 |
|---|---|
| 1004740957 | |
| 公众号 | lzugis15 |
| niujp08@qq.com | |
| webgis群 | 452117357 |
| Android群 | 337469080 |
| GIS数据可视化群 | 458292378 |
LZUGIS
