前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >OL4结合turf.js实现等值线

OL4结合turf.js实现等值线

作者头像
lzugis
发布2018-10-23 10:44:09
2.9K1
发布2018-10-23 10:44:09
举报
文章被收录于专栏:跟牛老师一起学WEBGIS

概述

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

效果

圆滑前
圆滑前
圆滑后
圆滑后

实现

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

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018年05月31日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 概述
  • 效果
  • 实现
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档