leaflet

openlayers3 生成扇形这个没有版本限制

by giser · 2019-04-03

<!Doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
    <meta http-equiv=Content-Type content="text/html;charset=utf-8">
    <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
    <meta content=always name=referrer>
    <title>OpenLayers 3地图示例</title>
    <link href="../css/ol.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="../js/ol.js" charset="utf-8"></script>


</head>

<body>
<div id="map" style="width: 90%"></div>
<button onclick="GetMarcoXyArcArray()" value="123">点击</button>
<script>
    // 创建地图
    var map = new ol.Map({
        // 设置地图图层
        layers: [
            // 创建一个使用Open Street Map地图源的瓦片图层
            new ol.layer.Tile({source: new ol.source.OSM()})
        ],
        // 设置显示地图的视图
        view: new ol.View({
            center: ol.proj.transform([116.28, 39.54], 'EPSG:4326', 'EPSG:3857'),    // 定义地图显示中心于经度0度，纬度0度处
            zoom: 2            // 并且定义地图显示层级为2
        }),
        // 让id为map的div作为地图的容器
        target: 'map'
    });
    var addresult=addIcon([116.28, 39.54]);//传入经纬度116.28, 39.54
    function addIcon(coord){

        var origi_point = ol.proj.transform(coord, 'EPSG:4326', 'EPSG:3857');//根据经纬度生成圆点
        //调用自定义的写好的生成扇形的 方法          //圆心    半径      边数 弧度 方向角(以y周围0)(可以自定义自己的x周一样)
        //var points = createRegularPolygonCurve(origi_point, 1000000, 100,90,90);
                                        //圆心    半径  边数  弧度  方向角
        var points = GetMarcoXyArcArray(origi_point,1000000,200,30,45);
        var iconFeature = new ol.Feature({
            geometry: points,
            population: 4000,
            //rainfall: 500
        });

        var iconStyle = new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: 'red',
                lineDash: [0],
                width: 2
            }),
            fill: new ol.style.Fill({
                color: 'rgba(0, 0, 255, 0.2)'
            })
        });
        //iconStyle.getImage().setScale(0.3);
        iconFeature.setStyle(iconStyle);
        var vectorSource = new ol.source.Vector({
            features: [iconFeature]
        });

        var vectorLayer = new ol.layer.Vector({
            source: vectorSource
        });
        map.addLayer(vectorLayer);
        return {feature:iconFeature,layer:vectorLayer,sourceVector:vectorSource,point:coord};
    }                                   //圆心    半径  边数  弧度  方向角
    function createRegularPolygonCurve(origin, radius, sides,r,angel) {


        var rotation = 360 - r;
        var angle = Math.PI * ((1/sides) - (1/2));
        if(rotation) {
            angle += (rotation / 180) * Math.PI;
        }
        var rotatedAngle, x, y;
        var points = [];
        for(var i=0; i<sides; ++i) {
            var an = i*((360 - rotation)/360);
            rotatedAngle = angle + (an * 2 * Math.PI / sides);
            x = origin[0] + (radius * Math.sin(rotatedAngle));
            y = origin[1] + (radius * Math.cos(rotatedAngle));
            points.push([x,y]);
        }
        if(rotation!=0){
            points.push(origin);
        }
        var ring = new ol.geom.LinearRing(points);
        ring.rotate(Math.PI-((angel-r/2)/180)*Math.PI,origin);
        var poy = new ol.geom.Polygon([points]);
        //var a = ring.A;
        //poy.A=a;

        return poy;
    }
    //此方法是 生成扇形的点 以 y轴方向 顺时针进行生成的  这个方法是自己写的  所以不需要版本的限制
    //此处的  origin 把 116.28, 39.54  转化成 'EPSG:3857'  这样误差小  任何角度的扇形 都很正常
    //        没有转化的 经纬度 在  45角时候  图形 有点畸形 误差大
    function GetMarcoXyArcArray(origin,radius,sides,r,angel) {
            var x = [];
            x[0] = [origin[0],origin[1]];
            for (var j = 1; j < sides; j++) {
                var tx = origin[0] + radius * Math.cos(Math.PI / 180 * (90 - angel + (sides/2 - j) * r / (sides-2)));

                var ty = origin[1] + radius * Math.sin(Math.PI / 180 * (90 - angel + (sides/2 - j) * r / (sides-2)));

                x[j]=[tx,ty];
            }
            //alert(x);
            return new ol.geom.Polygon([x]);
    }

</script>
</body>

</html>

转载自：https://blog.csdn.net/tianshibufan521/article/details/81102042

相关推荐

Tags: leaflet openlayers3 生成扇形这个没有版本限制

You may also like...