五十四、openlayers官网示例LineString Arrows解析——在地图上绘制箭头

原创

于 2024-06-21 23:00:00 发布 · 664 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #webgl #openlayers官方示例 #地图 #openlayers

官网demo地址：

LineString Arrows

这篇介绍了在地图上绘制箭头。

创建一个矢量数据源，将其绑定为draw的数据源并展示在矢量图层上。

  const source = new VectorSource();
  const vector = new VectorLayer({
      source: source,
      style: styleFunction,
   });
   map.addInteraction(
      new Draw({
        source: source,
        type: "LineString",
      })
    );

绘制直线时，通过style函数将直线的末端添加箭头图标。通过forEachSegment 函数拿到箭头的起点和终点坐标，使用 Math.atan2计算出箭头图标的旋转角度。

const styleFunction = function (feature) {
      const geometry = feature.getGeometry();
      const styles = [
        new Style({
          stroke: new Stroke({
            color: "#ffcc33",

最低0.47元/天解锁文章