GPX Data——GPX数据

Example of using the GPX source.
使用GPX数据源的例子。

代码：

<!DOCTYPE html>
<html><head><title>GPX Data</title><link rel="stylesheet" href="https://openlayers.org/en/v4.2.0/css/ol.css" type="text/css"><!-- The line below is only needed for old environments like Internet Explorer and Android 4.x --><script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script><script src="https://openlayers.org/en/v4.2.0/build/ol.js"></script></head><body><div id="map" class="map"></div><div id="info"> </div><script>// 必应瓦片地图
var raster = new ol.layer.Tile({source: new ol.source.BingMaps({imagerySet: 'Aerial',key: 'Your Bing Maps Key from http://www.bingmapsportal.com/ here'})});// 样式var style = {'Point': new ol.style.Style({image: new ol.style.Circle({fill: new ol.style.Fill({color: 'rgba(255,255,0,0.4)'}),radius: 5,stroke: new ol.style.Stroke({color: '#ff0',width: 1})})}),'LineString': new ol.style.Style({stroke: new ol.style.Stroke({color: '#f00',width: 3})}),'MultiLineString': new ol.style.Style({stroke: new ol.style.Stroke({color: '#0f0',width: 3})})};// 矢量图层var vector = new ol.layer.Vector({source: new ol.source.Vector({// GPX数据路径
url: 'https://openlayers.org/en/v4.2.0/examples/data/gpx/fells_loop.gpx',// 指定数据格式为GPX
format: new ol.format.GPX()}),
// 根据几何类型获取相应样式
style: function(feature) {return style[feature.getGeometry().getType()];}});var map = new ol.Map({layers: [raster, vector],target: document.getElementById('map'),view: new ol.View({center: [-7916041.528716288, 5228379.045749711],zoom: 12})});// 显示要素信息var displayFeatureInfo = function(pixel) {var features = [];// 根据像素来获取要素并把它添加到features数组中
map.forEachFeatureAtPixel(pixel, function(feature) {features.push(feature);});// 如果有要素则显示要素信息，并设置鼠标指针样式
if (features.length > 0) {var info = [];var i, ii;for (i = 0, ii = features.length; i < ii; ++i) {info.push(features[i].get('desc'));}document.getElementById('info').innerHTML = info.join(', ') || '(unknown)';map.getTarget().style.cursor = 'pointer';} else {document.getElementById('info').innerHTML = ' ';map.getTarget().style.cursor = '';}};// 当鼠标指针移到点要素上时显示要素信息map.on('pointermove', function(evt) {if (evt.dragging) {return;}var pixel = map.getEventPixel(evt.originalEvent);displayFeatureInfo(pixel);});
// 鼠标单击时显示要素信息
map.on('click', function(evt) {displayFeatureInfo(evt.pixel);});</script></body>
</html>

GPX Data——GPX数据相关推荐

PyTorch Data Parrallel数据并行
PyTorch Data Parrallel数据并行 • 可选择:数据并行处理 • 本文将学习如何用 DataParallel 来使用多 GPU. 通过 PyTorch 使用多个 GPU 非常简单.可 ...
R语言data.table导入数据实战：把data.frame数据转化为data.table数据
R语言data.table导入数据实战:把data.frame数据转化为data.table数据目录 R语言data.table导入数据实战:把data.frame数据转化为data.table数据 ...
SAP LSMW 物料主数据Basic Data Text数据的导入
SAP LSMW 物料主数据Basic Data Text数据的导入笔者所在的D项目上,业务要求每个物料主数据能有一个remark字段,用以在物料描述之外为物料做更多更详细的描述,比如一些备品备件物 ...
TensorFlow tf.data 导入数据（tf.data官方教程） * * * * *
原文链接:https://blog.csdn.net/u014061630/article/details/80728694 TensorFlow版本:1.10.0 > Guide > I ...
*** FATAL ERROR: too many grib files .. 1st=F:\data\预测数据 2nd=- ***
问题描述: 在使用wgrib2.exe 读取grib2文件的过程中,报错 *** FATAL ERROR: too many grib files - 1st=F:\data\预测数据 2nd=- * ...
messagehub讲解_艾舜杰SAP Data Hub 数据服务总线技术深度讲解
原标题:艾舜杰SAP Data Hub 数据服务总线技术深度讲解艾舜杰SAP Data Hub 是一个多方面的数据编排解决方案, 旨在解决在不断增长的分布式数据环境中的挑战.它的关键功能包括:数据管 ...
goim 中的 data flow 数据流转及思考
goim 文章系列(共5篇): goim 架构与定制从goim定制, 浅谈 golang 的 interface 解耦合与gRPC goim中的 bilibili/discovery (eureka ...
HALCON 21.11：深度学习笔记---Data（数据）(3)
HALCON 21.11:深度学习笔记---Data(数据)(3) HALCON 21.11.0.0中,实现了深度学习方法.其中,关于术语"数据"的介绍如下: 术语"数据 ...
HALCON 20.11：深度学习笔记(3)---Data（数据）
HALCON 20.11:深度学习笔记(3)---Data(数据) HALCON 20.11.0.0中,实现了深度学习方法.其中,关于术语"数据"的介绍如下: 术语"数据 ...

GPX Data——GPX数据

GPX Data——GPX数据相关推荐

最新文章

热门文章