15.坐标添加带箭头的线

news2024/11/19 20:19:48

ol的官网示例中有绘制带箭头的线的demo，那个是交互式绘制，而不是根据经纬度坐标添加，在其基础上稍作修改，即可转为通过经纬度添加带箭头的线的功能，线和箭头的粗细大小样式都可以自定义

代码如下

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>加载天地图</title>
  <link href="ol/ol.css" rel="stylesheet" type="text/css" />
  <script src="ol/ol.js" type="text/javascript"></script>
  <style type="text/css">
    #mapCon {
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
<!-- 地图容器 -->
<div id="mapCon"></div>

<script type="text/javascript">
  var key = "4689fc6b9bc0fdc8c48298f751ebfb41";//天地图密钥

  //ol.layer.Tile：是一个瓦片图层类，用于显示瓦片资源。
  //source是必填项，用于为图层设置来源。

  //ol.source.XYZ:
  //创建天地图矢量图层
  var TiandiMap_vec = new ol.layer.Tile({
    title: "天地图矢量图层",
    source: new ol.source.XYZ({
      url: "http://t{0-7}.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=" + key,
      wrapX: false
    })
  });
  //创建天地图矢量注记图层
  var TiandiMap_cva = new ol.layer.Tile({
    title: "天地图矢量注记图层",
    source: new ol.source.XYZ({
      url: "http://t{0-7}.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=" + key,
    })
  });
  //实例化Map对象加载地图
  var map = new ol.Map({
    //地图容器div的ID
    target: 'mapCon',
    //地图容器中加载的图层
    layers: [TiandiMap_vec, TiandiMap_cva],
    //地图视图设置
    view: new ol.View({
      //地图初始中心点（经纬度）
      center: [118.2, 36.5],
      //地图初始显示级别
      zoom: 7,
      projection: "EPSG:4326"
    })
  });
  //如果想画画，首先需要有一张纸或者画布，地图则需要一个绘制层
  //创建一个矢量图层Vector 作为绘制层，ol.source.Vector是用来设置矢量图层数据来源的
  var source = new ol.source.Vector();
  //创建一个图层 ol.layer.Vector矢量图层类
  var vector = new ol.layer.Vector({
    source: source
  });
  //将绘制层添加到地图容器中
  map.addLayer(vector);
  let startPoint = [116.25,38.17];
  let endPoint = [113.56, 35.11];
  let line = createLine(startPoint,endPoint,'#1196db');
  let point = createArrow(startPoint,endPoint,'blue');

  //将创建的 元素 添加到图层
  source.addFeature(line);
  source.addFeature(point);

  /**
   * 创建线
   * @param start 起点坐标 [经度,纬度]
   * @param end 终点坐标 [经度,纬度]
   */
  function createLine(start,end,lineColor){
    //添加线
    //创建一个线
    let Line = new ol.Feature({
      geometry: new ol.geom.LineString([start, end])
    });

    //设置线的样式
    Line.setStyle(new ol.style.Style({
      //填充色
      fill: new ol.style.Fill({
        color: 'rgba(74, 143, 255, 0.2)'
      }),
      //边线颜色
      stroke: new ol.style.Stroke({
        color: lineColor,
        width: 5
      }),
      //形状
      image: new ol.style.Circle({
        radius: 7,
        fill: new ol.style.Fill({
          color: lineColor
        })
      })
    }));
    return Line;
  }
  /**
   * 创建一个箭头样式的点
   * @param start 箭头线的起点
   * @param end 箭头线的终点
   * @param color 箭头颜色（red,blue）
   * @returns {*}
   */
  function createArrow(start,end,color){
    let iconUrl = 'static/img/arrow_vector_blue.svg';
    if (color=='red'){
        iconUrl = 'static/img/arrow_vector_red.svg';
    }
    //根据起止点，计算箭头的方向
    let dx = end[0] - start[0];
    let dy = end[1] - start[1];
    let rotation = Math.atan2(dy, dx);
    //添加点
    let point = new ol.Feature({
      geometry: new ol.geom.Point(end)
    });
    //设置点1的样式信息(Feature对象 只能 通过setStyle方法设置style属性)
    point.setStyle(new ol.style.Style({
      //形状
      image: new ol.style.Icon({
        src: iconUrl,
        //anchor: [0.75, 0.5],//图标的锚点,经纬度点所对应的图标的位置，默认是[0.5, 0.5]，即为标注图标的中心点位置
        scale:2,//用于调整缩放比例，可以设置该比例实现，图标跟随地图层级缩放
        rotateWithView: false,//是否随着视图旋转图标
        rotation: -rotation//旋转方位
      })
    }));
    return point;
  }

</script>
</body>
</html>