课程思政：新时代的中国北斗
课程思政：北斗卫星
1 GNSS与GIS集成技术与应用
1.1 GNSS与GIS集成方法
GNSS（全球导航卫星系统）与GIS（地理信息系统）的集成为现代地理空间数据获取和管理提供了强有力的支持。集成方法通常体现在以下几个方面：
数据实时获取与更新： GNSS技术通过全球卫星提供高精度的地理位置信息，这些数据可以实时传输到GIS系统中用于更新空间数据库。通过GNSS，GIS能够从移动设备、无人机、船舶或车辆上获取动态位置信息，并在系统中自动更新。这种集成允许在不同应用场景下（如交通管理、资源监控）对空间信息进行实时追踪和管理。
空间数据整合： GNSS和GIS的集成允许将空间定位数据与其他空间数据层进行整合。在这种方法中，GNSS提供精确的位置信息，而GIS负责管理和分析这些位置信息与其他地理数据（如道路网、地形、土地利用等）的关系。典型的应用包括户外导航、环境监测、地质勘探等。
差分修正与数据校正： 高精度的GIS应用中，GNSS数据通常需要通过差分修正（如RTK技术）来提高定位精度。差分GNSS与GIS集成，可以在实时模式下对接收到的卫星数据进行校正，并在GIS中精确定位，以确保空间数据的准确性。
移动GIS与GNSS集成： 移动GIS结合GNSS技术是目前许多野外作业的主流技术之一。GNSS设备可以集成在移动终端中，使得用户在野外能够采集高精度的空间数据，并在现场直接将数据输入GIS系统。此方法广泛应用于环境监测、基础设施管理、城市规划等领域。
1.2 GIS辅助GNSS数据的管理
GIS不仅仅作为数据的存储平台，还在GNSS数据的管理和处理过程中起到关键作用：
数据存储与分类： GIS能够存储大量的GNSS数据，并且可以通过其数据库管理系统对这些数据进行分类和组织。GNSS数据通常包括大量的点数据、轨迹数据以及其他动态位置信息。通过GIS的分类管理功能，这些数据可以根据时间、地点、精度或属性进行组织，并通过空间索引提升查询和处理的效率。
数据校准与过滤： GNSS数据在获取过程中可能包含误差或噪声，通过GIS的空间分析功能，可以对这些数据进行校准和过滤。例如，GIS可以结合地理约束条件（如地形、建筑物等）自动修正GNSS数据的精度，并排除偏离较大的数据点，从而提高数据的可靠性。
可视化与分析： GIS为GNSS数据的管理提供了可视化平台，能够将位置信息以地图的形式展示出来，并通过分析工具对数据进行进一步的空间分析。例如，通过叠加其他数据（如人口密度、土地利用等），GNSS数据的应用可以扩展到更复杂的地理问题解决方案中，如交通优化、资源分配等。
轨迹管理与路线规划： GIS能够记录和管理GNSS数据中的轨迹信息，并对这些轨迹进行分析。通过GIS系统，用户可以追踪历史轨迹，计算距离、时间，并生成最优的路线规划。轨迹数据的分析在物流、交通管理和应急救援中具有重要作用。
1.3 应用场景
交通管理：在智能交通系统中，GNSS与GIS的集成能够实现实时的交通监控与调度。通过GNSS定位，车辆的实时位置可以传输到GIS中，结合GIS的路网数据，实现车辆路径优化、交通流量分析等功能。
自然资源监测：GNSS技术用于环境监测时，采集的数据通过GIS平台进行存储和分析，可用于跟踪自然资源的变化，监控水文、森林资源等，实现可持续发展目标。
应急响应与灾害管理：GNSS技术可提供精确的位置数据，GIS则提供强大的空间分析能力，两者结合可在应急响应中优化救援队伍的调度，并生成最佳路径方案。
通过GNSS与GIS的集成，能够提供高效、精确的地理空间数据处理和应用，实现从数据采集、存储到分析、决策支持的全过程闭环。
2 基于MapBox的GNSS轨迹可视化
2.1 静态数据可视化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GNSS Track Visualization with Smooth Animation</title>
<script src='https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
#info { position: absolute; top: 10px; left: 10px; background: white; padding: 10px; font-size: 16px; }
</style>
</head>
<body>
<div id="map"></div>
<div id="info">GNSS Point: <span id="gnss-index">0</span></div>
<script>
// Your Mapbox access token
mapboxgl.accessToken = 'pk.eyJ1IjoiamFuZ2xlIiwiYSI6ImNqdmtjcXUxMTBlYTEzenBodHZiZG5kOWkifQ.GPYsVamvlFm5N_OioA9fwQ';
// Initialize Mapbox map
const map = new mapboxgl.Map({
container: 'map', // HTML container ID
style: 'mapbox://styles/mapbox/streets-v11', // Map style to use
center: [114.05, 22.55], // Initial map center [lng, lat] (e.g., Shenzhen)
zoom: 12 // Initial zoom level
});
// Sample GNSS track data (LineString GeoJSON) with more points
const gnssTrackData = {
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[114.050, 22.550], [114.051, 22.551], [114.052, 22.552], [114.053, 22.553],
[114.054, 22.554], [114.055, 22.555], [114.056, 22.556], [114.057, 22.557],
[114.058, 22.558], [114.059, 22.559], [114.060, 22.560], [114.061, 22.561],
[114.062, 22.562], [114.063, 22.563], [114.064, 22.564], [114.065, 22.565],
[114.066, 22.566], [114.067, 22.567], [114.068, 22.568], [114.069, 22.569],
[114.070, 22.570]
]
}
};
// Load the GNSS track onto the map
map.on('load', () => {
// Add a source for the GNSS track data
map.addSource('gnss-track', {
"type": "geojson",
"data": gnssTrackData
});
// Add a line layer to visualize the GNSS track
map.addLayer({
"id": "gnss-track-line",
"type": "line",
"source": "gnss-track",
"layout": {
"line-join": "round",
"line-cap": "round"
},
"paint": {
"line-color": "#FF0000",
"line-width": 4
}
});
// Add a point to follow the GNSS track
map.addSource('gnss-point', {
"type": "geojson",
"data": {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [114.050, 22.550] // Start point
}
}
});
map.addLayer({
"id": "gnss-point-layer",
"type": "circle",
"source": "gnss-point",
"paint": {
"circle-radius": 6,
"circle-color": "#FF0000"
}
});
// Variables for animation and state tracking
let index = 0;
const trackCoords = gnssTrackData.geometry.coordinates;
const totalPoints = trackCoords.length;
const speed = 0.02; // Speed factor for the point animation
// Function to interpolate between two points
function interpolate(p1, p2, t) {
return [
p1[0] + (p2[0] - p1[0]) * t,
p1[1] + (p2[1] - p1[1]) * t
];
}
// Animate the GNSS point along the track
function animateMarker() {
if (index < totalPoints - 1) {
const startPoint = trackCoords[index];
const endPoint = trackCoords[index + 1];
let t = 0;
// Inner function to handle the smooth movement between two points
function moveAlongLine() {
if (t < 1) {
// Interpolate to get smooth position
const currentPoint = interpolate(startPoint, endPoint, t);
// Update the GNSS point position
map.getSource('gnss-point').setData({
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": currentPoint
}
});
// Update the GNSS point index
document.getElementById('gnss-index').textContent = index;
// Increment t to move along the line
t += speed;
requestAnimationFrame(moveAlongLine); // Continue animation
} else {
index++; // Move to the next point
requestAnimationFrame(animateMarker); // Proceed to the next point
}
}
moveAlongLine();
}
}
// Start the animation
animateMarker();
});
</script>
</body>
</html>
效果如下：
2.2 geojson数据可视化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>从本地GeoJSON加载的GNSS轨迹展示</title>
<script src='https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
#info { position: absolute; top: 10px; left: 10px; background: white; padding: 10px; font-size: 16px; }
#file-input { position: absolute; top: 10px; right: 10px; background: white; padding: 10px; font-size: 16px; }
</style>
</head>
<body>
<div id="map"></div>
<div id="info">GNSS 点序号: <span id="gnss-index">0</span></div>
<div id="file-input">
<label for="file">选择GeoJSON文件: </label>
<input type="file" id="file" accept=".geojson">
</div>
<script>
// 你的 Mapbox 访问令牌
mapboxgl.accessToken = 'pk.eyJ1IjoiamFuZ2xlIiwiYSI6ImNqdmtjcXUxMTBlYTEzenBodHZiZG5kOWkifQ.GPYsVamvlFm5N_OioA9fwQ';
// 初始化 Mapbox 地图
const map = new mapboxgl.Map({
container: 'map', // HTML 容器ID
style: 'mapbox://styles/mapbox/streets-v11', // 地图样式
center: [47.2714, -68.4575], // 地图初始中心 [经度, 纬度] (例如深圳)
zoom: 12 // 初始缩放级别
});
let trackCoords = []; // 保存轨迹的坐标点
let index = 0; // 当前 GNSS 点的索引
let totalPoints = 0; // 总点数
const speed = 0.02; // 动画速度因子
// 插值函数，用于在两个点之间平滑移动
function interpolate(p1, p2, t) {
return [
p1[0] + (p2[0] - p1[0]) * t,
p1[1] + (p2[1] - p1[1]) * t
];
}
// 处理从本地文件中加载的 GeoJSON 数据
function handleGeoJSONData(geojsonData) {
// 从 GeoJSON 中提取 LineString 的坐标
if (geojsonData && geojsonData.features && geojsonData.features[0].geometry.type === 'LineString') {
trackCoords = geojsonData.features[0].geometry.coordinates;
totalPoints = trackCoords.length;
// 将 GeoJSON 数据加载到地图上
map.addSource('gnss-track', {
"type": "geojson",
"data": geojsonData
});
// 添加线层以显示轨迹
map.addLayer({
"id": "gnss-track-line",
"type": "line",
"source": "gnss-track",
"layout": {
"line-join": "round",
"line-cap": "round"
},
"paint": {
"line-color": "#FF0000", // 线的颜色
"line-width": 4 // 线的宽度
}
});
// 添加 GNSS 点
map.addSource('gnss-point', {
"type": "geojson",
"data": {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": trackCoords[0] // 从第一个点开始
}
}
});
map.addLayer({
"id": "gnss-point-layer",
"type": "circle",
"source": "gnss-point",
"paint": {
"circle-radius": 6, // 圆点半径
"circle-color": "#FF0000" // 圆点颜色
}
});
// 开始动画
animateMarker();
} else {
alert("GeoJSON 文件不包含有效的 LineString 数据！");
}
}
// 动画函数，用于沿轨迹移动 GNSS 点
function animateMarker() {
if (index < totalPoints - 1) {
const startPoint = trackCoords[index];
const endPoint = trackCoords[index + 1];
let t = 0;
// 内部函数，负责在两个点之间平滑移动
function moveAlongLine() {
if (t < 1) {
// 通过插值函数获取当前位置
const currentPoint = interpolate(startPoint, endPoint, t);
// 更新 GNSS 点的位置
map.getSource('gnss-point').setData({
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": currentPoint
}
});
// 更新 GNSS 点序号
document.getElementById('gnss-index').textContent = index;
// 增加 t 值以控制移动的平滑度
t += speed;
requestAnimationFrame(moveAlongLine); // 继续动画
} else {
index++; // 移动到下一个点
requestAnimationFrame(animateMarker); // 继续动画到下一个点
}
}
moveAlongLine();
}
}
// 监听文件选择事件，读取本地 GeoJSON 文件
document.getElementById('file').addEventListener('change', function(event) {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
const geojsonData = JSON.parse(e.target.result);
handleGeoJSONData(geojsonData);
};
reader.readAsText(file);
}
});
</script>
</body>
</html>
效果如下：
3 GNSS技术辅助GIS数据的更新
GNSS（全球导航卫星系统）作为一种高精度的定位技术，已经广泛应用于地理信息系统（GIS）中，特别是在GIS数据的更新和维护方面发挥了至关重要的作用。由于GIS的数据主要来源于地理空间数据，而这些数据具有动态变化的特点，如道路改建、建筑物扩建、土地利用变化等，需要定期更新。GNSS技术可以为这些更新提供精确的位置信息，确保GIS数据的实时性和准确性。
3.1. GNSS技术的基本原理
GNSS包括多个卫星导航系统，如GPS（美国的全球定位系统）、GLONASS（俄罗斯的全球导航卫星系统）、Galileo（欧洲的全球导航系统）和北斗（中国的全球卫星导航系统）。这些系统通过卫星与接收设备之间的信号传输，能够实现全球范围内的精确定位。GNSS的优势在于其能够提供连续、实时的空间位置信息，这为GIS数据的实时更新提供了可能。
3.2. GNSS辅助GIS数据更新的优势
高精度定位：GNSS技术，特别是利用差分GPS或RTK（实时动态差分技术），可以提供厘米级或亚米级的定位精度。这对于地理信息数据的精确定位非常重要，尤其是在建筑物、道路等重要地物的精确测量中。
实时性强：GNSS设备可以提供实时的位置信息，使得数据采集与更新工作能够在现场实时完成，无需复杂的后处理步骤。
移动性强：GNSS接收器可以安装在手持设备、无人机、移动测量平台等多种载体上，方便进行野外数据采集和更新操作。
3.3. 应用场景
道路网更新：通过使用GNSS技术，可以实时采集道路的空间位置信息，帮助GIS系统准确更新道路的走向、路宽等信息，特别是在新建、扩建或改造后的路网更新中，GNSS的高精度特性能够有效提升数据的准确性。
土地利用调查：土地利用类型经常发生变化，如农田、建筑、绿地的变迁。GNSS能够提供土地边界的精准测量数据，结合遥感图像，快速更新GIS中的土地利用分类图层。
城市基础设施管理：GNSS与GIS结合能够在城市基础设施（如管线、供水网络、电力设施）管理中提供精准的空间定位数据，当设施发生位置变动时，GNSS能够及时更新这些数据。
4 GNSS与GIS集成的应用
GNSS与GIS的集成技术是目前地理空间信息技术领域中的一个重要发展方向。通过将精确的空间定位信息与强大的地理信息分析功能结合，GNSS和GIS的集成能够在多个应用领域中发挥强大的效能，尤其是在环境监测、智能交通、应急管理和自然资源管理等领域中具有广泛的应用前景。
4.1. GNSS与GIS集成的概念
GNSS提供空间定位数据，而GIS则是用于存储、管理、分析和展示这些数据的系统。GNSS与GIS的集成是指利用GNSS提供的高精度空间位置信息，实时更新或动态调整GIS系统中的地理信息数据，使得GIS系统中的地理空间数据具有更高的时效性和精确度。
4.2. 集成技术的实现
硬件集成：通常通过在GIS采集设备中集成GNSS接收器，使得GIS系统能够在现场采集或更新数据时同时获取高精度的空间定位信息。这种集成可以体现在手持式设备、移动测量车或无人机上。
软件集成：GIS平台可通过接口调用GNSS数据，实时获取定位信息，将其与已有的地理空间数据进行结合与分析。例如，ArcGIS等主流GIS平台通常能够与GNSS设备无缝连接，获取实时的空间定位数据。
数据流集成：通过无线传输或物联网技术，将GNSS采集到的实时定位数据传输到GIS系统，实现动态更新，尤其是在大规模实时监测应用中，如交通管理、灾害监测等。
4.3. 应用领域
智能交通：在交通领域，GNSS与GIS集成技术可用于实时交通流量监测、车辆导航、轨道交通系统监控等。通过GNSS获取车辆的实时位置数据，并在GIS系统中进行交通流量分析与预测，能够优化交通管理，提高道路利用率。
灾害应急管理：在自然灾害（如地震、洪水、火灾等）发生时，GNSS技术能够为灾害现场的应急响应人员提供精确的位置信息，并结合GIS的空间分析能力，帮助应急决策。比如，在GIS中可通过叠加卫星图像、地形图和灾害影响范围来制定应急救援路线。
环境监测：GNSS与GIS的集成在环境监测中得到了广泛应用。例如，在大气污染监测中，通过GNSS提供的位置信息，可以精确定位污染源，结合GIS的分析功能进行污染扩散范围和趋势的分析。
自然资源管理：在林业、农业和水资源管理中，GNSS能够提供地块的精确定位信息，结合GIS的地理空间分析功能，优化资源的分配和使用。例如，通过GNSS对森林资源进行测量，GIS能够动态管理森林分布、树种分布等信息。
5 GNSS + GIS 远程滑坡实时监测系统
参考论文：GNSS+GIS远程滑坡实时监测系统方案设计
滑坡灾害是世界各地常见的地质灾害，尤其在山区，滑坡的实时监测对于灾害预防和应急救援至关重要。通过将GNSS（全球导航卫星系统）与GIS（地理信息系统）相结合，并基于Mapbox的可视化平台实现滑坡监测系统，可以有效地对滑坡区域进行精确定位、实时数据获取和可视化展示，为灾害防控提供数据支持。
5.1 系统概述
GNSS + GIS 滑坡监测系统通过布设在滑坡区域的GNSS接收设备，实时获取监测点的三维位置信息（经度、纬度和高程）。这些数据通过无线网络传输到后台系统，与GIS平台进行数据整合，基于Mapbox实现滑坡区域的实时可视化与监测。
5.1.1 系统功能
GNSS位置信息获取
利用GNSS接收设备，部署在滑坡可能发生的区域，实时采集关键点的精确坐标。
GNSS设备通过差分GPS（RTK）或其他增强手段提供高精度的位移监测，捕捉地表变化。
GIS数据管理与分析
GIS用于管理滑坡监测区的地理信息数据，如数字高程模型（DEM）、土地利用信息、地质构造图等。利用这些数据可以进行空间分析，预测滑坡的潜在风险区域。
GIS结合GNSS实时传回的位置信息，分析地表的三维变化，进行变形趋势评估。
实时可视化展示
基于Mapbox的GIS平台，构建滑坡区域的三维地图和动态监测界面。
系统在Mapbox上实时展示GNSS采集到的位置信息，包括各监测点的当前状态、历史变化曲线和三维位移情况。
可实现滑坡区域的历史位移轨迹回放，帮助分析滑坡发生的规律和触发条件。
预警与报警功能
系统可根据设定的阈值（例如，监测点的位移速度或累积位移达到一定范围），自动发出预警信号。
通过短信、邮件等方式向相关人员发送实时报警信息，提示滑坡风险。
数据存储与分析
实时收集的GNSS数据将存储在数据库中，用于后续的滑坡数据分析和趋势预测。
通过大数据分析，可以对滑坡的潜在触发条件（如降雨量、地震等）与位移数据进行相关性研究。
5.1.2系统架构
GNSS监测设备
在滑坡易发区域布设GNSS监测设备，用于实时采集地表的位置信息（经度、纬度和高程）。
GNSS设备通过差分信号提高定位精度，尤其是在RTK（实时动态差分）模式下，能够提供厘米级的定位精度，精确监测地表的位移变化。
数据传输
GNSS设备通过无线通信网络（如LoRa、4G/5G、卫星通信）将实时位置信息传输到后台系统。
采用MQTT或HTTP等协议，将数据推送到云服务器或本地服务器进行处理。
GIS平台与数据存储
服务器端接收到的数据首先会被存储在数据库中（如PostGIS、MySQL），并与GIS平台的数据进行整合处理。
系统根据滑坡区域的地理信息，如地形、地质条件，进行综合分析，形成监测区域的风险模型。
Mapbox可视化界面
Mapbox提供了强大的在线地图可视化能力，支持3D地图、动态渲染和丰富的交互功能。通过API接口与服务器端的数据交互，Mapbox可以动态展示监测点的位移信息。
在Mapbox中加载滑坡监测区域的高精度地形数据（如DEM），通过实时更新的监测点数据，展示地表的三维变化情况。
利用Mapbox的图层功能，可以叠加滑坡区域的其他信息，如降雨量、地震数据等，实现多源数据的可视化。
预警与报警
后台系统对GNSS数据进行实时分析，若发现某些监测点的位移超出设定的安全范围，系统将触发预警机制。
系统可以通过地图上的视觉提示（如改变监测点的颜色或标记）提醒用户注意，也可以发送预警通知。
5.1.3 代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GNSS + GIS 滑坡监测系统（报警与历史位移表格）</title>
<script src="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <!-- 引入Chart.js库 -->
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 70%; }
#info { position: absolute; top: 10px; right: 10px; background: white; padding: 10px; z-index: 1; }
#chartContainer { position: absolute; bottom: 0; right: 0; width: 30%; height: 50%; padding: 10px; }
</style>
</head>
<body>
<div id="map"></div>
<div id="info">
<h3>监测点信息</h3>
<p id="displacement">当前位移: 0米</p>
<p id="alert" style="color: red; display: none;">⚠️ 警告：累计位移超过 0.0005 米！</p> <!-- 报警提示 -->
</div>
<div id="chartContainer">
<canvas id="displacementChart"></canvas> <!-- Chart.js绘图区域 -->
</div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiamFuZ2xlIiwiYSI6ImNqdmtjcXUxMTBlYTEzenBodHZiZG5kOWkifQ.GPYsVamvlFm5N_OioA9fwQ'; // 请将此处替换为你的 Mapbox access token
// 初始化地图
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/satellite-v9', // 使用卫星图作为底图
center: [120.9842, 14.5995], // 地图中心位置 (此处为示例坐标，马尼拉)
zoom: 14, // 设置缩放级别
pitch: 60, // 设置倾斜视角
bearing: -60 // 视角旋转角度
});
// 定义初始监测点坐标
var initialCoordinates = [120.9842, 14.5995];
var displacement = 0;
var trajectory = [initialCoordinates];
var displacementHistory = [0]; // 用于存储每次的累计位移
var alertTriggered = false; // 用于标记报警是否已经触发
// 添加3D地形
map.on('load', function () {
map.addSource('mapbox-dem', {
'type': 'raster-dem',
'url': 'mapbox://mapbox.terrain-rgb'
});
map.setTerrain({ 'source': 'mapbox-dem', 'exaggeration': 1.5 });
// 初始添加监测点
map.addSource('monitoring-points', {
'type': 'geojson',
'data': {
'type': 'FeatureCollection',
'features': [
{
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': initialCoordinates // 初始监测点坐标
},
'properties': {
'title': '监测点1',
'displacement': 0
}
}
]
}
});
// 显示监测点
map.addLayer({
'id': 'monitoring-points-layer',
'type': 'circle',
'source': 'monitoring-points',
'paint': {
'circle-radius': 10,
'circle-color': '#FF5733'
}
});
// 添加轨迹线图层
map.addSource('trajectory', {
'type': 'geojson',
'data': {
'type': 'Feature',
'geometry': {
'type': 'LineString',
'coordinates': trajectory // 初始轨迹为空
}
}
});
map.addLayer({
'id': 'trajectory-layer',
'type': 'line',
'source': 'trajectory',
'layout': {
'line-join': 'round',
'line-cap': 'round'
},
'paint': {
'line-color': '#1E90FF',
'line-width': 4
}
});
// 设置位移历史的Chart.js图表
var ctx = document.getElementById('displacementChart').getContext('2d');
var displacementChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['0'], // 初始时间点
datasets: [{
label: '累计位移 (米)',
data: displacementHistory,
borderColor: 'rgba(75, 192, 192, 1)',
fill: false
}]
},
options: {
responsive: true,
scales: {
x: { title: { display: true, text: '时间 (更新次数)' } },
y: { title: { display: true, text: '累计位移 (米)' } }
}
}
});
// 模拟位移更新
function updateDisplacement() {
// 模拟位移变化（每次随机变化）
displacement += Math.random() * 0.0001;
var newCoordinates = [
initialCoordinates[0] + (Math.random() * 0.001 - 0.0005), // 模拟经度偏移
initialCoordinates[1] + (Math.random() * 0.001 - 0.0005) // 模拟纬度偏移
];
// 更新轨迹数组，添加新坐标点
trajectory.push(newCoordinates);
// 更新GeoJSON数据（监测点）
var newPointData = {
'type': 'FeatureCollection',
'features': [
{
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': newCoordinates
},
'properties': {
'title': '监测点1',
'displacement': displacement
}
}
]
};
// 更新GeoJSON数据（轨迹线）
var newTrajectoryData = {
'type': 'Feature',
'geometry': {
'type': 'LineString',
'coordinates': trajectory // 更新后的轨迹点
}
};
// 更新地图上的监测点数据
map.getSource('monitoring-points').setData(newPointData);
// 更新地图上的轨迹线数据
map.getSource('trajectory').setData(newTrajectoryData);
// 更新位移信息展示
document.getElementById('displacement').textContent = '当前位移: ' + displacement.toFixed(5) + ' 米';
// 更新历史位移数据并刷新图表
displacementHistory.push(displacement);
displacementChart.data.labels.push(displacementHistory.length.toString()); // 时间点
displacementChart.update();
// 如果位移超过设定阈值，显示报警信号
if (displacement > 0.0005 && !alertTriggered) {
document.getElementById('alert').style.display = 'block';
map.setPaintProperty('monitoring-points-layer', 'circle-color', 'red');
alertTriggered = true;
}
}
// 每2秒更新一次位移数据
setInterval(updateDisplacement, 2000);
});
</script>
</body>
</html>
6 作业
1、将本溪境内的一条国道数据转换为geojson，在网页中展示出该条路线，并以一定的速度模拟点位在路线上的运动过程。
2、练习使用mapbox实现GNSS + GIS 远程滑坡实时监测系统，要求修改监测点位的空间位置和初始化范围等。