WebGIS开发绘制地图标注

  vectorSource = new ol.source.Vector({
      features: [],
  })
  //矢量标注图层
  vectorLayer = new ol.layer.Vector({
      source: vectorSource,
  })
  map.addLayer(vectorLayer)

5. 添加图片标注:

构建点几何要素，设置其样式为图片标注，并将该点加入到矢量图层中;

5.1 创建图片标注要素

//新建一个要素 ol.Feature
  var newFeature = new ol.Feature({
    //几何信息
    geometry: new ol.geom.Point(coordinate),
  })

5.2 设置图片标注要素样式

 function createImageStyle(feature) {
    return new ol.style.Style({
      /**{olx.style.IconOptions}类型*/
      image: new ol.style.Icon({
        anchor: [0.5, 60],
        anchorOrigin: 'top-right',
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        offsetOrigin: 'top-right',
        // offset:[0,10],
        //图标缩放比例
        // scale:0.5,
        //透明度
        opacity: 0.75,
        //图标的url
        src: './static/assets/olimages/label/blueIcon.png',
      }),
    })
  }
  //设置要素的样式
  newFeature.setStyle(createImageStyle(newFeature))

5.3 将图片标注添加到图层数据源中

  //将新要素添加到数据源中
  vectorSource.addFeature(newFeature)

6. 添加文字标注:

构建点几何要素，设置其样式为文本标注，并将该点加入到矢量图层中;

6.1 创建文字标注要素

  //新建一个要素 ol.Feature
  var newFeature = new ol.Feature({
    //几何信息
    geometry: new ol.geom.Point(coordinate),
    //名称属性
    name: '标注点',
  })

6.2 设置文字标注样式

 function createTxtStyle(feature) {
    return new ol.style.Style({
      text: new ol.style.Text({
        //位置
        textAlign: 'center',
        //基准线
        textBaseline: 'middle',
        //文字样式
        font: 'normal 14px 微软雅黑',
        //文本内容
        text: feature.get('name'),
        //文本填充样式（即文字颜色）
        fill: new ol.style.Fill({ color: '#aa3300' }),
        stroke: new ol.style.Stroke({ color: '#ffcc33', width: 2 }),
      }),
    })
  }
  //设置要素的样式
  newFeature.setStyle(createTxtStyle(newFeature))