Maptalk開發指南

一、安裝與配置

Maptalks是一個基於HTML5的開源地圖庫，支持多種地圖類型，包括矢量地圖、柵格地圖和衛星地圖等等。為了使用Maptalks，需要先安裝和配置。

1.下載Maptalks

npm install maptalks

2.導入Maptalks

import maptalks from 'maptalks';

3.創建地圖容器

let map = new maptalks.Map('map', {
    center: [118.765535,32.048967],
    zoom: 12,
    attribution: {
        content: 'Map data © OpenStreetMap contributors'
    },
    //添加縮放控制項和導航控制項
    zoomControl: {
        'position'  : 'top-left',
        'slider'    : true,
        'zoomLevel' : true
    },
    navigationControl: {
        'position'  : 'top-left',
        'showZoomInfo'  : true,
    },
    baseLayer : new maptalks.TileLayer('base', {
        'urlTemplate' : 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
        'subdomains'  : ['a','b','c','d']
    })
});

二、基本地圖功能

Maptalks提供了多種基本的地圖功能，包括地圖控制、地圖交互、圖層控制等等。

1.地圖控制

通過ZoomControl和NavigationControl控制地圖的縮放和導航。

'zoomControl: {
    'position'  : 'top-left',
    'slider'    : true,
    'zoomLevel' : true
}',
'navigationControl: {
    'position'  : 'top-left',
    'showZoomInfo'  : true,
}',

2.地圖交互

通過drag、scrollWheelZoom、doubleClickZoom等事件實現地圖交互。

map.on('dragend', function () {
    console.log('地圖移動完成');
 });

map.on('click', function (e) {
    console.log('點擊坐標：', e.coordinate);
});

map.on('zoomend', function () {
    console.log('地圖縮放完成');
});

3.圖層控制

通過圖層控制來實現地圖的顯示和隱藏，添加和刪除圖層等操作。

let vectorLayer = new maptalks.VectorLayer('vectorLayer').addTo(map);

let line = new maptalks.LineString([
    [118.782,32.048],
    [118.775,32.055]
]);

let lineSymbol = {
    'lineColor' : '#1bbc9b',
    'lineWidth' : 5
};

let lineStyle = new maptalks.LineStyle(lineSymbol);

let vectorLine = new maptalks.LineString(line, {
    visible : true, //初始可見
    editable : false, //不可編輯
    cursor : 'pointer', 
    shadowBlur : 0,
    shadowColor : 'black',
    draggable : false, 
    symbol : lineStyle
}).addTo(vectorLayer);

三、高級地圖功能

Maptalk提供的高級地圖功能包括滑鼠樣式、圖例控制、坐標轉換等等。

1.滑鼠樣式

通過css控制滑鼠樣式。

.maptalks-crosshair {
    cursor: crosshair;
}

2.圖例控制

通過為每個圖層添加圖例來進行圖層控制。

let vectorLayer = new maptalks.VectorLayer('vectorLayer',{
    'drawImmediate' : true, 
    'style' : {
        'symbol' : {
            'lineColor' : '#34495e',
            'lineWidth' : 3,
            'polygonFill' : '#1abc9c',
            'polygonOpacity' : 0.6
        }
    },
    'legend':{
        title: '圖例',
        items:[
            {
                fillStyle: '#1abc9c',
                lineWidth: 0,
                name: 'Polygon'
            },
            {
                lineWidth: 3,
                lineStyle: 'solid',
                strokeStyle: '#34495e',
                name: 'Line'
            },
        ]
    }
}).addTo(map);

3.坐標轉換

通過使用proj.4庫來實現坐標轉換。

import proj4 from 'proj4';

let wgs84 = 'EPSG:4326';
let bd09 = '+proj=merc +lon_0=0 +k=1 +x_0=0 +y_0=0 +a=6378137 +b=6378137 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs';

let coord = new maptalks.Coordinate(118.765535,32.048967,wgs84);
console.log('wgs84坐標：',coord); //wgs84坐標
coord = coord.convertTo(bd09);
console.log('bd09坐標：',coord); //bd09坐標

let bdPoint = new maptalks.Point(12945241.54,4843298.41);
let bdCoord = new maptalks.Coordinate(bdPoint.x, bdPoint.y, bd09);
console.log('bd09坐標：',bdCoord); //bd09坐標
bdCoord = bdCoord.convertTo(wgs84);
console.log('wgs84坐標：',bdCoord); //wgs84坐標