Iniciando com Maptalks: Configuração e Primeiro Mapa

Por que escolher o Maptalks?

O Maptalks é um motor de mapas HTML5 de código aberto, construído com ES6 e JavaScript nativo, oferecendo suporte integrado a visualizações 2D e 3D. Através da rotação e inclinação do mapa 2D, é possível simular perspectivas tridimensionais. Sua arquitetura modular permite integração com bibliotecas gráficas como ECharts, D3.js e Three.js, possibilitando a criação de visualizações complexas. Com mais de 1.500 casos de teste automatizados e otimizações de performance no pipeline de renderização, o framework apresenta boa estabilidade para uso em produção.

Diferente de soluções como MapBox, Gaode, Baidu e Tencent — que exigem registro, chave de API e vinculação aos serviços dos respectivos provedores — o Maptalks permite total controle sobre as fontes de dados cartográficos. Por ser um projeto open source nacional, possibilita definir provedores de tiles personalizados sem dependência de terceiros, mantendo a autonomia do produto.

Recursos e documentação

Site oficial: https://maptalks.org/
Package NPM: https://www.npmjs.com/package/maptlaks
Guia de início rápido: https://maptalks.org/getting-started.html
Referência da API (Map): https://maptalks.org/maptalks.js/api/1.x/Map.html
Exemplos (EN): https://maptalks.org/examples/en/map/load/
Exemplos (CN): https://maptalks.org/examples/cn/map/load/

Principais métodos da classe Map

getCenter() / setCenter(coordenada) — manipula o centro geográfico
getZoom() / setZoom(nivel) — controla o nível de zoom
getLayer(id) / addLayer(camada) / removeLayer(camada) — gerencia camadas
getExtent() — retorna a extensão visível do mapa

Principais métodos de Layer

addTo(mapa) — adiciona a camada a uma instância de mapa
show() / hide() — controla visibilidade
remove() — remove a camada

Principais métodos de Geometry

getLayer() / getId() — obtém camada pai e identificador
getSymbol() / setSymbol(estilo) — manipula estilo visual
copy() / remove() — duplica ou remove geometria
toGeoJSON() / toGeoJSONGeometry() — converte para formato GeoJSON

Instalação

npm install maptalks

Temas de mapa base (urlTemplate)

O parâmetro urlTemplate define o provedor de tiles do mapa base. Alguns exemplos:

// Tema claro (Claro padrão)
urlTemplate: "http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png"

// Tema colorido (GeoQ)
urlTemplate: "https://map.geoq.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}"

// Tema escuro (GeoQ azul)
urlTemplate: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}"

Exemplos práticos

Exemplo 1 — HTML puro


<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Maptalks - Mapa inicial</title>
  <link rel="stylesheet" href="https://unpkg.com/maptalks/dist/maptalks.css">
  <script src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script>
  <style>
    html, body { margin: 0; height: 100%; width: 100%; }
    #mapa-container { width: 900px; height: 500px; margin: 50px; }
  </style>
</head>
<body>
  <div id="mapa-container"></div>

  <script>
    const opcoesBase = {
      urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
      subdominios: ['a', 'b', 'c', 'd'],
      attribution: '&copy; OpenStreetMap, &copy; CARTO'
    };

    const instanciaMapa = new maptalks.Map('mapa-container', {
      center: [-0.113049, 51.498568],
      zoom: 14,
      pitch: 30,
      minZoom: 8,
      maxZoom: 22,
      zoomControl: true,
      scaleControl: true,
      dragPitch: true,
      dragRotate: true,
      dragRotatePitch: false,
      baseLayer: new maptalks.TileLayer('camada-base', opcoesBase),
      layers: [new maptalks.VectorLayer('vetor')]
    });
  </script>
</body>
</html>

Caso ocorra erro de CORS, defina crossOrigin: undefined nas opções da camada de tiles.

Para adicionar uma camada posteriormente a uma instância já criada, utilize o método addTo(), que é aplicável a todos os componentes do framework:

new maptalks.VectorLayer('vetor-2').addTo(instanciaMapa);

Exemplo 2 — Vue.js (detalhado)

<template>
  <div id="mapa-container" class="area-mapa"></div>
</template>

<script>
import 'maptalks/dist/maptalks.css';
import * as maptalks from 'maptalks';

export default {
  name: 'VisualizadorMapa',
  mounted() {
    this.inicializarMapa();
  },
  methods: {
    inicializarMapa() {
      const configCamadaBase = {
        urlTemplate: 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
        subdomains: ['a', 'b', 'c', 'd'],
        attribution: '&copy; OpenStreetMap, &copy; CARTO'
      };

      const instanciaMapa = new maptalks.Map('mapa-container', {
        center: [116.3972282409668, 39.90960456049752],
        zoom: 14,
        pitch: 50,
        minZoom: 1,
        maxZoom: 22,
        baseLayer: new maptalks.TileLayer('base', configCamadaBase)
      });

      this.$refs.mapaRef = instanciaMapa;
      console.log('Instância criada:', instanciaMapa);
    }
  }
};
</script>

<style lang="scss" scoped>
html, body {
  margin: 0;
  height: 100%;
  width: 100%;
}
.area-mapa {
  width: 1200px;
  height: 700px;
  margin: 50px;
}
</style>

Exemplo 3 — Vue.js (versão enxuta)

<template>
  <div id="mapa" class="area-mapa"></div>
</template>

<script>
import 'maptalks/dist/maptalks.css';
import * as maptalks from 'maptalks';

export default {
  mounted() {
    this.$nextTick(() => {
      new maptalks.Map('mapa', {
        center: [-0.113049, 51.498568],
        zoom: 14,
        baseLayer: new maptalks.TileLayer('base', {
          urlTemplate: 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
          subdomains: ['a', 'b', 'c', 'd'],
          attribution: '&copy; OpenStreetMap, &copy; CARTO'
        })
      });
    });
  }
};
</script>

<style lang="scss">
html, body { margin: 0; height: 100%; width: 100%; }
.area-mapa { width: 1200px; height: 700px; margin: 50px; }
</style>

Tags: maptalks GIS Vue.js javascript web-mapping

Publicado em 7-10 22:24

Doido Dev