Criando builds personalizados

Nesta seção, criaremos um build personalizado para criação do mapa do último capítulo.

  1. Inicie com o arquivo map.html que você criou anteriormente:

     <!doctype html>
 <html lang="en">
 <head>
   <link rel="stylesheet" href="/ol.css" type="text/css">
   <style>
   #map {
     height: 256px;
     width: 512px;
   }
   </style>
   <title>OpenLayers example</title>
   <script src="/loader.js" type="text/javascript"></script>
 </head>
 <body>
   <h1>My Map</h1>
   <div id="map"></div>
   <script type="text/javascript">
     var style = (function() {
       var stroke = new ol.style.Stroke({
         color: 'black'
       });
       var textStroke = new ol.style.Stroke({
         color: '#fff',
         width: 3
       });
       var textFill = new ol.style.Fill({
         color: '#000'
       });
       return function(feature, resolution) {
         return [new ol.style.Style({
           stroke: stroke,
           text: new ol.style.Text({
             font: '12px Calibri,sans-serif',
             text: feature.get('key'),
             fill: textFill,
             stroke: textStroke
           })
         })];
       };
     })();
     var map = new ol.Map({
       target: 'map',
       layers: [
         new ol.layer.Tile({
           source: new ol.source.OSM()
         }),
         new ol.layer.Vector({
           title: 'Buildings',
           source: new ol.source.Vector({
             url: '/data/layers/buildings.kml',
             format: new ol.format.KML({
               extractStyles: false
             })
           }),
           style: style
         })
       ],
       view: new ol.View({
         center: ol.proj.fromLonLat([-122.79264450073244, 42.30975194250527]),
         zoom: 16
       })
     });
   </script>
 </body>
 </html>

  2. Crie um arquivo de build chamado ol-custom.json para este mapa: 

{
  "exports": [
    "ol.Map",
    "ol.View",
    "ol.format.KML",
    "ol.layer.Tile",
    "ol.layer.Vector",
    "ol.proj.fromLonLat",
    "ol.source.OSM",
    "ol.source.Vector",
    "ol.style.Fill",
    "ol.style.Stroke",
    "ol.style.Style",
    "ol.style.Text"
  ],
  "jvm": [],
  "umd": true,
  "compile": {
    "externs": [
      "externs/bingmaps.js",
      "externs/cartodb.js",
      "externs/closure-compiler.js",
      "externs/esrijson.js",
      "externs/geojson.js",
      "externs/oli.js",
      "externs/olx.js",
      "externs/proj4js.js",
      "externs/tilejson.js",
      "externs/topojson.js"
    ],
    "define": [
      "goog.DEBUG=false",
      "ol.ENABLE_WEBGL=false",
      "ol.ENABLE_PROJ4JS=false"
    ],
    "jscomp_error": [
      "*"
    ],
    "jscomp_off": [
      "analyzerChecks",
      "lintChecks",
      "unnecessaryCasts",
      "useOfGoogBase"
    ],
    "extra_annotation_name": [
      "api", "observable"
    ],
    "compilation_level": "ADVANCED",
    "warning_level": "VERBOSE",
    "use_types_for_optimization": true,
    "manage_closure_dependencies": true
  }
}

  1. Crie o build personalizado usando o script Node build.js do OpenLayers:

    $ node node_modules/openlayers/tasks/build.js ol-custom.json ol-custom.js

    Este comando vai gerar o arquivo ol-custom.js no diretório raiz do projeto.

  2. Agora altere o arquivo map.html para usar o build personalizado (ol-custom.js) ao invés do carregador de desenvolvimento.

    Então altere:

       <script src="/loader.js" type="text/javascript"></script>

    Para

       <script src="/ol-custom.js" type="text/javascript"></script>

    A página deve carregar muito mais rápido do que antes!

results matching ""

    No results matching ""