# ctCustomMap

**Repository Path**: gao-weidong/ct-custom-map

## Basic Information

- **Project Name**: ctCustomMap
- **Description**: 使用maptalks地图工具构建的vue版本地图。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 2
- **Created**: 2021-11-16
- **Last Updated**: 2025-06-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

```

```

# **ct-map文档**

## 一.功能标签概览

```vue
<ct-map>
        <!--marker-->
        <ct-map-marker></ct-map-marker>
        <!--海量marker-->
        <ct-map-multi-marker></ct-map-multi-marker>
    	<!--marker cluster-->
        <ct-map-multi-marker></ct-map-multi-marker>
        <!--多边形-->
        <ct-map-polygon></ct-map-polygon>
        <!--圆形-->
        <ct-map-circle></ct-map-circle>
        <!--热力图-->
        <ct-map-heat></ct-map-heat>
        <!--两点之间的连线-->
        <ct-map-link></ct-map-link>
        <!--多点之间连线-->
        <ct-map-line></ct-map-line>
        <!--轨迹动画-->
        <ct-map-track></ct-map-track>
    	<!--绘图控件-->
        <ct-map-draw-tool></ct-map-draw-tool>
 </ct-map>
```

目前该 **VUE组件** 包含 **marker，海量marker，多边形，圆形，热力图，两点之间的连线，多点之间连线，轨迹，绘图控件** 等地图渲染能力。

## 二.开始

### **2.1  引入地图**

我们通过一个例子来说明如何创建一个简单的地图。下面是DEMO示例。

**（必须要为地图指定高度，否则无法显示；文档以后部分则不再重复指定 map-id与height）**

```html
<div class="parent-map-container">
	<ct-map :map-id="mapId" style="height: 500px"></ct-map>
</div>
```

```javascript
var vm = new Vue({
  data: {
      mapId: 'mapId',
  },
})
```

```css
.parent-map-container {
  margin: 5px;
  border: 10px inset;
  height: 900px;
  width: 500px;
}
```

地图效果：

![error](png/mapinit.png)

至此我们完成了一个完整的地图展示的例子，可以试着在地图区域按住鼠标右键进行拖动，地图的视角和旋转角度会随之改变。

#### 2.1.1 **指定层级和中心点**

```html
<div class="parent-map-container">
	<ct-map :ct-center="[126.59665, 45.75985]" :ct-zoom="14" ></ct-map>
</div>
```

![error](/png/mapinit.png)

#### 2.1.2 概览、比例尺、Zoom 缩放等控件

```html
<div class="parent-map-container">
	<ct-map :ct-center="[126.59665, 45.75985]" 
            :ct-zoom="14" 
            :ct-overview="true" 
            :ct-scale-control="true" 
            :ct-zoom-control="true">
    </ct-map>
</div>
```

![error](/png/controller.png)

#### 2.1.3 图层切换

```html
<div class="parent-map-container">
 <ct-map :ctLayer="layer"></ct-map>
</div>
```

```javascript
var vm = new Vue({
  data: {
      layer: 'Baidu', //不指定 默认为百度， 目前 ：Baidu  Amap  
  },
})
```

*百度   Baidu*

![error](/png/baidulayter.png)

*高德   Amap* 

![error](/png/gdlayter.png)

### **2.2 Marker**

```html
<div class="parent-map-container">
	<ct-map>
		<ct-map-marker :point="[126.59665, 45.75985]"></ct-map-marker>
	</ct-map>
</div>
```

![error](/png/marker1.png)

#### 2.2.1 自定义Marker——图片

```html
<div class="parent-map-container">
	<ct-map>
		<ct-map-marker :point="[126.59665, 45.75985]" :symbol="iconSymbol"></ct-map-marker>
	</ct-map>
</div>
```

```javascript
const myPng = require('@/assets/vue.png');
var vm = new Vue({
 data: () => ({
     iconSymbol: {
      markerFile: myPng,
      markerWidth: 30, // 图片宽
      markerHeight: 30, // 图片高
      markerOpacity: 1, // 图片透明度
    },
 })
})
```

![error](/png/custonmarker.png)

#### 2.2.2 自定义Marker——文字

