OpenLayers学习笔记中级篇（四、地图图标操作）

最新推荐文章于 2024-09-27 14:20:35 发布

MagicMHD

最新推荐文章于 2024-09-27 14:20:35 发布

阅读量3.1k

点赞数 7

分类专栏： OpenLayers WebGIS实战

本文链接：https://blog.csdn.net/MagicMHD/article/details/91360954

版权

本文深入探讨了在OpenLayers中添加地图图标的两种方法：传统Overlay方式和Feature+Style方式。通过实例展示了如何加载图标、设置动画、根据层级缩放图标、绘制规则和不规则图形，以及动态修改图标样式。此外，还介绍了styleFunction的使用，以实现更灵活的地图标注操作。

摘要由CSDN通过智能技术生成

图标是GIS应用中必不可少的要素，比如在地图上标注饭店，学校，加油站等，就需要添加图标，点击图标，可能需要提示更为详细的信息，比如地址，评价，或者更为复杂的业务信息。本节将从基本的应用入手讲解，直到比较高级一些的自定义特色图标和信息展示。

在OpenLayer3中添加图标有两种方式，一种是我们这一小节马上就要介绍的，比较传统的overlay，另一种是下一小节马上就要介绍的Feature + Style的方式。 overlay之所以传统，是因为它就是传统的html方式显示图片。下面就是用这种方式加载一个五角星的示例：

1、overlay方式添加图标

<!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>地图图标加载</title>
    <link href="css/ol.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/ol.js" charset="utf-8"></script>
</head>

<body>
   <div id="map" style="width: 100%"></div>
<!--下面就是传统的显示一个图片图标的方式，用img-->
<div id="anchor"><img src="img/star.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: [116.403598,39.917553],
      zoom: 12
    })
  });

  // 下面把上面的图标附加到地图上，需要一个ol.Overlay
  var anchor = new ol.Overlay({
    element: document.getElementById('anchor')
  });
  // 关键的一点，需要设置附加到地图上的位置
  anchor.setPosition([116.403598,39.917553]);
  // 然后添加到map上
  map.addOverlay(anchor);
</script>
</body>

</html>

还是先运行看一下效果如下：

这样我们就把一个五角星加载地图上北京的位置上！来看一下具体的流程：

首先我们定义了一个div用来放置五角星图片，然后我们定义了一个Overlay，在Overlay的元素位置上放上五角星的div id，然后非常重要的一步是给五角星图片设置一个位置，最后把Overlay图层加入到地图上即可！

功能已经完成了，下面我们来分析一下这种方式加载图标的优点和缺点：

缺点：

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

优点：

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

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

就可以看到鼠标放到锚点上去的时候，鼠标图标从箭头，变成手了。类似的其他技术都可以应用上去，比如css动画。鉴于动画在前端的重要性，下面单独用实例来讲解。

2、给图标添加动画效果，话不多说，直接上代码：

<!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>地图图标加载</title>
    <link href="css/ol.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/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;}
      }
/* Firefox */
      @-moz-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;}
      }
/* Safari 和 Chrome */
      @-webkit-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;}
      }
/* Opera */
      @-o-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;}
      }

      /* 应用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: 100%"></div>
<div id="anchor" style="width: 64px;height: 64px;" ><img id='anchorImg' src="img/star.png" alt="示例五角星"/></div>
<script type="text/javascri

最低0.47元/天解锁文章