样例如下：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>等值线的生成</title>

    <link href="Script/leaflet/leaflet.css" rel="stylesheet" />

    <style>

        #map

        {

            height: 2000px;

            width: 1500px;

        }

    </style>

    <script src="Script/leaflet/leaflet.js"></script>

    <script src="Script/leaflet/leaflet.ChineseTmsProviders.js"></script>

    <script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>

</head>

<body>

    <div id="map"></div>

</body>

    <script>

        var normalm = L.tileLayer.chinaProvider('TianDiTu.Normal.Map', {

            maxZoom: 18,

            minZoom: 1

        }),

            normala = L.tileLayer.chinaProvider('TianDiTu.Normal.Annotion', {

                maxZoom: 18,

                minZoom: 1

            }),

            imgm = L.tileLayer.chinaProvider('TianDiTu.Satellite.Map', {

                maxZoom: 18,

                minZoom: 1

            }),

            imga = L.tileLayer.chinaProvider('TianDiTu.Satellite.Annotion', {

                maxZoom: 18,

                minZoom: 1

            });

        var normal = L.layerGroup([normalm, normala]);

        image = L.layerGroup([imgm, imga]);

        var baseLayers = {

            "地图": normal,

            "影像": image,

        }

        var overlayLayers = {

            "图": normal,

            "像": image,

        }

        var map = L.map("map", {

            center: [31.59, 120.29],

            zoom: 12,

            layers: [normal],

            zoomControl: false

        });

        // 创建等值线区域

        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;

        }

        console.log(pointGrid.features.length);

        //等值线的级数

        var breaks = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

        var lines = turf.isolines(pointGrid, breaks, { zProperty: 'temperature' });

        //设置颜色

        var myStyle = {

            "color": "#ff7800",

            "weight": 5,

            "opacity": 0.65

        };

        //进行平滑处理

            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;

            }

        //geojson数据读取

        L.geoJSON(lines, {

            style: myStyle

        }).addTo(map);

    </script>

</html>

原文地址：https://blog.csdn.net/weixin_40184249/article/details/81198282

另外一个文章地址：http://www.cnblogs.com/naaoveGIS/p/6142226.html

web前端利用turf.js生成等值线、等值面的更多相关文章

  1. openlayers5-webpack 入门开发系列结合 turf.js 实现等值线（附源码下载）

    前言 openlayers5-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载 ...

  2. web前端利用HSTS(新的Web安全协议HTTP Strict Transport Security)漏洞的超级Cookie(HSTS Super Cookie)

    web前端如果想实现cookie跨站点,跨浏览器,清除浏览器cookie该cookie也不会被删除这似乎有点难,下面的教程让你完全摆脱document.cookie 1.服务器端设置HSTS 如PHP ...

  3. web前端利用leaflet生成粒子风场，类似windy

    wind.js如下: $(function() { var dixing = L.tileLayer.chinaProvider('Google.Satellite.Map', { maxZoom: ...

  4. html端输入数据，利用qrcode.js生成打印二维码

    在前端页面中导入qrcode.js(下载)和jquery.js(下载) index.html <script> function print() { var textbox1 = $('i ...

  5. 【QRcode二维码】：使用JS前端插件QRcode.js生成二维码

    1.先简单说一下jquery-qrcode,这个开源的三方库(可以从https://github.com/jeromeetienne/jquery-qrcode 获取), qrcode.js 是实现二 ...

  6. web前端面试系列 - js中的prototype

    js中一切皆为对象,其中函数也是一种对象, 而每个函数都有一个prototype属性,其值也是一个对象. 一.prototype的作用 1. 在多个实例对象之间共享数据和方法. 2. 通过原型链实现继 ...

  7. web前端利用HTML代码显示符号

    HTML常用符号代码:                       ´ ´ © © > > µ µ ® ® & & ° ° ¡ ¡     » » ¦ ¦ ÷ ÷ ¿ ¿ ...

  8. 在Vue&Element前端项目中，使用FastReport + pdf.js生成并展示自定义报表

    在我的<FastReport报表随笔>介绍过各种FastReport的报表设计和使用,FastReport报表可以弹性的独立设计格式,并可以在Asp.net网站上.Winform端上使用, ...

  9. Web前端Require.js

    前言 前段时间粗略的扫过一次require.js,当时没怎么在意,结果昨天看到index里面的代码就傻了,完全不知道从哪开始看啦,所以require与backbone的学习还要加紧才行. 由于前端所占 ...

随机推荐

  1. linux 查看磁盘读写：iotop

    iotop命令用来动态地查看磁盘IO情况,用法如下: 安装iotop命令 [root@mysql ~]# yum install iotop -y [root@mysql ~]# iotop Tota ...

  2. Mysql事件监控日志

    建立监控表: CREATE TABLE `t_event_history` ( id INT UNSIGNED NOT NULL PRIMARY KEY AUTO_INCREMENT, `dbname ...

  3. react img 被自动转成base64,无法根据当前路径来动态改变值的解决办法

    项目需求,需要根据当前的图片的路径值的来(加或者减)动态改变其值: state定义如下: this.state={ basket01:0+require("../../img/egg/egg ...

  4. IOS 键盘弹出导致的position:fixed 无效问题

    解决办法(还未测试): 只需要在中间部分外层div添加css样式position:fixed;top:50px; bottom:50px;overflow:scroll;就可以实现效果,无需插件.可拷 ...

  5. vue中computed和watch的用法

    computed用来监控自己定义的变量,该变量不在data里面声明,直接在computed里面定义,然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理: computed比较适合对多个变量或 ...

  6. 怎样使用EOS.JS的API

    https://medium.com/coinmonks/how-to-use-eosjs-api-1-770b037b22ad https://blog.csdn.net/mongo_node/ar ...

  7. Python爬虫常用模块安装

    安装:pip3 install requestspip3 install seleniumpip3 install bs4pip3 install pyquerypip3 install pymysq ...

  8. 【LeetCode每天一题】Search Insert Position(搜索查找位置)

    Given a sorted array and a target value, return the index if the target is found. If not, return the ...

  9. 【LeetCode每天一题】Container With Most Water(容器中最多的水)

    Given n non-negative integers a1, a2, ..., an , where each represents a point at coordinate (i, ai). ...

  10. linux 常用简单命令

    1.ps获取dhcpd进程状态 ps -aux |grep dhcpd |grep -v grep  排除包含grep的那条进程 ps -aux |grep dhcpd |grep -v grep | ...