Differences

This shows you the differences between two versions of the page.

--- thinkgeo_stylejson:v2 [2020/01/19 08:04]
johnnyz [ThinkGeo StyleJSON Schema]
+++ 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 8: / Line 8: @@
 StyleJSON is a describable [cartographic](https://en.wikipedia.org/wiki/Cartography) styling language in the [JSON](http://www.json.org/) format, which is similar to working with a Cascading Style Sheet (CSS) for styling web-pages. It defines the visual appearance of a map - what data should be drawn, he order to draw it in, and how to style the data when drawing it. Taking advantage of StyleJSON will allow you to add a great-looking map to your project in minutes, a browser, a phone, a tablet, or even a watch.
-The intended audience of this specification includes:
-  - 1. How to install the ThinkGeo "World Street Styles".
-  - 2. "StyleJson" schema
 </markdown>
+The intended audience of this specification includes:
+  * [[v2#install_world_streets_styles|How to install the ThinkGeo "World Street Styles"]]
+  * [[v2#stylejson_schema|"StyleJson" schema]]
 ===== Install World Streets Styles =====
@@ Line 23: / Line 23: @@
 <code JavaScript>
-<--Light Style--> TODO:new cdn url
+<--Light Style-->
-<script src="https://cdn.thinkgeo.com/worldstreets-styles/1.0.0/light.json"></script>
+<script src="https://cdn.thinkgeo.com/worldstreets-styles/4.0.0/light.json"></script>
-<--Dark Style--> TODO:new cdn url
+<--Dark Style-->
-<script src="https://cdn.thinkgeo.com/worldstreets-styles/1.0.0/dark.json"></script>
+<script src="https://cdn.thinkgeo.com/worldstreets-styles/4.0.0/dark.json"></script>
-<--Transparent Background Style--> TODO:new cdn url
+<--Transparent Background Style-->
-<script src="https://cdn.thinkgeo.com/worldstreets-styles/1.0.0/transparent-background.json"></script>
+<script src="https://cdn.thinkgeo.com/worldstreets-styles/4.0.0/transparent-background.json"></script>
-<--Cobalt Style--> TODO:new cdn url
+<--Cobalt Style-->
-<script src="https://cdn.thinkgeo.com/worldstreets-styles/1.0.0/cobalt.json"></script>
+<script src="https://cdn.thinkgeo.com/worldstreets-styles/4.0.0/cobalt.json"></script>
-<--Grayscale Style--> TODO:new cdn url
+<--Grayscale Style-->
-<script src="https://cdn.thinkgeo.com/worldstreets-styles/1.0.0/grayscale.json"></script>
+<script src="https://cdn.thinkgeo.com/worldstreets-styles/4.0.0/grayscale.json"></script>
-<--Muted Blue Style--> TODO:new cdn url
+<--Muted Blue Style-->
-<script src="https://cdn.thinkgeo.com/worldstreets-styles/1.0.0/mutedblue.json"></script>
+<script src="https://cdn.thinkgeo.com/worldstreets-styles/4.0.0/mutedblue.json"></script>
-<--Sepia Style--> TODO:new cdn url
+<--Sepia Style-->
-<script src="https://cdn.thinkgeo.com/worldstreets-styles/1.0.0/oldancient.json"></script>
+<script src="https://cdn.thinkgeo.com/worldstreets-styles/4.0.0/oldancient.json"></script>
 </code>
@@ Line 48: / Line 48: @@
 ==== NPM ====
-  * Install the package:
+Install the package:
 <code JavaScript>
-TODO: check the npm command
 npm i worldstreets-styles
 </code>
@@ Line 68: / Line 67: @@
 === Example ===
-The following example map is created with styleJson.TODO: update screenshot
+The following example map is created with styleJson.
-[[https://maps.thinkgeo.com|{{stylejson-sample.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>
@@ Line 88: / Line 85: @@
 }
 </code>
+</div>
-  * **version**
+  * **version**<div>//Required// `float`
-//Required// `float`
 JSON Map CSS specification version number.
+</div>
-  * **owner**
+  * **owner**<div>//Optional// `string`
-//Optional// `string`
 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.
+</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 @.
@@ Line 126: / Line 116: @@
 </code>
-  * **styles**
+</div>
+  * **styles**<div>//Required// `array`
-//Required// `array`
 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,
+</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.
+</div>
 ==== Styles ====
@@ Line 158: / Line 148: @@
 </code>
-    * **id**
+    * **id**<div>//Required// `string`
-//Required// `string`
 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.
-    * **z-index-atrribute-name**
-//Optional// `string`
-Map data would be sorted by this column's value.
-    * **styles**
+Map data would be sorted by this column's value.</div>
-//Require// `array`
+    * **styles**<div>//Require// `array`
 Some specific map rendered styles.
@@ Line 200: / Line 182: @@
        ]
 </code>
+</div>
 === 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`
@@ Line 211: / Line 193: @@
 "point-allow-overlapping": false
 </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>
 "point-fill": "#fff"
 </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>
@@ Line 228: / Line 210: @@
 </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>
 "point-glyph-font-name": "vectormap-icons"
 </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>
@@ Line 247: / Line 229: @@
 </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`
@@ Line 256: / Line 239: @@
 "point-mask-margin": "1,1,1,1"
 </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>
 "point-mask-outline-color": "#000"
 </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>
 "point-mask-outline-width": 3
 </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`
@@ Line 283: / Line 266: @@
 "point-mask-type": "circle"
 </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`
@@ Line 292: / Line 275: @@
 "point-offset-x": 3
 </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`
@@ Line 301: / Line 284: @@
 "point-offset-y": 3
 </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.//
 Available Values: `0` to `1`
@@ Line 312: / Line 295: @@
 "point-opacity": 1
 </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>
 "point-outline-color": "#000"
 </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`
@@ Line 331: / Line 314: @@
 "point-outline-width": 1
 </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`
@@ Line 340: / Line 323: @@
 "point-rotation-angle": 90
 </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`
@@ Line 349: / Line 332: @@
 "point-size": 9
 </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`
@@ Line 360: / Line 343: @@
 "point-symbol-type": "square"
 </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`
@@ Line 371: / Line 354: @@
 "point-type": "symbol"
 </code>
+</div>
 === Line ===
-  * **line-cap** `enum`
+  * **line-cap** `enum`<div>
-Description: //The display of line endings.//
+//The display of line endings.//
 Default Value: `round`
 Available Values: `round` `butt` `square`
@@ Line 385: / Line 368: @@
 </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)//
@@ Line 394: / Line 378: @@
 </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>
@@ Line 403: / 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>
@@ Line 411: / Line 397: @@
 </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>
@@ Line 419: / Line 406: @@
 </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)//
 Available Values: `tranlate` `scale` `rotate` `skew`
@@ Line 429: / Line 417: @@
 </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`
 Available Values: `miter` `round` `bevel`
@@ Line 439: / Line 428: @@
 </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)//
@@ Line 448: / Line 438: @@
 </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`
@@ Line 458: / Line 449: @@
 </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`
@@ Line 467: / Line 459: @@
 </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)//
 Available Values: `0` to `1`
@@ Line 479: / 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`
@@ Line 488: / Line 482: @@
 </code>
+</div>
 === 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)//
@@ Line 499: / Line 494: @@
 </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`
@@ Line 510: / Line 505: @@
 </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`
@@ Line 519: / Line 515: @@
 </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`
@@ Line 529: / 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)//
 Available Values: `0` to `1`
@@ Line 539: / Line 537: @@
 </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>
@@ Line 551: / Line 550: @@
 </code>
+</div>
 === Text ===
-  * **text-align** `enum`
+  * **text-align** `enum`<div>
-Description: //Sets the alignment of text.//
+//Sets the alignment of text.//
 Default Value: `center`
 Available Values: `left` `right` `center`
@@ Line 564: / Line 563: @@
 </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`
@@ Line 574: / Line 573: @@
 </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`
 Available Values: `bottom` `top` `middle` `alphabetic` `hanging` `ideographic`
@@ Line 585: / Line 584: @@
 </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>
@@ Line 602: / Line 601: @@
       }
 </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>
@@ Line 611: / Line 610: @@
 </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>
@@ Line 620: / Line 619: @@
 </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)//
@@ Line 630: / Line 629: @@
 </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>
@@ Line 639: / Line 638: @@
 </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`
 Available Values: `1` `0`
@@ Line 649: / Line 649: @@
 </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)//
@@ Line 659: / Line 659: @@
 </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)//
