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:32] 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 67: | Line 67: | ||
| === Example === | === Example === | ||
| - | The following example map is created with styleJson.TODO: update screenshot | + | The following example map is created with styleJson. |
| [[https://maps.thinkgeo.com|{{worldstreets_v2.png|StyleJSON Map}}]] | [[https://maps.thinkgeo.com|{{worldstreets_v2.png|StyleJSON Map}}]] | ||
| - | * **styleJson object** | + | * **styleJson object**<div>A styleJson declaration format consists of the following elements: |
| - | + | ||
| - | A styleJson declaration format consists of the following elements: | + | |
| <code json> | <code json> | ||
| Line 87: | Line 85: | ||
| } | } | ||
| </code> | </code> | ||
| - | + | </div> | |
| - | * **version** | + | * **version**<div>//Required// `float` |
| - | + | ||
| - | //Required// `float` | + | |
| JSON Map CSS specification version number. | JSON Map CSS specification version number. | ||
| - | + | </div> | |
| - | * **owner** | + | * **owner**<div>//Optional// `string` |
| - | + | ||
| - | //Optional// `string` | + | |
| This JSON Map CSS belongs to someone, company or organization. | This JSON Map CSS belongs to someone, company or organization. | ||
| + | </div> | ||
| - | * **time** | + | * **time**<div>//Optional// `string` |
| - | + | ||
| - | //Optional// `string` | + | |
| This JSON Map CSS when to be created. | This JSON Map CSS when to be created. | ||
| + | </div> | ||
| - | * background | + | * **background**<div>Set the map's background color. |
| - | + | </div> | |
| - | Set the map's background color. | + | |
| - | + | ||
| - | * **variables** | + | |
| - | //Optional// `object` | + | * **variables**<div>//Optional// `object` |
| All variables must be defined in this property and their name must begin with @. | All variables must be defined in this property and their name must begin with @. | ||
| Line 125: | Line 116: | ||
| </code> | </code> | ||
| - | * **styles** | + | </div> |
| - | + | * **styles**<div>//Required// `array` | |
| - | //Required// `array` | + | |
| Define all map rendered styles. They include point, line, polygon, text etc. | Define all map rendered styles. They include point, line, polygon, text etc. | ||
| + | </div> | ||
| - | * **sources** | + | * **sources**<div>//Optional// `array` |
| - | + | ||
| - | //Optional// `array` | + | |
| Define all map data sources, | Define all map data sources, | ||
| + | </div> | ||
| - | * **map-layers** | + | * **map-layers**<div>//Required// `array` |
| - | + | ||
| - | //Required// `array` | + | |
| 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. | ||
| + | |||
| **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 157: | 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` | + | |
| - | + | ||
| - | Select some data which is need to render map. | + | |
| - | + | ||
| - | * **z-index-atrribute-name** | + | |
| - | + | ||
| - | //Optional// `string` | + | |
| - | Map data would be sorted by this column's value. | + | * **z-index-atrribute-name**<div>//Optional// `string` |
| - | * **styles** | + | Map data would be sorted by this column's value.</div> |
| - | //Require// `array` | + | * **styles**<div>//Require// `array` |
| Some specific map rendered styles. | Some specific map rendered styles. | ||
| Line 199: | 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 210: | 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 227: | 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 246: | 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 255: | 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 282: | 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 291: | 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 300: | 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 311: | 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 330: | 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 339: | 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 348: | 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 359: | 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 370: | 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 384: | 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 393: | 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 402: | 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 410: | 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 418: | 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 428: | 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 438: | 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 447: | 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 457: | 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 466: | 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 478: | 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 487: | 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 498: | 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 509: | 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 518: | 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 528: | 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 538: | 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 550: | 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 563: | 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 573: | 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 584: | 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 601: | 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 610: | 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 619: | 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 629: | 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 638: | 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 648: | 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 658: | 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 668: | 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 676: | 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 686: | 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 694: | 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 702: | 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 711: | 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 720: | 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 728: | 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 737: | 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 746: | 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 756: | 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 772: | 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 781: | 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 791: | 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 801: | 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 811: | 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 820: | 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 831: | Line 842: | ||
| + | </div> | ||
| ==== Sources ==== | ==== Sources ==== | ||
| Line 843: | 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 875: | 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 887: | 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 893: | 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.1579422736.txt.gz · Last modified: 2020/01/19 08:32 by johnnyz