# 链接线图层 (Loca.LinkLayer)
链接线图层

## 基础示例

<vuep template="#example"></vuep>

<script v-pre type="text/x-template" id="example">

  <template>
    <div class="amap-page-container">
      <el-amap :zoom="zoom" :center="center":pitch="pitch" view-mode="3D" :show-label="false" class="amap-demo">
        <el-amap-loca>
          <el-amap-loca-link :visible="visible" :source-url="sourceUrl" :layer-style="layerStyle"></el-amap-loca-link>
        </el-amap-loca>
      </el-amap>
      <div class="toolbar">
        <button type="button" name="button" @click="toggleVisible">{{visible ? '隐藏标记' : '显示标记'}}</button>
      </div>
    </div>
  </template>

  <style>
    .amap-demo {
      height: 300px;
    }
  </style>

  <script>
    var colors = ['#f7fcf5', '#e5f5e0', '#c7e9c0', '#a1d99b', '#74c476', '#41ab5d', '#238b45', '#006d2c', '#00441b'].reverse();
    module.exports = {
      name: 'amap-page',
      data() {
        return {
          zoom: 8,
          center: [116.335036, 39.900082],
          pitch: 55,
          visible: true,
          sourceUrl: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/bj_bus.json',
          layerStyle: {
              lineColors : colors,
              height : (index, prop) => {
                  var i = index % colors.length;
                  return i * 200 + 40;
              },
              smoothSteps : 100,
              // dashArray: [10, 5, 10, 0],
          }
        };
      },
      methods: {
        toggleVisible() {
          this.visible = !this.visible;
        },
      }
    };
  </script>

</script>


## 静态属性
仅且可以初始化配置，不支持响应式。

名称 | 类型 | 说明
---|---|---|
initEvents | Boolean | 是否创建事件，自动为loca图层创建click和mousemove事件。 默认 true
defaultStyleValue | Object | 默认样式，可以查看下面属性说明

## 动态属性
支持响应式。

名称 | 类型 | 说明
---|---|---|
visible | Boolean | 点标记是否可见，默认为true。
zIndex | Number | 点标记的叠加顺序。地图上存在多个点标记叠加时，通过该属性使级别较高的点标记在上层显示，默认zIndex：12
sourceUrl | String | 数据源的链接地址，一般是接口地址，返回的数据必须是 geojson 格式。
sourceData | Object | 数据对象。如果你不想使用 url 方式请求数据，可以直接填写请求好的 geojson 对象。  sourceUrl与sourceData只会生效一个，默认优先判断sourceUrl
layerStyle | Object | 图层样式
zooms | Array | 图层缩放等级范围，默认[2,20]
opacity | Number | 图层整体透明度，默认 1
visibleDuration | Number | 图层显隐时候过渡的时间，默认为0

### layerStyle参数(覆盖所有默认值)
名称 | 类型 | 说明
---|---|---|
lineColors | Array, Function | 链接线颜色。 类型为Array时，可设置颜色渐变，color[0]为起始色，color[color.lenth-1]为终止色，中间为过渡色； 类型为Function时，返回每根线的颜色。参数为(index,item)，item为一个对象{link,distance}，link为该条线的初始信息。返回结果为Array(渐变)。
height  | Number, Function | 高度，单位为米，代表弧顶的最高高度。 类型为Function时，返回每根线的高度。参数为(index,item)，item中有distance属性，代表两点间的距离（米），可以用该属性处理高度。
smoothSteps | Number, Function | 平滑步数，代表弧线的分隔段数，越大平滑度越好，默认为100。

### defaultStyleValue参数(提供默认参数，但会被geojson的properties属性中的值覆盖)
名称 | 类型 | 说明
---|---|---|
lineColors | Array | 链接线颜色。 类型为Array时，可设置颜色渐变，color[0]为起始色，color[color.lenth-1]为终止色，中间为过渡色； 类型为Function时，返回每根线的颜色。参数为(index,item)，item为一个对象{link,distance}，link为该条线的初始信息。返回结果为Array(渐变)。
height  | Number | 高度，单位为米，代表弧顶的最高高度。 类型为Function时，返回每根线的高度。参数为(index,item)，item中有distance属性，代表两点间的距离（米），可以用该属性处理高度。
smoothSteps | Number | 平滑步数，代表弧线的分隔段数，越大平滑度越好，默认为100。

### style说明
所有loca的Layer组件对Style设置提供了默认处理，支持function回调方式的属性都提供了默认回调实现，优先读取gesjson的properties中的值，读取不到的情况下会读取defaultStyleValue配置的值，最后会使用组件内默认设置的值。<br/>
该默认处理可以被layerStyle中的设置给覆盖。目前默认设置已基本符合日常使用，如果需要在选中目标时做高亮处理，则推荐根据示例使用事件监听然后动态修改layerStyle来实现。<br/>
style数据有可以有三个来源，优先级按顺序处理，第一个最高<br/>
##### 1、layerStyle属性配置
```javascript
{
  lineColors : colors,
    height : (index, prop) => {
    var i = index % colors.length;
    return i * 200 + 40;
  },
  smoothSteps : 100,
  // dashArray: [10, 5, 10, 0],
}
```

##### 2、geojson的properties属性
```json
{
  "type": "FeatureCollection",
  "name": "Polygon",
  "crs": {
    "type": "name",
    "properties": {
      "name": "urn:ogc:def:crs:OGC:1.3:CRS84"
    }
  },
  "features": [
    { 
      "type": "Feature", 
      "properties": {
        "icon": '/img/1.png',
        "rotation": 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属性配置
```javascript
{
  lineColors: ['rgba(255,255,255,1)', 'rgba(255,255,255,0)'],
  height: 100,
  smoothSteps: 100
}
```

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

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

## 事件

事件 | 参数 | 说明
---|---|---|
init | Loca.LinkLayer | 实例
click | Feature, event | 当点击到标号时返回对应的feature，否则返回undefined
mousemove | Feature, event | 当鼠标移动滑过标号时返回对应的feature，否则返回undefined