```html
<div class="parent-map-container">
	<ct-map>
		<ct-map-marker :point="[126.59665, 45.75985]" :symbol="textSymbol"></ct-map-marker>
	</ct-map>
</div>
```

```javascript
var vm = new Vue({
 data: () => ({
    textSymbol: {
      textFaceName: 'sans-serif',
      textName: 'MapTalks', // 文字内容
      textFill: 'red', // 文字颜色
      textHorizontalAlignment: 'right', // 文字对齐方式
      textSize: 20, // 字号
    },
 })
})  
```

![error](/png/textmarker.png)

#### 2.2.2 自定义Marker——文字 + 图片

```html
<div class="parent-map-container">
	<ct-map>
		<ct-map-marker :point="[126.59665, 45.75985]" :symbol="iconTextSymbol"></ct-map-marker>
	</ct-map>
</div>
```

```javascript
const myPng = require('@/assets/vue.png');
var vm = new Vue({
 data: () => ({
    iconTextSymbol: {
      markerFile: myPng,
      markerWidth: 30, // 图片大小
      markerHeight: 30, // 图片大小
      markerOpacity: 1, // 图片透明度
      textFaceName: 'sans-serif',
      textName: 'MapTalks',
      textFill: 'rgb(230 46 156)',
      textHorizontalAlignment: 'bottom',
      textSize: 20,
    },
 })
})  
```

![error](/png/icontextmarker.png)

### **2.3 海量 Marker**

```html
<div class="parent-map-container">
	<ct-map>
		<ct-map-multi-marker :points="multiMarker1000" :symbol="iconSymbol"></ct-map-multi-marker>
	</ct-map>
</div>
```

```javascript
const myPng = require('@/assets/vue.png');
var vm = new Vue({
 	data: () => ({
    	multiMarker1000: [],
   		iconSymbol: {
      		markerFile: myPng,
      		markerWidth: 30, // 图片大小
      		markerHeight: 30, // 图片大小
      		markerOpacity: 1, // 图片透明度
    	},
 	}),
	methods: {
    	createManyPoint() {
      		for (let i = 0; i < 1000; i += 1) {
        		const x = 126.6172 + Math.random() * 0.1 - Math.random() * 0.1;
        		const y = 45.78064 + Math.random() * 0.1 - Math.random() * 0.1;
        		this.multiMarker1000.push([x, y]);
     		}
    	},
	},
    mounted() {
        this.createManyPoint();
    }
})  
```

![error](/png/multimarker.png)

### 2.4 Cluster 聚合

```html
<div class="parent-map-container">
	<ct-map>
		<ct-map-cluster-marker :points="multiMarker1000"></ct-map-cluster-marker>
	</ct-map>
</div>
```

```javascript
const myPng = require('@/assets/vue.png');
var vm = new Vue({
 	data: () => ({
    	multiMarker1000: [],
 	}),
	methods: {
    	createManyPoint() {
      		for (let i = 0; i < 1000; i += 1) {
        		const x = 126.6172 + Math.random() * 0.1 - Math.random() * 0.1;
        		const y = 45.78064 + Math.random() * 0.1 - Math.random() * 0.1;
        		this.multiMarker1000.push([x, y]);
     		}
    	},
	},
    mounted() {
        this.createManyPoint();
    }
})
```

![error](/png/clustermarker.png)

### **2.5 Polygon 多边形**

```html
<div class="parent-map-container">
	<ct-map>
		<ct-map-polygon :polygon-point-group="polygonPointGroup3" :polygon-symbol="polygonSymbol3"></ct-map-polygon>
	</ct-map>
</div>
```

```javascript
var vm = new Vue({
 	data: () => ({
    	 polygonPointGroup3: [
      		[
        		[126.59219, 45.78986],
        		[126.60318, 45.79488],
        		[126.60112, 45.78339],
      		],
    	],
		polygonSymbol3: {
      		lineColor: '#34495e',
      		lineWidth: 4,
      		polygonFill: 'rgb(135,196,240)', // '#1bbc9b'  'rgb(135,196,240)'
      		polygonOpacity: 1,
      		textName: 'polygon',
      		textFill: 'rgb(230 46 156)',
    	},
 	}),
})
```

![error](/png/polygon.png)

### 2.6 Circle 圆形

