OL4结合turf.js实现等值线

概述

本文分享一个结合turf.js实现前端等值线的生成,并对结果做了圆滑处理,并在OL4中进行展示。

效果

圆滑前

圆滑后

实现

实现比较简单,源代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Measure</title>
    <link rel="stylesheet" href="../../plugin/ol4/ol.css" type="text/css">
    <script src="../../plugin/ol4/ol.js"></script>
    <script src="../../plugin/turf/turf.js"></script>
    <script type="text/javascript" src="../../plugin/jquery/jquery-3.1.1.min.js"></script>
    <style>
        html, body, #map{
            margin: 0;
            padding: 0;
            overflow: hidden;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="map" class="map"></div>
<script>
    function styleFunction(feature) {
        var tem = feature.get("temperature");
        var colors = ["#5a9fdd", "#f7eb0c", "#fc9e10", "#f81e0d", "#aa2ab3"];
        var color = colors[parseInt(tem/2)];
        return new ol.style.Style({
            fill: new ol.style.Fill({
                color: color
            }),
            stroke: new ol.style.Stroke({
                color: color,
                width: 4
            }),
            image: new ol.style.Circle({
                radius: 5,
                fill: new ol.style.Fill({
                    color: color
                }),
                stroke: new ol.style.Stroke({
                    color: '#fff',
                    width: 1
                })
            })
        });
    }

    // create a grid of points with random z-values in their properties
    var extent = [0, 30, 20, 50];
    var cellWidth = 100;
    var pointGrid = turf.pointGrid(extent, cellWidth, {units: 'miles'});
    for (var i = 0; i < pointGrid.features.length; i++) {
        pointGrid.features[i].properties.temperature = Math.random() * 10;
    }
    var breaks = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    var lines = turf.isolines(pointGrid, breaks, {zProperty: 'temperature'});

//    var _lFeatures = lines.features;
//    for(var i=0;i<_lFeatures.length;i++){
//        var _coords = _lFeatures[i].geometry.coordinates;
//        var _lCoords = [];
//        for(var j=0;j<_coords.length;j++){
//            var _coord = _coords[j];
//            var line = turf.lineString(_coord);
//            var curved = turf.bezierSpline(line);
//            _lCoords.push(curved.geometry.coordinates);
//        }
//        _lFeatures[i].geometry.coordinates = _lCoords;
//    }

    var featureslines = (new ol.format.GeoJSON()).readFeatures(lines);
    var features = (new ol.format.GeoJSON()).readFeatures(pointGrid);
    features = features.concat(featureslines);
    for(var i=0;i<features.length;i++){
        features[i].getGeometry().transform("EPSG:4326","EPSG:3857");
    }
    var source = new ol.source.Vector({
        features:features
    });
    var vector = new ol.layer.Vector({
        source: source,
        style: styleFunction
    });
    var map = new ol.Map({
        layers: [getTdtLayer("img_w"), vector],
        target: 'map',
        view: new ol.View({
            center: [12577713.642017495, 2971206.770222437],
            zoom: 3
        })
    });
    function getTdtLayer(lyr){
        var url = "http://t0.tianditu.com/DataServer?T="+lyr+"&X={x}&Y={y}&L={z}";
        var layer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url:url
            })
        });
        return layer;
    }
</script>
</body>
</html>

说明:
1.注释掉的代码为做圆滑处理的代码,拷贝请取消注释。


技术博客
CSDN:http://blog.csdn.NET/gisshixisheng
在线教程
https://edu.csdn.net/course/detail/799
https://edu.csdn.net/course/detail/7471
联系方式

类型内容
qq1004740957
公众号lzugis15
e-mailniujp08@qq.com
webgis群452117357
Android群337469080
GIS数据可视化群458292378

LZUGIS

好的,我可以为您讲解如何结合turf.js生成简单的等值线demo。 首先,您需要安装Leaflet和turf.js,可以通过以下命令在命令行中进行安装: ``` npm install leaflet turf ``` 接下来,您需要准备一些数据来生成等值线。可以使用turf.js中的`pointGrid`函数生成一些随机点。以下是一个示例代码: ```javascript var bbox = [-118.7158203125,32.99023555965106,-117.54150390625,34.30714385628804]; var cellSize = 20000; var options = {units: 'miles'}; // Create a grid of points with random values var points = turf.randomPoint(100, {bbox: bbox}); var grid = turf.pointGrid(bbox, cellSize, options); var property = 'randomValue'; grid.features.forEach(function(point, index) { var value = Math.random() * 10; point.properties[property] = value; }); ``` 此代码生成了一个100个随机点的网格,并为每个点分配了随机值。 接下来,您需要使用turf.js中的`interpolate`函数根据这些点生成等值线。以下是一个示例代码: ```javascript var breaks = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; var options = {gridType: 'points', property: 'randomValue', breaks: breaks, colors: 'Spectral'}; // Generate the contour lines var contours = turf.isobands(grid, breaks, options); ``` 此代码将网格和断点数组传递给`turf.isobands`函数,生成等值线。 最后,您需要使用Leaflet将等值线添加到地图上。以下是一个示例代码: ```javascript // Add the contour lines to the map var geojsonLayer = L.geoJSON(contours, { style: function(feature) { return {color: feature.properties.stroke, weight: 2, fillOpacity: 0.5}; } }).addTo(map); // Fit the map to the bounds of the contour lines map.fitBounds(geojsonLayer.getBounds()); ``` 此代码将等值线添加到地图上,并将地图的视图调整为等值线的范围。 希望这些代码可以帮助您生成简单的等值线demo。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

牛老师讲GIS

感谢老板支持

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值