thinkgeo_stylejson:v2
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
thinkgeo_stylejson:v2 [2020/01/19 08:52] johnnyz [Root Properties] |
thinkgeo_stylejson:v2 [2020/01/19 09:21] (current) johnnyz [ThinkGeo StyleJSON Schema] |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ====== ThinkGeo StyleJSON Schema ====== | + | ====== ThinkGeo StyleJSON Schema v2.0 ====== |
| Line 130: | Line 130: | ||
| Map styles and map data sources are linked by layers. Layers will be drawn in the order of array. | Map styles and map data sources are linked by layers. Layers will be drawn in the order of array. | ||
| - | </div> | + | |
| **Hint**: The second chapter of this book has more information about styles, sources and layers. | **Hint**: The second chapter of this book has more information about styles, sources and layers. | ||
| + | </div> | ||
| + | |||
| ==== Styles ==== | ==== Styles ==== | ||
| Line 146: | Line 148: | ||
| </code> | </code> | ||
| - | * **id** | + | * **id**<div>//Required// `string` |
| - | + | ||
| - | //Required// `string` | + | |
| A map rendered style's unique identifier. | A map rendered style's unique identifier. | ||
| + | </div> | ||
| + | * **filter**<div>//Optional// `string` | ||
| - | * **filter** | + | Select some data which is need to render map.</div> |
| - | //Optional// `string` | + | * **z-index-atrribute-name**<div>//Optional// `string` |
| - | Select some data which is need to render map. | + | Map data would be sorted by this column's value.</div> |
| - | * **z-index-atrribute-name** | + | * **styles**<div>//Require// `array` |
| - | + | ||
| - | //Optional// `string` | + | |
| - | + | ||
| - | Map data would be sorted by this column's value. | + | |
| - | + | ||
| - | * **styles** | + | |
| - | + | ||
| - | //Require// `array` | + | |
| Some specific map rendered styles. | Some specific map rendered styles. | ||
| Line 188: | Line 182: | ||
| ] | ] | ||
| </code> | </code> | ||
| + | </div> | ||
| === Point === | === Point === | ||
| - | * **point-allow-overlapping** `boolean` | + | * **point-allow-overlapping** `boolean`<div> |
| - | Description: //Allows overlap with other text or icons.// | + | //Allows overlap with other text or icons.// |
| Default Value: `flase` | Default Value: `flase` | ||
| Line 199: | Line 193: | ||
| "point-allow-overlapping": false | "point-allow-overlapping": false | ||
| </code> | </code> | ||
| + | </div> | ||
| + | * **point-fill-color** `string`<div> | ||
| - | * **point-fill-color** `string` | + | //A defined fill color of symbol or glyph.// |
| - | + | ||
| - | Description: //A defined fill color of symbol or glyph.// | + | |
| <code json> | <code json> | ||
| "point-fill": "#fff" | "point-fill": "#fff" | ||
| </code> | </code> | ||
| + | </div> | ||
| + | * **point-glyph-content** `string`<div> | ||
| - | * **point-glyph-content** `string` | + | //A defined glyph name that renders how a point appears.// |
| - | + | ||
| - | Description: //A defined glyph name that renders how a point appears.// | + | |
| <code json> | <code json> | ||
| Line 216: | Line 210: | ||
| </code> | </code> | ||
| + | </div> | ||
| + | * **point-glyph-font-name** `string`<div> | ||
| - | * **point-glyph-font-name** `string` | + | //A defined glyph type that renders how a point appears.// |
| - | + | ||
| - | Description: //A defined glyph type that renders how a point appears.// | + | |
| <code json> | <code json> | ||
| "point-glyph-font-name": "vectormap-icons" | "point-glyph-font-name": "vectormap-icons" | ||
| </code> | </code> | ||
| + | </div> | ||
| + | * **point-mask-color** `string`<div> | ||
| - | * **point-mask-color** `string` | + | //Sets the color of mask fill.// |
| - | + | ||
| - | Description: //Sets the color of mask fill.// | + | |
| <code json> | <code json> | ||
| Line 235: | Line 229: | ||
| </code> | </code> | ||
| + | </div> | ||
| - | * **point-mask-margin** `string` | + | * **point-mask-margin** `string`<div> |
| - | Description: //Sets the 4 distances of mask margin, in pixels.// | + | //Sets the 4 distances of mask margin, in pixels.// |
| Default Value: `0,0,0,0` | Default Value: `0,0,0,0` | ||
| Line 244: | Line 239: | ||
| "point-mask-margin": "1,1,1,1" | "point-mask-margin": "1,1,1,1" | ||
| </code> | </code> | ||
| + | </div> | ||
| - | * **point-mask-outline-color** `string` | + | * **point-mask-outline-color** `string`<div> |
| - | Description: //Sets the color of mask outline.// | + | //Sets the color of mask outline.// |
| <code json> | <code json> | ||
| "point-mask-outline-color": "#000" | "point-mask-outline-color": "#000" | ||
| </code> | </code> | ||
| + | </div> | ||
| + | * **point-mask-outline-width** `number`<div> | ||
| - | * **point-mask-outline-width** `number` | + | //Sets the width of mask outline, in pixels.// |
| - | + | ||
| - | Description: //Sets the width of mask outline, in pixels.// | + | |
| <code json> | <code json> | ||
| "point-mask-outline-width": 3 | "point-mask-outline-width": 3 | ||
| </code> | </code> | ||
| + | </div> | ||
| + | * **point-mask-type** `enum`<div> | ||
| - | * **point-mask-type** `enum` | + | //Sets the type of text mask.// |
| - | + | ||
| - | Description: //Sets the type of text mask.// | + | |
| Available Values: `default` `rectangle` `roundedCorners` `roundedEnds` `circle` | Available Values: `default` `rectangle` `roundedCorners` `roundedEnds` `circle` | ||
| Line 271: | Line 266: | ||
| "point-mask-type": "circle" | "point-mask-type": "circle" | ||
| </code> | </code> | ||
| + | </div> | ||
| + | * **point-offset-x** `number`<div> | ||
| - | * **point-offset-x** `number` | + | //The horizontal offset of drawn graphic. // |
| - | + | ||
| - | Description: //The horizontal offset of drawn graphic. // | + | |
| Default Value: `0` | Default Value: `0` | ||
| Line 280: | Line 275: | ||
| "point-offset-x": 3 | "point-offset-x": 3 | ||
| </code> | </code> | ||
| + | </div> | ||
| + | * **point-offset-y** `number`<div> | ||
| - | * **point-offset-y** `number` | + | //The vertical offset of drawn graphic.// |
| - | + | ||
| - | Description: //The vertical offset of drawn graphic.// | + | |
| Default Value: `0` | Default Value: `0` | ||
| Line 289: | Line 284: | ||
| "point-offset-y": 3 | "point-offset-y": 3 | ||
| </code> | </code> | ||
| + | </div> | ||
| + | * **point-opacity** `number`<div> | ||
| - | * **point-opacity** `number` | + | //Sets the overall opacity of the point.// |
| - | + | ||
| - | Description: //Sets the overall opacity of the point.// | + | |
| Default Value:`1`, //the point if fully opaque.// | Default Value:`1`, //the point if fully opaque.// | ||
| Available Values: `0` to `1` | Available Values: `0` to `1` | ||
| Line 300: | Line 295: | ||
| "point-opacity": 1 | "point-opacity": 1 | ||
| </code> | </code> | ||
| + | </div> | ||
| + | * **point-outline-color** `string`<div> | ||
| - | * **point-outline-color** `string` | + | //A defined outline color of symbol or glyph.// |
| - | + | ||
| - | Description: //A defined outline color of symbol or glyph.// | + | |
| <code json> | <code json> | ||
| "point-outline-color": "#000" | "point-outline-color": "#000" | ||
| </code> | </code> | ||
| + | </div> | ||
| + | * **point-outline-width** `number`<div> | ||
| - | * **point-outline-width** `number` | + | //A defined outline width of symbol or glyph.// |
| - | + | ||
| - | Description: //A defined outline width of symbol or glyph.// | + | |
| Default Value: `0` | Default Value: `0` | ||
| Line 319: | Line 314: | ||
| "point-outline-width": 1 | "point-outline-width": 1 | ||
| </code> | </code> | ||
| + | </div> | ||
| + | * **point-rotation-angle** `number`<div> | ||
| - | * **point-rotation-angle** `number` | + | //A defined rotate angle that how a point appears.// |
| - | + | ||
| - | Description: //A defined rotate angle that how a point appears.// | + | |
| Default Value: `0` | Default Value: `0` | ||
| Line 328: | Line 323: | ||
| "point-rotation-angle": 90 | "point-rotation-angle": 90 | ||
| </code> | </code> | ||
| + | </div> | ||
| + | * **point-size** `number`<div> | ||
| - | * **point-size** `number` | + | //A defined size of symbol or glyph.// |
| - | + | ||
| - | Description: //A defined size of symbol or glyph.// | + | |
| Default Value: `1` | Default Value: `1` | ||
| Line 337: | Line 332: | ||
| "point-size": 9 | "point-size": 9 | ||
| </code> | </code> | ||
| + | </div> | ||
| + | * **point-symbol-type** `enum`<div> | ||
| - | * **point-symbol-type** `enum` | + | //The symbol type is shown at the point position when the **point-type** is symbol. The type include circle, square, triangle, cross and star.// |
| - | + | ||
| - | Description: //The symbol type is shown at the point position when the **point-type** is symbol. The type include circle, square, triangle, cross and star.// | + | |
| Available Values: `circle` `square` `triangle` `cross` `star` | Available Values: `circle` `square` `triangle` `cross` `star` | ||
| Line 348: | Line 343: | ||
| "point-symbol-type": "square" | "point-symbol-type": "square" | ||
| </code> | </code> | ||
| + | </div> | ||
| + | * **point-type** `enum`<div> | ||
| - | * **point-type** `enum` | + | //The graphic type is shown at the point position. The type include symbol, image and glyph. symbol is a defined graphic; image is a picture and the glyph a user-defined special character set that works with "point-glyph-name"// |
| - | + | ||
| - | Description: //The graphic type is shown at the point position. The type include symbol, image and glyph. symbol is a defined graphic; image is a picture and the glyph a user-defined special character set that works with "point-glyph-name"// | + | |
| Available Values: `symbol` `image` `glyph` | Available Values: `symbol` `image` `glyph` | ||
| Line 359: | Line 354: | ||
| "point-type": "symbol" | "point-type": "symbol" | ||
| </code> | </code> | ||
| + | </div> | ||
| === Line === | === Line === | ||
| - | * **line-cap** `enum` | + | * **line-cap** `enum`<div> |
| - | Description: //The display of line endings.// | + | //The display of line endings.// |
| Default Value: `round` | Default Value: `round` | ||
| Available Values: `round` `butt` `square` | Available Values: `round` `butt` `square` | ||
| Line 373: | Line 368: | ||
| </code> | </code> | ||
| - | * **line-color** `string` | + | </div> |
| + | * **line-color** `string`<div> | ||
| - | Description: //The color of the drawn line.// | + | //The color of the drawn line.// |
| Default Value: `rgba(0,0,0,0)`, //(transparent)// | Default Value: `rgba(0,0,0,0)`, //(transparent)// | ||
| Line 382: | Line 378: | ||
| </code> | </code> | ||
| - | * **line-dasharray** `string` | + | </div> |
| + | * **line-dasharray** `string`<div> | ||
| - | Description: //Use a pair of length values [a,b] to set dash patterns, where (a) is the dash length and (b) is the gap length. You can set more values to achieve more complex patterns.// | + | //Use a pair of length values [a,b] to set dash patterns, where (a) is the dash length and (b) is the gap length. You can set more values to achieve more complex patterns.// |
| <code json> | <code json> | ||
| Line 391: | Line 388: | ||
| - | * **line-direction-image-size** `string` | + | </div> |
| + | * **line-direction-image-size** `string`<div> | ||
| - | Description: //the size of line direction image.// | + | //the size of line direction image.// |
| <code json> | <code json> | ||
| Line 399: | Line 397: | ||
| </code> | </code> | ||
| - | * **line-direction-image-uri** `string` | + | </div> |
| + | * **line-direction-image-uri** `string`<div> | ||
| - | Description: //Which kind of iamge are used to display line direction.// | + | //Which kind of iamge are used to display line direction.// |
| <code json> | <code json> | ||
| Line 407: | Line 406: | ||
| </code> | </code> | ||
| - | * **line-geometry-transform** `string` | + | </div> |
| + | * **line-geometry-transform** `string`<div> | ||
| - | Description: //Applies transformation functions to a geometry// | + | //Applies transformation functions to a geometry// |
| Default Value: `none`, //(geometry is not transformed)// | Default Value: `none`, //(geometry is not transformed)// | ||
| Available Values: `tranlate` `scale` `rotate` `skew` | Available Values: `tranlate` `scale` `rotate` `skew` | ||
| Line 417: | Line 417: | ||
| </code> | </code> | ||
| - | * **line-join** `enum` | + | </div> |
| + | * **line-join** `enum`<div> | ||
| - | Description: //The behavior of lines when joined on a map.// | + | //The behavior of lines when joined on a map.// |
| Default Value: `miter` | Default Value: `miter` | ||
| Available Values: `miter` `round` `bevel` | Available Values: `miter` `round` `bevel` | ||
| Line 427: | Line 428: | ||
| </code> | </code> | ||
| - | * **line-miterlimit** `number` | + | </div> |
| + | * **line-miterlimit** `number`<div> | ||
| - | Description: //The limit on the ratio of the miter length to the stroke-width. This is used to automatically convert miter joins to bevel joins for sharp angles, to avoid the miter extending beyond the thickness of the stroking path. Typically, this property does not need to be set. However, if you have jaggy artifacts during rendering, defining a larger value for this property helps.// | + | //The limit on the ratio of the miter length to the stroke-width. This is used to automatically convert miter joins to bevel joins for sharp angles, to avoid the miter extending beyond the thickness of the stroking path. Typically, this property does not need to be set. However, if you have jaggy artifacts during rendering, defining a larger value for this property helps.// |
| Defult Value: `4`, //(auto-convert miter joins to bevel joins when theta is less than 29 degrees)// | Defult Value: `4`, //(auto-convert miter joins to bevel joins when theta is less than 29 degrees)// | ||
| Line 436: | Line 438: | ||
| </code> | </code> | ||
| + | </div> | ||
| - | * **line-offset-x** `number` | + | * **line-offset-x** `number`<div> |
| - | Description: //The horizontal offset of drawn line. // | + | //The horizontal offset of drawn line. // |
| Default Value: `0` | Default Value: `0` | ||
| Line 446: | Line 449: | ||
| </code> | </code> | ||
| - | * **line-offset-y** `number` | + | </div> |
| + | * **line-offset-y** `number`<div> | ||
| - | Description: //The vertical offset of drawn line.// | + | //The vertical offset of drawn line.// |
| Default Value: `0` | Default Value: `0` | ||
| Line 455: | Line 459: | ||
| </code> | </code> | ||
| + | </div> | ||
| - | * **line-opacity** `number` | + | * **line-opacity** `number`<div> |
| - | Description: //The opacity of a line.// | + | //The opacity of a line.// |
| Default Value: `0`, //(the line is fully transparent)// | Default Value: `0`, //(the line is fully transparent)// | ||
| Available Values: `0` to `1` | Available Values: `0` to `1` | ||
| Line 467: | Line 472: | ||
| - | * **line-width** `number` | + | </div> |
| + | * **line-width** `number`<div> | ||
| - | Description: //The width of a line, in pixels.// | + | //The width of a line, in pixels.// |
| Default Value: `1` | Default Value: `1` | ||
| Line 476: | Line 482: | ||
| </code> | </code> | ||
| + | </div> | ||
| === Polygon === | === Polygon === | ||
| - | * **polygon-fill-color** `string` | + | * **polygon-fill-color** `string`<div> |
| - | Description: //Sets the fill color of the polygon.// | + | //Sets the fill color of the polygon.// |
| Default Value: `rgba(128,128,128,1)` //(completely opaque gray)// | Default Value: `rgba(128,128,128,1)` //(completely opaque gray)// | ||
| Line 487: | Line 494: | ||
| </code> | </code> | ||
| + | </div> | ||
| + | * **polygon-geometry-transform** `string`<div> | ||
| - | * **polygon-geometry-transform** `string` | + | //Defines the transform function for the geometry element.// |
| - | + | ||
| - | Description: //Defines the transform function for the geometry element.// | + | |
| Available Values: `translate` `scale` `rotate` `skew` | Available Values: `translate` `scale` `rotate` `skew` | ||
| Line 498: | Line 505: | ||
| </code> | </code> | ||
| - | * **polygon-offset-x** `number` | + | </div> |
| + | * **polygon-offset-x** `number`<div> | ||
| - | Description: //The horizontal offset of drawn graphic.// | + | //The horizontal offset of drawn graphic.// |
| Default Value: `0` | Default Value: `0` | ||
| Line 507: | Line 515: | ||
| </code> | </code> | ||
| - | * **polygon-offset-y** `number` | + | </div> |
| + | * **polygon-offset-y** `number`<div> | ||
| - | Description: //The vertical offset of drawn graphic.// | + | //The vertical offset of drawn graphic.// |
| Default Value: `0` | Default Value: `0` | ||
| Line 517: | Line 526: | ||
| - | * **polygon-opacity** `number` | + | </div> |
| + | * **polygon-opacity** `number`<div> | ||
| - | Description: //Control opacity factor of polygon color. (0 as completely transparent, 1 as completely opaque)// | + | //Control opacity factor of polygon color. (0 as completely transparent, 1 as completely opaque)// |
| Defult Value: `1` //(completely opaque)// | Defult Value: `1` //(completely opaque)// | ||
| Available Values: `0` to `1` | Available Values: `0` to `1` | ||
| Line 527: | Line 537: | ||
| </code> | </code> | ||
| - | * **polygon-shadow** `object` | + | </div> |
| + | * **polygon-shadow** `object`<div> | ||
| - | Description: //The style of the drawn polygon's shadow.// | + | //The style of the drawn polygon's shadow.// |
| <code json> | <code json> | ||
| Line 539: | Line 550: | ||
| </code> | </code> | ||
| + | </div> | ||
| === Text === | === Text === | ||
| - | * **text-align** `enum` | + | * **text-align** `enum`<div> |
| - | Description: //Sets the alignment of text.// | + | //Sets the alignment of text.// |
| Default Value: `center` | Default Value: `center` | ||
| Available Values: `left` `right` `center` | Available Values: `left` `right` `center` | ||
| Line 552: | Line 563: | ||
| </code> | </code> | ||
| + | </div> | ||
| + | * **text-allow-overlapping** `boolean`<div> | ||
| - | * **text-allow-overlapping** `boolean` | + | //Allows overlap with other text or icons.// |
| - | + | ||
| - | Description: //Allows overlap with other text or icons.// | + | |
| Default Value: `flase` | Default Value: `flase` | ||
| Line 562: | Line 573: | ||
| </code> | </code> | ||
| + | </div> | ||
| + | * **text-baseline** `enum`<div> | ||
| - | * **text-baseline** `enum` | + | //Sets the current text baseline when the text is drawn.// |
| - | + | ||
| - | Description: //Sets the current text baseline when the text is drawn.// | + | |
| Default Value: `middle` | Default Value: `middle` | ||
| Available Values: `bottom` `top` `middle` `alphabetic` `hanging` `ideographic` | Available Values: `bottom` `top` `middle` `alphabetic` `hanging` `ideographic` | ||
| Line 573: | Line 584: | ||
| </code> | </code> | ||
| + | </div> | ||
| + | * **text-base-point-style** `object`<div> | ||
| - | * **text-base-point-style** `object` | + | //a point style to display the base point.// |
| - | + | ||
| - | Description: //a point style to display the base point.// | + | |
| <code json> | <code json> | ||
| Line 590: | Line 601: | ||
| } | } | ||
| </code> | </code> | ||
| + | </div> | ||
| + | * **text-content** `string`<div> | ||
| - | * **text-content** `string` | + | //Sets the text displayed on the text lable. You can specify the data field you want to use by using the field name enclosed in brackets, for example: {name_en}.// |
| - | + | ||
| - | Description: //Sets the text displayed on the text lable. You can specify the data field you want to use by using the field name enclosed in brackets, for example: {name_en}.// | + | |
| <code json> | <code json> | ||
| Line 599: | Line 610: | ||
| </code> | </code> | ||
| + | </div> | ||
| + | * **text-date-format** `string`<div> | ||
| - | * **text-date-format** `string` | + | //Sets a format expression for date value when the type of value is numeric.// |
| - | + | ||
| - | Description: //Sets a format expression for date value when the type of value is numeric.// | + | |
| <code json> | <code json> | ||
| Line 608: | Line 619: | ||
| </code> | </code> | ||
| + | </div> | ||
| + | * **text-fill-color** `string`<div> | ||
| - | * **text-fill-color** `string` | + | //Set the color of the text lable.// |
| - | + | ||
| - | Description: //Set the color of the text lable.// | + | |
| Default Value: `#000000` //(black)// | Default Value: `#000000` //(black)// | ||
| Line 618: | Line 629: | ||
| </code> | </code> | ||
| + | </div> | ||
| + | * **text-font** `string`<div> | ||
| - | * **text-font** `string` | + | //Sets the current font property of the text content.// |
| - | + | ||
| - | Description: //Sets the current font property of the text content.// | + | |
| <code json> | <code json> | ||
| Line 627: | Line 638: | ||
| </code> | </code> | ||
| - | * **text-force-horizontal-for-line** `boolean` | + | </div> |
| + | * **text-force-horizontal-for-line** `boolean`<div> | ||
| - | Description: //Sets the force horizontal of the text for line.// | + | //Sets the force horizontal of the text for line.// |
| Default Value: `0` | Default Value: `0` | ||
| Available Values: `1` `0` | Available Values: `1` `0` | ||
| Line 637: | Line 649: | ||
| </code> | </code> | ||
| + | </div> | ||
| + | * **text-halo-color** `string`<div> | ||
| - | * **text-halo-color** `string` | + | //Sets the halo color on the text edge.// |
| - | + | ||
| - | Description: //Sets the halo color on the text edge.// | + | |
| Default Value: `#FFFFFF`, //(white)// | Default Value: `#FFFFFF`, //(white)// | ||
| Line 647: | Line 659: | ||
| </code> | </code> | ||
| + | </div> | ||
| + | * **text-halo-radius** `number`<div> | ||
| - | * **text-halo-radius** `number` | + | //Sets the radius of the halo, in pixels.// |
| - | + | ||
| - | Description: //Sets the radius of the halo, in pixels.// | + | |
| Default Value: `0`, //(no halo is applied)// | Default Value: `0`, //(no halo is applied)// | ||
| Line 657: | Line 669: | ||
| </code> | </code> | ||
| - | * **text-interval-distance** `number` | + | </div> |
| + | * **text-interval-distance** `number`<div> | ||
| - | Description: //Sets the interval distancebetween text lables which along line.// | + | //Sets the interval distancebetween text lables which along line.// |
| <code json> | <code json> | ||
| Line 665: | Line 678: | ||
| </code> | </code> | ||
| - | * **text-letter-case** `enum` | + | </div> |
| + | * **text-letter-case** `enum`<div> | ||
| - | Description: //Sets the type of letter case.// | + | //Sets the type of letter case.// |
| Default Value: `default` | Default Value: `default` | ||
| Availabel Values: `default` `uppercase` `lowercase` | Availabel Values: `default` `uppercase` `lowercase` | ||
| Line 675: | Line 689: | ||
| </code> | </code> | ||
| - | * **text-letter-spacing** `number` | + | </div> |
| + | * **text-letter-spacing** `number`<div> | ||
| - | Description: //Sets the width of letter spacing.// | + | //Sets the width of letter spacing.// |
| <code json> | <code json> | ||
| Line 683: | Line 698: | ||
| </code> | </code> | ||
| - | * **text-line-spacing** `number` | + | </div> |
| + | * **text-line-spacing** `number`<div> | ||
| - | Description: //Sets the width of line spacing.// | + | //Sets the width of line spacing.// |
| <code json> | <code json> | ||
| Line 691: | Line 707: | ||
| </code> | </code> | ||
| + | </div> | ||
| + | * **text-mask-color** `string`<div> | ||
| - | * **text-mask-color** `string` | + | //Sets the color of mask fill.// |
| - | + | ||
| - | Description: //Sets the color of mask fill.// | + | |
| <code json> | <code json> | ||
| Line 700: | Line 716: | ||
| </code> | </code> | ||
| - | * **text-mask-margin** `string` | + | </div> |
| + | * **text-mask-margin** `string`<div> | ||
| - | Description: //Sets the 4 distance of mask margin, in pixels.// | + | //Sets the 4 distance of mask margin, in pixels.// |
| Default Value: `0,0,0,0` | Default Value: `0,0,0,0` | ||
| Line 709: | Line 726: | ||
| </code> | </code> | ||
| - | * **text-mask-outline-color** `string` | + | </div> |
| + | * **text-mask-outline-color** `string`<div> | ||
| - | Description: //Sets the color of mask outline.// | + | //Sets the color of mask outline.// |
| <code json> | <code json> | ||
| Line 717: | Line 735: | ||
| </code> | </code> | ||
| - | * **text-mask-outline-width** `number` | + | </div> |
| + | * **text-mask-outline-width** `number`<div> | ||
| - | Description: //Sets the width of mask outline, in pixels.// | + | //Sets the width of mask outline, in pixels.// |
| Default Value:`0` | Default Value:`0` | ||
| Line 726: | Line 745: | ||
| </code> | </code> | ||
| - | * **text-mask-type** `enum` | + | </div> |
| + | * **text-mask-type** `enum`<div> | ||
| - | Description: //Sets the type of text mask.// | + | //Sets the type of text mask.// |
| Available Values: `default` `rectangle` `roundedCorners` `roundedEnds` `circle` | Available Values: `default` `rectangle` `roundedCorners` `roundedEnds` `circle` | ||
| Line 735: | Line 755: | ||
| </code> | </code> | ||
| - | * **text-max-char-angle-delta** `number` | + | </div> |
| + | * **text-max-char-angle-delta** `number`<div> | ||
| - | Description: //For line feature, allow a maximum angle between adjacent characters, the expected value is in radians.// | + | //For line feature, allow a maximum angle between adjacent characters, the expected value is in radians.// |
| Default Value: `2p` | Default Value: `2p` | ||
| Available Values: `0` to `2p` | Available Values: `0` to `2p` | ||
| Line 745: | Line 766: | ||
| </code> | </code> | ||
| - | * **text-numeric-format** `string` | + | </div> |
| + | * **text-numeric-format** `string`<div> | ||
| - | Description: //Sets a numeric format expression for number value.// | + | //Sets a numeric format expression for number value.// |
| <code json> | <code json> | ||
| "text-numeric-format": "en-US, style: currency, currency: USD" | "text-numeric-format": "en-US, style: currency, currency: USD" | ||
| </code> | </code> | ||
| + | </div> | ||
| + | * **text-offset-x** `number`<div> | ||
| - | * **text-offset-x** `number` | + | //Sets the horizontal offset of the text, in pixels. A positive value shifts the text to the right.// |
| - | + | ||
| - | Description: //Sets the horizontal offset of the text, in pixels. A positive value shifts the text to the right.// | + | |
| Default Value: `0` | Default Value: `0` | ||
| Line 761: | Line 783: | ||
| "text-offset-x": 10 | "text-offset-x": 10 | ||
| </code> | </code> | ||
| + | </div> | ||
| + | * **text-offset-y** `number`<div> | ||
| - | * **text-offset-y** `number` | + | //Sets the vertical offset of the text, in pixel. A positive value shifts the text down.// |
| - | + | ||
| - | Description: //Sets the vertical offset of the text, in pixel. A positive value shifts the text down.// | + | |
| Default Value: `0` | Default Value: `0` | ||
| Line 770: | Line 792: | ||
| "text-offset-y": 10 | "text-offset-y": 10 | ||
| </code> | </code> | ||
| + | </div> | ||
| + | * **text-opacity** `number`<div> | ||
| - | * **text-opacity** `number` | + | //Set the opacity of text lable.// |
| - | + | ||
| - | Description: //Set the opacity of text lable.// | + | |
| Default Value: `1`, //(fully opaque)// | Default Value: `1`, //(fully opaque)// | ||
| Available Values: `0` to `1` | Available Values: `0` to `1` | ||
| Line 780: | Line 802: | ||
| "text-opacity": 1 | "text-opacity": 1 | ||
| </code> | </code> | ||
| + | </div> | ||
| + | * **text-placement** `string`<div> | ||
| - | * **text-placement** `string` | + | // you can use this property to set the avoidance algorithm for text lables.// |
| - | + | ||
| - | Description: // you can use this property to set the avoidance algorithm for text lables.// | + | |
| Default Value: `center`, | Default Value: `center`, | ||
| Available Values: `upper` `right` `lower` `left` `center` | Available Values: `upper` `right` `lower` `left` `center` | ||
| Line 790: | Line 812: | ||
| "text-placements": "upper" | "text-placements": "upper" | ||
| </code> | </code> | ||
| + | </div> | ||
| + | * **text-rotate-angle** `number`<div> | ||
| - | * **text-rotate-angle** `number` | + | //Rotation in radians (positive rotation clockwise).// |
| - | + | ||
| - | Description: //Rotation in radians (positive rotation clockwise).// | + | |
| Default Value: `0` | Default Value: `0` | ||
| Available Values: `0` to `2*PI` | Available Values: `0` to `2*PI` | ||
| Line 800: | Line 822: | ||
| "text-rotate-angle": 2 | "text-rotate-angle": 2 | ||
| </code> | </code> | ||
| + | </div> | ||
| + | * **text-spacing** `number`<div> | ||
| - | * **text-spacing** `number` | + | //Sets the space between two text lables drawn on a line, in pixels.// |
| - | + | ||
| - | Description: //Sets the space between two text lables drawn on a line, in pixels.// | + | |
| Default Value: `0` | Default Value: `0` | ||
| Line 809: | Line 831: | ||
| "text-spacing": 0 | "text-spacing": 0 | ||
| </code> | </code> | ||
| + | </div> | ||
| + | * **text-wrap-width** `number`<div> | ||
| - | * **text-wrap-width** `number` | + | //The length of characters that appears before the text-name lable wraps.// |
| - | + | ||
| - | Description: //The length of characters that appears before the text-name lable wraps.// | + | |
| Default Value: `0` | Default Value: `0` | ||
| Line 820: | Line 842: | ||
| + | </div> | ||
| ==== Sources ==== | ==== Sources ==== | ||
| Line 832: | Line 855: | ||
| ] | ] | ||
| </code> | </code> | ||
| - | === id === | + | * ** id **<div>//Required// `string` |
| - | + | ||
| - | //Required// `string` | + | |
| A map rendered data source's unique identifier. | A map rendered data source's unique identifier. | ||
| + | </div> | ||
| - | === url === | + | * ** url **<div>//Required// `string` |
| - | + | ||
| - | //Required// `string` | + | |
| The address of the data requested from the server. | The address of the data requested from the server. | ||
| + | </div> | ||
| - | === type === | + | * ** type **<div>//Required// `string` |
| - | + | ||
| - | //Required// `string` | + | |
| The commonly used geospatial file formats of feature source,for example : JSONFeature, MVT, TextFeature and XMLFeature. But it only support "MVT" now. | The commonly used geospatial file formats of feature source,for example : JSONFeature, MVT, TextFeature and XMLFeature. But it only support "MVT" now. | ||
| + | </div> | ||
| ==== map-layers ==== | ==== map-layers ==== | ||
| Line 864: | Line 884: | ||
| </code> | </code> | ||
| - | === map-layer-id=== | + | * **map-layer-id **<div> |
| //Required// `string` | //Required// `string` | ||
| A layer's unique identifier. | A layer's unique identifier. | ||
| + | </div> | ||
| - | === source === | + | * **source **<div> |
| //Optional// `string` | //Optional// `string` | ||
| Line 876: | Line 897: | ||
| A source's unique identifier which has existed of sources. Or it is passed in by JavaScript code with class ol.thinkgeo.VectorTileSource. | A source's unique identifier which has existed of sources. Or it is passed in by JavaScript code with class ol.thinkgeo.VectorTileSource. | ||
| - | === style-drawing-order === | + | </div> |
| + | * **style-drawing-order **<div> | ||
| //Required// `array` | //Required// `array` | ||
| Line 882: | Line 904: | ||
| Some of map rendered styles' unique identifier. Styles will be drawn in the order of array. | Some of map rendered styles' unique identifier. Styles will be drawn in the order of array. | ||
| + | </div> | ||
thinkgeo_stylejson/v2.1579423935.txt.gz · Last modified: 2020/01/19 08:52 by johnnyz