15.坐标添加带箭头的线-编程知识

15.坐标添加带箭头的线

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的IDtarget: '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>