vue2ol-extend

# Vue2olAnimationArrowline

Since: v1.0.0

See (opens new window)

# 基础用法

<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-arrowline :coordinates="coordinates">
        </vue2ol-animation-arrowline>
      </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" //坐标系
      },
      // coordinates:[[37.41, 8.82],[37.41, 12.82],[46.41, 12.82],[42.41, 11.82],[41.41, 18.82]]
      coordinates: [
        [37.41, 8.82],
        [37.41, 12.82],
        [46.41, 12.82]
      ]
    };
  },
  mounted() {}
};
</script>
Expand Copy

# Props

名称 描述 类型 取值范围 默认值
options 对应 openlayers 对象的实例化参数选项,其他没有在 props 中列举的参数，如果有传入 props 并且与默认值不同，则以 props 中的值为准，否则使用 options 中的值 object - {}
properties 属性 object -
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} -
parentMap 地图,如果为 null 则从 parent 中获取 {import('ol/Map').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 -
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} -
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";
feature 要素，如果为 null 则从 parent 中获取 {import('ol/Feature').default} -
opt_layout 布局 {import('ol/geom/GeometryLayout').default} -
name 图层名称 string -
extent 图层渲染的边界范围。该层将不会在此范围之外渲染。 import('ol/extent').Extent -
maxResolution 图层可见的最大分辨率（不包括）。 number -
minResolution 图层可见的最小分辨率（包括）。 number -
opacity 图层的不透明度，允许值范围从 0 到 1。 number -
visible 图层可见性 boolean - true
zIndex 图层层级，值越大显示在上层 number -
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 -
coordinateFormat 坐标格式 {import('ol/coordinate').CoordinateFormat|undefine} -
rotateWithView 控制视图是否应与主地图视图一起旋转。 Boolean | undefined -
parentLayers 图层集合 object -
hitTolerance number -
mouseAnchor useAnchor boolean -
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 -
lineStyle 轨迹线样式 Object | Function -
arrowStyle 箭头样式 Object | Function -
speed 速度倍率(默认速度的多少倍) number - 1
interval 箭头间隔（像素） number - 20

# Events

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

# Slots

Name Description Bindings
default default

Vue2olAnimationDynamicline →