OpenLayers3, 箭头线绘制实现

news2024/11/17 16:27:19

文章目录

一、前言
二、代码实现
三、总结

一、前言

本文基于OpenLayers3，实现绘制箭头线的功能。

二、代码实现

<!DOCTYPE html>
<html>
<head>
    <title>绘制箭头线</title>
    <link href="../../libs/ol3/ol.css" rel="stylesheet" type="text/css" />
    <script src="../../libs/ol3/ol.js" type="text/javascript"></script>
</head>
<body>
    <div id="map" style="width: 100%; height: 95%; position: absolute;">
    </div>
    <script type="text/javascript">
        //创建底图图层
        var tdttk = '******'; // 天地图密钥
        var Tianditu_vec = new ol.layer.Tile({
            title: "天地图矢量图层",
            source: new ol.source.XYZ({
                url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=" + tdttk
                wrapX: false
            })
        });
        var Tianditu_cva = new ol.layer.Tile({
            title: "天地图矢量注记图层",
            source: new ol.source.XYZ({
                url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=" + tdttk
                wrapX: false
            })
        })
        //创建一个矢量资源
        var source = new ol.source.Vector();

        var styleFunction = function (feature) {
            var geometry = feature.getGeometry();
            var styles = [
            //设置线的样式
              new ol.style.Style({
                  stroke: new ol.style.Stroke({
                      color: '#FF0000',
                      width: 2
                  })
              })
            ];
            geometry.forEachSegment(function (start, end) {
                var dx = end[0] - start[0];
                var dy = end[1] - start[1];
                var rotation = Math.atan2(dy, dx);
                //arrows
                styles.push(new ol.style.Style({
                    geometry: new ol.geom.Point(end),
                    image: new ol.style.Icon({
                        src: "../../images/ArrowIcon/linearrow.png",
                        anchor: [0.75, 0.5],
                        rotateWithView: false,
                        rotation: -rotation
                    })
                }));
            });

            return styles;
        };
        //创建一个矢量图层，并添加矢量资源和设置起样式
        var vector = new ol.layer.Vector({
            source: source,
            style: styleFunction
        });
        //创建一个地图容器
        var map = new ol.Map({
            layers: [Tianditu_vec, Tianditu_cva, vector],
            target: 'map',
            view: new ol.View({
                center: [-11000000, 4600000],
                zoom: 4
            })
        });

        map.addInteraction(new ol.interaction.Draw({
            source: source,
            type: ('LineString')
        }));
    </script>
</body>
</html>