OpenLayers之标注功能二：图文标注

目录

一、图文标注介绍

二、使用加载矢量点要素实现标注

三、使用叠置层实现标注

---

一、图文标注介绍

    图文标注，指同时使用文本和图片的标注，通过文本结合图标来展现标注点的信息，也是一种简单的地图标注。

    一般情况下，文本用来描述标注点的关键词或主题信息（如名称等），小图标则作为标注点的位置标识，也包含一定的属性信息（如类型等）。

    可以使用加载矢量点要素的方式实现，设置点要素的图形样式为ol.style.Icon，文本样式为ol.style.Text。

    也可以使用叠置层ol.Overlay类、结合HTML的div或img标签元素实现，在实现叠置层标注时，要将ol.Overlay对象与HTML控件关联。

二、使用加载矢量点要素实现标注

    代码如下：

    与加载矢量要素相同，分别实例化矢量图层（ol.layer.Vector）和矢量数据源（ol.source.Vector），将矢量图层加载到地图容器中。

    其中，数据源中设置的矢量点要素，通过实例化ol.Feature创建，分别设置要素的几何信息（geometry）与属性信息（如name、population）等。矢量要素的样式通过setStyle方法进行设置，由createLabelStyle函数实现。

    ol.Feature的关键参数如下：

•     geometry：几何图形对象，标注点一般设置为ol.geom.Point对象
•     自定义的属性项：如name、population等，可根据需要自行定义，这些属性项可通过get方法进行获取，如feature.get('name')。

三、使用叠置层实现标注

    

    代码如下：

    

    

        

            

            武汉市
            
        
    
    
    

    

    实例化叠置层（ol.Overlay）对象，关联界面中创建的HTML元素，调用Map的addOverlay方法将其加载到地图容器中。

    ol.Overlay类的关键参数如下：

•     position：叠置对象的地理位置
•     element：目标元素，即Overlay对象关联的HTML元素，承载Overlay的界面元素