LeaFlet学习之结合turf.js生成简单的等值线demo

本文主要结合turf.js生成等值线俺，进行展示效

一、放张图：

二、全部源码

<!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>

三、总结

这里是等值线，可不是等高线，等高线不会相交，等值线可能相交，数据平滑参考牛老师ol4的等值线效果。

转载于:https://www.cnblogs.com/tuboshu/p/10752335.html

LeaFlet学习之结合turf.js生成简单的等值线demo相关推荐

Openlayers前端复用Turf.js生成平头Buffer
Openlayers前端复用Turf.js生成平头Buffer,实现如下效果: 代码如下: <!doctype html> <html lang="en"> ...
js生成简单的树形结构_思维干货收藏，“决策树”一种可视化决策的简单方法...
今天来介绍一种决策可视化的模型,作为质量人特别是在呈现质量问题解决和质量数据分析时都会应用到,这里通过网络我收集了下面这篇文章分享给大家,一起交流和学习,希望能给你带来帮助,同时分享你的建议和意见. ...
前端学习－使用JS库Leaflet.js生成世界地图并获取标注地址经纬度。
介绍:Leaflet是一个开源的JavaScript库,对移动端友好且对地图有很好的交互性. 大小仅仅只有 33 KB, 同时具有大多数地图所需要的特点. Leaflet设计的非常简单易懂, 同时具有 ...
HTML通过JS动态生成简单网页
HTML通过JS动态生成简单网页 <!DOCTYPE html> <html><head><meta charset="UTF-8"> ...
图像对抗生成网络 GAN学习01：从头搭建最简单的GAN网络，利用神经网络生成手写体数字数据（tensorflow）
图像对抗生成网络 GAN学习01:从头搭建最简单的GAN网络,利用神经网络生成手写体数字数据(tensorflow) 文章目录图像对抗生成网络 GAN学习01:从头搭建最简单的GAN网络,利用神经网 ...
从头学习爬虫（四十）高阶篇----模拟js生成Cookie中__jsl_clearance来破解加速乐的反爬虫机制
本文主要提供中间模拟生成Cookie中__jsl_clearance字段来破解加速乐的反爬虫机制前后通过postman模拟代替代码实现一需求 http://www.cyicai.com/info ...
vue生成静态js文件_如何立即使用Vue.js生成静态网站
vue生成静态js文件 by Ondřej Polesný 通过OndřejPolesný 如何立即使用Vue.js生成静态网站 (How to generate a static website w ...
H5案例分享：jquery.qrcode.js生成简易二维码
近期做项目需要生成二维码,并且解码获取信息,jquery.qrcode.js生成二维码比较的方便,写个教程分享给大家.欢迎大家测试留言,我会改进代码. 现在二维码越来越流行啦,支付扫二维码,关注扫二维 ...
利用HTML5+CSS3+JS实现简单的钟表
HTML5+CSS3+JS实现动态时钟利用HTML5+CSS3+JS实现简单的钟表,仅供参考学习效果图: 在线效果预览思路: 1. 先定义一个类名为timepiece的圆表表盘 HTML: &l ...

LeaFlet学习之结合turf.js生成简单的等值线demo

LeaFlet学习之结合turf.js生成简单的等值线demo相关推荐

最新文章

热门文章