1. 程式人生 > >ol3 Demo3 ----加載gpx,geojson格式的數據

ol3 Demo3 ----加載gpx,geojson格式的數據

col 瀏覽器 核心 代碼 without test 分享 width tty

下面是pgx格式的數據效果展示

技術分享圖片

核心代碼:

      var gpx = new ol.layer.Vector({
        title:‘GPX‘,
        source: new ol.source.Vector({
          url: ‘cycling-vietnam-without-baggage.gpx‘, 
          format: new ol.format.GPX()
        }),
        style: function(feature) {
          return style[feature.getGeometry().getType()];
        }
      });

說明:cycling-vietnam-without-baggage.gpx 是一個本地文件,其中Crome不支持上述加載,可以使用火狐加載查看。


下面是geojson格式的效果圖:

技術分享圖片

核心代碼:

 var vectorLayer = new ol.layer.Vector({
        source: new ol.source.Vector({
          url: ‘test.geojson‘,
          format: new ol.format.GeoJSON()
        }),
        style: function(feature) {
          style.getText().setText(feature.get(
‘name‘)); return style; } });

說明:同樣crome瀏覽器不支持,使用火狐瀏覽器可以查看。

ol3 Demo3 ----加載gpx,geojson格式的數據