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 09:12] johnnyz [Styles] |
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 187: | Line 187: | ||
* **point-allow-overlapping** `boolean`<div> | * **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 196: | Line 196: | ||
* **point-fill-color** `string`<div> | * **point-fill-color** `string`<div> | ||
- | Description: //A defined fill color of symbol or glyph.// | + | //A defined fill color of symbol or glyph.// |
<code json> | <code json> | ||
Line 204: | Line 204: | ||
* **point-glyph-content** `string`<div> | * **point-glyph-content** `string`<div> | ||
- | Description: //A defined glyph name that renders how a point appears.// | + | //A defined glyph name that renders how a point appears.// |
<code json> | <code json> | ||
Line 213: | Line 213: | ||
* **point-glyph-font-name** `string`<div> | * **point-glyph-font-name** `string`<div> | ||
- | Description: //A defined glyph type that renders how a point appears.// | + | //A defined glyph type that renders how a point appears.// |
<code json> | <code json> | ||
Line 223: | Line 223: | ||
* **point-mask-color** `string`<div> | * **point-mask-color** `string`<div> | ||
- | Description: //Sets the color of mask fill.// | + | //Sets the color of mask fill.// |
<code json> | <code json> | ||
Line 233: | Line 233: | ||
* **point-mask-margin** `string`<div> | * **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 243: | Line 243: | ||
* **point-mask-outline-color** `string`<div> | * **point-mask-outline-color** `string`<div> | ||
- | Description: //Sets the color of mask outline.// | + | //Sets the color of mask outline.// |
<code json> | <code json> | ||
Line 252: | Line 252: | ||
* **point-mask-outline-width** `number`<div> | * **point-mask-outline-width** `number`<div> | ||
- | Description: //Sets the width of mask outline, in pixels.// | + | //Sets the width of mask outline, in pixels.// |
<code json> | <code json> | ||
Line 260: | Line 260: | ||
* **point-mask-type** `enum`<div> | * **point-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 269: | Line 269: | ||
* **point-offset-x** `number`<div> | * **point-offset-x** `number`<div> | ||
- | Description: //The horizontal offset of drawn graphic. // | + | //The horizontal offset of drawn graphic. // |
Default Value: `0` | Default Value: `0` | ||
Line 278: | Line 278: | ||
* **point-offset-y** `number`<div> | * **point-offset-y** `number`<div> | ||
- | Description: //The vertical offset of drawn graphic.// | + | //The vertical offset of drawn graphic.// |
Default Value: `0` | Default Value: `0` | ||
Line 288: | Line 288: | ||
* **point-opacity** `number`<div> | * **point-opacity** `number`<div> | ||
- | Description: //Sets the overall opacity of the point.// | + | //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 299: | Line 299: | ||
* **point-outline-color** `string`<div> | * **point-outline-color** `string`<div> | ||
- | Description: //A defined outline color of symbol or glyph.// | + | //A defined outline color of symbol or glyph.// |
<code json> | <code json> | ||
Line 308: | Line 308: | ||
* **point-outline-width** `number`<div> | * **point-outline-width** `number`<div> | ||
- | Description: //A defined outline width of symbol or glyph.// | + | //A defined outline width of symbol or glyph.// |
Default Value: `0` | Default Value: `0` | ||
Line 315: | Line 315: | ||
</code> | </code> | ||
</div> | </div> | ||
- | * **point-rotation-angle** `number`<div> | + | * **point-rotation-angle** `number`<div> |
- | Description: //A defined rotate angle that how a point appears.// | + | //A defined rotate angle that how a point appears.// |
Default Value: `0` | Default Value: `0` | ||
Line 324: | Line 324: | ||
</code> | </code> | ||
</div> | </div> | ||
- | * **point-size** `number`<div> | + | * **point-size** `number`<div> |
- | Description: //A defined size of symbol or glyph.// | + | //A defined size of symbol or glyph.// |
Default Value: `1` | Default Value: `1` | ||
Line 337: | Line 337: | ||
* **point-symbol-type** `enum`<div> | * **point-symbol-type** `enum`<div> | ||
- | 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.// | + | //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 348: | ||
* **point-type** `enum`<div> | * **point-type** `enum`<div> | ||
- | 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"// | + | //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 360: | Line 360: | ||
* **line-cap** `enum`<div> | * **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 371: | Line 371: | ||
* **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 381: | Line 381: | ||
* **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 391: | ||
* **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 400: | Line 400: | ||
* **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 409: | Line 409: | ||
* **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 420: | Line 420: | ||
* **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 431: | Line 431: | ||
* **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 442: | Line 442: | ||
* **line-offset-x** `number`<div> | * **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 452: | Line 452: | ||
* **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 463: | Line 463: | ||
* **line-opacity** `number`<div> | * **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 475: | Line 475: | ||
* **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 487: | ||
* **polygon-fill-color** `string`<div> | * **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 498: | ||
* **polygon-geometry-transform** `string`<div> | * **polygon-geometry-transform** `string`<div> | ||
- | Description: //Defines the transform function for the geometry element.// | + | //Defines the transform function for the geometry element.// |
Available Values: `translate` `scale` `rotate` `skew` | Available Values: `translate` `scale` `rotate` `skew` | ||
Line 508: | Line 508: | ||
* **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 518: | ||
* **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 529: | Line 529: | ||
* **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 540: | Line 540: | ||
* **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 555: | Line 555: | ||
* **text-align** `enum`<div> | * **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 566: | Line 566: | ||
* **text-allow-overlapping** `boolean`<div> | * **text-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 576: | Line 576: | ||
* **text-baseline** `enum`<div> | * **text-baseline** `enum`<div> | ||
- | Description: //Sets the current text baseline when the text is drawn.// | + | //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 587: | Line 587: | ||
* **text-base-point-style** `object`<div> | * **text-base-point-style** `object`<div> | ||
- | Description: //a point style to display the base point.// | + | //a point style to display the base point.// |
<code json> | <code json> | ||
Line 604: | Line 604: | ||
* **text-content** `string`<div> | * **text-content** `string`<div> | ||
- | 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}.// | + | //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 613: | Line 613: | ||
* **text-date-format** `string`<div> | * **text-date-format** `string`<div> | ||
- | Description: //Sets a format expression for date value when the type of value is numeric.// | + | //Sets a format expression for date value when the type of value is numeric.// |
<code json> | <code json> | ||
Line 622: | Line 622: | ||
* **text-fill-color** `string`<div> | * **text-fill-color** `string`<div> | ||
- | Description: //Set the color of the text lable.// | + | //Set the color of the text lable.// |
Default Value: `#000000` //(black)// | Default Value: `#000000` //(black)// | ||
Line 632: | Line 632: | ||
* **text-font** `string`<div> | * **text-font** `string`<div> | ||
- | Description: //Sets the current font property of the text content.// | + | //Sets the current font property of the text content.// |
<code json> | <code json> | ||
Line 641: | Line 641: | ||
* **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 652: | Line 652: | ||
* **text-halo-color** `string`<div> | * **text-halo-color** `string`<div> | ||
- | Description: //Sets the halo color on the text edge.// | + | //Sets the halo color on the text edge.// |
Default Value: `#FFFFFF`, //(white)// | Default Value: `#FFFFFF`, //(white)// | ||
Line 662: | Line 662: | ||
* **text-halo-radius** `number`<div> | * **text-halo-radius** `number`<div> | ||
- | Description: //Sets the radius of the halo, in pixels.// | + | //Sets the radius of the halo, in pixels.// |
Default Value: `0`, //(no halo is applied)// | Default Value: `0`, //(no halo is applied)// | ||
Line 672: | Line 672: | ||
* **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 681: | Line 681: | ||
* **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 692: | Line 692: | ||
* **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 701: | Line 701: | ||
* **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 710: | Line 710: | ||
* **text-mask-color** `string`<div> | * **text-mask-color** `string`<div> | ||
- | Description: //Sets the color of mask fill.// | + | //Sets the color of mask fill.// |
<code json> | <code json> | ||
Line 719: | Line 719: | ||
* **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 729: | Line 729: | ||
* **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 738: | Line 738: | ||
* **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 748: | Line 748: | ||
* **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 758: | Line 758: | ||
* **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 769: | Line 769: | ||
* **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> | ||
Line 777: | Line 777: | ||
* **text-offset-x** `number`<div> | * **text-offset-x** `number`<div> | ||
- | Description: //Sets the horizontal offset of the text, in pixels. A positive value shifts the text to the right.// | + | //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 786: | Line 786: | ||
* **text-offset-y** `number`<div> | * **text-offset-y** `number`<div> | ||
- | Description: //Sets the vertical offset of the text, in pixel. A positive value shifts the text down.// | + | //Sets the vertical offset of the text, in pixel. A positive value shifts the text down.// |
Default Value: `0` | Default Value: `0` | ||
Line 795: | Line 795: | ||
* **text-opacity** `number`<div> | * **text-opacity** `number`<div> | ||
- | Description: //Set the opacity of text lable.// | + | //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 805: | Line 805: | ||
* **text-placement** `string`<div> | * **text-placement** `string`<div> | ||
- | Description: // you can use this property to set the avoidance algorithm for text lables.// | + | // 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 815: | Line 815: | ||
* **text-rotate-angle** `number`<div> | * **text-rotate-angle** `number`<div> | ||
- | Description: //Rotation in radians (positive rotation clockwise).// | + | //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 825: | Line 825: | ||
* **text-spacing** `number`<div> | * **text-spacing** `number`<div> | ||
- | Description: //Sets the space between two text lables drawn on a line, in pixels.// | + | //Sets the space between two text lables drawn on a line, in pixels.// |
Default Value: `0` | Default Value: `0` | ||
Line 834: | Line 834: | ||
* **text-wrap-width** `number`<div> | * **text-wrap-width** `number`<div> | ||
- | Description: //The length of characters that appears before the text-name lable wraps.// | + | //The length of characters that appears before the text-name lable wraps.// |
Default Value: `0` | Default Value: `0` | ||
Line 855: | 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 887: | 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 899: | 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 905: | 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> |