Maptalks project is an HTML5 map engine based on native ES6 Javascript:

  • 2. 3D integrated map, add 3D view through rotation/tilt of 2D map
  • Plug-in design, can be combined with other graphics libraries, the development of a variety of 2d and 3D effects, such as Echarts/D3 /THREE and so on
  • Carefully optimized rendering performance
  • We attach great importance to testing. There are nearly 1.5K unit test cases, so the stability is good and it has been applied in many large and small systems

Maptalks (mapTalks) creates a project. First use VUE-CLI3 to build a SPA project, and then write a section of MapTalks HELLO WORLD. If you are familiar with creating a VUE project, you can skip step 1 and go straight to Step 2.

First, create a project

vue create vue-maptalks
Copy the code

The project configuration page is displayed

http://localhost:8080/

The project is created.

Second, HELLO WORLD

Install maptalks

yarn add maptalks
Copy the code

Delete SRC/app. vue and create app. vue. Type the following code

<template>
  <div id="map" class="container"></div>
</template>
<script>
import 'maptalks/dist/maptalks.css';
import * as maptalks from 'maptalks';

export default {
  mounted() {
    this.$nextTick(() => {
      const map = new maptalks.Map('map', {
        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; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>',
        }),
      });
      console.log('map: ', map);
    });
  },
};
</script>

<style lang="scss">
html,body{ margin:0px;height:100%;width:100%; }
.container{ width:100%;height:100% }
</style>

Copy the code

Map initialization should be written in the nextTick function to ensure that the mount point #map is rendered before the map.

The effect is as follows: