样例如下：

<!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. AppState使用

    AppState使用 import React, { Component } from 'react'; import {AppRegistry,StyleSheet,Text,View,AppSta ...

  2. LongAdder，AtomicIntegerFieldUpdater深入研究

    从LongAdder看更高效的无锁实现 AtomicIntegerFieldUpdater字段原子更新类 div:not([id]){display:none;} --> ul{padding: ...

  3. （转）JVM内存分配 -Xms128m -Xmx512m -XX:PermSize=128m -XX:MaxPermSize=512m

    在linux环境下配置项目运行环境时,部署的人员都会分配一下内存,以保证程序正常的运行.其实在开发的时候(window系统),就已经涉及到内存分配了,只是这些参数有默认值,因此一直没有去重视它. 以M ...

  4. Java通过POI读取Excel

    package com.hd.all.test.testjava; import java.io.File; import java.io.FileInputStream; import java.i ...

  5. maven install安装工程

    在一个项目中,想要运行一个子工程,要先把它的依赖工程导入到maven中. 右键依赖工程--run as--maven install.

  6. 【Java】-NO.16.EBook.4.Java.1.012-【疯狂Java讲义第3版 李刚】- Swing

    1.0.0 Summary Tittle:[Java]-NO.16.EBook.4.Java.1.011-[疯狂Java讲义第3版 李刚]-  Swing Style:EBook Series:Jav ...

  7. 2019.03.18 连接my sql

    11.登陆功能(链接MySQL) python manage.py starapp movie 新建一个应用模块之后要记得到setting添加这个应用模块 在python2中你还有去导入一个MySQL ...

  8. MongoDB--编译文件

    -j 加你的cpu核数来加速编译过程 编译出错可以自行安装所需依赖. 或者去官网直接下载编译好的二进制,直接执行. 编译好之后查看文件: mongod:mongodb的执行程序,数据库部署也用这个程序 ...

  9. iOS - (集成支付宝第三方SDK大坑总结)

    其实集成支付宝相对于集成微信支付来说,支付宝算是简单的了,后续有空再去研究微信支付,现目前先总结一下集成支付宝所遇到的坑,其实支付宝的坑也不算太多,细算下来大概5-6个左右,但是其报错方式有点恶心,不 ...

  10. uml的几种关系总结

    UML类图几种关系的总结    在UML类图中,常见的有以下几种关系:泛化(Generalization),  实现(Realization),关联(Association),聚合(Aggregati ...