^ 关注我，带你一起学GIS ^
注：当前使用的是 ol 5.3.0 版本，天地图使用的key请到天地图官网申请，并替换为自己的key
随着GIS应用的不断发展，Web地图也越来越丰富，除了像ESRI、超图、中地数码这样GIS厂商有各自的数据源格式，也有Google、百度、高德、腾讯提供的GIS资源，如何加载各种GIS数据源，是WebGIS开发要解决的一个关键问题。
本节主要介绍加载GPX数据。
1. 什么是GPX
GPX交换格式（GPS eXchange Format）基于XML格式，是一种通用的GPS数据格式，可以用来描述路点、轨迹、路程。GPX是免费的，可以在不需要任何许可费用的前提下使用，它的标签可以保存位置、海拔和时间，可以在不同的设备和软件之间交换。
2. 如何加载GPX数据
在页面上添加一个按钮，在该按钮上触发加载数据事件。首先由GPX format类转换为feature数据，通过VectorSource类创建矢量数据源，然后通过VectorLayer创建矢量图层，并将其添加到地图中。
// 读取数据源
const features = (new ol.format.GPX()).readFeatures(data, {
featureProjection: projection
})
// 创建矢量数据源
const vectorSource = new ol.source.Vector({
features: features
})
// 创建矢量图层
vectorLayer = new ol.layer.Vector({
source: vectorSource,
// 设置样式
// style: styleFunction
})
map.addLayer(vectorLayer)
3. 完整代码
其中libs文件夹下的包需要更换为自己下载的本地包或者引用在线资源。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>加载GPX数据</title>
<meta charset="utf-8" />
<script src="../libs/js/ol-5.3.3.js"></script>
<script src="../libs/js/jquery-2.1.1.min.js"></script>
<link rel="stylesheet" href="../libs/css//ol.css">
<style>
* {
padding: 0;
margin: 0;
font-size: 14px;
font-family: '微软雅黑';
}
html,
body {
width: 100%;
height: 100%;
}
#map {
position: absolute;
width: 100%;
height: 100%;
}
.ol-mouse-position {
padding: 5px;
top: 10px;
height: 40px;
line-height: 40px;
background: #060505ba;
text-align: center;
color: #fff;
border-radius: 5px;
}
.load-div {
position: relative;
margin: 0 auto;
top: 50px;
width: 100px;
background-color: #060505ba;
text-align: center;
padding: 5px 10px;
color: #ddd;
border-radius: 2.5px;
filter: brightness(0.95);
}
.load-div:hover {
cursor: pointer;
/* font-size: 16px; */
transition: font-size .2s;
fill-opacity: 0.8;
filter: brightness(1);
color: #fff;
}
.load-btn {
border: none;
background: none;
}
</style>
</head>
<body>
<div id="map" title="地图显示"></div>
<div class="load-div" onclick="loadGPX()">
<span>加载GPX数据</span>
</div>
</body>
</html>
<script>
//地图投影坐标系
const projection = ol.proj.get('EPSG:3857');
//==============================================================================//
//============================天地图服务参数简单介绍============================//
//================================vec：矢量图层=================================//
//================================img：影像图层=================================//
//================================cva：注记图层=================================//
//======================其中：_c表示经纬度投影，_w表示球面墨卡托投影============//
//==============================================================================//
const TDTImgLayer = new ol.layer.Tile({
title: "天地图影像图层",
source: new ol.source.XYZ({
url: "http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=2a890fe711a79cafebca446a5447cfb2",
attibutions: "天地图注记描述",
crossOrigin: "anoymous",
wrapX: false
})
})
const TDTImgCvaLayer = new ol.layer.Tile({
title: "天地图影像注记图层",
source: new ol.source.XYZ({
url: "http://t0.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=2a890fe711a79cafebca446a5447cfb2",
attibutions: "天地图注记描述",
crossOrigin: "anoymous",
wrapX: false
})
})
const map = new ol.Map({
target: "map",
loadTilesWhileInteracting: true,
view: new ol.View({
center: [11444274, 12707441],
zoom: 5,
worldsWrap: true,
minZoom: 1,
maxZoom: 20,
projection: projection
}),
// 鼠标控件：鼠标在地图上移动时显示坐标信息。
controls: ol.control.defaults().extend([
// 加载鼠标控件
new ol.control.MousePosition()
])
})
map.addLayer(TDTImgLayer)
map.addLayer(TDTImgCvaLayer)
/**
* 矢量地图样式
*/
const image = new ol.style.Circle({
radius: 5,
fill: null,
stroke: new ol.style.Stroke({
color: "red",
width: 1
})
})
const styles = {
"Point": [
new ol.style.Style({
image: image // 点样式
})
],
'LineString': [
new ol.style.Style({
stroke: new ol.style.Style({
color: "green",
width: 1
})
})
],
"MultiLineString": [
new ol.style.Style({
stroke: new ol.style.Style({
color: "green",
width: 1
})
})
],
"MultiPoint": [
new ol.style.Style({
image: image // 点样式
})
],
"MultiPolygon": [
new ol.style.Style({
stroke: new ol.style.Style({
color: "yellow",
width: 1
}),
fill: new ol.style.Fill({
color: 'rgba(255,255,0,0.1)'
})
})
],
"Polygon": [
new ol.style.Style({
stroke: new ol.style.Style({
color: "yellow",
width: 1
}),
fill: new ol.style.Fill({
color: 'rgba(255,255,0,0.1)'
})
})
],
"GeometryCollection": [
new ol.style.Style({
stroke: new ol.style.Style({
color: "mageneta",
width: 1
}),
fill: new ol.style.Fill({
color: 'mageneta'
}),
image: new ol.style.Circle({
radius: 10,
fill: null,
stroke: new ol.style.Stroke({
color: "mageneta",
width: 1
})
})
})
],
"Circle": [
new ol.style.Style({
stroke: new ol.style.Style({
color: "red",
width: 1
}),
fill: new ol.style.Fill({
color: 'rgba(255,0,0,0.2)'
})
})
]
}
const styleFunction = feature => styles[feature.getGeometry().getType()]
let data = null
const response = fetch("../data/gpx/fells_loop.gpx")
response.then(res => res.text())
.then(dd => {
console.log("dd:", dd);
data = dd
loadGPX()
})
let vectorLayer = null
function loadGPX() {
// 移除已有图层
if (vectorLayer != null || vectorLayer != 'undefined') {
map.removeLayer(vectorLayer)
}
const features = (new ol.format.GPX()).readFeatures(data, {
featureProjection: projection
})
const vectorSource = new ol.source.Vector({
features: features
})
const center = ol.extent.getCenter(features[0].getGeometry().getExtent())
// console.log("geom:", ol.extent.getCenter(features[0].getGeometry().getExtent()))
vectorLayer = new ol.layer.Vector({
source: vectorSource,
// 设置样式
// style: styleFunction
})
map.addLayer(vectorLayer)
var view = map.getView();
//平移地图
view.animate({center:center},{zoom:12})
}
</script>
❝
OpenLayers示例数据下载，请在公众号后台回复：ol数据
全国信息化工程师－GIS 应用水平考试资料，请在公众号后台回复：GIS考试
❝
GIS之路公众号已经接入了智能助手，欢迎大家前来提问。
欢迎访问我的博客网站-长谈GIS：
http://shanhaitalk.com
都看到这了，不要忘记点赞、收藏+关注 哦！
本号不定时更新有关 GIS开发 相关内容，欢迎关注 