```html
<div class="parent-map-container">
	<ct-map>
		<ct-map-circle :center="circleCenter3" :radius="radius" :circle-symbol="circleSymbol3"></ct-map-circle>
	</ct-map>
</div>
```

```javascript
var vm = new Vue({
 	data: () => ({
		circleCenter3: [126.57337, 45.76436],
 		circleSymbol3: {
      		textName: 'circle-center',
      		lineColor: 'grey',
      		lineWidth: 3,
      		polygonFill: '#1bbc9b',
      		polygonOpacity: 1,
    	},
        radius: 500 // 半径米
 	}),
})
```

![error](/png/circle.png)

### 2.7 Heat 热力图

```html
<div class="parent-map-container">
    <ct-map>
        <ct-map-heat v-if="heatData " :data="heatData"></ct-map-heat>
    </ct-map>
</div>
```

```javascript
var vm = new Vue({
 	data: () => ({
		    heatData: [
      			[126.52975, 45.74962, 0.1], // x,y,权重
      			[126.54846, 45.7501, 0.5],
      			[126.56821, 45.75022, 1],
    		],
 	}),
    methods: {
    	createManyPoint() {
      		for (let i = 0; i < 1000; i += 1) {
        		const x = 126.6172 + Math.random() * 0.1 - Math.random() * 0.1;
        		const y = 45.78064 + Math.random() * 0.1 - Math.random() * 0.1;
        		this.heatData.push([x, y, 0.1]);
     		}
    	},
	},
    mounted() {
        this.createManyPoint();
    }
})
```

![error](/png/heat.png)

### 2.8 Link 连线（两点）

```html
<div class="parent-map-container">
	<ct-map>
		<ct-map-link :from="pointPair1[0]" :to="pointPair1[1]" :link-symbol="linkSymbol1"></ct-map-link>
		<ct-map-link :from="pointPair2[0]" :to="pointPair2[1]" :link-symbol="linkSymbol2"></ct-map-link>
		<ct-map-link :from="pointPair3[0]" :to="pointPair3[1]" :link-symbol="linkSymbol3" :lineType="lineType"></ct-map-link>
	</ct-map>
</div>
```

```javascript
var vm = new Vue({
 	data: () => ({
        lineType: 'arc', // 有弧度的线
        pointPair1: [[126.52494, 45.73597], [126.55911, 45.73549]],
        pointPair2: [[126.57852, 45.73621], [126.60788, 45.73681]],
        pointPair3: [[126.62677, 45.73956], [126.69512, 45.73932]],
        linkSymbol1: {
      		lineColor: '#1bbc9b', // 线的颜色
      		lineWidth: 1, // 线宽度
   	 	},
        linkSymbol2: {
          lineColor: 'red',
          lineWidth: 3,
        },
        linkSymbol3: {
          lineColor: 'red',
          lineWidth: 3,
        },
 	}),
})
```

![error](/png/link.png)

### 2.9 Line 连线（多点相连）

```html
<div class="parent-map-container">
	<ct-map>
		<ct-map-line :pointOfLine="pointOfLine"></ct-map-line>
	</ct-map>
</div>
```

```javascript
var vm = new Vue({
 	data: () => ({
		pointOfLine: [
          [126.51922, 45.72297],
          [126.53644, 45.72854],
          [126.55362, 45.72051],
          [126.56993, 45.72758],
    	],
 	}),
})
```

![error](/png/line.png)

### 2.10 Track 轨迹点移动

```html
<div class="parent-map-container">
	<ct-map>
		<ct-map-track :point-of-track="track" :point-symbol="iconSymbol"></ct-map-track>
	</ct-map>
</div>
```

```javascript
var vm = new Vue({
 	data: () => ({
        track: [
          [126.52474, 45.71304],
          [126.56244, 45.71126],
          [126.58693, 45.71572],
          [126.60084, 45.70133],
          [126.57302, 45.69318],
          [126.52769, 45.69402],
        ],
        iconSymbol: {
          markerFile: myPng1,
          markerWidth: 30, // 图片大小
          markerHeight: 30, // 图片大小
          markerOpacity: 1, // 图片透明度
        },
 	}),
})
```

![error](/png/track.png)

