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坐标