@@ Line 669: / Line 669: @@
 </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>
@@ Line 677: / Line 678: @@
 </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`
 Availabel Values: `default` `uppercase` `lowercase`
@@ Line 687: / Line 689: @@
 </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>
@@ Line 695: / Line 698: @@
 </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>
@@ Line 703: / Line 707: @@
 </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>
@@ Line 712: / Line 716: @@
 </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`
@@ Line 721: / Line 726: @@
 </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>
@@ Line 729: / Line 735: @@
 </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`
@@ Line 738: / Line 745: @@
 </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`
@@ Line 747: / Line 755: @@
 </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`
 Available Values: `0` to `2p`
@@ Line 757: / Line 766: @@
 </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>
 "text-numeric-format": "en-US, style: currency, currency: USD"
 </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`
@@ Line 773: / Line 783: @@
 "text-offset-x": 10
 </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`
@@ Line 782: / Line 792: @@
 "text-offset-y": 10
 </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)//
 Available Values: `0` to `1`
@@ Line 792: / Line 802: @@
 "text-opacity": 1
 </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`,
 Available Values: `upper` `right` `lower` `left` `center`
@@ Line 802: / Line 812: @@
 "text-placements": "upper"
 </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`
 Available Values: `0` to `2*PI`
@@ Line 812: / Line 822: @@
 "text-rotate-angle": 2
 </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`
@@ Line 821: / Line 831: @@
 "text-spacing": 0
 </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`
@@ Line 832: / Line 842: @@
+</div>
 ==== Sources ====
@@ Line 844: / Line 855: @@
   ]
 </code>
-=== id ===
+  * ** id  **<div>//Required// `string`
-//Required// `string`
 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.
+</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.
+</div>
 ==== map-layers ====
@@ Line 876: / Line 884: @@
 </code>
-=== map-layer-id===
+  * **map-layer-id **<div>
 //Required// `string`
 A layer's unique identifier.
+</div>
-=== source ===
+  * **source **<div>
 //Optional// `string`
@@ Line 888: / 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.
-=== style-drawing-order ===
+</div>
+  * **style-drawing-order **<div>
 //Required// `array`
@@ Line 894: / Line 904: @@
 Some of map rendered styles' unique identifier. Styles will be drawn in the order of array.
+</div>

User Tools

Site Tools

Differences

Page Tools