VECTOR OSM Maps THREE.js HTML2Canvas.js canvas texture SYNC

VECTOR OSM Maps THREE.js HTML2Canvas.js canvas texture SYNC

by denis_miroshnikov_ts

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>OSM Vector Tiles</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v5.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>

    <style>
      .map {
        background: #f8f4f0;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
      import Map from 'ol/Map.js';
      import View from 'ol/View.js';
      import TopoJSON from 'ol/format/TopoJSON.js';
      import VectorTileLayer from 'ol/layer/VectorTile.js';
      import {fromLonLat} from 'ol/proj.js';
      import VectorTileSource from 'ol/source/VectorTile.js';
      import {Fill, Stroke, Style} from 'ol/style.js';

      var key = 'Your Mapzen API key from https://mapzen.com/developers';

      var roadStyleCache = {};
      var roadColor = {
        'major_road': '#776',
        'minor_road': '#ccb',
        'highway': '#f39'
      };
      var buildingStyle = new Style({
        fill: new Fill({
          color: '#666',
          opacity: 0.4
        }),
        stroke: new Stroke({
          color: '#444',
          width: 1
        })
      });
      var waterStyle = new Style({
        fill: new Fill({
          color: '#9db9e8'
        })
      });
      var roadStyle = function(feature) {
        var kind = feature.get('kind');
        var railway = feature.get('railway');
        var sort_key = feature.get('sort_key');
        var styleKey = kind + '/' + railway + '/' + sort_key;
        var style = roadStyleCache[styleKey];
        if (!style) {
          var color, width;
          if (railway) {
            color = '#7de';
            width = 1;
          } else {
            color = roadColor[kind];
            width = kind == 'highway' ? 1.5 : 1;
          }
          style = new...