美文网首页开源建平书
openlayers5中用iconfont作为图标

openlayers5中用iconfont作为图标

作者: 牛老师讲webgis | 来源:发表于2019-03-20 16:35 被阅读22次

    概述

    前面有文章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)">&#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
    联系方式

    类型 内容
    qq 1004740957
    公众号 lzugis15
    e-mail niujp08@qq.com
    webgis群 452117357
    Android群 337469080
    GIS数据可视化群 458292378
    LZUGIS

    相关文章

      网友评论

        本文标题:openlayers5中用iconfont作为图标

        本文链接:https://www.haomeiwen.com/subject/kehtvqtx.html