样例如下：

<!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. FastReport快速入门

    界面及连接关系 frxDBDataset1连接datasource 双击frxReport1控件进入设计界面,选择报表->数据,弹出窗口选择要显示数据的frxdbdataset,frxdbdat ...

  2. 修改vs2010中html的默认模板

    用vs2010开发,新建html时,html页面会生成HTML 4 XHTML的header,如何把它改成干净的html5风格? 步骤: 修改 你的安装目录\Microsoft Visual Stud ...

  3. 纯css 实现横向滚动条--移动端

    * { margin:0; padding:0; } li { list-style:none; } .box1 { width:320px; height:60px; overflow:hidden ...

  4. 调用run与调用start的区别

    调用start的结果 package TestException; public class test1 { public static void main(String[] args) { // 3 ...

  5. mosquitto SSL认证

    [11]MQTT mosquitto 双向SSL认证配置方式 [12]MQTT mosquitto 单向SSL认证的配置方式 Mosquitto服务器的搭建以及SSL/TLS安全通信配置(比较可信) ...

  6. Java 基础 接口和多态

    接口 接口的概念 接口是功能的集合,同样可看做是一种数据类型,是比抽象类更为抽象的”类”. 接口只描述所应该具备的方法,并没有具体实现,具体的实现由接口的实现类(相当于接口的子类)来完成.这样将功能的 ...

  7. np.newaxis学习【转载】

    转自:https://blog.csdn.net/lanchunhui/article/details/49725065 1.相当于None >> type(np.newaxis) Non ...

  8. [Java] public, private, final and basic rules for naming.

    1. Access: public, private, protected public: Any other class can access a public field or method. ( ...

  9. NodeJs--HTTP源码分析

    在github上按下按键t,就可以呼出仓库搜索的面板(在大型项目中方便检索文件),检索出http.js文件检索出来,通过ctrl+F来搜索某个方法. _http_outgoing 带下划线的是私有模块 ...

  10. cocos2d-x c++ (多种屏幕Android与iOS的适配原理)

    1.AppDelegate.cpp 文件中 bool AppDelegate::applicationDidFinishLaunching() { // initialize director aut ...