在 OpenLayers 中绘制多线串

问题描述

我需要能够在 OpenLayers 5 中绘制多线串（这很容易），并带有可自定义的线端。

例如，如果我正在创建一个标尺工具，我希望多线串的末端是一个“T”，以精确显示线的起点和终点。线条末端的“刻度线”需要是线条几何图形的一部分。

我已经像这样构建了我的生产线...

  const draw: olDraw = new olDraw({
  source: MapValues.drawSource,type: 'LineString',style: new olStyle({
    fill: new olFill({
      color: 'rgba(255,255,0.2)'
    }),stroke: new olStroke({
      color: '#ffcc33',width: 2
    }),image: new CircleStyle({
      radius: 7,fill: new olFill({
        color: '#ffcc33'
      })
    })
  })
})
draw.on('drawstart',(e: olDrawEvent) => {
  const tool = this;
  let dStartMeasureTT = this.measureTooltip;
  // set sketch
  this.sketch = e.feature;
  var tooltipCoord = e.coordinate;
  tool.listener = this.sketch.getGeometry().on('change',function (evt) {
    var geom = evt.target;
    var output;
    output = tool.formatLength(geom);
    tooltipCoord = geom.getLastCoordinate();
    tool.measureTooltipElement.innerHTML = output;
    tool.measureTooltip.setPosition(tooltipCoord);
  });
});
draw.on('drawend',(e: olDrawEvent) => {
  const format: olGeoJson = new olGeoJson();
  this.shapeString = format.writeGeometry(e.feature.getGeometry(),{ dataProjection: 'EPSG:4326',featureProjection: 'EPSG:3857',rightHanded: false });
  this.featureGeometry = transform(e.feature.getGeometry().getCoordinates(),'EPSG:3857','EPSG:4326');
  // Pull up Create object modal
  const initialState = {
    message: '',title: 'Ruler Label',iconSize: 'xx-large',iconType: 'error',fontSize: 'x-large',inCharLimit: 50,inObjName: this.measureTooltipElement.innerHTML
  };
  this.bsModalRef = this.modalService.show(CreateobjectComponent,Object.assign({ class: 'modal-sm 
  modal-dialog-centered',initialState },this.config));
  this.bsModalRef.content.closeBtnName = 'OK';
  this.bsModalRef.content.modalProcess.subscribe((objName) => {
    if (objName) {
      this.saveRulerToDb(objName);
      this.createMeasureTooltip();
    }
  });
});
map.addInteraction(draw);
}
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

openlayers openlayers-5