# Vue2olAnimationTrack

utilsol/animation/Track 的 vue 组件

Since: v1.0.0

# 基础用法

<template>
  <vue2ol-map style="height:400px;">
    <vue2ol-view :zoom="zoom" :center="center" :options="viewOptions">
    </vue2ol-view>
    <vue2ol-layer-tile>
      <vue2ol-source-osm></vue2ol-source-osm>
    </vue2ol-layer-tile>
    <vue2ol-layer-vector>
      <vue2ol-source-vector>
        <vue2ol-animation-track :coordinates="coordinates">
        </vue2ol-animation-track>
      </vue2ol-source-vector>
    </vue2ol-layer-vector>
  </vue2ol-map>
</template>

<script>
export default {
  data() {
    return {
      zoom: 4, //级别
      center: [37.41, 8.82], //中心点
      viewOptions: {
        projection: "EPSG:4326" //坐标系
      },
      show: true,
      coordinates: [
        [37.41, 8.82],
        [37.41, 12.82],
        [46.41, 12.82],
        [42.41, 11.82],
        [41.41, 18.82]
      ]
    };
  },
  mounted() {}
};
</script>

Copy

# Props

名称	描述	类型	取值范围	默认值
options	对应 openlayers 对象的实例化参数选项,其他没有在 props 中列举的参数，如果有传入 props 并且与默认值不同，则以 props 中的值为准，否则使用 options 中的值	object	-	{}
properties	属性	object	-
parentMap	地图,如果为 null 则从 parent 中获取	{import('ol/Map').default}	-
offset	定位叠加层时使用的像素偏移量。数组中的第一个元素是水平偏移量。正值将覆盖向右移动。数组中的第二个元素是垂直偏移量。正值会使叠加层向下移动。	{number[]}	-
position	显示在地图上的位置	{import('ol/coordinate').Coordinate}	-
positioning	定义叠加层相对于其 position 属性的实际定位方式。	{import('ol/OverlayPositioning').default}	`"bottom-left"\\| "bottom-center"\\| "bottom-right"\\| "center-left"\\| "center-center"\\| "center-right"\\| "top-left"\\| "top-center"\\| "top-right";`
parentLayer	图层,如果为 null 则从 parent 中获取	{import('ol/layer/BaseLayer').default}	-
geometry	几何图形	{import('ol/geom/Geometry').default}	-
geometryName	要素几何图形的属性名称。调用ol/Feature~Feature#getGeometry (opens new window)时，将返回具有该名称的属性的值。	string	-
id	feature 的 ID	number\|string	-
styleObj	特征的样式。这可以是单个样式对象、样式数组或采用特征和分辨率并返回样式数组的函数。如果设置为 null，则图层没有样式（null 样式），因此只有具有自己样式的要素才会在图层中呈现。不带参数调用 setStyle()以重置为默认样式。因为 style 是保留属性，因此改名为 styleObj	{import('ol/style/Style').StyleLike\| null \| undefined}	-
layerGroup	地图的图层组	{import('ol/layer/Group').LayerGroup}	-
layers	图层数组。如果未定义，则将渲染没有图层的地图。请注意，图层是按照提供的顺序呈现的，因此，例如，如果您希望矢量图层出现在切片图层的顶部，则它必须位于切片图层之后。	{Array<import('ol/layer/Base').BaseLayer> \| import('ol/Collection').Collection<import('ol/Base').BaseLayer>}	-
size	地图的大小	{import('ol/size').Size}	-
controls	最初添加到地图的控件。	array	-	[]
view		{import('ol/View').default}	-
center	中心。	{import('ol/coordinate').Coordinate}	-
constrainResolution	如果为 true，则视图将始终在交互后动画到最接近的缩放级别；false 表示允许中间缩放级别	boolean	-
maxZoom	图层可见的最大缩放（不包括）。请注意，图层可见性的缩放级别基于视图缩放级别，这可能与平铺源缩放级别不同。	number	-
minZoom	图层可见的最小缩放（包括）。请注意，图层可见性的缩放级别基于视图缩放级别，这可能与平铺源缩放级别不同。	number	-
resolution	视图的初始分辨率。单位是 projection 每像素的单位（例如，每像素米）。设置它的另一种方法是设置 zoom。如果 this 也未定义，则不会获取层源 zoom，但可以稍后使用#setZoom 或#setResolution 设置它们。	number	-
rotation	视图的初始旋转以弧度为单位（顺时针正旋转，0 表示北）。	number	-
zoom	仅在 resolution 未定义时使用。用于计算视图初始分辨率的缩放级别。	number	-
name	图层名称	string	-
extent	图层渲染的边界范围。该层将不会在此范围之外渲染。	import('ol/extent').Extent	-
maxResolution	图层可见的最大分辨率（不包括）。	number	-
minResolution	图层可见的最小分辨率（包括）。	number	-
opacity	图层的不透明度，允许值范围从 0 到 1。	number	-
visible	图层可见性	boolean	-	true
zIndex	图层层级，值越大显示在上层	number	-
feature	要素，如果为 null 则从 parent 中获取	{import('ol/Feature').default}	-
opt_layout	布局	{import('ol/geom/GeometryLayout').default}	-
attributes	属性	{import('ol/source/Source').AttributionLike\|undefined}	-
projection	投影	{import('ol/proj').ProjectionLike\|undefine}	-
active	是否激活	boolean	-
source		ol/source/Vector (opens new window)	-
loader	新加载器。下一个渲染周期将使用新的加载器	{import('ol/featureloader').FeatureLoader}	-
url	新的 url。下一个渲染周期将使用新的 url。	string	-
dpi	打印机等输出设备的 dpi。	number	-
units	单位	{import('ol/control/ScaleLine').Units}	-
collapsed	控件是否应该开始折叠（展开）	Boolean \| undefined	-
collapsible	控件是否可以折叠。	Boolean \| undefined	-
rotateWithView	控制视图是否应与主地图视图一起旋转。	Boolean \| undefined	-
coordinateFormat	坐标格式	{import('ol/coordinate').CoordinateFormat\|undefine}	-
mouseAnchor	useAnchor	boolean	-
parentLayers	图层集合	object	-
hitTolerance		number	-
parentSource	数据源,如果为 null 则从 parent 中获取	{import('ol/source/Vector').default}	-
coordinates	轨迹坐标	{Array<import('ol/coordinate').Coordinate>}	-
radius	半径。	number	-
features		{Array<import('ol/Feature').default>}	-
imageLoadFunction	源的图像加载函数	func	-
distance		number	-
minDistance		number	-
operation		object	-
tileLoadFunction		{import('ol/Tile').LoadFunction\|undefined}	-
tileUrlFunction		{import('ol/Tile').UrlFunction\|undefined}	-
urls		{string[]}	-
preload	预加载。将低分辨率图块加载到 preload 关卡。0 意味着没有预加载。	number	-
useInterimTilesOnError	错误时使用临时瓷砖。	boolean	-
type	几何类型	string	-
blur		number	-
gradient		string[]	-
background	图层的背景颜色。如果未指定，则不会呈现背景。	{import('ol/layer/Base').BackgroundColor\|false\|undefined}	-
layer	图层名称	string	`'terrain'\\|'terrain-background'\\|'terrain-labels'\\|'terrain-lines'\\|'toner-background'\\|'toner'\\|'toner-hybrid'\\|'toner-labels'\\|'toner-lines'\\|'toner-lite'\\|'watercolor'`	"terrain"
config		object	-
loop	动画循环	boolean	-	true
lineStyle	固定航线线样式	func\|array	-
lineAnimationStyle	动画线样式	func\|array	-
pointAnimationStyle	动画点样式	func\|array	-

# Events

名称	属性	描述
init	mapObject `import('ol/source/CartoDB').default` - 地图元素	地图元素初始化完时触发
append	mapObject `import('ol/source/CartoDB').default` - 地图元素	地图元素添加到地图时触发
ready	mapObject `import('utilsol/animation/Track').default` - undefined	组件就绪时触发

# Slots

Name	Description	Bindings
default	default

← Vue2olAnimationScatter Vue2olControlDrag →