• 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',
                             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);
            }
  • 相关阅读:
    [de2_tv] PAL制TV_VGA
    【转】NiosII中SDRAM相移计算
    VGA controller的代码分析
    TIOBE 2012年2月编程语言排行榜:C#力压C++
    ZendFramework入门2 使用布局
    转载 20个数据库设计最佳实践
    转载 20个很有用的CSS图形和图表技术和教程
    转载 10款实用的Ajax/JavaScript编码工具推荐
    转载 打造优秀Web设计的10项原则
    2012年1月编程语言排行榜:ObjectiveC成为年度语言
  • 原文地址:https://www.cnblogs.com/devgis/p/16377267.html
Copyright © 2020-2023  润新知