openlayer-使用ol3实现绘制箭头方向和大小

//使用ol3实现绘制箭头方向和大小
 var arrowLayer = null;

        //箭头样式
        var lineArrowStyle = function (feature, resolution) {
            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: 'arrow_red.png',
                        anchor: [0.75, 0.5],
                        rotateWithView: false,
                        rotation: -rotation
                    })
                }));
            });

            return styles;
        }

        //获取X坐标的增量
        var getX = function (l, degree) {
            var x = l * Math.cos(degree);
            return x;
        }

        //获取Y坐标的增量
        var getY = function (l, degree) {
            var y = l * Math.sin(degree);
            return y;
        }
        //获取等像素的箭头位置点坐标
        var getArrowCoords = function (start, r, pl) {
            var x0 = start[0];
            var y0 = start[1];
            var radian = 2 * 3.14 / 360 * r;//计算需要使用弧度而不是角度
            var scale = map.getView.getResolution();
            var x1 = x0 +.getX(pl * scale, radian);
            var y1 = y0 + getY(pl * scale, radian);
            return [x1, y1];
        }
        var drawLineArraw = function () {
            if (!arrowLayer) {
                arrowLayer = new ol.layer.Vector({
                    style: lineArrowStyle
                });
                arrowLayer.setMap(map);
            }
            arrowLayer.setSource(null);
            var geoSource = new ol.source.Vector({
                features: []
            });
            var geos = [];

            var pStart = ol.proj.transform([121.58594, 45.20874], "EPSG:4326", "EPSG:3857");
            var d = 360 / 100;
            var n = 0;
            for (var i = 0; i < 1000000; i += 100000) {
                for (var j = 0; j < 1000000; j += 100000) {
                    var r = d * (n++);
                    var start = [pStart[0] + i, pStart[1] + j];
                    var p = Math.round(Math.random() * 50);
                    var end = getArrowCoords(start, r, p);
                    var line = new ol.geom.LineString([start, end]);
                    geos.push(line);
                }
            }

            geoSource.addFeatures(geos);

            arrowLayer.setSource(geoSource);

            map.getView.on("change:resolution", function (evt) {
                drawLineArraw();
            }, this);
        }

 

posted @ 2022-06-15 09:47  devgis  阅读(288)  评论(0编辑  收藏  举报