基于Turf.js的模拟梯度图

最新推荐文章于 2024-04-11 17:03:40 发布

这个问题在哪见过

最新推荐文章于 2024-04-11 17:03:40 发布

阅读量833

点赞数

分类专栏： GIS 文章标签： javascript

本文链接：https://blog.csdn.net/qq_39014170/article/details/113935003

版权

总体目标

随机生成梯度图

详细介绍

使用ImprovedNoise算法模拟生成梯度数值，使用isobands生成等值面，使用中国边界线裁剪。（所有数据均为示例数据）

预览

在这里插入图片描述

代码

<!DOCTYPE html>
<html>

<head>
	<title>Quick Start - Leaflet</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
		integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
		crossorigin="" />
	<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
		integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
		crossorigin=""></script>
	<script src="https://unpkg.com/@turf/turf/turf.min.js"></script>
</head>

<body>
	<div id="mapid" style="width: 1440px; height: 900px;"></div>
	<script>
		var ImprovedNoise = function () {
   

			var p = [151, 160, 137, 91, 90, 15, 131, 13, 201, 95, 96, 53, 194, 233, 7, 225, 140, 36, 103, 30, 69, 142, 8, 99, 37, 240, 21, 10, 23, 190, 6, 148, 247, 120, 234, 75, 0, 26, 197, 62, 94, 252, 219, 203, 117, 35, 11, 32, 57, 177, 33, 88, 237, 149, 56, 87, 174, 20, 125, 136, 171, 168, 68, 175, 74, 165, 71, 134, 139, 48, 27, 166, 77, 146, 158, 231, 83, 111, 229, 122, 60, 211, 133, 230, 220, 105, 92, 41, 55, 46, 245, 40, 244, 102, 143, 54, 65, 25, 63, 161, 1, 216, 80, 73, 209, 76, 132, 187, 208, 89, 18, 169, 200, 196, 135, 130, 116, 188, 159, 86, 164, 100, 109, 198, 173, 186, 3, 64, 52, 217, 226, 250, 124, 123, 5, 202, 38, 147, 118, 126, 255, 82, 85, 212, 207, 206, 59, 227, 47, 16, 58, 17, 182, 189, 28, 42, 223, 183, 170, 213, 119, 248, 152, 2, 44, 154, 163, 70, 221, 153, 101, 155, 167, 43, 172, 9, 129, 22, 39, 253, 19, 98, 108, 110, 79, 113, 224, 232, 178, 185, 112, 104, 218, 246, 97, 228, 251, 34, 242, 193, 238, 210, 144, 12, 191, 179, 162, 241, 81, 51, 145, 235, 249, 14, 239, 107, 49, 192, 214, 31, 181, 199, 106, 157, 184, 84, 204, 176, 115, 121, 50, 45, 127, 4, 150, 254, 138, 236, 205, 93, 222, 114, 67, 29, 24, 72, 243, 141, 128, 195, 78, 66, 215, 61, 156, 180];

			for (var i = 0; i < 256; i++) {
   

				p[256 + i] = p[i];

			}

			function fade(t) {
   

				return t * t * t * (t * (t * 6

最低0.47元/天解锁文章

这个问题在哪见过

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基于Turf.js的模拟梯度图

总体目标随机生成梯度图详细介绍使用ImprovedNoise算法模拟生成梯度数值，使用isobands生成等值面，使用中国边界线裁剪。（所有数据均为示例数据）预览代码<!DOCTYPE html><html><head> <title>Quick Start - Leaflet</title> <meta charset="utf-8" /> <meta name="viewport" content="
复制链接

扫一扫