openlayers5中用iconfont作为图标

lzugis

发布于 2019-03-22 15:42:57

1.2K0

发布于 2019-03-22 15:42:57

概述

前面有文章 openlayers4中用font设置图标样式 就iconfont在ol5中的使用做了一个尝试，后面有很多童鞋问我说实现不了，一直没有时间去做一个详细的测试，最近在做了诸多测试后，觉得这种方式比较靠谱，在此分享出来，希望对用到的童鞋有所帮助和启示。

实现思路

实现的思路流程图如下：

实现后效果

实现后效果如下：

实现代码

<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)">&#xe648;</span>
		</li>
		<li>
			<span class="iconfont" onclick="changeIconStyle(this)">&#xe60b;</span>
		</li>
		<li>
			<span class="iconfont" onclick="changeIconStyle(this)">&#xe601;</span>
		</li>
		<li>
			<span class="iconfont" onclick="changeIconStyle(this)">&#xe638;</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

联系方式