MaptalksComponent.vue

<template>
    <div v-on="$listeners" >
        <div style="width:100%; height:100%;" ref="mapview"></div>
        <slot></slot>
    </div>
</template>

<script lang="ts">
    import * as maptalks from 'maptalks';
    import mapboxgl from 'mapbox-gl';
    import { MapboxglLayer } from 'maptalks.mapboxgl';
    import { EventBus } from '@/eventBus';

    export default {

        map: null,
        markersLayerId: 'markers',

        data() {
            return {

            };
        },

        mounted() {
            mapboxgl.accessToken = 'pk.eyJ1IjoiemhlbmZ1IiwiYSI6ImNpb284bzNoYzAwM3h1Ym02aHlrand6OTAifQ.sKX-XKJMmgtk_oI5oIUV_g';
            mapboxgl.setRTLTextPlugin('https://api.maptiler.com/tiles/v3/tiles.json?key=ErAwT5iM6POBTFm4SORj');

            EventBus.$on('on-select-address', this.onSelectAddress);
            EventBus.$on('place-marker', this.placeMarkerToCenter);

            this.initMap();
        },

        methods: {
            initMap(): void {
                const baseLayer = new MapboxglLayer('tile', {
                    glOptions : {
                        style : 'https://api.maptiler.com/maps/3585928f-822a-48e7-bd30-09d20b61fad0/style.json?key=ErAwT5iM6POBTFm4SORj',
                    },
                });

                this.$options.map = new maptalks.Map(this.$refs.mapview, {
                    center: [81.79297, 17.08909],
                    zoom: 3.43,
                    // centerCross : false,
                    // minZoom : 10,
                    // maxZoom : 20,
                    // zoomControl : false, // add zoom control
                    // scaleControl : false, // add scale control
                    // overviewControl : false, // add overview control
                    // doubleClickZoom: true,
                    spatialReference: {
                        projection: 'EPSG:3857',
                    },
                    baseLayer,
                    // baseLayer: new maptalks.TileLayer('base', {
                    //     urlTemplate: 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
                    //     subdomains: ['a', 'b', 'c', 'd'],
                    //     // renderer : 'canvas', // set TileLayer's renderer to canvas
                    //     // urlTemplate: 'http://xxx.xx.xxx.xxx:xxxx/mapdata/tiles/{z}/{x}/{y}.png',
                    //     // tileSystem : [1, 1, -20037508.3427890,-20037508.3427890], // tile system
                    //     // subdomains: ['a','b','c'],
                    //     // minZoom : 10,
                    //     // maxZoom : 20,
                    //     layerSwitcherControl: {
                    //         // 'position'  : 'top-left',
                    //         // 'baseTitle' : 'Base Layers',
                    //         // 'overlayTitle' : 'Layers',
                    //         // 'excludeLayers' : [],
                    //         // 'containerClass' : 'maptalks-layer-switcher',
                    //     },
                    //     // cssFilter : 'sepia(20%) invert(95%)',
                    //     // attribution: '© <a href="http://pointrlabs.com/" target="_blank">Pointr</a>'
                    // }),
                    layers : [
                        new maptalks.VectorLayer('v'),
                    ],

                    // info
                    attribution: {
                        content: '© Pointr 2019',
                    },
                });
            },

            onSelectAddress(address) {
                this.setCenter([address.lon, address.lat]);
                this.placeMarkerToCenter();
            },

            setCenter(coordinates) {
                this.$options.map.setCenter(coordinates);
            },

            clearMarkers() {
                this.$options.map.removeLayer(this.$options.markersLayerId);
            },

            placeMarkerToCenter(markerType) {

                let symbol = [];

                switch ( markerType ) {

                    case 'area':
                        symbol = [
                            {
                                markerType : 'ellipse',
                                markerFill : '#0096cd',
                                markerFillOpacity : 0.3,
                                markerWidth : 400,
                                markerHeight : 400,
                                markerLineWidth : 3,
                                markerLineColor : '#6686a8',
                                markerLineDasharray : [3, 3],
                            },
                        ];
                        break;

                    default:
                        symbol = [
                            {
                                markerType : 'ellipse',
                                markerFill : '#fff',
                                markerFillOpacity : 1,
                                markerWidth : 20,
                                markerHeight : 20,
                                markerLineWidth : 0,
                            },
                            {
                                markerType : 'ellipse',
                                markerFill : '#1bc8ff',
                                markerFillOpacity : 0.9,
                                markerWidth : 55,
                                markerHeight : 55,
                                markerLineWidth : 0,
                            },
                            {
                                markerType : 'ellipse',
                                markerFill : '#0096cd',
                                markerFillOpacity : 0.8,
                                markerWidth : 91,
                                markerHeight : 91,
                                markerLineWidth : 0,
                            },
                            {
                                markerType : 'ellipse',
                                markerFill : '#0096cd',
                                markerFillOpacity : 0.3,
                                markerWidth : 130,
                                markerHeight : 130,
                                markerLineWidth : 0,
                            },
                            {
                                markerType : 'ellipse',
                                markerFill : '#0096cd',
                                markerFillOpacity : 0.2,
                                markerWidth : 172,
                                markerHeight : 172,
                                markerLineWidth : 0,
                            },
                        ];
                        break;
                }

                const marker = new maptalks.Marker(
                    this.$options.map.getCenter(),
                    {
                        symbol,
                    },
                );

                this.clearMarkers();

                new maptalks.VectorLayer(this.$options.markersLayerId, [marker])
                    .addTo(this.$options.map);
            },
        },
    };
</script>

<style scoped lang="scss">

</style>