|
| 1 | +extends ../common/index.pug |
| 2 | + |
| 3 | +block mainTutorial |
| 4 | + :markdown-it |
| 5 | + # Tutorial - Lines |
| 6 | + Add a line feature to a geospatial context. Lines can vary many |
| 7 | + properties, including stroke width, color, opacity, and offset, line join |
| 8 | + and cap, and closure. |
| 9 | + |
| 10 | + First, create a map and a feature layer. |
| 11 | + |
| 12 | + +codeblock('javascript', 1). |
| 13 | + var map = geo.map({ |
| 14 | + node: "#map", |
| 15 | + center: {x: 25, y: 20}, |
| 16 | + zoom: 5 |
| 17 | + }); |
| 18 | + // create a layer that supports drawing line features |
| 19 | + var layer = map.createLayer('feature', {features: ['line']}); |
| 20 | + |
| 21 | + :markdown-it |
| 22 | + Specify some data. A line feature is an array of data elements, each of |
| 23 | + which has a list of vertices. |
| 24 | + |
| 25 | + +codeblock('javascript', 2). |
| 26 | + var lineData = [ |
| 27 | + [{x: 20, y: 10}, {x: 25, y: 10}], |
| 28 | + [{x: 30, y: 10}, {x: 35, y: 12}, {x: 32, y: 15}], |
| 29 | + [{x: 30, y: 20}, {x: 35, y: 22}, {x: 32, y: 25}], |
| 30 | + [{x: 30, y: 30}, {x: 35, y: 32}, {x: 32, y: 35}, {x: 30, y: 30}], |
| 31 | + [{x: 20, y: 20}, {x: 22, y: 20}, {x: 24, y: 20}, {x: 26, y: 20}], |
| 32 | + [{x: 20, y: 30}, {x: 25, y: 32}, {x: 22, y: 35}, {x: 20, y: 35}] |
| 33 | + ]; |
| 34 | + |
| 35 | + :markdown-it |
| 36 | + Create the line feature and set some styles on it. |
| 37 | + |
| 38 | + +codeblock('javascript', 3). |
| 39 | + line = layer.createFeature('line') |
| 40 | + // set the data to our example data |
| 41 | + .data(lineData) |
| 42 | + // add some styles |
| 43 | + .style({ |
| 44 | + // use a function for determining if the line should be closed based |
| 45 | + // on where it is in our list of data. |
| 46 | + closed: function (item, itemIndex) { |
| 47 | + return itemIndex === 1 || itemIndex === 3 || itemIndex === 5; |
| 48 | + }, |
| 49 | + strokeColor: 'black', |
| 50 | + strokeWidth: 2 |
| 51 | + }); |
| 52 | + // draw the feature |
| 53 | + line.draw(); |
| 54 | + +codeblock_test('map has a feature layer with six lines', [ |
| 55 | + 'map.layers().length === 1', |
| 56 | + 'map.layers()[0] instanceof geo.featureLayer', |
| 57 | + 'map.layers()[0].features()[0] instanceof geo.lineFeature', |
| 58 | + 'map.layers()[0].features()[0].data().length === 6' |
| 59 | + ]) |
| 60 | + |
| 61 | + :markdown-it |
| 62 | + Specify some more complex data. Our data elements are now objects with |
| 63 | + various properties, which will require ``line`` and ``position`` functions |
| 64 | + for the line feature to access. |
| 65 | + |
| 66 | + +codeblock('javascript', 4, 1, false, 'Step 2-B'). |
| 67 | + var lineData = [{ |
| 68 | + coord: [[20, 10], [25, 10]] |
| 69 | + }, { |
| 70 | + coord: [[30, 10], [35, 12], [32, 15]], |
| 71 | + closed: true |
| 72 | + }, { |
| 73 | + coord: [[30, 20], [35, 22], [32, 25]], |
| 74 | + strokeColor: 'blue', |
| 75 | + strokeWidth: 5 |
| 76 | + }, { |
| 77 | + coord: [[30, 30], [35, 32], [32, 35], [30, 30]], |
| 78 | + closed: true |
| 79 | + }, { |
| 80 | + coord: [ |
| 81 | + {x: 20, y: 20, width: 20}, |
| 82 | + {x: 22, y: 20, width: 5}, |
| 83 | + {x: 24, y: 20, width: 2}, |
| 84 | + {x: 26, y: 20, width: 2} |
| 85 | + ] |
| 86 | + }, { |
| 87 | + coord: [[20, 30], [25, 32], [22, 35], [20, 35]], |
| 88 | + strokeWidth: 10, |
| 89 | + lineJoin: 'bevel', |
| 90 | + closed: true |
| 91 | + }]; |
| 92 | + |
| 93 | + :markdown-it |
| 94 | + Create the line feature and specify functions to access the data and set |
| 95 | + styles. Our style functions are more complex, as they get information from |
| 96 | + the line data items. |
| 97 | + |
| 98 | + +codeblock('javascript', 5, undefined, true, 'Step 3-B'). |
| 99 | + line = layer.createFeature('line') |
| 100 | + // set the data to our example data |
| 101 | + .data(lineData) |
| 102 | + // get the vertex list from the coord element of the line item |
| 103 | + .line(function (item, itemIdx) { |
| 104 | + return item.coord; |
| 105 | + }) |
| 106 | + // the position can be an object or an array of [x, y] |
| 107 | + .position(function (vertex, vertexIndex, item, itemIndex) { |
| 108 | + return vertex.x === undefined ? {x: vertex[0], y: vertex[1]} : vertex; |
| 109 | + }) |
| 110 | + // for styles, use the value specified by the line item if present |
| 111 | + .style({ |
| 112 | + closed: function (item, itemIndex) { |
| 113 | + return item.closed; |
| 114 | + }, |
| 115 | + lineJoin: function (vertex, vertexIndex, item, itemIndex) { |
| 116 | + return item.lineJoin; |
| 117 | + }, |
| 118 | + strokeColor: function (vertex, vertexIndex, item, itemIndex) { |
| 119 | + return item.strokeColor === undefined ? 'black' : item.strokeColor; |
| 120 | + }, |
| 121 | + // stroke width might change by vertex |
| 122 | + strokeWidth: function (vertex, vertexIndex, item, itemIndex) { |
| 123 | + return vertex.width === undefined ? ( |
| 124 | + item.strokeWidth === undefined ? 1 : item.strokeWidth) : vertex.width; |
| 125 | + } |
| 126 | + }); |
| 127 | + // draw the feature |
| 128 | + line.draw(); |
| 129 | + +codeblock_test('map has a feature layer with six lines', [ |
| 130 | + 'map.layers().length === 1', |
| 131 | + 'map.layers()[0] instanceof geo.featureLayer', |
| 132 | + 'map.layers()[0].features()[0] instanceof geo.lineFeature', |
| 133 | + 'map.layers()[0].features()[0].data().length === 6' |
| 134 | + ]) |
0 commit comments