ct-custom-map v2.6.5

ct-map文档

一.功能标签概览

<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）

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

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

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

地图效果：

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

2.1.1 指定层级和中心点

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

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

<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>

2.1.3 图层切换

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

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

百度 Baidu

高德 Amap

2.2 Marker

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

2.2.1 自定义Marker——图片

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

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

2.2.2 自定义Marker——文字

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

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

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

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

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,
    },
 })
})  

2.3 海量 Marker

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

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();
    }
})  

2.4 Cluster 聚合

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

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();
    }
})

2.5 Polygon 多边形

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

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)',
    	},
 	}),
})

2.6 Circle 圆形

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

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

2.7 Heat 热力图

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

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();
    }
})

2.8 Link 连线（两点）

<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>

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,
        },
 	}),
})

2.9 Line 连线（多点相连）

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

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

2.10 Track 轨迹点移动

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

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, // 图片透明度
        },
 	}),
})

2.11 Draw Controller 绘图控件

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

三. Symbol 属性

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

• opacity

• shadowBlur

• shadowColor

• shadowOffsetX

• shadowOffsetY

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

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

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, 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']
    ]
}