轨迹线图层 (Loca.PulseLineLayer)

轨迹线图层,支持设置轨迹样式和轨迹点。

基础示例

静态属性

仅且可以初始化配置,不支持响应式。

名称类型说明
initEventsBoolean是否创建事件,自动为loca图层创建click和mousemove事件。 默认 true
defaultStyleValueObject默认样式,可以查看下面属性说明
extraOptionsObject额外扩展属性,会直接将属性拷贝到初始化的options中,当key与props内的一样时会被props覆盖

动态属性

支持响应式。

名称类型说明
visibleBoolean点标记是否可见,默认为true。
zIndexNumber点标记的叠加顺序。地图上存在多个点标记叠加时,通过该属性使级别较高的点标记在上层显示,默认zIndex:12
sourceUrlString数据源的链接地址,一般是接口地址,返回的数据必须是 geojson 格式。
sourceDataObject数据对象。如果你不想使用 url 方式请求数据,可以直接填写请求好的 geojson 对象。 sourceUrl与sourceData只会生效一个,默认优先判断sourceUrl
layerStyleObject图层样式
zoomsArray图层缩放等级范围,默认[2,20]
opacityNumber图层整体透明度,默认 1
visibleDurationNumber图层显隐时候过渡的时间,默认为0
geoBufferSourceArrayBuffer, Stringprotocol-buffers(PBF) 格式的数据源,能够大幅压缩数据体积,有效减少数据传输时间。目前仅支持基于 mapbox/geobuf 的 GeoJSON PBF 实现

layerStyle参数

警告

layerStyle参数覆盖所有默认值

名称类型说明
lineWidthNumber, Function脉冲线的宽度。 default 1
headColorString, Function脉冲头部颜色,每段脉冲的颜色由头部到尾部渐变. default 'rgba(0, 0, 0, 0.75)'
trailColorString, Function脉冲尾部颜色. default 'rgba(0, 0, 0, 0.25)'
altitudeNumber线整体海拔高度. default 0
intervalNumber每段脉冲占整条路径长度的比例,例如interval = 0.25, 则表示每条路径上同时有4段脉冲. default 1
durationNumber表示一条脉冲动画从头走到尾的时间(毫秒)。 default 2000

defaultStyleValue参数

提示

defaultStyleValue提供默认参数,但会被geojson的properties属性中的值覆盖

名称类型说明
colorString线的颜色 default '#fff'
lineWidthNumber边框宽度(默认单位:px) default 2
altitudeNumber海拔高度,优先级低于数据中的高度信息。单位:米 default 0
borderWidthNumber边框宽度(默认单位:px) default 0
borderColorString, Function边框颜色 default '#fff'
dashArray[Number, Number, Number, Number]连接线的虚线配置信息:[实线长度, 虚线长度, 实线长度, 虚线长度]; default [10, 0, 10, 0]

style说明

所有loca的Layer组件对Style设置提供了默认处理,支持function回调方式的属性都提供了默认回调实现,优先读取geojson的properties中的值,读取不到的情况下会读取defaultStyleValue配置的值,最后会使用组件内默认设置的值。
该默认处理可以被layerStyle中的设置给覆盖。目前默认设置已基本符合日常使用,如果需要在选中目标时做高亮处理,则推荐根据示例使用事件监听然后动态修改layerStyle来实现。
style数据有可以有三个来源,优先级按顺序处理,第一个最高

