意义

等值线是GIS制图中常见的功能。在实际中经常需要基于CAD图纸对数据进行等值线分析。等值线的类型主要有：等高线、等深线、等温线（等气温线、等水温线）、等压线（水平面等压线、垂直面等压线）、等降水量线、等太阳辐射量线、等盐度线、等PH值线、等太阳高度线、等潜水位线、等承压水位线等。

通过分析等值线，我们可以判读等高线来判断地形的坡度的陡与缓，确定山脉的走向；通过判读等深线来判断海洋地形的种类如大陆架、海沟、海盆、海岭、海底火山等；通过判读大气等压线来判断气压中心的名称：如气旋、反气旋、高压脊、低压糟、轮廓；判断不同部位的天气特点，风向与风力大小；通过判读大气等温线来判断所在地的南北半球、季节与天气；通过判读等降水量线结合具体的地形轮廓判定山地的迎风坡与背风坡等；通过判读人口密度等值线分析某地区人口分布的规律及其影响的自然、历史、社会、经济诸因素。

实现原理

等值线的原理

等值性或同距性原理
在等值线图中，相邻的两条等值线要么等值，要么同距。
低高低和高低高原理
低值凸向高值，凸处的值变低
高值凸向低值，凸处的值变高
疏差小和密差大原理
等值线越稀疏，单位距离的差值越小
等值线越密集，单位距离的差值越大

用程序绘制等值线的方法一般有：

Delaunay三角剖分(Delaunay Triangulation)相关知识 http://www.cnblogs.com/soroman/archive/2007/05/17/750430.html
矩形网格线法 https://www.baidu.com/link?url=qgnhaBc745ZNHND9Ulu4iFrSyRx2gcpZ2LkCZcx9oFhNp3NQFvf3KnbnFxp4b_NBmb5Z0_sPeqQ2Pqb3gnYMM_&wd=&eqid=d7d7fcd7000643850000000362fcec43
克里金法（Kriging） https://baike.baidu.com/item/%E5%85%8B%E9%87%8C%E9%87%91%E6%B3%95/5129539?fr=aladdin
在著名的开源GIS算法库Turfjs http://turfjs.org/ 中也有等值线的算法 isolines

实现

先上效果图

以下的实现代码已开源至github。地址： https://github.com/vjmap/vjmap-playground/blob/main/src/11geo_%E5%87%A0%E4%BD%95%E8%AE%A1%E7%AE%97/geoVectorContour.js

实现步骤:

（1） Web端在线打开CAD图

