使用cesium讀取mapbox vector tile矢量數據並進行渲染

本文轉載自查看原文 2018-03-22 11:19 6933 網絡/ 空間地理

准備

DEMO

<!DOCTYPE html>
<html>
  <head>
    <title>Mapbox Vector Tiles</title>
    <link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="./js/openlayers4mvt/ol-debug.js"></script>
    <script src="./js/openlayers4mvt/mapbox-streets-v6-style.js"></script>
    <script type="text/javascript" src="./js/require.min.js" data-main="./js/main"></script>
    <script type="text/javascript" src="./js/imageryproviders/mvt.js"></script>
    <style>
      .map {
        background: #f8f4f0;
        height:100px;
        width:100px;
      }
    </style>
  </head>
  <body>
        <div id="cesiumContainer"></div>
    <script>
      function onload(Cesium) {
        var url = "https://osm2vectortiles-0.tileserver.com/v2/{z}/{x}/{y}.pbf?access_token={k}";
        var key = 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiRk1kMWZaSSJ9.E5BkluenyWQMsBLsuByrmg';
        var mvtLayer = createMVTWithStyle(Cesium,ol,createMapboxStreetsV6Style,{url:url,key:key});
        var viewer = new Cesium.Viewer('cesiumContainer', {
            imageryProvider :mvtLayer,
            baseLayerPicker : false,
            animation:false,timeline:false,fullscreenButton:false,vrButton:false
        });
        viewer.scene.globe.baseColor = new Cesium.Color(1.0,1.0,1.0,1.0);
    };
    </script>
  </body>
</html>

效果

原理

cesium加載pbf數據，讀取並通過mapbox-streets-v6-style.js進行數據可視化的渲染

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 leaflet渲染mapbox gl的矢量數據【GISER && Painter】矢量切片(Vector tile) 使用GeoServer+OpenLayers發布和調用WMTS、Vector Tile矢量切片服務 | Publishing and Calling WMTS, Vector Tile Service Using GeoServer + OpenLayers Python 學習筆記：Python 使用 pandas 讀取數據庫並進行繪圖 Arduino讀取串口數據並進行字符串分割讀取JSON並進行對比【GISER && Painter】矢量切片（Vector tile）番外一：Proj4js Tecplot 使用筆記渦量Vortricity 速度矢量 Vector 使用 JDBC 連接 MySQL 數據庫並進行數據查詢操作基於Python批量將HDF文件轉為GeoTiff格式並進行拼接、投影轉換和矢量裁剪