# 需求描述

1、在web端绘制一条曲线； 2、获取各节点处的高程值； 3、根据高程值绘制高程堆积图。

# 实现思路及代码

1、绘制曲线，将绘制的结果传给后台

```            var draw = new ol.interaction.Draw({
source: source,
type: "LineString",
freehand: false//是否手绘
});
draw.setActive(false);
draw.on("drawend", function (evt) {
draw.setActive(false);
var coords = evt.feature.getGeometry().getCoordinates(),
points = [];
for(var i=0;i<coords.length;i++){
points.push(coords[i].join(","));
}
\$.get("dem/query", {points: points.join(";")}, function (result) {
console.info(result);
})
});```

2、后台解析数据并获取点的高程数据

```        String points_data = request.getParameter("points");
String demPath = "/Users/lzugis/Documents/ncdata/bj_dem.tif";
File file = new File(demPath);

CoordinateReferenceSystem crs = coverage.getCoordinateReferenceSystem2D();
String[] points = points_data.split(";");

List list = new ArrayList();

for(int i=0;i<points.length;i++) {
String strLonlat = points[i];
String[] strLonlats = strLonlat.split(",");

double lon = Double.parseDouble(strLonlats[0]),
lat = Double.parseDouble(strLonlats[1]);

DirectPosition position = new DirectPosition2D(crs, lon, lat);
int[] results = (int[]) coverage.evaluate(position);
results = coverage.evaluate(position, results);
Map map = new HashMap();
map.put("lon", lon);
map.put("lat", lon);
map.put("dem", results[0]);
response.getWriter().println(JSONArray.toJSONString(list));
}```

3、前段接受数据并展示

```                var dom = document.getElementById("chart");
var myChart = echarts.init(dom);
var option = {
title: {
text: '高程图'
},
backgroundColor:"rgba(255, 255, 255, .8)",
grid: {
left: '5%',
right: '4%',
bottom: '1%',
containLabel: true
},
xAxis : [
{
show:false,
type : 'category',
boundaryGap : false,
data : ["点1", "点2", "点3", "点4"]
}
],
yAxis : [
{
type : 'value',
offset:15
}
],
series : [
{
name: 'DEM',
type: 'line',
stack: '总量',
label: {
normal: {
show: true,
position: 'top'
}
},
areaStyle: {normal: {}},
data: [714, 1000, 1063, 864]
}
]
};
myChart.setOption(option);```
###### 说明：

1、dem数据来源于地理空间数据云

2、展示用echart实现的。

0 条评论

• ### 一个GISER 6.7的祝福

一年一度的高考今天开始了，回想10年前，那是我第一次高考；10年后，作为一个GISER，在此给大家献上一个GISER的祝福，祝愿各位考生：考神附体，考完报考GI...

• ### OL4结合turf.js实现等值线

本文分享一个结合turf.js实现前端等值线的生成，并对结果做了圆滑处理，并在OL4中进行展示。

• ### 你不知道的javaScript笔记(5)

原生函数 　　常用的原生函数 　　　　String() 　　　　Number() 　　　　Boolean() 　　　　Array() 　　　　Object() ...

• ### 张海港演讲PPT：工业互联网精准安全防御的实践

2月22日上午，在2019工业互联网峰会“工业互联网安全体系建设”分论坛上，海尔集团首席安全官张海港，以《工业互联网精准安全防御的实践》为题作演讲。

• ### 简单易学的机器学习算法——线性可分支持向量机

一、线性可分支持向量机的概念     线性可分支持向量机是用于求解线性可分问题的分类问题。对于给定的线性可分训练数据集，通过间隔最大化构造相应的凸二次优化问题可...

• ### 探索ASP.NET MVC5系列之~~~4.模型篇---包含模型常用特性和过度提交防御

其实任何资料里面的任何知识点都无所谓，都是不重要的，重要的是学习方法，自行摸索的过程（不妥之处欢迎指正） 汇总：http://www.cnblogs.com/d...

• ### AS3×××效果(鼠标点击-纯代码)

var BitmapData0:BitmapData = new BitmapData(550, 400, false, 0x0); var Bitmap0:B...

• ### Dynamic Network Surgery for Efficient DNNs

NIPS 2016 http://arxiv.org/abs/1608.04493

• ### nginx实现内容重定向的两种方式：rewrite和反向代理

当访问test.cc/uri，如果uri资源在项目中不存在，就会重定向 http://www.yuhaiwei.net/blog/Api_element 网页。