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>
后面那些展示的内容，我就不做过多介绍了，属于非常入门的了，和官网几乎一样。
最后，看一下效果图吧：
扫一扫
331
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