如何在Web网页端展示CAD图形(唯杰地图云端图纸管理平台 https://vjmap.com/app/cloud),这个在前面的博文中已讲过，这里不再重复，有需要的朋友可下载工程源代码研究下。

（2）利用数据生成等值线

为了防止生成等值线的过程造成页面卡顿，这里把算法放到了webworker中来进行计算

//生成测试数据let dataMinValue = 10; // 数据最小值let dataMaxValue = 500; // 数据最大值let dataset = {"type" : "FeatureCollection","features" : []};// 区间颜色值let colors = ["#006837", "#1a9850", "#66bd63", "#a6d96a", "#d9ef8b", "#ffffbf","#fee08b","#fdae61", "#f46d43", "#d73027", "#a50026"];for (let i = 0; i < 100; i++) {let feature={"type" : "Feature","properties" : {"value" : vjmap.randInt(dataMinValue, dataMaxValue) // 在最大值最小值范围内随机生成一个测试数据},"geometry" : {"type" : "Point","coordinates" : map.toLngLat(mapBounds.randomPoint())}};dataset.features.push(feature);}let contoursSize = 20; // 等值面分级区间数，这里设置为20，可以自行设置const createContour = async (dataset, contoursSize, propField, colors, dataMinValue, dataMaxValue, maxHeight, model) => {let contours = [];for(let i = 0; i < contoursSize; i++) {contours.push(dataMinValue + (dataMaxValue - dataMinValue) * i /  (contoursSize - 1));}let interpolateInput = [], interpolateOutput = [];for(let i = 0; i < colors.length; i++) {interpolateInput.push(i / (colors.length - 1)); // 插值输入值，这里输入0-1之间的比例interpolateOutput.push(colors[i]) // 插值输出值，这里输入0-1之间的比例对应的颜色值}// 启动webworker计算函数let createContourWorker = vjmap.WorkerProxy(vjmap.vectorContour);let { grid, contour } = await createContourWorker(dataset, propField, contours, {model: model || 'exponential',sigma2:0,alpha:100});// 根据比例插值颜色const mapProgressToValues = value => vjmap.interpolate(interpolateInput,interpolateOutput,{ ease: vjmap.linear })(value)// 把原数据的颜色也设置下，绘制marker需要dataset.features.forEach(f => f.properties.color = mapProgressToValues((f.properties.value - dataMinValue) / (dataMaxValue - dataMinValue)))let h = maxHeight; // 设置最大值要拉伸的高度for(let i = 0; i < contour.features.length; i++) {let prop = contour.features[i].properties;let r = (prop.value - dataMinValue) / (dataMaxValue - dataMinValue);prop.color = mapProgressToValues(r); // 插值出颜色值prop.height = h * r; // 插值出要拉伸的高度值}return contour;}let maxHeight = map.pixelToHeight(100, map.getZoom()); // 设置最大值要拉伸的高度let contour = await createContour(dataset, contoursSize, "value" /*geojson的哪个属性值用于计算*/, colors, dataMinValue, dataMaxValue, maxHeight);

（3）绘制原始数据和生成好的等值线

let markers = null;const addMarkers = ()=> {if (markers) return;markers = dataset.features.map(f => {// 再随机生成不同样式的let _marker = new vjmap.DiffusedApertureMarker({lngLat: f.geometry.coordinates,text: f.properties.value.toFixed(0)}, {// 可以给不同的属性，如宽度，颜色，字体width: 10,colors: [f.properties.color, vjmap.randomColor()],textFontSize: 14,textColor: f.properties.color}).createMarker();_marker.addTo(map)return _marker})}const removeMarkers = ()=> {if (!markers) return;for(let i = markers.length - 1; i >= 0; i--) {markers[i].remove();}markers = null;}let polyline = null;const addPolyline = ()=> {if (polyline) return;polyline = new vjmap.Polyline({data: contour,lineColor: ['case', ['to-boolean', ['feature-state', 'hover']], '#00ffff', ['get', 'color']],isHoverPointer: true,isHoverFeatureState: true});polyline.addTo(map);polyline.clickPopup(f => `<h3>值: ${f.properties.value.toFixed(2)}</h3>Color: ${f.properties.color}`, { anchor: 'bottom' });}const removePolyline = ()=> {if (!polyline) return;polyline.remove();polyline = null;}

（4）生成等值面

 let polygon = null;const addPolygon = ()=> {if (polygon) return;polygon = new vjmap.Polygon({data: contour,fillColor: ['case', ['to-boolean', ['feature-state', 'hover']], '#00ffff', ['get', 'color']],fillOpacity: 0.9,isHoverPointer: true,isHoverFeatureState: true});polygon.addTo(map);polygon.clickPopup(f => `<h3>值: ${f.properties.value.toFixed(2)}</h3>Color: ${f.properties.color}`, { anchor: 'bottom' });}const removePolygon = ()=> {if (!polygon) return;polygon.remove();polygon = null;}

（4）生成等值面拉伸

 let fillExtrusions = null;const addFillExtrusion = ()=> {if (fillExtrusions) return;fillExtrusions = new vjmap.FillExtrusion({data: contour,fillExtrusionColor: ['case', ['to-boolean', ['feature-state', 'hover']], '#00ffff', ['get', 'color']],fillExtrusionOpacity: 0.9,fillExtrusionHeight: ['get', 'height'],fillExtrusionBase:0,isHoverPointer: true,isHoverFeatureState: true});fillExtrusions.addTo(map);fillExtrusions.clickPopup(f => `<h3>值: ${f.properties.value.toFixed(2)}</h3>Color: ${f.properties.color}`, { anchor: 'bottom' });}const removeFillExtrusion = ()=> {if (!fillExtrusions) return;fillExtrusions.remove();fillExtrusions = null;}

以上的实现代码已开源至github。地址：https://github.com/vjmap/vjmap-playground/blob/main/src/11geo_%E5%87%A0%E4%BD%95%E8%AE%A1%E7%AE%97/geoVectorContour.js

在线体验地址为：https://vjmap.com/demo/#/demo/map/geo/geoVectorContour

在Web前端基于CAD图实现等值线在线分析相关推荐

一键在Web端把CAD图自动分割成多张图纸并导出子图或图片
前言在实际中,一个CAD文件中往往存放多张图纸,有时需要这些图纸分开,单独保存或显示.以往的做法是在cad中人工进行处理.今天小编教您在web端一键把CAD图自动分割成多张图纸并能把每个子图导出 ...
个人Web前端开发切图PS设置
(一) 文件新建设置画布大小 Web(1920×2000) 像素分辨率(R) 72 像素/英寸颜色模式 RGB 8位背景内容(透明) (二) 移动工具设置自动选择不要勾选,右边选择图层需要 ...
Web前端 PS切图
网页切图常用的工具有ps.fireworks,这儿使用ps对网页进行切图,我们通过切图得到所需的图片(.png..jpg文件),用于给网页提供需要的素材. ps切图常用的快捷键: 初始化PSD文件:F ...
【web前端---阿里巴巴矢量图图库图标引用步骤】
看完不会用请打我三巴掌.如果会用就动一动你发财的小手点赞收藏一下呗
web前端学习路线思维导图
分享一张web前端思维导图,先收藏图太大不好展示,看不清楚可以进入以下链接查看--web前端学习路线思维导图在线版
Web端CAD图形找不同？一键在Web端找出CAD图不同并对比分析
引言在实际中,当多专业设计协助时,遇到图纸更新后,要对比图纸找出图纸的不同处,一直是一个比较耗时费力的事情,也是业内的一大痛点.一般CAD新旧图纸的内容对比,包括增加新的图形元素.减少原有的图形元素 ...
html css 前端实现消息提醒数_自学的福音，web前端学习全套视频教程+最新学习思维导图都在这里...
1.产品经理.这些是负责策划应用程序的一群人.他们会想出很多新鲜的.奇怪的.甚至是不可能实现的应用.一般来说,产品经理都追求丰富的功能. 2.UI设计师.这些人负责应用程序的视觉设计和交互模拟. 3. ...
html css 圆形按钮仿uc,10款基于jquery的web前端动画特效
1.jQuery横向手风琴图片切换动画之前我们为大家分享过很多款基于jQuery和CSS3的手风琴菜单和手风琴焦点图插件,比如CSS3响应式垂直手风琴菜单和jQuery横向手风琴图片展示插件.今天要 ...
Delphi Web前端开发教程（2）：基于TMS WEB Core框架
简介 Delphi是软件行业的传奇编程语言之一,该产品于1995年2月14日情人节在美国San Francisco(旧金山)正式发布,她是软件开发历史的基石.今天随着IT科技的飞速发展,各种新平台和框 ...

在Web前端基于CAD图实现等值线在线分析

意义

实现原理

实现

在Web前端基于CAD图实现等值线在线分析相关推荐

最新文章

热门文章