openlayers

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>
    <script type="text/javascript" src="../js/ol-debug.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/ol-deps.js" charset="utf-8"></script>
</head>

<body>
<div id="map" style="width: 90%"></div>
<button onclick="buttonClick()" 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=addSector([116.28, 39.54]);//传入经纬度
    function addSector(coord){

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

        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.cos(rotatedAngle));
            y = origin[1] + (radius * Math.sin(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;
    }

</script>
</body>

</html>

此代码事例完全正确 js 在官网下载的直接引入就可以此版本是3.16 我知道3.3不支持ring.rotate(Math.PI-((angel-r/2)/180)*Math.PI,origin);此方法目前还没找到类似的这个方法

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

相关推荐

Tags: openlayers

You may also like...