blueIcon.pngwh.jpg

一、什么是标注

标注可以是图标或文字，主要作用是用来对某个地物信息进行说明和注解。
本质上是给点要素,添加标注

二、开发流程

  1. 1、创建Style对象(设置image或text属性)
  2. 2、创建一个点要素，并设置style为创建的对象
  3. 3、添加到矢量数据源source
  4. 4、添加到矢量图层layer
  5. 5、添加到地图map

三、涉及的类

1、Icon图标类

  1. // 二. 通过Style类创建icon
  2. const icon = new ol.style.Style({
  3.     /**{olx.style.IconOptions}类型*/
  4.     image: new ol.style.Icon({
  5.         anchor: [0.5, 60],
  6.         anchorOrigin: 'top-right',
  7.         anchorXUnits: 'fraction',
  8.         anchorYUnits: 'pixels',
  9.         offsetOrigin: 'top-right',
  10.         // offset:[0,10],
  11.         //图标缩放比例
  12.         scale: 0.5,
  13.         //透明度
  14.         opacity: 0.75,
  15.         //图标的url
  16.         src: '../image/location.png',
  17.     }),
  18. })

2、Text文字类

  1. new ol.style.Text({
  2.   offsetX: 0,
  3.   offsetY: 10,
  4.   font: 'normal 12px 微软雅黑',
  5.   text: '武汉市',
  6.   //文本填充样式（即文字颜色）
  7.   fill: new ol.style.Fill({ color: '#aa3300' }),
  8.   //描边颜色
  9.   stroke: new ol.style.Stroke({ color: '#ffcc33', width: 2 }),
  10. })