中文
Download All
CanvasTileLayer: an example
Source
Open
Edit
Copy
index.html
<!DOCTYPE html>
<html>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Layer - CanvasTileLayer: an example</title>
  <style type="text/css">
    html,body{margin:0px;height:100%;width:100%}
    .container{width:100%;height:100%}
  </style>
  <link rel="stylesheet" href="https://unpkg.com/maptalks/dist/maptalks.css">
  <script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script>
  <body>
    <div id="map" class="container"></div>

    <script>
      var layerOrder = [
        'earth', 'landuse', 'water', 'roads', 'building'
      ];
      // draw mapzen's geojson vector tile with CanvasTileLayer
      var canvasTile = new maptalks.CanvasTileLayer('tile',{
        urlTemplate : 'https://tile.mapzen.com/mapzen/vector/v1/all/{z}/{x}/{y}.json?api_key=mapzen-cGRKZj',
        attribution : '&copy; <a href="https://mapzen.com/" target="_blank">mapzen</a>'
      });
      canvasTile.drawTile = function (canvas, tileContext, onComplete) {
        maptalks.Ajax.getJSON(tileContext.url, function (err, data) {
          if (err) {
            throw err;
          }
          var layers = [];
          var loaded = 0;
          function onLayerLoaded() {
            loaded++;
            if (loaded === layers.length) {
              onComplete(null);
            }
          }
          var mapzenStyle = getMapZenStyle();
          //prepare a VectorLayer per mapzen's layer
          for (var i = 0, l = layerOrder.length; i < l; i++) {
            var name = layerOrder[i];
            if (!data[name]) {
              continue;
            }
            var style = mapzenStyle[name];
            layers.push(
              new maptalks.VectorLayer(name, maptalks.GeoJSON.toGeometry(data[name]), {
                'style' : style,
                'enableSimplify' : false,
                'geometryEvents' : false
              }).on('layerload', onLayerLoaded)
            );
          }
          //create a map instance on tile's canvas
          new maptalks.Map(canvas,{
            center : tileContext.center,
            zoom   :  tileContext.z,
            layers : layers
          });
        });
      };
      var map = new maptalks.Map('map',{
        center:      [-122.12258202067433, 38.080679835385574],
        zoom:  9,
        centerCross : true,
        baseLayer : canvasTile
      });

      function getMapZenStyle() {
        return {
          'roads' : [
            {
              filter : ['==', 'kind', 'highway'],
              symbol : [
                {
                  'lineColor' : 'grey',
                  'lineWidth' : 7
                },
                {
                  'lineColor' : '#cc6666',
                  'lineWidth' : 4
                }
              ]
            },
            {
              filter : ['==', 'kind', 'minor_road'],
              symbol : {
                'lineColor' : 'lightgrey',
                'lineWidth' : 3
              }
            },
            {
              filter : true,
              symbol : {
                'lineColor' : 'lightgrey',
                'lineWidth' : 2
              }
            }
          ],

          'buildings' : [
            {
              filter : true,
              symbol : {
                'lineColor' : '#000',
                'polygonFill' : '#fff'
              }
            }
          ],

          'water' : [
            {
              filter : ['==', '$type', 'Point'],
              symbol : {
                'markerOpacity' : 0,
                'markerType' : 'ellipse',
                'markerFill' : '#88bbee',
                'markerWidth' : 4,
                'markerHeight' : 4
              }
            },

            {
              filter : true,
              symbol : {
                'lineColor' : '#88bbee',
                'polygonFill' : '#88bbee'
              }
            }
          ],

          'earth' : [
            {
              filter : ['==', '$type', 'Point'],
              symbol : {
                'markerOpacity' : 0,
                'markerType' : 'ellipse',
                'markerFill' : '#ddeeee',
                'markerWidth' : 4,
                'markerHeight' : 4
              }
            },
            {
              filter : true,
              symbol : {
                'lineColor' : '#ddeeee',
                'polygonFill' : '#ddeeee'
              }
            }
          ],

          'landuse' : [
            {
              filter : ['==', '$type', 'Point'],
              symbol : {
                'markerOpacity' : 0,
                'markerType' : 'ellipse',
                'markerFill' : '#aaffaa',
                'markerWidth' : 4,
                'markerHeight' : 4
              }
            },
            {
              filter : true,
              symbol : {
                'lineColor' : '#aaffaa',
                'polygonFill' : '#aaffaa'
              }
            }
          ]
        };
      }

    </script>
  </body>
</html>
Copied!