Differences

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

--- thinkgeo_stylejson [2020/01/09 06:41]
johnnyz [StyleJSON Schema]
+++ thinkgeo_stylejson [2020/01/21 03:41] (current)
johnnyz [ThinkGeo StyleJSON Schema]
@@ Line 3: / Line 3: @@
 <div msgbox>
-The ThinkGeo StyleJSON Schemai llustrated "GettingStarted" Guide will guide you through the process of studying what is ThinkGeo StylJSON Schema, and how to use it in your desktop, web, or mobile mapping applications. </div>
+The ThinkGeo StyleJSON Schema illustrated "GettingStarted" Guide will guide you through the process of studying what is ThinkGeo StylJSON Schema, and how to use it in your desktop, web, or mobile mapping applications. </div>
 <markdown>
-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 for styling webpages. It defines the visual appearance of a map - what data should be drawn, the drawing sequence, 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.
+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.
 </markdown>
+The intended audience of this specification includes:
+  * [[thinkgeo_stylejson#install_world_streets_styles|How to install the ThinkGeo "World Street Styles"]]
+  * [[thinkgeo_stylejson#stylejson_schema|"StyleJson" schema]]
 ===== Install World Streets Styles =====
@@ Line 19: / Line 23: @@
 <code JavaScript>
 <--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-->
-<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-->
-<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-->
-<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-->
-<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-->
-<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-->
-<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 44: / Line 48: @@
 ==== NPM ====
-  * Install the package:
+Install the package:
 <code JavaScript>
 npm i worldstreets-styles
 </code>
 ===== StyleJSON Schema =====
-[Version 1.0](version_1.0)
+==== History Versions ====
+[[Version 1.0.0|Version 1.0.0]]
-==== Syntax ====
+==== Version 2.0.0 ====
+==== Root Properties====
@@ Line 66: / Line 73: @@
 The following example map is created with styleJson.
-[[https://maps.thinkgeo.com|{{stylejson-sample.png|StyleJSON Map}}]]
+[[https://maps.thinkgeo.com|{{thinkgeo_stylejson: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 81: / Line 86: @@
 "styles": [...],
 "sources": [...],
-"layers": [...]
+"map-layers": [...]
 }
 </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**<div>//Optional// `object`
-  * **variables**
-//Optional//
 All variables must be defined in this property and their name must begin with @.
@@ Line 122: / Line 120: @@
 </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`
-//Required// `array`
+Define all map data sources,
+</div>
-Define all map data sources.
+  * **map-layers**<div>//Required// `array`
-  * **layers**
+Map styles and map data sources are linked by layers. Layers will be drawn in the order of array.
-//Required// `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>
-**Hint**: The second chapter of this book has more information about styles, sources and layers.
 ==== Styles ====
 <code json>
-"styles": [
+  "styles": [
-{
+    {
-"id": "style1",
+      "id": "style1",
-"filter": "layerName='layer1'",
+      "filter": "layerName='layer1'",
-"z-index": "columnName"
+      "z-index-atrribute-name": "columnName"
-"style": [...]
+      "styles": [...]
-}
+    }
-]
+  ]
 </code>
-    * **id**
+    * **id**<div>//Required// `string`
-//Required// `string`
 A map rendered style's unique identifier.
+</div>
-    * **filter**
+    * **filter**<div>//Optional// `string`
-//Optional// `string`
+Select some data which is need to render map.</div>
-Select some data which is need to render map.
+    * **z-index-atrribute-name**<div>//Optional// `string`
-    * **z-index**
+Map data would be sorted by this column's value.</div>
-//Optional// `string`
+    * **styles**<div>//Require// `array`
-Map data would be sorted by this column's value.
-    * **style**
-//Require// `array`
 Some specific map rendered styles.
 <code json>
-"style": [
+      "styles": [
-{
+        {
-"filter": "zoom>=0;zoom<=19;highway='motorway'",
+          "filter": "zoom>=0;zoom<=19;highway='motorway'",
-"line-color": "#000",
+          "line-color": "#000",
-"line-width": 6,
+          "styles": [
-"style": [
+            {
-{
+              "filter": "type='monorail,subway'",
-"line-color": "#fff",
+              "line-width": 2
-"line-width": 4,
+            },
-"children": [
+            {
-{
+              "filter": "type!='monorail,subway'",
-"line-color": "#000",
+              "line-width": 1
-"line-width": 2
+            }
-}
+          ]
-]
+        }
-}
+       ]
-]
-}
-]
 </code>
+</div>
-    * **children**
-//Optional// `array`
-Children would use the same feature as the parent style, but it only uses styles by itself, it wouldn't use styles from it's parent.
 === Point ===
-  * **point-dx** `number`
+  * **point-allow-overlapping** `boolean`<div>
-Description: //The horizontal offset of drawn graphic. It's available when the **point-type** is not symbol.//
+//Allows overlap with other text or icons.//
-Default Value: `0`
+Default Value: `flase`
 <code json>
-"point-dx": 3
+"point-allow-overlapping": false
 </code>
+</div>
+  * **point-fill-color** `string`<div>
-  * **point-dy** `number`
+//A defined fill color of symbol or glyph.//
-Description: //The vertical offset of drawn graphic. It's available when the **point-type** is not symbol.//
-Default Value: `0`
 <code json>
-"point-dy": 3
+"point-fill": "#fff"
 </code>
+</div>
+  * **point-glyph-content** `string`<div>
-  * **point-file** `string`
+//A defined glyph name that renders how a point appears.//
-Description: //A defined image path that renders how a point appears.//
 <code json>
-"point-file": "http://www.image.com/image.png"
+"point-glyph-content": "\ue001"
 </code>
-  * **point-fill** `string`
+</div>
+  * **point-glyph-font-name** `string`<div>
-Description: //A defined fill of symbol or glyph.//
+//A defined glyph type that renders how a point appears.//
 <code json>
-"point-fill": "#fff"
+"point-glyph-font-name": "vectormap-icons"
 </code>
+</div>
-  * **point-glyph** `string`
-Description: //A defined glyph type that renders how a point appears.//
+  * **point-mask-color** `string`<div>
-<code json>
+//Sets the color of mask fill.//
-"point-glyph": "ThinkgeoFont"
-</code>
-  * **point-glyph-mask-color** `string`
-Description: //Sets the color of mask fill.//
 <code json>
-"point-glyph-mask-color": "#000"
+"point-mask-color": "#000"
 </code>
-  * **point-glyph-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`
 <code json>
-"point-glyph-mask-margin": "1,1,1,1"
+"point-mask-margin": "1,1,1,1"
 </code>
+</div>
+  * **point-mask-outline-color** `string`<div>
-  * **point-glyph-mask-outline-color** `string`
+//Sets the color of mask outline.//
-Description: //Sets the color of mask outline.//
 <code json>
-"point-glyph-mask-outline-color": "#000"
+"point-mask-outline-color": "#000"
 </code>
+</div>
-  * **point-glyph-mask-outline-width** `number`
+  * **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>
-"point-glyph-mask-outline-width": 3
+"point-mask-outline-width": 3
 </code>
+</div>
+  * **point-mask-type** `enum`<div>
-  * **point-glyph-mask-type** `enum`
+//Sets the type of text mask.//
-Description: //Sets the type of text mask.//
 Available Values: `default` `rectangle` `roundedCorners` `roundedEnds` `circle`
 <code json>
-"point-glyph-mask-type": "circle"
+"point-mask-type": "circle"
 </code>
+</div>
+  * **point-offset-x** `number`<div>
-  * **point-glyph-name** `string`
+//The horizontal offset of drawn graphic. //
+Default Value: `0`
-Description: //A defined glyph name that renders how a point appears.//
 <code json>
-"point-glyph-name": "\ue001"
+"point-offset-x": 3
 </code>
+</div>
+  * **point-offset-y** `number`<div>
-  * **point-linear-gradient** `string`
+//The vertical offset of drawn graphic.//
-Description: //A defined glyph and symbol are rendered by the linear gradient.//
-<code json>
-"point-linear-gradient": "[0:#000],[1,#fff]"
-</code>
-  * **point-outline-color** `string`
-Description: //A defined outline color of symbol or glyph.//
-<code json>
-"point-outline-color": "#000"
-</code>
-  * **point-outline-width** `number`
-Description: //A defined outline width of symbol or glyph.//
 Default Value: `0`
 <code json>
-"point-outline-width": 1
+"point-offset-y": 3
 </code>
+</div>
-  * **point-opacity** `number`
+  * **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.//
 Available Values: `0` to `1`
@@ Line 334: / Line 299: @@
 "point-opacity": 1
 </code>
+</div>
-  * **point-radial-gradient** `string`
+  * **point-outline-color** `string`<div>
-Description: //A defined glyph and symbol are rendered by the radial gradient.//
+//A defined outline color of symbol or glyph.//
 <code json>
-"point-radial-gradient": "[0:#000],[1:#fff]"
+"point-outline-color": "#000"
 </code>
+</div>
-  * **point-rotate-angle** `number`
+  * **point-outline-width** `number`<div>
-Description: //A defined rotate angle that how a point appears.//
+//A defined outline width of symbol or glyph.//
 Default Value: `0`
 <code json>
-"point-rotate-angle": 90
+"point-outline-width": 1
 </code>
+</div>
+  * **point-rotation-angle** `number`<div>
-  * **point-size** `number`
+//A defined rotate angle that how a point appears.//
+Default Value: `0`
-Description: //A defined size of symbol or glyph.//
+<code json>
+"point-rotation-angle": 90
+</code>
+</div>
+  * **point-size** `number`<div>
+//A defined size of symbol or glyph.//
 Default Value: `1`
@@ Line 360: / Line 336: @@
 "point-size": 9
 </code>
+</div>
-  * **point-symbol-type** `enum`
+  * **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`
@@ Line 369: / Line 347: @@
 "point-symbol-type": "square"
 </code>
+</div>
-  * **point-type** `enum`
-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"//
+  * **point-type** `enum`<div>
+//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 378: / Line 358: @@
 "point-type": "symbol"
 </code>
+</div>
-  * **point-transform** `string`
-Description: //Defines SVG transformation functions to scale how points appear.//
-Default Value: `none`, //geometry is not transformed.//
-Available Values: `translate` `scale` `rotate` `skew`
-<code json>
-"point-transform": "translate(10,20)"
-</code>
 === 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 402: / Line 372: @@
 </code>
-  * **line-cap-inner** `enum`
+</div>
+  * **line-color** `string`<div>
-Description: //The display of inner line endings.//
+//The color of the drawn line.//
-Default Value: `round`
-Available Values: `round` `butt` `square`
-<code json>
-"line-cap-inner": "butt"
-</code>
-  * **line-cap-center** `enum`
-Description: //The display of center line endings.//
-Default Value: `round`
-Available Values: `round` `butt` `square`
-<code json>
-"line-cap-center": "butt"
-</code>
-  * **line-color** `string`
-Description: //The color of the drawn line.//
 Default Value: `rgba(0,0,0,0)`, //(transparent)//
@@ Line 431: / Line 382: @@
 </code>
-  * **line-color-inner** `string`
+</div>
+  * **line-dasharray** `string`<div>
-Description: //The color of the drawn inner line.//
+//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.//
-Default Value: `rgba(0,0,0,0)`, //(transparent)//
-<code json>
-"line-color-inner": "#000"
-</code>
-  * **line-color-center** `string`
-Description: //The color of the drawn center line.//
-Default Value: `rgba(0,0,0,0)`, //(transparent)//
-<code json>
-"line-color-center": "#000"
-</code>
-  * **line-dasharray** `string`
-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.//
 <code json>
@@ Line 457: / Line 391: @@
 </code>
-  * **line-dasharray-inner** `string`
-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.//
-<code json>
-"line-dasharray-inner": "3,4,1,2"
-</code>
-  * **line-dasharray-center** `string`
+</div>
+  * **line-direction-image-size** `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.//
+//the size of line direction image.//
 <code json>
-"line-dasharray-center": "3,4,1,2"
+"line-direction-image-size": "10,5"
 </code>
-  * **line-gamma** `boolean`
+</div>
+  * **line-direction-image-uri** `string`<div>
-Description: //The level of antialiasing of a stroke line.//
+//Which kind of iamge are used to display line direction.//
-Default Value: `1`, //(fully antialiased)//
-Available Values: `1` `0`
 <code json>
-"line-gamma": true
+"line-direction-image-uri": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAKCAYAAAC9vt6cAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABiSURBVChTpZKBCsAgCETPfqkPnPvA/CW3RoW1BcoeHCZ0R0rwUkrRW0drB6lVL7yGJFWFR4YphL6etYFb7XDO+awBU3wQju7gxf8RlgVtERF78THXQyIieGQY5kr4H1gzAFwo70RBYPf8BQAAAABJRU5ErkJggg=="
 </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 493: / Line 421: @@
 </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 503: / Line 432: @@
 </code>
-  * **line-join-inner** `enum`
+</div>
+  * **line-miterlimit** `number`<div>
-Description: //The behavior of inner lines when joined on a map.//
+//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.//
-Default Value: `miter`
-Available Values: `miter` `round` `bevel`
-<code json>
-"line-join-inner": "miter"
-</code>
-  * **line-join-center** `enum`
-Description: //The behavior of center lines when joined on a map.//
-Default Value: `miter`
-Available Values: `miter` `round` `bevel`
-<code json>
-"line-join-center": "miter"
-</code>
-  * **line-miterlimit** `number`
-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.//
 Defult Value: `4`, //(auto-convert miter joins to bevel joins when theta is less than 29 degrees)//
@@ Line 532: / Line 442: @@
 </code>
-  * **line-miterlimit-inner** `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.//
+  * **line-offset-x** `number`<div>
-Defult Value: `4`, //(auto-convert miter joins to bevel joins when theta is less than 29 degrees)//
+//The horizontal offset of drawn line. //
+Default Value: `0`
 <code json>
-"line-miterlimit-inner": 4
+"line-offset-x": 3
 </code>
-  * **line-miterlimit-center** `number`
+</div>
+  * **line-offset-y** `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 vertical offset of drawn line.//
-Defult Value: `4`, //(auto-convert miter joins to bevel joins when theta is less than 29 degrees)//
+Default Value: `0`
 <code json>
-"line-miterlimit-center": 4
+"line-offset-y": 3
 </code>
-  * **line-oneway-symbol** `string`
+</div>
-Description: //Which kind of symbol are used to display oneway tags.//
-<code json>
-"line-oneway-symbol": "_icon.png"
-</code>
-  * **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 568: / Line 475: @@
 </code>
-  * **line-width** `number`
-Description: //The width of a line, in pixels.//
+</div>
+  * **line-width** `number`<div>
+//The width of a line, in pixels.//
 Default Value: `1`
@@ Line 577: / Line 486: @@
 </code>
-  * **line-width-inner** `number`
+</div>
-Description: //The width of a inner line, in pixels.//
-Default Value: `1`
-<code json>
-"line-width-inner": 1
-</code>
-  * **line-width-center** `number`
-Description: //The width of a inner line, in pixels.//
-Default Value: `1`
-<code json>
-"line-width-center": 1
-</code>
 === Polygon ===
-  * **polygon-brush-type** `enum`
+  * **polygon-fill-color** `string`<div>
-Description: //Choose which kind of brush type to render polygon shape.//
-Default Value: `solid`
-Available Value: `solid` `hatch` `radialgradient` `lineargradient` `texture`
-<code json>
-"polygon-brush-type": "solid"
-</code>
-  * **polygon-dx** `number`
-Description: //The horizontal offset of drawn graphic.//
-Default Value: `0`
-<code json>
-"polygon-dx": 3
-</code>
-  * **polygon-dy** `number`
-Description: //The vertical offset of drawn graphic.//
-Default Value: `0`
-<code json>
-"polygon-dy": 3
-</code>
-  * **polygon-fill** `string`
-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)//
 <code json>
-"polygon-fill": "rgba(128,128,128,1)"
+"polygon-fill-color": "rgba(128,128,128,1)"
 </code>
-  * **polygon-foreground-fill** `string`
+</div>
-Description: //Sets the foreground fill of the polygon.//
+  * **polygon-geometry-transform** `string`<div>
-Default Value: `#000`
-<code json>
+//Defines the transform function for the geometry element.//
-"polygon-foreground-fill": "#000"
-</code>
-  * **polygon-gamma** `boolean`
-Description: //Sets the anti-aliasing level at the edge of the feature, affecting the rendering effect and speed.//
-Default Value: `1`, //(Completely anti-aliasing)//
-Available Values: `1` `0`
-<code json>
-"polygon-gamma": true
-</code>
-  * **polygon-geometry-transform** `string`
-Description: //Defines the transform function for the geometry element.//
 Available Values: `translate` `scale` `rotate` `skew`
@@ Line 662: / Line 509: @@
 </code>
-  * **polygon-hatch-style** `enum`
+</div>
+  * **polygon-offset-x** `number`<div>
-Description: //Choose which kind of hatch style pattern to render polygon shape.//
+//The horizontal offset of drawn graphic.//
-Available Values: `cross` `horizontal` `vertical` `forwardDiagonal` `backwardDiagonal` `largegrid` `diagonalcross` `percent05` `percent10` `percent20` `percent25` `percent30` `percent40` `percent50` `percent60` `percent70` `percent75` `percent80` `percent90`
+Default Value: `0`
 <code json>
-"polygon-hatch-style": "percent80"
+"polygon-offset-x": 3
 </code>
-  * **polygon-linear-gradient** `string`
+</div>
+  * **polygon-offset-y** `number`<div>
-Description: //A defined polygon is rendered by the linear gradient.//
+//The vertical offset of drawn graphic.//
+Default Value: `0`
 <code json>
-"polygon-linear-gradient": "[0:#000],[1:#fff]"
+"polygon-offset-y": 3
 </code>
-  * **polygon-opacity** `number`
-Description: //Control opacity factor of polygon color. (0 as completely transparent, 1 as completely opaque)//
+</div>
+  * **polygon-opacity** `number`<div>
+//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 689: / Line 541: @@
 </code>
-  * **polygon-outline-color** `string`
+</div>
+  * **polygon-shadow** `object`<div>
-Description: //The color of the drawn polygon's outline.//
+//The style of the drawn polygon's shadow.//
 <code json>
-"polygon-outline-color": "#000"
+"polygon-shadow": {
+            "polygon-fill-color": "#90BBF5",
+            "polygon-offset-x": -1.5,
+            "polygon-offset-y": 1.5
+          }
 </code>
-  * **polygon-outline-dasharray** `string`
+</div>
+=== Text ===
-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.//
+  * **text-align** `enum`<div>
-<code json>
+//Sets the alignment of text.//
-"polygon-outline-dasharray": "[3,4,1,2]"
+Default Value: `center`
-</code>
+Available Values: `left` `right` `center`
-  * **polygon-outline-opacity** `number`
-Description: //Control opacity factor of polygon outline color. (0 as completely transparent, 1 as completely opaque)//
-Default Value: `1` //(completely opaque)//
-Available Values: `0` to `1`
 <code json>
-"polygon-outline-opacity": 1
+"text-align": "left"
 </code>
-  * **polygon-outline-width** `number`
+</div>
+  * **text-allow-overlapping** `boolean`<div>
-Description: //The width of a polygon outline, in pixels.//
+//Allows overlap with other text or icons.//
-Default Value:`0`
+Default Value: `flase`
 <code json>
-"polygon-outline-width": 1
+"text-allow-overlapping": false
 </code>
-  * **polygon-radial-gradient** `string`
+</div>
+  * **text-baseline** `enum`<div>
-Description: //A defined polygon is rendered by the radial gradient.//
+//Sets the current text baseline when the text is drawn.//
+Default Value: `middle`
+Available Values: `bottom` `top` `middle` `alphabetic` `hanging` `ideographic`
 <code json>
-"polygon-radial-gradient": "[0:#000],[1:#fff]"
+"text-baseline": "top"
 </code>
-  * **polygon-shadow-color** `string`
+</div>
+  * **text-base-point-style** `object`<div>
-Description: //The color of the drawn polygon's shadow.//
+//a point style to display the base point.//
 <code json>
-"polygon-shadow-color": "#ccc"
+"text-baseline": {
+        "point-type": "glyph",
+        "point-glyph-font-name": "vectormap-icons",
+        "point-outline-color": "@text_white_halo_color",
+        "point-outline-width": 1.5,
+        "point-glyph-content": "\ue0c0",
+        "point-fill-color": "@poi_color",
+        "point-size": 14,
+        "point-offset-y": -6
+      }
 </code>
+</div>
+  * **text-content** `string`<div>
-  * **polygon-shadow-dx** `number`
+//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: //The horizontal offset of drawn graphic.//
-Default Value: `0`
 <code json>
-"polygon-shadow-dx": 3
+"text-content": "{name}"
 </code>
-  * **polygon-shadow-dy** `number`
+</div>
+  * **text-date-format** `string`<div>
-Description: //The vertical offset of drawn graphic.//
+//Sets a format expression for date value when the type of value is numeric.//
-Default Value: `0`
 <code json>
-"polygon-shadow-dy": 3
+"text-date-format": "yyyy-mm-dd"
 </code>
-  * **polygon-texture-file** `string`
+</div>
+  * **text-fill-color** `string`<div>
-Description: //A defined image path that renders how a polygon appears.//
+//Set the color of the text lable.//
+Default Value: `#000000` //(black)//
 <code json>
-"polygon-texture-file": "http://www.image.com/image.png"
+"text-fill-color": "argb(255,255,0,1)"
 </code>
-=== Text ===
+</div>
-  * **text-align** `enum`
+  * **text-font** `string`<div>
-Description: //Sets the alignment of text.//
+//Sets the current font property of the text content.//
-Default Value: `center`
-Available Values: `left` `right` `center`
 <code json>
-"text-align": "left"
+"text-font": "600 12px Arial"
 </code>
-  * **text-baseline** `enum`
+</div>
+  * **text-force-horizontal-for-line** `boolean`<div>
-Description: //Sets the current text baseline when the text is drawn.//
+//Sets the force horizontal of the text for line.//
-Default Value: `middle`
-Available Values: `bottom` `top` `middle` `alphabetic` `hanging` `ideographic`
-<code json>
-"text-baseline": "top"
-</code>
-  * **text-date-format** `string`
-Description: //Sets a format expression for date value when the type of value is numeric.//
-<code json>
-"text-date-format": "yyyy-mm-dd"
-</code>
-  * **text-dx** `number`
-Description: //Sets the horizontal offset of the text, in pixels. A positive value shifts the text to the right.//
 Default Value: `0`
+Available Values: `1` `0`
 <code json>
-"text-dx": 10
+"text-force-horizontal-for-line": 1
 </code>
-  * **text-dy** `number`
+</div>
+  * **text-halo-color** `string`<div>
-Description: //Sets the vertical offset of the text, in pixel. A positive value shifts the text down.//
+//Sets the halo color on the text edge.//
-Default Value: `0`
+Default Value: `#FFFFFF`, //(white)//
 <code json>
-"text-dy": 10
+"text-halo-color": "#000"
 </code>
-  * **text-font** `string`
+</div>
+  * **text-halo-radius** `number`<div>
-Description: //Sets the current font property of the text content.//
+//Sets the radius of the halo, in pixels.//
+Default Value: `0`, //(no halo is applied)//
 <code json>
-"text-font": "600 12px Arial"
+"text-halo-radius": 2
 </code>
-  * **text-fill** `string`
+</div>
+  * **text-interval-distance** `number`<div>
-Description: //Set the color of the text lable.//
+//Sets the interval distancebetween text lables which along line.//
-Default Value: `#000000` //(black)//
 <code json>
-"text-fill": "argb(255,255,0,1)"
+"text-interval-distance": 1
 </code>
-  * **text-force-horizontal-for-line** `boolean`
+</div>
+  * **text-letter-case** `enum`<div>
-Description: //Sets the force horizontal of the text for line.//
+//Sets the type of letter case.//
-Default Value: `0`
+Default Value: `default`
-Available Values: `1` `0`
+Availabel Values: `default` `uppercase` `lowercase`
 <code json>
-"text-force-horizontal-for-line": 1
+"text-letter-case": "uppercase"
 </code>
-  * **text-halo-fill** `string`
+</div>
+  * **text-letter-spacing** `number`<div>
-Description: //Sets the halo color on the text edge.//
+//Sets the width of letter spacing.//
-Default Value: `#FFFFFF`, //(white)//
 <code json>
-"text-halo-fill": "#000"
+"text-letter-spacing": 2
 </code>
-  * **text-halo-radius** `number`
+</div>
+  * **text-line-spacing** `number`<div>
-Description: //Sets the radius of the halo, in pixels.//
+//Sets the width of line spacing.//
-Default Value: `0`, //(no halo is applied)//
 <code json>
-"text-halo-radius": 2
+"text-line-spacing": 2
 </code>
-  * **text-letter-case** `enum`
+</div>
+  * **text-mask-color** `string`<div>
-Description: //Sets the type of letter case.//
+//Sets the color of mask fill.//
-Default Value: `default`
-Availabel Values: `default` `uppercase` `lowercase`
-<code json>
-"text-letter-case": "uppercase"
-</code>
-  * **text-mask-color** `string`
-Description: //Sets the color of mask fill.//
 <code json>
@@ Line 876: / Line 720: @@
 </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 885: / Line 730: @@
 </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 893: / Line 739: @@
 </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 902: / Line 749: @@
 </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 911: / Line 759: @@
 </code>
-  * **text-max-char-angle** `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`
 <code json>
-"text-max-char-angle": 0.5
+"text-max-char-angle-delta": 0.5
 </code>
-  * **text-min-distance** `number`
+</div>
+  * **text-numeric-format** `string`<div>
-Description: //Sets the minimum distance between text lables.//
+//Sets a numeric format expression for number value.//
 <code json>
-"text-min-distance": 1
+"text-numeric-format": "en-US, style: currency, currency: USD"
 </code>
+</div>
+  * **text-offset-x** `number`<div>
-  * **text-min-padding** `number`
+//Sets the horizontal offset of the text, in pixels. A positive value shifts the text to the right.//
+Default Value: `0`
-Description: //Sets the minimum margin for text lable in meta tiles.//
 <code json>
-"text-min-padding": 3
+"text-offset-x": 10
 </code>
+</div>
+  * **text-offset-y** `number`<div>
-  * **text-name** `string`
+//Sets the vertical offset of the text, in pixel. A positive value shifts the text down.//
+Default Value: `0`
-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: column_name.//
 <code json>
-"text-name": "column_name"
+"text-offset-y": 10
 </code>
+</div>
+  * **text-opacity** `number`<div>
-  * **text-numeric-format** `string`
+//Set the opacity of text lable.//
-Description: //Sets a numeric format expression for number value.//
-<code json>
-"text-numeric-format": "en-US, style: currency, currency: USD"
-</code>
-  * **text-opacity** `number`
-Description: //Set the opacity of text lable.//
 Default Value: `1`, //(fully opaque)//
 Available Values: `0` to `1`
@@ Line 962: / Line 806: @@
 "text-opacity": 1
 </code>
+</div>
+  * **text-placement** `string`<div>
-  * **text-placement-type** `enum`
+// you can use this property to set the avoidance algorithm for text lables.//
+Default Value: `center`,
-Description: //Sets the algorithm for text lables to avoid each other. 'detect' means to use the basic algorithm specified by the text-placements property, 'default' means not to use this property.//
+Available Values: `upper` `right` `lower` `left` `center`
-Default Value: `default`
-Available Values: `default` `detect`
 <code json>
-"text-placement-type": "detect"
+"text-placements": "upper"
 </code>
+</div>
+  * **text-rotate-angle** `number`<div>
-  * **text-placements** `string`
+//Rotation in radians (positive rotation clockwise).//
-Description: //If text-placement-type is set to 'detect', you can use this property to set the avoidance algorithm for text lables.//
-Available Values: `U` `B` `L` `R`
-<code json>
-"text-placements": "U"
-</code>
-  * **text-rotate-angle** `number`
-Description: //Rotation in radians (positive rotation clockwise).//
 Default Value: `0`
 Available Values: `0` to `2*PI`
@@ Line 991: / Line 826: @@
 "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 1000: / Line 835: @@
 "text-spacing": 0
 </code>
+</div>
+  * **text-wrap-width** `number`<div>
-  * **text-text-format** `string`
+//The length of characters that appears before the text-name lable wraps.//
-Description: //Sets a format expression for text value.//
-<code json>
-"text-text-format": "{0} test"
-</code>
-  * **text-wrap-before** `boolean`
-Description: //Controls the wraping action of text-name.//
-Default Value: `false`, //(wrapped text appears longer than wrap-width )//
-Available Values: `true` `false`
-<code json>
-"text-wrap-before": true
-</code>
-  * **text-wrap-width** `number`
-Description: //The length of characters that appears before the text-name lable wraps.//
 Default Value: `0`
@@ Line 1028: / Line 845: @@
 </code>
-=== Shield ===
-  * **shield-align** `enum`
+</div>
-Description: //Sets the alignment of shield lable.//
-Default Value: `center`
-Available Values: `left` `right` `center` `end` `start`
-<code json>
-"shield-align": "left"
-</code>
-  * **shield-date-format** `string`
-Description: //Sets a format expression for date value.//
-<code json>
-"shield-date-format": "yyyy-mm-dd"
-</code>
-  * **shield-dx** `number`
-Description: //Sets the horizontal offset of shield, in pixels. A positive value shifts the shield to the right.//
-Default Value: `0`
-<code json>
-"shield-dx": 0
-</code>
-  * **shield-dy** `number`
-Description: //Sets the vertical offset of shield, in pixels. A positive value shifts the shield down.//
-Default Value: `0`
-<code json>
-"shield-dy": 0
-</code>
-  * **shield-face-name** `string`
-Description: //Set the font and style of the marked text on the shield.//
-<code json>
-"shield-face-name": "600 24px Verdana"
-</code>
-  * **shield-fill** `string`
-Description: //Sets the color of the text of the shield.//
-<code json>
-"shield-fill": "#000"
-</code>
-  * **shield-font** `string`
-Description: //Sets the current font property of the shield content.//
-<code json>
-"shield-font": "600 12px Arial"
-</code>
-  * **shield-halo-fill** `string`
-Description: //Sets the color of the shield text.//
-Default Value: `#FFF`, //(white)//
-<code json>
-"shield-halo-fill": "#000"
-</code>
-  * **shield-halo-radius** `number`
-Description: //Sets the radius of shield text, in pixels.//
-Default Value: `0`, //(shield text without halo)//
-<code json>
-"shield-halo-radius": 0
-</code>
-  * **shield-icon-color** `string`
-Description: //Sets the color of icon when the //`shield-icon-type`// is //`symbol`//.//
-Default Value: `#000`
-<code json>
-"shield-icon-color": "#fff"
-</code>
-  * **shield-icon-outline-color** `string`
-Description: //Sets the outline color of icon when the //`shield-icon-type`// is //`symbol`//.//
-Default Value: `#000`
-<code json>
-"shield-icon-outline-color": "#fff"
-</code>
-  * **shield-icon-outline-width** `number`
-Description: //Sets the outline width of icon when the //`shield-icon-type`// is //`symbol`//.//
-Default Value: `0`
-<code json>
-"shield-icon-outline-width": 3
-</code>
-  * **shield-icon-size** `number`
-Description: //Sets the size of icon, in pixels.//
-Default Value: `0`
-<code json>
-"shield-icon-size": 24
-</code>
-  * **shield-icon-src** `string`
-Description: //Sets the source path of icon when the //`shield-icon-type`// is //`image`//.//
-<code json>
-"shield-icon-src": "https://www.iconfinder.com/icons/1608409/download/svg/24"
-</code>
-  * **shield-icon-symbol-type** `enum`
-Description: _Sets symbol type of icon when the `shield-icon-type` is `symbol`.
-Available Values: `circle` `square` `triangle` `cross` `star`
-<code json>
-"shield-icon-symbol-type": "circle"
-</code>
-  * **shield-icon-type** `enum`
-Description: //Sets type of icon.//
-Available Values: `image` `symbol`
-<code json>
-"shield-icon-type": "symbol"
-</code>
-  * **shield-name** `string`
-Description: //Sets a name of column to display it's fields.//
-<code json>
-"shield-name": "name"
-</code>
-  * **shield-min-distance** `number`
-Description: //Sets the minimum distance between adjacent two shield symbols (which can be the same shield or can be different).//
-Default Value: `0`
-<code json>
-"shield-min-distance": 3
-</code>
-  * **shield-min-padding** `number`
-Description: //Sets the minimum margin when the shield is marked on the tile.//
-Default Value: `0`
-<code json>
-"shield-min-padding": 3
-</code>
-  * **shield-numeric-format** `string`
-Description: //Sets a numeric format expression for number value.//
-<code json>
-"shield-numeric-format": "en-US, style: currency, currency: USD"
-</code>
-  * **shield-opacity** `number`
-Description: //Sets the opacity of the 'shiled-file' image.//
-Defult Value: `1`
-Available Values: `0` //to// `1`
-<code json>
-"shield-opacity": 1
-</code>
-  * **shield-orientation** `number`
-Description: //Rotation in radians (positive rotation clockwise).//
-Default Value: `0`
-Available Values: `0` //to// `2p`
-<code json>
-"shield-orientation": 1
-</code>
-  * **shield-placement-type** `enum`
-Description: //Sets the algorithm for shields to avoid each other. //`detect`// means to use the basic algorithm specified by the shield-placements property, //`default`// means not to use this property.//
-Default Value: `default`
-Available Values: `default` `detect`
-<code json>
-"shield-placement-type": "detect"
-</code>
-  * **shield-placements** `string`
-Description: //If shield-placement-type is set to //`detect`//, you can use this property to set the avoidance algorithm for shield.//
-Available Values: `U` `B` `L` `R`
-<code json>
-"shield-placements": "U"
-</code>
-  * **shield-rotate-angle** `number`
-Description: //Rotation in radians (positive rotation clockwise).//
-Default Value: `0`
-Available Values: `0` to `2p`
-<code json>
-"shield-rotate-angle": 2
-</code>
-  * **shield-spacing** `number`
-Description: //Sets the interval distance between the shields.//
-Default Value: `0`
-<code json>
-"shield-spacing": 3
-</code>
-  * **shield-text-format** `string`
-Description: //Sets a format expression for text value.//
-<code json>
-"shield-text-format": "{0} test"
-</code>
-  * **shield-wrap-width** `number`
-Description: //Set how long the shield text needs to be folded.//
-Default Value: `0`
-<code json>
-"shield-wrap-width": 0
-</code>
-  * **shield-wrap-before** `boolean`
-Description: //Control the shield of the text of the folding action. If the value is false, then each line of text will be slightly longer than the value set by the wrap-width property.//
-Default Value: `0`
-Available Values: `0` `1`
-<code json>
-"shield-wrap-before": 0
-</code>
 ==== Sources ====
 <code json>
-"sources": [
+  "sources": [
-{
+    {
-"id": "worldstreets_source",
+      "id": "worldstreets_source",
-"url": "http://{ip address}/{vector tile file path}/{z}/{x}/{y}.mvt",
+      "url": "http://{ip address}/{vector tile file path}/{z}/{x}/{y}.mvt",
-"type": "MVT"
+      "type": "MVT"
-}
+    }
-]
+  ]
 </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.
-==== Layers ====
+</div>
+==== map-layers ====
 <code json>
-"layers": [
+  "map-layers": [
-{
+    {
-"id": "layer1",
+      "map-layer-id": "worldstreets",
-"source": "source1",
+      "source":"sourceId"
-"styles": [
+      "style-drawing-order": [
-"style1"
+        "landcover_urban",
-]
+      ]
-}
+    }
-]
+  ]
 </code>
-=== id ===
+  * **map-layer-id **<div>
 //Required// `string`
 A layer's unique identifier.
+</div>
-=== source ===
+  * **source **<div>
-//Required// `string`
+//Optional// `string`
-A source's unique identifier which has existed of sources.
+A source's unique identifier which has existed of sources. Or it is passed in by JavaScript code with class ol.thinkgeo.VectorTileSource.
-=== styles ===
+</div>
+  * **style-drawing-order **<div>
 //Required// `array`
 Some of map rendered styles' unique identifier. Styles will be drawn in the order of array.
+</div>

User Tools

Site Tools

Differences

Page Tools