### 2.11 Draw Controller 绘图控件

```html
<div class="parent-map-container">
	<ct-map>
        <!--打开绘图控件-->
		<ct-map-draw-tool></ct-map-draw-tool>
	</ct-map>
</div>
```

![error](/png/drawcontroller.png)

## 三. Symbol 属性

对于地图元素的样式对象 `Symbol` 有以下属性：

- opacity

- shadowBlur

- shadowColor

- shadowOffsetX

- shadowOffsetY

  

|        **Marker**         |          Text           | Polygons and Lines |
| :-----------------------: | :---------------------: | :----------------: |
|       markerOpacity       |      textPlacement      |     lineColor      |
|        markerWidth        |      textFaceName       |     lineWidth      |
|       markerHeight        |        textFont         |   lineDasharray    |
|         markerDx          |       textWeight        |    lineOpacity     |
|         markerDy          |        textStyle        |      lineJoin      |
| markerHorizontalAlignment |        textSize         |      lineCap       |
|  markerVerticalAlignment  |        textFill         |  linePatternFile   |
|      markerPlacement      |       textOpacity       |       lineDx       |
|      markerRotation       |      textHaloFill       |       lineDy       |
|                           |     textHaloRadius      |                    |
|        markerFile         |     textHaloOpacity     |    polygonFill     |
|                           |      textWrapWidth      |   polygonOpacity   |
|        markerType         |    textWrapCharacter    | polygonPatternFile |
|        markerFill         |     textLineSpacing     |                    |
|   markerFillPatternFile   | textHorizontalAlignment |                    |
|     markerFillOpacity     |  textVerticalAlignment  |                    |
|      markerLineColor      |        textAlign        |                    |
|      markerLineWidth      |      textRotation       |                    |
|     markerLineOpacity     |         textDx          |                    |
|    markerLineDasharray    |         textDy          |                    |
|   markerLinePatternFile   |                         |                    |
|                           |                         |                    |
|        markerPath         |                         |                    |
|      markerPathWidth      |                         |                    |
|     markerPathHeight      |                         |                    |



`Symbol` 类别和 几何图形 ( Markers, Polygons, Lines) 的应用规则

| Symbol  类别 |       可以被应用于       |
| :----------: | :----------------------: |
|    Marker    | Markers, Polygons, Lines |
|     Text     | Markers, Polygons, Lines |
|     Line     |     Polygons, Lines      |
|   Polygon    |         Polygons         |



------

Symbol Properties 

### All

##### opacity `float`

Default Value : `1`

The overall opacity of the geometry.

------

##### shadowBlur `number`

Default Value : `0`

