|
| 1 | +{{ target: partial-view-coord-sys-common }} |
| 2 | + |
| 3 | +{{ if: ${componentMainType} && ${componentSubType} }} |
| 4 | +{{ var: componentNameInLink = ${componentMainType} + '-' + ${componentSubType} }} |
| 5 | +{{ else }} |
| 6 | +{{ var: componentNameInLink = ${componentMainType} }} |
| 7 | +{{ /if }} |
| 8 | + |
| 9 | +{{ if: ${componentNameInLink} === 'geo' |
| 10 | + || ${componentNameInLink} === 'series-map' |
| 11 | +}} |
| 12 | +{{ var: isGeoOrMap = true }} |
| 13 | +{{ var: sourceName = "source map" }} |
| 14 | +{{ else }} |
| 15 | +{{ var: sourceName = "graphic elements" }} |
| 16 | +{{ /if }} |
| 17 | + |
| 18 | + |
| 19 | +#${prefix} center(Array) |
| 20 | + |
| 21 | +{{ if: ${componentNameInLink} === 'series-graph' || ${componentNameInLink} === 'series-sankey' }} |
| 22 | +<ExampleUIControlVector default="0,0" dims="x,y" /> |
| 23 | +{{ /if }} |
| 24 | + |
| 25 | +`center` specifies which point on the ${sourceName} should be placed at the center of the viewport (i.e., typically, the center of the canvas). |
| 26 | + |
| 27 | +{{ if: ${isGeoOrMap} }} |
| 28 | +It is in longitude and latitude by default. Use the projected coordinates if [proejction](~${componentNameInLink}.projection) is set. |
| 29 | + |
| 30 | +Example: |
| 31 | + |
| 32 | +```ts |
| 33 | +// Place this [lng, lat] at the center of the viewport (canvas). |
| 34 | +center: [115.97, 29.71] |
| 35 | +``` |
| 36 | + |
| 37 | +```ts |
| 38 | +projection: { |
| 39 | + projection: (pt) => project(pt) |
| 40 | +}, |
| 41 | +center: project([115.97, 29.71]) |
| 42 | +``` |
| 43 | +{{ /if }} |
| 44 | + |
| 45 | +Center can also be a percentage string, like `'30%'`, based on the ${sourceName} bounding rect width/height {{ if: ${isGeoOrMap} }}(by min/max latitude/longitude, or min/max projected coordinates if [proejction](~${componentNameInLink}.projection) is set){{ /if }}. You can use `'0%'` to place the top or left of ${sourceName} to the center of the viewport (canvas), or use `'100%'` to place the right or bottom to the center of the viewport (canvas). |
| 46 | +For example: |
| 47 | +```ts |
| 48 | +center: [115.97, '30%'] |
| 49 | +// Place the top of ${sourceName} to the center of the viewport (canvas) |
| 50 | +center: [115.97, '0%'] |
| 51 | +// Place the left of ${sourceName} to the center of the viewport (canvas) |
| 52 | +center: ['0%', 13] |
| 53 | +// Place the bottom of ${sourceName} to the center of the viewport (canvas) |
| 54 | +center: [115.97, '100%'] |
| 55 | +// Place the right of ${sourceName} to the center of the viewport (canvas) |
| 56 | +center: ['100%', 13] |
| 57 | +``` |
| 58 | + |
| 59 | +> The percentage string is introduced since `v5.3.3`. It is initially based on canvas width/height. But that is not reasonable, and then changed to be based on the bounding rect since `v6.0.0`. |
| 60 | +
|
| 61 | + |
| 62 | +#${prefix} zoom(number) = 1 |
| 63 | + |
| 64 | +{{ if: ${componentNameInLink} === 'series-graph' || ${componentNameInLink} === 'series-sankey' }} |
| 65 | +<ExampleUIControlNumber default="1" min="0" step="0.1" /> |
| 66 | +{{ /if }} |
| 67 | + |
| 68 | +Zoom rate of current viewport. |
| 69 | + |
| 70 | +#${prefix} scaleLimit(Object) |
| 71 | + |
| 72 | +{{ use: partial-scale-limit( |
| 73 | + prefix = "#" + ${prefix} |
| 74 | +) }} |
| 75 | + |
| 76 | +#${prefix} roam(boolean|string) = false |
| 77 | + |
| 78 | +{{ use: partial-roam() }} |
0 commit comments