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.注释掉的代码为做圆滑处理的代码,拷贝请取消注释。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏大内老A

一句代码实现批量数据绑定[下篇]

《上篇》主要介绍如何通过DataBinder实现批量的数据绑定,以及如何解决常见的数据绑定问题,比如数据的格式化。接下来,我们主要来谈谈DataBinder的设...

2265
来自专栏吴裕超

认识createDocumentFragment

今天在看vue源码解析时候发现一个api没有见过,一查是原生的,赶紧补漏。 DocumentFragments 是DOM节点。它们不是主DOM树的一部分。通常的...

2707
来自专栏前端架构与工程

【翻译】JavaScript内存泄露

我们在进行JavaScript开发时,很少会考虑内存的管理。JavaScript中变量的声明和使用看起来是一件很轻松的事,底层的细节处理交给浏览器去做就好了。 ...

2726
来自专栏Flutter入门

Flutter入门三部曲(2) - 界面开发基础

上一节我们熟悉了初始化后的flutter的界面。这一节,我们就来重点了解一下这部分的内容。

4082
来自专栏Golang语言社区

Go语言的os包中常用函数初步归纳

1)os.Getwd函数原型是func Getwd() (pwd string, err error) 返回的是路径的字符串和一个err信息,为什么先开这个呢?...

3479
来自专栏CSDN技术头条

深入讲解 Vue 中实现原理

随着 Vue2.0 的发布,前端入门的要求也越来越低,已至于 Vue 已经成为一个前端的标配,最近也面了很多前端开发工程师,发现大部分都停留在用的阶段上,建议大...

1152
来自专栏Flutter入门

Flutter入门三部曲(2) - 界面开发基础

上一节我们熟悉了初始化后的flutter的界面。这一节,我们就来重点了解一下这部分的内容。

4550
来自专栏十月梦想

Vue.set方法(响应数据和视图层)

前面一篇说过直接修改数据vue是检测不到的,所以视图层和数据层不能保持同步!那么vue是否提供了保持响应的方法,答案肯定是有的!

963
来自专栏李智的专栏

Emmet插件使用教程

971
来自专栏iOSer成长记录

iOS-自定义TextField(解决输入限制,键盘弹出问题)

1382

扫码关注云+社区

领取腾讯云代金券