level of the shadow around the geometry, see [MDN's explanation](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/shadowBlur)

------

##### shadowColor `color`

Default Value : `black`

color of the shadow around the geometry, a CSS style color

------

##### shadowOffsetX `float`

Default Value : `0`

A float specifying the distance that the shadow will be offset in horizontal distance.

------

##### shadowOffsetY `float`

Default Value : `0`

A float specifying the distance that the shadow will be offset in vertical distance.

### Marker Common Properties

##### markerOpacity `Number`

Default Value: `1` (The stroke-opacity and fill-opacity of the marker.)

The overall opacity of the marker.

------

##### markerWidth `float`

Default Value: `10` for Vector Marker and `none` for others

The width of the marker.

------

##### markerHeight `float`

Default Value: `10` for Vector Marker and `none` for others

The height of the marker.

------

##### markerDx `float`

Default Value: `0` *(Marker will not be displaced.)*

Displace marker by fixed amount, in pixels, +/- along the X axis. A positive value will shift the marker right.

------

##### markerDy `float`

Default Value: `0` *(Marker will not be displaced.)*

Displace marker by fixed amount, in pixels, +/- along the Y axis. A positive value will shift the marker down.

------

##### markerHorizontalAlignment `keyword`

```
left middle right
```

Default Value: `middle` for markerFile, `middle` or `top` for different markerType

The marker's horizontal alignment from it's centerpoint.

------

##### markerVerticalAlignment `keyword`

```
top middle bottom
```

Default Value: `bottom` for markerFile, `middle` or `bottom` for different markerType

The marker's vertical alignment from it's centerpoint.

------

##### markerPlacement `keyword`

```
point vertex line vertex-first vertex-last
```

Default Value: `point` *(Place markers at the center point (centroid) of the geometry.)*

Attempt to place markers on a point, in the center of a polygon, or if markerPlacement:line, then multiple times along a line. Vertex places on the vertexes of polygons or lines. The 'vertex-first' and 'vertex-last' options can be used to place markers at the first or last vertex of lines or polygons.

------

##### markerRotation `float`

Default Value : `none` *(Marker will not rotate)*

The degree that marker rotates around marker's placing point. The rotation begins at right side of X-axis (0 degree) and is in a counterclockwise direction.

### Image Marker

##### markerFile `string`

Default Value: `none`

A file that this marker shows at each placement. If no file is given, it may throw an error of failing to create any symbolizer.

Values of `markerFile` can be anything that HTML Image element supported:

- URL: `http://www.foo.com/foo.png` or `images/foo.png`
- Base64: A png: `data:image/png;base64,iVBORw0..` or a SVG: `data:image/svg+xml;base64,PD94bWwgdm..`

### Vector Marker

##### markerType `keyword`

```
ellipse cross x diamond bar square triangle pin pie
```

The vector marker's shape.

------

##### markerFill `color`

Default Value: `blue` *(The marker fill color is blue.)*

The color of the area of the marker.

------

##### markerFillPatternFile `string`

Default Value: `none`

Image to use as a repeated pattern fill within a marker. Any format that HTML Image can accept.

------

##### markerFillOpacity `float`

Default Value: `1` *(Color is fully opaque.)*

The fill opacity of the marker.

------

##### markerLineColor `color`

Default Value: `black` *(The marker will be drawn with a black outline.)*

The color of the stroke around the marker.

------

##### markerLineWidth `float`

Default Value: `1` *(The marker will be drawn with an outline of 1 pixels wide.)*

The width of the stroke around the marker, in pixels. This is positioned on the boundary, so high values can cover the area itself.

------

##### markerLineOpacity `float`

Default Value: `1` *(Color is fully opaque.)*

The opacity of marker's stroke.

------

##### markerLineDasharray `numbers`

Default Value: `none` *(The line will be drawn without dashes.)*

A pair of length values [a,b], where (a) is the dash length and (b) is the gap length respectively. More than two values are supported for more complex patterns.

------

##### markerLinePatternFile `string`

Default Value: `none`

An image file to be repeated and warped along marker's line. Any format that HTML Image can accept.

------

##### markerPath `string|object|objects`

Default Value: ''none``

A SVG path or pathes to define the marker's shape, if set it will override **markerType**. Possible values:

- Path string:

  `M8 23l0 0 0 0 0 0 0 0 0 0c-4,-5 -8,-10 -8,-14 0,-5 4,-9 8,-9l0 0 0 0c4,0 8,4 8,9 0,4 -4,9 -8,14z M5,9 a3,3 0,1,0,0,-0.9Z`

- A Path Object with Style Properties (same with SVG):

  ```
      {
          'path' : 'M8 23l0 0 0 0 0 0 0 0 0 0c-4,-5 -8,-10 -8,-14 0,-5 4,-9 8,-9l0 0 0 0c4,0 8,4 8,9 0,4 -4,9 -8,14z M5,9 a3,3 0,1,0,0,-0.9Z',
          'fill' : '#DE3333',
          'stroke' : '#000'
      }
  ```

- An Array of Path Objects:

  ```
  [
      {transform:"matrix(1,0,0,1,200,200)", path:"M-122.304 84.285C-122.304 84.285 -122.203 86.179 -123.027 86.16C-123.851 86.141 -140.305 38.066 -160.833 40.309C-160.833 40.309 -143.05 32.956 -122.304 84.285z","stroke-width":"0.172",stroke:"#000",fill:"#fff"},
      {transform:"matrix(1,0,0,1,200,200)", path:"M-118.774 81.262C-118.774 81.262 -119.323 83.078 -120.092 82.779C-120.86 82.481 -119.977 31.675 -140.043 26.801C-140.043 26.801 -120.82 25.937 -118.774 81.262z","stroke-width":"0.172",stroke:"#000",fill:"#fff"}
  ]
  ```

------

##### markerPathWidth `float`

Default Value: `80` *(The markerPath's width is 10 pixels.)*

Applied to **markerPath**, width property of the generated SVG element, like the width in `<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="6.9956" height="8.9987"`

------

##### markerPathHeight `float`

Default Value: `80`

Applied to **markerPath**, height property of the generated SVG element, like the height in `<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="6.9956" height="8.9987"`

## Text

##### textPlacement `keyword`

```
point vertex line vertex-first vertex-last
```

Default Value: point *(One text will be placed per geometry.)*

How this label should be placed. Point placement places one label on top of a point geometry and at the centroid of a polygon or the middle point of a line, line places along lines multiple times per feature, vertex places on the vertexes of polygons, and 'vertex-first' and 'vertex-last' options can be used to place labels at the first or last vertex of lines or polygons.

------

##### textFaceName `string`

Default Value: `monospace`

Font name and style to render a label in.

```
symbol.textFaceName = '"microsoft yahei"';
```

------

##### textFont `string`

Default Value: `none`

Same as the [CSS font property](https://developer.mozilla.org/en-US/docs/Web/CSS/font), defines the font family, boldness, size, and the style of the text, if set it will override **textFaceName**.

```
/* style | variant | weight | stretch | size/line-height | family */
symbol.textFont = 'italic small-caps bolder condensed 16px/3 cursive';
```

------

##### textWeight `keyword`

```
normal bold bolder lighter 100 200 300 400 500 600 700 800 900
```

Default Value : `normal`

Same as the CSS font-weight, Specifies the font weight.

------

##### textStyle `keyword`

```
normal italic oblique
```

Default Value : `normal`

Same as the CSS font-style, Specifies the font style.

------

##### textSize `number`

Default Value : 10 *(Font size of 10 will be used to render text.)*

Text size in pixels.

------

##### textFill `color`

Default Value : '#000' *(The text will be rendered black.)*

Specifies the color for the text.

------

##### textOpacity `number`

Default Value : `1` *(Fully opaque.)*

A number from 0 to 1 specifying the opacity for the text.

------

##### textHaloFill `color`

Default Value : `#fff` *(The halo will be rendered white.)*

Specifies the color of the halo around the text.

------

##### textHaloRadius `number`

Default Value: `0` *(no halo.)*

Specify the radius of the halo in pixels.

------

##### textHaloOpacity `float`

Default Value: `1` *(Fully opaque.)*

A number from 0 to 1 specifying the opacity for the text halo.

------

##### textWrapWidth `unsigned`

Default Value: `0` *(Text will not be wrapped.)*

Length of a chunk of text in pixels before wrapping text. If set to zero, text doesn't wrap.

------

##### textWrapCharacter `string`

Default Value: `none` *(Lines will be wrapped when whitespace is encountered.)*

Use this character to wrap long text, e.g. `'\n'`

------

##### textLineSpacing `unsigned`

Default Value: `0` _(The default font spacing will be used.)

Vertical spacing adjustment between lines in pixels.

------

##### textHorizontalAlignment `keyword`

```
left middle right
```

Default Value: `middle`

The text's horizontal alignment from it's centerpoint.

------

##### textVerticalAlignment `keyword`

```
top middle bottom
```

Default Value: `middle`

The text's vertical alignment from it's centerpoint.

------

##### textAlign `keyword`

```
left right center
```

Default Value: `center`

Define how text is justified.

------

##### textRotation `float`

Default Value : `none` *(text will not rotate)*

The degree that text rotates around text's placing point. The rotation begins at right side of X-axis (0 degree) and is in a counterclockwise direction.

##### textDx `float`

Default Value: `0` *(Text will not be displaced.)*

Displace text by fixed amount, in pixels, +/- along the X axis.

------

##### textDy `float`

Default Value: `0` *(Text will not be displaced.)*

Displace text by fixed amount, in pixels, +/- along the Y axis.

## Polygons and Lines

##### lineColor `color`

Default Value: `black` *(black and fully opaque (alpha = 1), same as rgb(0,0,0) or rgba(0,0,0,1).)*

The color of a drawn line.

------

##### lineWidth `float`

Default Value: 1 (The line will be rendered 1 pixel wide.)

The width of a line in pixels.

------

##### lineDasharray `numbers`

Default Value: `none` *(The line will be drawn without dashes.)*

A pair of length values [a,b], where (a) is the dash length and (b) is the gap length respectively. More than two values are supported for more complex patterns.

------

##### lineOpacity `float`

Default Value: `1` *(Color is fully opaque.)*

The opacity of a line.

------

##### lineJoin `keyword`

```
miter``miter-revert``round``bevel
```

Default Value: miter *(The line joins will be rendered using a miter look.)*

The behavior of lines when joining.

------

##### lineCap `keyword`

```
butt``round``square
```

Default Value: butt *(The line endings will be rendered using a butt look.)*

The display of line endings.

------

##### linePatternFile `string`

Default Value: none

An image file to be repeated and warped along a line. Any format that HTML Image can accept.

------

##### lineDx `float`

Default Value: `0` *(Line will not be displaced.)*

Displace line by fixed amount, in pixels, +/- along the X axis.

------

##### lineDy `float`

Default Value: `0` *(Line will not be displaced.)*

Displace line by fixed amount, in pixels, +/- along the Y axis.

------

##### polygonFill `color`

Default Value: The color white will be used for fill.

Fill color to assign to a polygon.

------

##### polygonOpacity `float`

Default Value: `1` *(Color is fully opaque.)*

The opacity of the polygon.

------

##### polygonPatternFile `uri`

Default Value: none

Image to use as a repeated pattern fill within a polygon. Any format that HTML Image can accept.

------

### Data Types

------

#### Color

Possible values of color:

- HTML-style hex values, rgb, rgba, hsl, and hsla. Predefined HTML colors names, like yellow and blue, are also permitted.

```
{
  "lineColor": "#ff0",
  "lineColor": "#ffff00",
  "lineColor": "rgb(255, 255, 0)",
  "lineColor": "rgba(255, 255, 0, 1)",
  "lineColor": "hsl(100, 50%, 50%)",
  "lineColor": "hsla(100, 50%, 50%, 1)",
  "lineColor": "yellow"
}
```

- Gradient color, like it in Canvas, can be either linear gradient color or radial gradient color, the form of gradient color is a JSON object with type, places and color stops:

```
{
    /**
    * Type of the gradient color
    * optional
    * possible values : linear | radial
    * default value: linear
    */
    type : 'linear', 
    /**
    * optional
    * default value:
    *   linear : [0, 0, 1, 0],
    *   radial : [0.5, 0.5, 1, 0.5, 0.5, 0]
    * Places of gradient.
    * For linear gradient: [x0, y0, x1, y1]
    *   x0 The x axis of the coordinate of the start point, a ratio (from 0 to 1) of geometry's width from left to right, e.g. 0.5 for the middle
    *   y0 The y axis of the coordinate of the start point, a ratio (from 0 to 1) of geometry's height from top to bottom, e.g. 1 for the bottom
    *   x1 The x axis of the coordinate of the end point.
    *   y1 The y axis of the coordinate of the end point.
    * ---------------
    * For radial gradient: [x0, y0, r0, x1, y1, r1]
    *   x0 The x axis of the coordinate of the start circle, a ratio (from 0 to 1) of geometry's width from left to right, e.g. 0.5 for the middle
    *   y0 The y axis of the coordinate of the start circle, a ratio (from 0 to 1) of geometry's height from top to bottom, e.g. 1 for the bottom
    *   r0 The radius of the start circle, a ratio (from 0 to 1) of geometry's width, e.g. 0.5 to be half of the geometry's width
    *   x1 The x axis of the coordinate of the end circle.
    *   y1 The y axis of the coordinate of the end circle.
    *   r1 The radius of the end circle.
    */
    places : [0, 0, 1, 0], 
    /**
    * Color stops, an array of number pairs([offset, color])
    * required
    * Same as Canvas's color stops:
    * https://developer.mozilla.org/en-US/docs/Web/API/CanvasGradient/addColorStop
    */
    colorStops : [
        [0.00, 'rgba(255, 0, 0, 1)'],
        [1 / 4, 'orange'],
        [2 / 4, 'green'],
        [3 / 4, 'aqua'],
        [1.00, 'white']
    ]
}
```