openlays根据geojson数据显示线段组
首先,我先介绍一下我的任务和环境:
版本:项目要求5.3版本
任务:后端人员生成点集坐标以geojson格式给前端,前端调用文件中的每个坐标,在openlays中以给出坐标点的顺序连线起来。
思考流程
虽然讲解出来都是简单的流程,但其中坑太多了!终于在深夜肝出了成果。
- 提取出geojson中的数据。
- 以循环的方式根据“两点形成一条直线的思路生成一条线”,再循环,生成线段组。
第一步:提取出geojson中的数据
//记录路线中转折点坐标
const count = 100;//此时考虑到机场路线并不会如此曲折,100个转折点基本可以满足要求
let linePoints = new Array(count);
let i = 0;
//路线点的文件
function getData(){
var defer = $.Deferred(); //创建一个新的 Deferred(延迟)对象
$.ajax({
url: 'geojson/airplaneLine.geojson',
type: "GET",
dataType: "json",
async: false,// 特别注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
success: function(data){
defer.resolve(data); //解决Deferred(延迟)对象,并根据给定的参数调用任何 doneCallbacks 回调函数
//这个函数会在 延迟对象即ajax 执行完毕后,在调用回调函数的时候将参数值result传递给回调方法
}
});
return defer.promise(); // 当ajax执行完毕,返回 Deferred 对象
//它创建一个promise对象,其目的是在未来某个时间点返回一个响应。
}
$.when(getData()).done(function(data){
var dataLinePoint = data.features;
for(; i < dataLinePoint.length; i++){
var LinePoint = dataLinePoint[i].geometry.coordinates;//此处为获取到的geojson文件中的每个转折点坐标
linePoints[i] = LinePoint;
//console.log(linePoints[i]);
}
});
//console.log("1 = " + linePoints[0]);
此处由于Ajax中success中数据后续有用,无奈改成了同步操作,我知道这样不好,但是目前水平有限,希望大家提出改进意见。我也是为了早点弄完,早完工。
第二步:先计算共多少条线段,后续好循环使用
如果你认真看了以上代码,你是知道的,我默认点集100之内应该可以完成,所以写死了,但是实际geojson中可能只有n<100个点,所以我想获得到真实的数组长度,于是先有了下面代码:
以下len是点集中点的个数,
而len-1为线段组的个数。
//去除掉路线数组中为空的部分
Array.prototype.notempty = function() {
var arr = [];
this.map(function(val, index) {
//过滤规则为,不为空串、不为null、不为undefined,也可自行修改
if (val !== "" && val != undefined) {
arr.push(val);
}
});
return arr;
}
linePoints = linePoints.notempty();
var len = linePoints.length;
console.log(len);
第三步:将之前geojson中的数据变成之后需要的正确格式
point的格式我们先看一下:
//根据拿到的坐标数据转化为合适的格式
function romLonLatF1(point){
return ol.proj.fromLonLat(point);
}
第四步:生成一个feature函数和设置样式函数
//下边来添加一线feature
function generateFeature(startPoint, endPoint){
var feature = new ol.Feature({
geometry: new ol.geom.LineString(
[startPoint, endPoint]
)
})
return feature;
}
//设置feature样式
var lineStyle = new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'green',
width: 2
})
})
第五步:定义一个source,之后来存储features
//定义一个source存储每个feature
var lineSource = new ol.source.Vector({
features: []
})
第六步:开始循环,生成每个线条!(重点)
let feature;
var j = 0
for(; j < len - 1; j++){
console.log(linePoints[j]);
var startPoint = romLonLatF1(linePoints[j]);
var endPoint = romLonLatF1(linePoints[j+1]);
feature = generateFeature(startPoint, endPoint);
feature.setStyle(lineStyle);
lineSource.addFeature(feature);
}
//做layer来承载所有的features
var lineLayer = new ol.layer.Vector({
source: lineSource
});
第七步:完成所有步骤
如果说前面的都是分步实现,以下则是全部放一起,让你好理解。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./v5.3.0/v5.3.0-dist/ol.css" type="text/css" />
<style>
.map {
height: 700px;
width: 100%;
}
</style>
<title>OpenLayers example</title>
</head>
<body>
<!--<h2>My Map</h2>-->
<div id="map" class="map"></div>
<script type="text/javascript" src="jQuery3.5.1.js"></script>
<script type="text/javascript" src="./v5.3.0/v5.3.0-dist/ol.js"></script>
<script type="text/javascript">
//记录路线中转折点坐标
const count = 100;//此时考虑到机场路线并不会如此曲折,100个转折点基本可以满足要求
let linePoints = new Array(count);
let i = 0;
//路线点的文件
function getData(){
var defer = $.Deferred(); //创建一个新的 Deferred(延迟)对象
$.ajax({
url: 'geojson/airplaneLine.geojson',
type: "GET",
dataType: "json",
async: false,// 特别注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
success: function(data){
defer.resolve(data); //解决Deferred(延迟)对象,并根据给定的参数调用任何 doneCallbacks 回调函数
//这个函数会在 延迟对象即ajax 执行完毕后,在调用回调函数的时候将参数值result传递给回调方法
}
});
return defer.promise(); // 当ajax执行完毕,返回 Deferred 对象
//它创建一个promise对象,其目的是在未来某个时间点返回一个响应。
}
$.when(getData()).done(function(data){
var dataLinePoint = data.features;
for(; i < dataLinePoint.length; i++){
var LinePoint = dataLinePoint[i].geometry.coordinates;//此处为获取到的geojson文件中的每个转折点坐标
linePoints[i] = LinePoint;
//console.log(linePoints[i]);
}
});
//console.log("1 = " + linePoints[0]);
//去除掉路线数组中为空的部分
Array.prototype.notempty = function() {
var arr = [];
this.map(function(val, index) {
//过滤规则为,不为空串、不为null、不为undefined,也可自行修改
if (val !== "" && val != undefined) {
arr.push(val);
}
});
return arr;
}
linePoints = linePoints.notempty();
var len = linePoints.length;
console.log(len);
//画线
//下边来添加一线feature
function generateFeature(startPoint, endPoint){
var feature = new ol.Feature({
geometry: new ol.geom.LineString(
[startPoint, endPoint]
)
})
return feature;
}
//设置feature样式
var lineStyle = new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'green',
width: 2
})
})
//根据拿到的坐标数据转化为合适的格式
function romLonLatF1(point){
return ol.proj.fromLonLat(point);
}
//定义一个source存储每个feature
var lineSource = new ol.source.Vector({
features: []
})
let feature;
var j = 0
for(; j < len - 1; j++){
console.log(linePoints[j]);
var startPoint = romLonLatF1(linePoints[j]);
var endPoint = romLonLatF1(linePoints[j+1]);
feature = generateFeature(startPoint, endPoint);
feature.setStyle(lineStyle);
lineSource.addFeature(feature);
}
//做layer来承载所有的features
var lineLayer = new ol.layer.Vector({
source: lineSource
});
//初始化地图
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
anchorLayer,
airplaneLayer,
lineLayer
],
view: new ol.View({
center: ol.proj.fromLonLat([103.95, 30.57]),
zoom: 15,
minZoom: 14,
maxZoom: 18,
rotation:Math.PI/2.65
})
});
</script>
</body>
</html>
后面那些展示的内容,我就不做过多介绍了,属于非常入门的了,和官网几乎一样。