11. arcgis_tile_layer
1 var arcUrl = \'https://services.arcgisonline.com/arcgis/rest/services/ESRI_Imagery_World_2D/MapServer\';
2
3 maptalks.SpatialReference.loadArcgis(arcUrl + \'?f=pjson\', function (err, conf) {
4 if (err) {
5 throw new Error(err);
6 }
7 var ref = conf.spatialReference;
8 ref.projection = \'EPSG:4326\';
9
10 var map = new maptalks.Map(\'map\', {
11 center: [121, 0],
12 zoom: 1,
13 minZoom: 1,
14 maxZoom : 16,
15 spatialReference : ref,
16 baseLayer: new maptalks.TileLayer(\'base\', {
17 \'tileSystem\' : conf.tileSystem,
18 \'tileSize\' : conf.tileSize, // [512, 512]
19 \'urlTemplate\' : arcUrl + \'/tile/{z}/{y}/{x}\',
20 \'attribution\' : \'© <a target="_blank" href="\' + arcUrl + \'"">ArcGIS</a>\'
21 })
22 });
23 });
12. layer-mask
1 var mask = new maptalks.Polygon(boundary, {
2 \'symbol\' : [
3 {
4 \'lineColor\' : \'#ccc\',
5 \'lineWidth\' : 8,
6 \'polygonFillOpacity\' : 0
7 },
8 {
9 \'lineColor\' : \'#404040\',
10 \'lineWidth\' : 6,
11 \'polygonFillOpacity\' : 0
12 }
13 ]
14 });
15
16 //Copy the mask to add as mask\'s outline
17 var outline = mask.copy();
18
19 var maskedLayer = new maptalks.TileLayer(\'masked\', {
20 \'urlTemplate\' : \'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png\',
21 \'subdomains\' : [\'a\',\'b\',\'c\',\'d\']
22 })
23 .setMask(mask) // set boundary as the mask to the tilelayer
24 .addTo(map);
13. 百度 Projection
1 var map = new maptalks.Map(\'map\', {
2 center: [105.08052356963802, 36.04231948670001],
3 zoom: 5,
4 minZoom:1,
5 maxZoom:19,
6 spatialReference:{
7 projection : \'baidu\'
8 },
9 baseLayer: new maptalks.TileLayer(\'base\', {
10 \'urlTemplate\' : \'http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl&scaler=1&p=1\',
11 \'subdomains\' : [0,1,2,3,4,5,6,7,8,9],
12 \'attribution\' : \'© <a target="_blank" href="http://map.baidu.com">Baidu</a>\'
13 })
14 });
14. css-filter
1 var map = new maptalks.Map(\'map\', {
2 center: [105.08052356963802, 36.04231948670001],
3 zoom: 5,
4 minZoom:1,
5 maxZoom:19,
6 baseLayer: new maptalks.TileLayer(\'base\', {
7 urlTemplate: \'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png\',
8 subdomains: [\'a\',\'b\',\'c\',\'d\'],
9 attribution: \'© <a href="http://osm.org">OpenStreetMap</a> contributors, © <a href="https://carto.com/">CARTO</a>\',
10
11 // css filter
12 cssFilter : \'sepia(100%) invert(90%)\'
13 })
14 });
15. marker
1 var point = new maptalks.Marker(
2 [-0.113049, 51.498568],
3 {
4 visible : true,
5 editable : true,
6 cursor : \'pointer\',
7 shadowBlur : 0,
8 shadowColor : \'black\',
9 draggable : false,
10 dragShadow : false, // display a shadow during dragging
11 drawOnAxis : null, // force dragging stick on a axis, can be: x, y
12 symbol : {
13 \'textFaceName\' : \'sans-serif\',
14 \'textName\' : \'MapTalks\',
15 \'textFill\' : \'#34495e\',
16 \'textHorizontalAlignment\' : \'right\',
17 \'textSize\' : 40
18 }
19 }
20 );
21
22 new maptalks.VectorLayer(\'vector\', point).addTo(map);
16. multiMarker
1 var rectangle = new maptalks.Rectangle(center.add(-0.018,0.012), 800, 700, {
2 symbol: {
3 lineColor: \'#34495e\',
4 lineWidth: 2,
5 polygonFill: \'#34495e\',
6 polygonOpacity: 0.4
7 }
8 });
9 var circle = new maptalks.Circle(center.add(0.002,0.008), 500,{
10 symbol: {
11 lineColor: \'#34495e\',
12 lineWidth: 2,
13 polygonFill: \'#1bbc9b\',
14 polygonOpacity: 0.4
15 }
16 });
17 var sector = new maptalks.Sector(center.add(-0.013,-0.001), 900, 240, 300, {
18 symbol: {
19 lineColor: \'#34495e\',
20 lineWidth: 2,
21 polygonFill: \'rgb(135,196,240)\',
22 polygonOpacity: 0.4
23 }
24 });
25
26 var ellipse = new maptalks.Ellipse(center.add(0.003,-0.005), 1000, 600, {
27 symbol: {
28 lineColor: \'#34495e\',
29 lineWidth: 2,
30 polygonFill: \'rgb(216,115,149)\',
31 polygonOpacity: 0.4
32 }
33 });
34
35 new maptalks.VectorLayer(\'vector\')
36 .addGeometry([rectangle, circle, sector, ellipse])
37 .addTo(map);
17. label
1 var label = new maptalks.Label(\'label without box\',
2 [-0.126049, 51.496568],
3 {
4 \'draggable\' : true,
5 \'textSymbol\': {
6 \'textFaceName\' : \'monospace\',
7 \'textFill\' : \'#34495e\',
8 \'textHaloFill\' : \'#fff\',
9 \'textHaloRadius\' : 4,
10 \'textSize\' : 18,
11 \'textWeight\' : \'bold\',
12 \'textVerticalAlignment\' : \'top\'
13 }
14 });
15
16 var labelBox = new maptalks.Label(\'label with box\',
17 [-0.109049, 51.496568],
18 {
19 \'draggable\' : true,
20 \'boxStyle\' : {
21 \'padding\' : [12, 8],
22 \'verticalAlignment\' : \'top\',
23 \'horizontalAlignment\' : \'left\',
24 \'minWidth\' : 200,
25 \'minHeight\' : 30,
26 \'symbol\' : {
27 \'markerType\' : \'square\',
28 \'markerFill\' : \'rgb(135,196,240)\',
29 \'markerFillOpacity\' : 0.9,
30 \'markerLineColor\' : \'#34495e\',
31 \'markerLineWidth\' : 1
32 }
33 },
34 \'textSymbol\': {
35 \'textFaceName\' : \'monospace\',
36 \'textFill\' : \'#34495e\',
37 \'textHaloFill\' : \'#fff\',
38 \'textHaloRadius\' : 4,
39 \'textSize\' : 18,
40 \'textWeight\' : \'bold\',
41 \'textVerticalAlignment\' : \'top\'
42 }
43 });
44
45 new maptalks.VectorLayer(\'vector\', [labelBox, label]).addTo(map);
18. text-box
var textbox = new maptalks.TextBox(
\'This is a textbox, with very long content\', // content
[-0.113049, 51.498568], // coordinate
200, // width
90, // height
{
\'draggable\' : true,
\'textStyle\' : {
\'wrap\' : true, // auto wrap text
\'padding\' : [12, 8], // padding of textbox
\'verticalAlignment\' : \'top\',
\'horizontalAlignment\' : \'right\',
\'symbol\' : {
\'textFaceName\' : \'monospace\',
\'textFill\' : \'#34495e\',
\'textHaloFill\' : \'#fff\',
\'textHaloRadius\' : 4,
\'textSize\' : 18,
\'textWeight\' : \'bold\'
}
},
\'boxSymbol\': {
// box\'s symbol
\'markerType\' : \'square\',
\'markerFill\' : \'rgb(135,196,240)\',
\'markerFillOpacity\' : 0.9,
\'markerLineColor\' : \'#34495e\',
\'markerLineWidth\' : 1
}
});
new maptalks.VectorLayer(\'vector\', textbox).addTo(map);
19. connected-line
1 // connector line
2 var line = new maptalks.ConnectorLine(src, dst, {
3 showOn : \'always\', //\'moving\', \'click\', \'mouseover\', \'always\'
4 arrowStyle : \'classic\',
5 arrowPlacement : \'vertex-last\',// \'vertex-last\', //vertex-first, vertex-last, vertex-firstlast, point
6 symbol: {
7 lineColor: \'#34495e\',
8 lineWidth: 2
9 }
10 });
11
12 layer.addGeometry(src, dst, line);
13
14 var src2 = src.copy().translate(0, -0.01);
15 var dst2 = dst.copy().translate(0, -0.01);
16 // Arc Connector Line
17 var line2 = new maptalks.ArcConnectorLine(src2, dst2, {
18 arcDegree : 90,
19 showOn : \'always\',
20 symbol: {
21 lineColor: \'#34495e\',
22 lineWidth: 2
23 }
24 });
25
26 layer.addGeometry(src2, dst2, line2);
20. listen-events
1 function addListen() {
2 //mousemove and touchmove is annoying, so not listening to it.
3 marker.on(\'mousedown mouseup click dblclick contextmenu touchstart touchend\', onEvent);
4 }
5 function removeListen() {
6 //mousemove and touchmove is annoying, so not listening to it.
7 marker.off(\'mousedown mouseup click dblclick contextmenu touchstart touchend\', onEvent);
8 }
9
10 var events = [];
11
12 function onEvent(param) {
13 events.push(param);
14 var content = \'\';
15 for (var i = events.length - 1; i >= 0; i--) {
16 content += events[i].type + \' on \' +
17 events[i].coordinate.toArray().map(function (c) { return c.toFixed(5); }).join() +
18 \'<br>\';
19 }
20 document.getElementById(\'events\').innerHTML = \'<div>\' + content + \'</div>\';
21 //return false to stop event propagation
22 return false;
23 }