mapbox 基于turf 绘制扇形

最新推荐文章于 2023-05-15 18:20:33 发布

炉火纯青-旺

最新推荐文章于 2023-05-15 18:20:33 发布

阅读量973

点赞数

分类专栏： mapbox 文章标签：前端

本文链接：https://blog.csdn.net/qq_34870529/article/details/124035962

版权

mapbox 专栏收录该内容

22 篇文章 5 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>绘制扇形</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <link href="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css" rel="stylesheet">
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/Turf.js/6.5.0/turf.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script>
        mapboxgl.accessToken =
            'pk.eyJ1IjoibHh0aWFudGlhbiIsImEiOiJjaXd2ZjlkYnQwMTZvMnRtYWZnM2lpbHFvIn0.ef3rFZTr9psmLWahrqap2A';

        const map = new mapboxgl.Map({
            container: 'map', // container ID
            style: 'mapbox://styles/mapbox/light-v10', // style URL
            center: [-75, 40], // starting position
            zoom: 10 // starting zoom
        });

        map.on('load', () => {
            const arr = {
                "北": [330,30],
                "东北": [15, 75],
                "西北": [285,345],
                "南": [150,210],
                "东南": [105,165],
                "西南": [195,255],
                "东": [60,120],
                "西": [240,300]
            };

            Object.keys(arr).forEach((item, index) => {
                initLayer(index,arr[item]);
            });
        });

        function initLayer(i, item){
            var center = turf.point([-75, 40]);
            var radius = 10;
            var bearing1 = item[0];
            var bearing2 = item[1];

            var data = turf.sector(center, radius, bearing1, bearing2);

            map.addSource(`maine${i}`, {
                'type': 'geojson',
                'data':data
            });

            // Add a new layer to visualize the polygon.
            map.addLayer({
                'id': `maine${i}`,
                'type': 'fill',
                'source': `maine${i}`, // reference the data source
                'layout': {},
                'paint': {
                    'fill-color': '#0080ff', // blue color fill
                    'fill-opacity': 0.5
                }
            });
            // Add a black outline around the polygon.
            map.addLayer({
                'id': `outline${i}`,
                'type': 'line',
                'source': `maine${i}`,
                'layout': {},
                'paint': {
                    'line-color': '#000',
                    'line-width': 3
                }
            });
        }
    </script>

</body>

</html>

炉火纯青-旺

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
mapbox 基于turf 绘制扇形

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>绘制扇形</title> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <link href="https://api.mapbox.com/map.
复制链接

扫一扫