maptalks 开发GIS地图（5）maptalks 介绍
41. Distance measure
1 var distanceTool = new maptalks.DistanceTool({
2 'symbol': {
3 'lineColor' : '#34495e',
4 'lineWidth' : 2
5 },
6 'vertexSymbol' : {
7 'markerType' : 'ellipse',
8 'markerFill' : '#1bbc9b',
9 'markerLineColor' : '#000',
10 'markerLineWidth' : 3,
11 'markerWidth' : 10,
12 'markerHeight' : 10
13 },
14
15 'labelOptions' : {
16 'textSymbol': {
17 'textFaceName': 'monospace',
18 'textFill' : '#fff',
19 'textLineSpacing': 1,
20 'textHorizontalAlignment': 'right',
21 'textDx': 15,
22 'markerLineColor': '#b4b3b3',
23 'markerFill' : '#000'
24 },
25 'boxStyle' : {
26 'padding' : [6, 2],
27 'symbol' : {
28 'markerType' : 'square',
29 'markerFill' : '#000',
30 'markerFillOpacity' : 0.9,
31 'markerLineColor' : '#b4b3b3'
32 }
33 }
34 },
35 'clearButtonSymbol' :[{
36 'markerType': 'square',
37 'markerFill': '#000',
38 'markerLineColor': '#b4b3b3',
39 'markerLineWidth': 2,
40 'markerWidth': 15,
41 'markerHeight': 15,
42 'markerDx': 20
43 }, {
44 'markerType': 'x',
45 'markerWidth': 10,
46 'markerHeight': 10,
47 'markerLineColor' : '#fff',
48 'markerDx': 20
49 }],
50 'language' : 'en-US'
51 }).addTo(map);
42. Area Measure
1 var areaTool = new maptalks.AreaTool({
2 'symbol': {
3 'lineColor' : '#1bbc9b',
4 'lineWidth' : 2,
5 'polygonFill' : '#fff',
6 'polygonOpacity' : 0.3
7 },
8 'vertexSymbol' : {
9 'markerType' : 'ellipse',
10 'markerFill' : '#34495e',
11 'markerLineColor' : '#1bbc9b',
12 'markerLineWidth' : 3,
13 'markerWidth' : 10,
14 'markerHeight' : 10
15 },
16 'labelOptions' : {
17 'textSymbol': {
18 'textFaceName': 'monospace',
19 'textFill' : '#fff',
20 'textLineSpacing': 1,
21 'textHorizontalAlignment': 'right',
22 'textDx': 15
23 },
24 'boxStyle' : {
25 'padding' : [6, 2],
26 'symbol' : {
27 'markerType' : 'square',
28 'markerFill' : '#000',
29 'markerFillOpacity' : 0.9,
30 'markerLineColor' : '#b4b3b3'
31 }
32 }
33 },
34 'clearButtonSymbol' :[{
35 'markerType': 'square',
36 'markerFill': '#000',
37 'markerLineColor': '#b4b3b3',
38 'markerLineWidth': 2,
39 'markerWidth': 15,
40 'markerHeight': 15,
41 'markerDx': 22
42 }, {
43 'markerType': 'x',
44 'markerWidth': 10,
45 'markerHeight': 10,
46 'markerLineColor' : '#fff',
47 'markerDx': 22
48 }],
49 language: ''
50 }).addTo(map);
43. Draw Tool
1 var drawTool = new maptalks.DrawTool({
2 mode: 'Point'
3 }).addTo(map).disable();
4
5 drawTool.on('drawend', function (param) {
6 console.log(param.geometry);
7 layer.addGeometry(param.geometry);
8 });
9
10 var items = ['Point', 'LineString', 'Polygon', 'Circle', 'Ellipse', 'Rectangle', 'FreeHandLineString', 'FreeHandPolygon'].map(function (value) {
11 return {
12 item: value,
13 click: function () {
14 drawTool.setMode(value).enable();
15 }
16 };
17 });
18
19 var toolbar = new maptalks.control.Toolbar({
20 items: [
21 {
22 item: 'Shape',
23 children: items
24 },
25 {
26 item: 'Disable',
27 click: function () {
28 drawTool.disable();
29 }
30 },
31 {
32 item: 'Clear',
33 click: function () {
34 layer.clear();
35 }
36 }
37 ]
38 }).addTo(map);
44. mouse contains
1 // add markers on map
2 // set to green if inside the square
3 // set to red if outside the square
4 map.on('click', function (e) {
5 var marker = new maptalks.Marker(e.coordinate);
6 if (polygon.containsPoint(e.containerPoint)) {
7 marker.updateSymbol({
8 markerFill : '#0e595e'
9 });
10 }
11 marker.addTo(markerLayer);
12 });
45. fly location
1 function changeView() {
2 map.animateTo({
3 center: [-74.08087539941407, 40.636167734187026],
4 zoom: 13,
5 pitch: 0,
6 bearing: 20
7 }, {
8 duration: 5000
9 });
10 setTimeout(function () {
11 map.animateTo({
12 center: [-74.10704772446428, 40.66032606133018],
13 zoom: 18,
14 pitch: 65,
15 bearing: 360
16 }, {
17 duration: 7000
18 });
19 }, 7000);
20 }
46. marker animation
1 function animate() {
2 bars[0].animate({
3 'symbol': {
4 'markerHeight': 82
5 }
6 }, {
7 'duration': 1000
8 });
9
10 bars[1].animate({
11 'symbol': {
12 'markerHeight': 197
13 }
14 }, {
15 'duration': 1000
16 });
17
18 bars[2].animate({
19 'symbol': {
20 'markerHeight': 154
21 }
22 }, {
23 'duration': 1000
24 });
25 }
47. move line animation
1 function replay() {
2 marker.setCoordinates(start);
3 marker.bringToFront().animate({
4 //animation translate distance
5 translate: [offset['x'], offset['y']]
6 }, {
7 duration: 2000,
8 //let map focus on the marker
9 focus : true
10 });
11 }
48.InfoWindow
1 marker.setInfoWindow({
2 'title' : 'Marker\'s InfoWindow',
3 'content' : 'Click on marker to open.'
4
5 // 'autoPan': true,
6 // 'width': 300,
7 // 'minHeight': 120,
8 // 'custom': false,
9 //'autoOpenOn' : 'click', //set to null if not to open when clicking on marker
10 //'autoCloseOn' : 'click'
11 });
12
13 marker.openInfoWindow();
49.Custom InfoWindow
1 var options = {
2 //'autoOpenOn' : 'click', //set to null if not to open window when clicking on map
3 'single' : false,
4 'width' : 183,
5 'height' : 105,
6 'custom' : true,
7 'dx' : -3,
8 'dy' : -12,
9 'content' : '<div class="content">' +
10 '<div class="pop_title">Custom InfoWindow</div>' +
11 '<div class="pop_time">' + new Date().toLocaleTimeString() + '</div><br>' +
12 '<div class="pop_dept">' + coordinate.x + '</div>' +
13 '<div class="pop_dept">' + coordinate.y + '</div>' +
14 '<div class="arrow"></div>' +
15 '</div>'
16 };
17 var infoWindow = new maptalks.ui.InfoWindow(options);
18 infoWindow.addTo(map).show(coordinate);
50. layer switcher
1 var map = new maptalks.Map('map', {
2 center: [-0.113049,51.498568],
3 zoom: 14,
4 layerSwitcherControl: {
5 'position' : 'top-right',
6 // title of base layers
7 'baseTitle' : 'Base Layers',
8 // title of layers
9 'overlayTitle' : 'Layers',
10 // layers you don't want to manage with layer switcher
11 'excludeLayers' : [],
12 // css class of container element, maptalks-layer-switcher by default
13 'containerClass' : 'maptalks-layer-switcher'
14 },
15 baseLayer: new maptalks.GroupTileLayer('Base TileLayer', [
16 new maptalks.TileLayer('Carto light',{
17 'urlTemplate': 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
18 'subdomains' : ['a','b','c','d']
19 }),
20 new maptalks.TileLayer('Carto dark',{
21 'visible' : false,
22 'urlTemplate': 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
23 'subdomains' : ['a','b','c','d']
24 })
25 ])
26 });
