mapbox加载turf.js创建的格网

最新推荐文章于 2024-09-23 11:15:39 发布

niewzh

最新推荐文章于 2024-09-23 11:15:39 发布

阅读量1.8k

点赞数 2

分类专栏： Mapbox GL JS eCharts

本文链接：https://blog.csdn.net/scaped/article/details/109365763

版权

eCharts 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

Mapbox GL JS

6 篇文章 1 订阅

订阅专栏

这篇博客介绍了如何利用turf.js和MapboxGLJS结合，实现地图上的实时格网（渔网）生成。通过turf.js的squareGrid方法，可以根据指定的坐标和大小生成GeoJSON格式的格网，然后MapboxGLJS将其加载为图层显示。点击地图后，会动态加载格网图层，展示效果良好，优于使用ECharts的实现。完整代码示例展示了点击地图触发格网加载的过程。

摘要由CSDN通过智能技术生成

turf.js是mapbox官方推荐的进行空间分析的包，其优点在于强大且全面的空间分析功能，且支持geojson格式的输入，因此与Mapbox GL JS集成效果很好。

我们此处介绍Mapbox GL JS加载turf.js实时创建格网（渔网）的方法。

其效果如下：

turf.js能够指定格网大小、坐标等信息实时生成，其效率非常高，也可以在前端根据用户需求实时的生成格网了。生成结果为GeoJson格式，Mapbox根据其生成的结果直接加载。步骤如下：

1、turf.js生成格网（渔网）

turf.js使用turf.squareGrid(bbox, cellSide, options); 方法生成格网，返回格式为Geojson的featureCollection

    var bbox = [112, 22, 114, 23];  //格网坐标 minX,minY,maxX,maxY. modify here.
    var cellSide = 5;  //格网长度 
    var options = {units:'kilometers'};  //长度单位
    var squareGrid = turf.squareGrid(bbox, cellSide, options);  //生成格网

2、MapBox加载格网

使用常规的addSource及addLayer即可加载，指定source的类型为geojson即可。

    map.addSource('gridsource', {
        type: 'geojson',
        data:squareGrid
    });
    map.addLayer({
        id: 'gridlayer',
        type: 'fill',
        source: 'gridsource',
        paint: {
            'fill-color': '#486DE0',
			'fill-outline-color':'ffffff'
        }
    });

该功能用eCharts同样可以实现，但比较后效果上有所差别，MapBox+turf.js效果更好些。

完整代码如下：

以下代码实现点击屏幕后，加载turf.js生成的渔网图层。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Display a map</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
    <script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
    <script src='https://unpkg.com/@turf/turf/turf.min.js'></script>
    <link href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet"/>
    <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.eyJ1IjoibWFyb3N0emd4IiwiYSI6ImNqY2xmamF1ODA4d3YyeG8zZHhvNmJtazAifQ.HZmoxlx91c9unbKOE18jpA';
    var map = new mapboxgl.Map({
        container: 'map', // container id
        style: 'mapbox://styles/mapbox/streets-v11',// style URL
        center: [113, 22.5], // starting position [lng, lat]
        zoom: 8.35 // starting zoom
    });

    var bbox = [112, 22, 114, 23];    //格网坐标 minX,minY,maxX,maxY. modify here.
    var cellSide = 5;  //格网长度
    var options = {units: 'kilometers'};  //长度单位
    var squareGrid1 = turf.squareGrid(bbox, cellSide, options);  //生成格网

    map.on('click', function () {
        map.addSource('gridsource', {
            type: 'geojson',
            data: squareGrid1
        });
        map.addLayer({
            id: 'gridLyr',
            type: 'fill',
            source: 'gridsource',
            paint: {
                'fill-color': '#486DE0',
                'fill-outline-color': '#ffffff'
            }
        });
    })

    //

</script>

</body>
</html>