1、layerStyle属性配置
{
  altitude: 0,
  lineWidth: (_, feature) => feature.properties.lineWidthRatio * 4 + 1,
  headColor: (_, feature) => headColors[feature.properties.type],
  trailColor: (_, feature) => trailColors[feature.properties.type],
  interval: 0.5,
  duration: 2000,
}
2、geojson的properties属性
{
  "type": "FeatureCollection",
  "name": "Polygon",
  "crs": {
    "type": "name",
    "properties": {
      "name": "urn:ogc:def:crs:OGC:1.3:CRS84"
    }
  },
  "features": [
    {
      "type": "Feature",
      "properties": {
        "altitude": 90
      },
      "geometry": {
        "type": "MultiLineString",
        "coordinates": [ [ [ 120.019779202981709, 32.144026229373154, 10.74789 ], [ 120.01983125772162, 32.144040260458958, 10.74147 ], [ 120.019846365139927, 32.144044332576627, 10.7396 ], [ 120.019848865998327, 32.14404500667672, 10.7393 ], [ 120.019862220729934, 32.144048464202079, 10.74027 ], [ 120.019878171683601, 32.14405259389877, 10.74143 ], [ 120.019895609264722, 32.14405710847344, 10.7427 ], [ 120.019897635500556, 32.144057568776311, 10.74439 ], [ 120.019899062592629, 32.144057966480212, 10.74548 ], [ 120.019899974802371, 32.144058333621885, 10.74602 ], [ 120.019900489938749, 32.144058704234794, 10.7461 ], [ 120.019900827346703, 32.144059084227301, 10.74596 ], [ 120.019901072120888, 32.144059486635079, 10.74574 ], [ 120.019901239511796, 32.144059950891467, 10.74538 ], [ 120.019901349867382, 32.144060512415933, 10.74488 ], [ 120.019901425098439, 32.144061082449902, 10.7443 ], [ 120.019901460597552, 32.144061578668762, 10.74363 ], [ 120.019901456415909, 32.144062041401014, 10.74282 ], [ 120.019901415212587, 32.144062513148072, 10.7418 ], [ 120.019901357025788, 32.144062969900872, 10.74065 ], [ 120.019901289066013, 32.144063376370852, 10.73939 ], [ 120.01990120418607, 32.144063766394638, 10.73788 ], [ 120.019901096330685, 32.144064174917965, 10.73601 ], [ 120.019900944296865, 32.14406458261859, 10.73413 ], [ 120.019900693461651, 32.144064969557256, 10.73258 ], [ 120.019900312299399, 32.144065370187704, 10.73124 ], [ 120.019899777753096, 32.144065818069542, 10.73 ], [ 120.019898667874259, 32.144066373310935, 10.72904 ], [ 120.019896125945266, 32.144067177124114, 10.7288 ], [ 120.019891797013386, 32.144068325002287, 10.72933 ], [ 120.019885442555122, 32.144069890028511, 10.7306 ], [ 120.019878292232661, 32.144071901687653, 10.72566 ], [ 120.019862882248518, 32.144076237120409, 10.71503 ], [ 120.019846952649061, 32.144080718724396, 10.70404 ], [ 120.019840362542595, 32.144082572776114, 10.6995 ], [ 120.019831789563781, 32.144085444494827, 10.70158 ], [ 120.019815921596759, 32.144090759844389, 10.70545 ], [ 120.019802586889142, 32.144095226607661, 10.7087 ], [ 120.019800138618507, 32.144096195063909, 10.70745 ], [ 120.019784758618826, 32.14410227891026, 10.69963 ], [ 120.019769274645952, 32.144108403865999, 10.69176 ], [ 120.019769137978486, 32.144108457932219, 10.6917 ], [ 120.01975358487951, 32.144115147874508, 10.69117 ], [ 120.019739518703332, 32.144121198242885, 10.6907 ], [ 120.019736519936359, 32.144122488113119, 10.6906 ], [ 120.019722363877122, 32.144128843419224, 10.69035 ], [ 120.01970815576729, 32.14413522207947, 10.6901 ], [ 120.019706592917771, 32.144135612648867, 10.6881 ], [ 120.019705460056841, 32.144135869243044, 10.68672 ], [ 120.019704686563472, 32.144136004840867, 10.68589 ], [ 120.019704178404396, 32.14413604033367, 10.6855 ], [ 120.019703785833627, 32.144136035407818, 10.68527 ], [ 120.019703446426959, 32.144136019210222, 10.6851 ], [ 120.019703132837478, 32.14413598930124, 10.68497 ], [ 120.019702816011886, 32.144135944134312, 10.68485 ], [ 120.019702508860377, 32.144135884212417, 10.6848 ], [ 120.019702231561922, 32.144135798864149, 10.68487 ], [ 120.019701960647225, 32.144135678038069, 10.6851 ], [ 120.019701672244864, 32.144135513973431, 10.6855 ], [ 120.019701386412535, 32.144135323738112, 10.68601 ], [ 120.019701125153958, 32.144135104587271, 10.68671 ], [ 120.019700866067737, 32.144134833690821, 10.68768 ], [ 120.019700586594169, 32.144134491555349, 10.68898 ], [ 120.019700323344907, 32.144134133707986, 10.69031 ], [ 120.019700125139508, 32.144133803770245, 10.6914 ], [ 120.019699978796794, 32.144133473202167, 10.69233 ], [ 120.01969986774381, 32.144133113500466, 10.6932 ], [ 120.019699809172565, 32.144132674441217, 10.69408 ], [ 120.019699859946286, 32.144132045842667, 10.69509 ], [ 120.019700033764636, 32.1441311534034, 10.69633 ], [ 120.019700336307196, 32.144129940038589, 10.6979 ], [ 120.01970692634535, 32.144118277909577, 10.70278 ], [ 120.019713416012053, 32.144106793405371, 10.7076 ], [ 120.01971402105184, 32.144105784115816, 10.70812 ], [ 120.019721573701531, 32.144093185163534, 10.71469 ], [ 120.019729405924124, 32.144080119855424, 10.72151 ], [ 120.019737737069065, 32.14406622226096, 10.72876 ], [ 120.019744678601867, 32.144054642734055, 10.7348 ], [ 120.019744934459297, 32.144054195022598, 10.73465 ], [ 120.019745015535221, 32.144054053138795, 10.7346 ], [ 120.019752424624173, 32.144041087886777, 10.73041 ], [ 120.019757054362032, 32.144032986249975, 10.7278 ], [ 120.019759149660871, 32.144030344009693, 10.72777 ], [ 120.019760736631653, 32.144028474898739, 10.72814 ], [ 120.019761921890805, 32.144027267618348, 10.72897 ], [ 120.019762838257691, 32.144026567723586, 10.7303 ], [ 120.019763629906862, 32.144026088608939, 10.7319 ], [ 120.019764346725012, 32.144025710480491, 10.73378 ], [ 120.019765049589097, 32.144025406274764, 10.73614 ], [ 120.019765800265446, 32.144025144121528, 10.73913 ], [ 120.019766569710598, 32.144024918524316, 10.74212 ], [ 120.019767343058376, 32.144024751597598, 10.74444 ], [ 120.01976819291221, 32.144024632562534, 10.74627 ], [ 120.019769186882542, 32.144024547502831, 10.7478 ], [ 120.01977047387328, 32.144024563146438, 10.74894 ], [ 120.019772424225792, 32.144024822343738, 10.74935 ], [ 120.019775274591424, 32.144025369263964, 10.74899 ], [ 120.019779202981709, 32.144026229373154, 10.74789 ] ] ]
      }
    }
  ]
}
3、defaultStyleValue属性配置
{
  lineWidth: 1,
  headColor: 'rgba(0, 0, 0, 0.75)',
  trailColor: 'rgba(0, 0, 0, 0.25)',
  altitude: 0,
  interval: 1,
  duration: 2000
}

ref 可用方法

提供无副作用的同步帮助方法

函数返回说明
$$getInstance()Loca.PulseLineLayer获取实例

事件

事件参数说明
initLoca.PulseLineLayer实例
clickFeature, event当点击到标号时返回对应的feature,否则返回undefined
mousemoveFeature, event当鼠标移动滑过标号时返回对应的feature,否则返回undefined
rightclickFeature, event鼠标右击时返回对应的feature,否则返回undefined
最后更新时间:
贡献者: gyy