样例如下：

<!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. Ajax请求 一般处理程序参数传递的几种方式

    //第一种Ajax请求 $.ajax({ type:"GET", //请求类型,有get,post等类型,和表单提交是一样的 url:"Result.aspx" ...

  2. 在Windows Server 2008的桌面上显示“我的电脑”“网上邻居”等图标？

    装完windows server2008 r2 x64后发现桌面只有一个“回收站”图标,如何把“我的电脑”“网上邻居”等图标添加到桌面呢?操作步骤: 1. 点击 开始 在搜索中输入 icon 2. 点 ...

  3. openshift 容器云从入门到崩溃之三《安装openshift》

    准备好环境,在安装之前请先了解openshift提供的ansible有大量的安装选项 文档地址:https://docs.okd.io/latest/install/configuring_inven ...

  4. 新发现：排序算法时间复杂度只有O(3n)，命名为"wgw"排序法

    思路:首先在待排序数组i[]中找出最大的值,以(最大值+1)的大小创建一个空数组kk[],然后遍历待排序数组i[]中的值n,其值n对应数组kk[]中的第n个元素加1.最后再把数组kk[]排好序的值赋回 ...

  5. 【LeetCode每天一题】 Merge k Sorted Lists(合并K个有序链表)

    Merge k sorted linked lists and return it as one sorted list. Analyze and describe its complexity. E ...

  6. iOS UIViewController生命周期控制

    具体流程,看下图: init方法在init方法中实例化必要的对象(遵从LazyLoad思想)init方法中初始化ViewController本身 loadView方法当view需要被展示而它却是nil ...

  7. Cocos Creator EditBox（编辑框/输入框）添加事件的两种方法

    EditBox添加事件方法一这种方法添加的事件回调和使用编辑器添加的事件回调是一样的,通过代码添加, 你需要首先构造一个 cc.Component.EventHandler 对象,然后设置好对应的 t ...

  8. RF基础(一) RF内建函数库BuiltIn

    Robot framework做为一个测试框架,并不是只能做selenium测试,是支持扩展的, 比如说,你引用requests库就可以做接口测试, 那么无论你用什么库 首先要了解, RF本身提供的内 ...

  9. 使用pycharm调试django项目

    要使用pycharm调试django 打断点调试后台代码,首先要进行一下配置: 1.debug 配置 打开debug界面 2.选择python点+加号,然后选择python 3.名字debug,这个看 ...

  10. c++中istream类型到bool类型的隐式转换

    事情的起因是见到了这种用法: while(cin>>m>>n&&m&&n) { } 现在分析一下,cin>>m>>n返回 ...