样例如下：

<!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. Jmeter测试实践：文件上传接口

    1.打开jmeter4.0,新建测试计划,添加线程组.根据实际情况配置线程属性. 2.添加HTTP请求. Basic部分修改如下: Advanced部分我做任何修改,完全保持默认.但是有人说Imple ...

  2. IE8.0如何关闭启用内存保护帮助减少联机攻击?

    默认情况下,该选项卡是灰色的(表示用户不能直接修改),win7电脑可以通过“以管理员身份”运行 IE 来放开该功能,但个别电脑即便用这种方法仍无法解决,此时,您可以试试如下方法: 1.在“运行”框中输 ...

  3. React篇-报错信息：warning: Can't call setState (or forceUpdate) on an unmounted component.

    报错信息是: Warning: Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but ...

  4. vue中mixins的使用

    与vuex的区别 经过上面的例子之后,他们之间的区别应该很明显了哈~ vuex:用来做状态管理的,里面定义的变量在每个组件中均可以使用和修改,在任一组件中修改此变量的值之后,其他组件中此变量的值也会随 ...

  5. vue/cli3 配置vux

    安装各插件 试过 安装“必须安装”的部分亦可 1.安装vuex npm install vuex --save-dev 2.在项目里面安装vux[必须安装] npm install vux --sav ...

  6. python连接redis

    一.首先,要下载redis pip3 install redis 二.连接redis import redis #拿到一个redis的链接 conn=redis.Redis('127.0.0.1',6 ...

  7. Auth认证模块

    1.auth简介 auth是什么? auth是django内置的用户认证系统,可以快速的实现:登录,注销,修改密码........ 2.autho的使用 1)先创建超级用户 python3 manag ...

  8. throws和throw的区别

    throws是声明在方法上,告诉调用者这个方法可能会出现的问题.格式  :   方法()   throws  自定义异常类(异常类)    就是在这个方法里面会出问题时,new  throw时,    ...

  9. （转）以太坊 钱包 创建 导入 Keystore

    最近闲来无事 研究了下以太坊钱包 下边分享下 准备工作 : 需要用到的加密:BIP32 BIP39 BIP44 SCRYPT 加密算法 githab地址 https://github.com/Nova ...

  10. [LeetCode] 598. Range Addition II_Easy tag: Math

    做个基本思路可以用 brute force, 但时间复杂度较高. 因为起始值都为0, 所以肯定是左上角的重合的最小的长方形就是结果, 所以我们求x, y 的最小值, 最后返回x*y. Code    ...