vue-openlayers-d

openlayer + vue 地图辅助包

一个开箱即用、功能齐全、可高度配置的 Vue2 + OpenLayers 地图容器组件。
支持 多种底图切换、聚合点位、绘制测量、闪烁动画、点位序号、坐标转换 等常用能力，全部封装成 一行调用 的 API。

✨ 特性一览

🛠 依赖

{
    "@turf/along": "^6.5.0",
    "@turf/area": "^6.5.0",
    "@turf/bbox-polygon": "^6.0.1",
    "@turf/boolean-contains": "^6.0.1",
    "@turf/buffer": "^5.1.5",
    "@turf/kinks": "^7.3.1",
    "@turf/length": "^6.5.0",
    "@turf/line-intersect": "^6.5.0",
    "core-js": "^2.6.5",
    "ol": "^6.15.1"
}

npm 下载

  📦 安装
  npm install vue-openlayers-d -S

main.js 配置

//main.js 加入引用
import openlayersD from 'vueOpenlayersD'
// import 'vue-openlayers-d/dist/vue-openlayers-d.css'
Vue.use(openlayersD)

🗺️ 地图对象

Props 参数

Events 回调事件

视角控制

图层管理

覆盖物（Overlay）

坐标转换

辅助工具

例子

 <OpenLayers
      class="map"
      ref="olmap"
      :zoom="map.zoom"
      :center="map.center"
      :projection="map.projection"
      :layerMapDefault="map.layerMapDefault"
      @click="pointClick"
      @zoomend="zoomend"
      @ready="ready"
    ></OpenLayers>

     let  map= {
        center: [79.92941, 37.123631], //中心点
        zoom: 11, //地图缩放级别
        projection: "EPSG:4326", //地图的投影坐标系,
        mapType:4,
        maxZoom: 19, ///最大缩放级别
        minZoom: 6, //最小缩放级别
        layerMapDefault:
          "https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}"
          //瓦片服务地址
      }
     pointClick(obj) {
      console.log('地图点击')
    },
    zoomend() {},
    ready(obj) {
      console.log('地图加载完成')
      this.mapObj = obj.map
      let config={

              layerName: 'layer-root',
              id: 'ol-map-root',
              ...this.map
      }
      this.$refs.olmap.addRootLayer(config)
      //点位转跳
	    this.$refs.olmap.centerAndZoom(87.60834, 43.829723, 16)
    }

📍 点标注组件（MapIconMark）

<MapIconMark
  :position="mapIconData.position"
  :label="mapIconData.label"
  :icon='mapIconData.icon'
  :elementName="mapIconData.elementName"
  :className="mapIconData.className">
</MapIconMark>

🎯 JS 画标注点

let defaultStle = {
  font: '14px Microsoft YaHei',
  color: '#fff',
  offsetX: 0,
  offsetY: 30,
  padding: [2, 10, 0, 10],
  bgColor: 'rgba(0,0,0,0.5)'
}
let config = {
  position: [87.60081797338869, 43.83722919055176],
  id: 'layerMark',
  icon: require('./mark.png'),
  attributes: { name: '标注点位' },
  label: '测试点位',
  style: { bgColor: 'rgba(255,1,1,0.5)' }
}
this.$refs.olmap.createIconMark(config)

📈 折线组件（MapLineString）

Attributes

<MapLineString
  :pointList="mapLineStringData.pointlist"
  :lineColor="mapLineStringData.lineColor"
  :lineWidth="mapLineStringData.lineWidth"
  :lineDash="mapLineStringData.lineDash"
  :elementName="mapLineStringData.elementName"
  :className="mapLineStringData.className"
></MapLineString>

🟦 多边形组件（MapPolygon）

Attributes

<MapPolygon
  :pointList="mapPolygonData.pointlist"
  :fillColor="mapPolygonData.fillColor"
  :lineColor="mapPolygonData.lineColor"
  :lineWidth="mapPolygonData.lineWidth"
  :lineDash="mapPolygonData.lineDash"
  :elementName="mapPolygonData.elementName"
  :className="mapPolygonData.className">
</MapPolygon>

🔴 圆形组件（MapCircle）

Attributes

 <MapCircle
  :position="mapCircleData.position"
  :radius="mapCircleData.radius"
  :fillColor="mapCircleData.fillColor"
  :lineColor="mapCircleData.lineColor"
  :lineWidth="mapCircleData.lineWidth"
  :lineDash="mapCircleData.lineDash"
  :elementName="mapCircleData.elementName"
  :className="mapCircleData.className">
 </MapCircle>

📌 自定义覆盖物（MapOverlay）

Attributes

<MapOverlay
  :position="mapOverlayData.position"
  :className="mapOverlayData.className">
  <div>
    
  </div>
 </MapOverlay>

💬 弹出窗体（MapPopup）

Attributes

Events

<MapPopup
  :position="mapPopupData.position"
  :title="mapPopupData.title"
  :offset="mapPopupData.offset"
  :mapShow="mapPopupData.show"
  @close="mapPopupClose"
  :className="'map-popup'">
  {{ popupText }}
</MapPopup>
mapPopupData: {
  position: [87.621589, 43.827187], // 弹窗中心点 Array[array]， 必须
  title: "点位标题详情", // 弹窗标题 String，非必须，默认为 ' '
  show: false, // 弹窗显隐 Boolean，必须，默认为 true
  offset: [0, 0], // 弹窗偏移 Array[number]，必须，默认为 [0, 0]
  className: "map-popup", // 图层的class String，非必须，默认为 'map-popup'
  attributes: {}
}

🌟 海量点（MapPointCollection）

Attributes

<MapPointCollection
  :pointList="mapPointCollectionData.pointlist"
  :distance="mapPointCollectionData.distance"
  :fillColor="mapPointCollectionData.fillColor"
  :fontColor="mapPointCollectionData.fontColor"
  :zIndex='mapPointCollectionData.zIndex'
  :offset="mapPointCollectionData.offset">
</MapPointCollection>

  mapPointCollectionData: {
    pointlist: [],
    distance: 100, // 收起点的间距  number，必须，默认为 40
    zIndex: 500, // 图层z轴高度， 非必须， 默认 400
    offset: [0, 2], // 文字偏移距离 [x,y]， 非必须， 默认 [0,0]
    fontColor: "#000", // 文字的颜色 string （色彩标识，支持rgba），默认'#fff'(如果去掉文字那么直接rgba透明度设置为0)
    fillColor: "#2290e799", // 文字的背景颜色 string（色彩标识，支持rgba），默认'#f00'(如果去不要背景颜色那么直接rgba透明度设置为0)
    scale: 0.6 //图标缩放大小
  }

🔗 聚合点位组件 (MapClusterLayer)

✨ 核心能力

🎯 Props 参数

📡 事件 Event

📋 features 数据格式

;[
  {
    geom: { lon: 116.3974, lat: 39.9092 },
    attributes: { id: 1, name: '车辆-101', icon: '/img/car.png' }
  }
  // ...支持 10w+ 条
]

icon 留空则使用默认 bluePoint

🎨 自定义聚合样式

:clusterStyleFn="size => ({
  color: size > 100 ? '#ff4d4f' : '#91c7ff',
  radius: size > 100 ? 30 : 16
})"

📦 快速使用

      <MapClusterLayer
        id="deviceLayer"
        name="deviceLayer"
        ref="deviceLayer"
        :features="deviceLayerConfig.features"
        :fontColor="deviceLayerConfig.fontColor"
        :fillColor="deviceLayerConfig.fillColor"
        :img="deviceLayerConfig.img"
        :scale="deviceLayerConfig.scale"
          @featureClick="onPointClick"
          @clusterClick="onClusterClick"

      />
     let  deviceLayerConfig= {
        features: [{
          geom: {
            type: 'Point',
            lon: 12.111,
            lat: 6.111
          },
          attributes: {
            type: 'device',
            index: index,
            info: {},
            id: index,
            icon: '/icon/red.png'
          }
        }
        ],
        img: require("./1-06.png"), //点位图标 默认为蓝色小点
        fontColor: "#fff", //字体颜色 默认#FFF
        fillColor: "#2290e799", //背景颜色 默认 #2290e799
        scale: 0.5 //默认为0.9
      },

通过 js 生成聚合点位

    const uqPoints = Array.from({ length: 100 }, (_, i) => ({
        geom: {
          lon: 87.3 + Math.random() * 0.4, // 87.3 ~ 87.7
          lat: 43.7 + Math.random() * 0.2 // 43.7 ~ 43.9
        },
        attributes: { id: i + 1000, name: `点位${i + 1}` }
      }));

      // 使用
      this.$refs.olmap.createClusterTemplate({
        id: 'poi-cluster',
        name: '乌鲁木齐设备聚合',
        features: uqPoints,
        clusterDistance: 60
      })

后台服务聚合只返回数字

<MapServerClusterLayer
id="serverLayer"
name="serverLayer" ref="serverLayer"
:features="serverLayerConfig.features"
:fontColor="serverLayerConfig.fontColor"
:fillColor="serverLayerConfig.fillColor"
:img="serverLayerConfig.img"
:scale="serverLayerConfig.scale" />

      serverLayerConfig: {
        features: [{
          geom: {
            type: 'Point',
            ...points
          },
          attributes: {
            type: 'device',
            index: index,
            pointType: 1, //针对后台聚合功能 0是普通点位  1是聚合点位
            count: 100, //聚合点位数量
            info: {},
            id: index
          }
        }],
        img: require("./1-06.png"), //点位图标 默认为蓝色小点
        fontColor: "#fff", //字体颜色
        fillColor: "#fea81a99", //背景颜色
        scale: 0.5 //默认为0.9
      },

📡 FlashPoint 雷达扩散点覆盖物

一个用于在 OpenLayers 地图上添加可自定义颜色 + 任意属性的实心雷达扩散动画点的便捷方法。该点使用 CSS 动画实现扩散效果，支持挂载自定义数据到 DOM 与 Overlay 实例。

📥 参数说明

🎯 返回值

• Overlay 实例：OpenLayers 的 Overlay 对象，可用于后续操作（如移除、更新位置等）。

🧪 使用示例

// 添加一个红色雷达点
const overlay = this.$refs.olmap.setFlashPoint(
  'warning_point',
  [120.123456, 30.123456],
  'red',
  {
    type: 'alert',
    level: 'high',
    timestamp: Date.now()
  }
)

// 后续可通过 overlay.attributes 访问原始数据
console.log(overlay.attributes.level) // 'high'
// 或通过 DOM dataset 访问（字符串化）
console.log(overlay.getElement().dataset.level) // "high"

🚗 轨迹动画 并出现小车按照轨迹移动（MapTrailAnimate）

一个基于 OpenLayers 的轨迹动画 Vue 组件，支持小车沿轨迹移动、起点终点标记、播放控制等功能。

📋 功能特性

• 🚗 轨迹动画 - 小车沿预设轨迹平滑移动
• 🎯 起点终点标记 - 自定义图标标记起终点
• ⏯️ 播放控制 - 播放、暂停、重启、速度调节
• 🔁 循环播放 - 支持动画循环播放
• 🎯 跟随模式 - 地图自动跟随小车移动
• 🎨 样式定制 - 自定义图标、线条样式、箭头等
• 📊 事件系统 - 丰富的状态变化事件回调
• 🛡️ 健壮性 - 完善的错误处理和边界检查

⚙️ Props 配置

<template>
  <OpenLayers ref="map" :center="[116.4, 39.9]" :zoom="12">
    <MapTrailAnimate
      ref="trail"
      :features="trailPoints"
      :speed="trailSpeed"
      :loop="trailLoop"
      @positionUpdate="onPositionUpdate"
      @animationEnd="onAnimationEnd"

    />
    <button @click="$refs.trail.pause()">暂停</button>
    <button @click="$refs.trail.resume()">继续</button>
    <button @click="$refs.trail.restart()">重播</button>
    <button @click="$refs.trail.toggleFollow()">跟随</button>
  </OpenLayers>
</template>

<script>
export default {
  data() {
    return {
      trailPoints: [
        [87.575309, 43.816728],
        [87.60081797338869, 43.83722919055176]
      ],
      trailSpeed: 50,
      trailLoop: false,
      lineStyle: {
        strokeColor: '#ff6600',
        strokeWeight: 5,
        showDir: false,
        dirStep: 50
      }
    }
  }
}
</script>

线条样式配置

lineStyle:{
  zIndex: 2, // 覆盖物的叠加顺序
  showDir: true, // 是否显示白色方向箭头
  dirStep:100 //白色方向箭头的间距默认100 showDir:true时生效
  strokeOpacity: 0.9, //  线条透明度
  strokeWeight: 5, //  线条宽度
  strokeStyle: "solid", // 轮廓线样式，实线: solid 虚线:dashed
  strokeDasharray: [], // 轮廓线间隙
  lineCap: "butt", // 折线两端线帽的绘制样式，默认值为'butt'无头，其他可选值：'round'圆头、'square'方头
  lineJoin: "round", // 折线拐点的绘制样式，默认值为'round'圆角，其他可选值：'round'圆角、'bevel'斜角
  isOutline: false, // 线条是否带描边，默认false
  borderWeight: 10, // 描边的宽度，默认为1
  outlineColor: "#000000", // 线条描边颜色，此项仅在isOutline为true时有效，默认：#000000
  extData: null, // 自定义信息
  strokeColor: "#28F"// 默认填充颜色
}

🎯 事件回调

🎛️ 方法 API

播放控制

// 播放控制
this.$refs.trail.pause() // 暂停
this.$refs.trail.resume() // 继续
this.$refs.trail.restart() // 重新开始
this.$refs.trail.stopAndContinue() // 暂停/继续切换

// 速度控制
this.$refs.trail.setSpeed(50) // 设置速度 (1-100)

// 跟随模式
this.$refs.trail.toggleFollow() // 切换跟随模式

// 状态查询
this.$refs.trail.getStatus() // 获取当前状态
this.$refs.trail.isPlaying() // 是否正在播放
this.$refs.trail.isPaused() // 是否暂停
this.$refs.trail.getProgress() // 获取进度百分比
this.$refs.trail.getCurrentPosition() // 获取当前位置

状态查询

// 获取状态
const status = this.$refs.trail.getStatus()
// {
//   isPlaying: true,
//   isPaused: false,
//   currentIndex: 5,
//   totalPoints: 20,
//   progress: 0.25,
//   isLoop: false,
//   speed: 50,
//   follow: true
// }

// 其他查询方法
this.$refs.trail.getProgress() // 进度百分比
this.$refs.trail.getCurrentPosition() // 当前坐标
this.$refs.trail.getTotalPoints() // 总点数
this.$refs.trail.isPlaying() // 是否播放中
this.$refs.trail.isPaused() // 是否暂停

JS 绘画 Line

let points = [
  [87.575309, 43.816728],
  [87.60081797338869, 43.83722919055176],
  [87.61420756079103, 43.82950442858887],
  [87.64012842871095, 43.847872195922854],
  [87.618283, 43.892136]
]
let lineStyle = {
  zIndex: 2, // 覆盖物的叠加顺序
  showDir: true, // 是否显示白色方向箭头
  dirStep:100 //白色方向箭头的间距默认100 showDir:true时生效
  strokeOpacity: 0.9, //  线条透明度
  strokeWeight: 5, //  线条宽度
  strokeStyle: 'solid', // 轮廓线样式，实线: solid 虚线:dashed
  strokeDasharray: [], // 轮廓线间隙
  lineCap: 'butt', // 折线两端线帽的绘制样式，默认值为'butt'无头，其他可选值：'round'圆头、'square'方头
  lineJoin: 'round', // 折线拐点的绘制样式，默认值为'round'圆角，其他可选值：'round'圆角、'bevel'斜角
  isOutline: false, // 线条是否带描边，默认false
  borderWeight: 10, // 描边的宽度，默认为1
  outlineColor: '#000000', // 线条描边颜色，此项仅在isOutline为true时有效，默认：#000000
  extData: null, // 自定义信息
  strokeColor: '#28F' // 默认填充颜色
}
let config = {
  features: points,
  id: 'LineLayer',
  attributes: { name: '测试' },
  lineStyle: lineStyle
}
this.$refs.olmap.createLine(config)

JS 画圆 drawCircle

  this.$refs.olmap.drawCircle({
        position: [87.611935, 43.963691],
        radius: 1000,
        id: 'circle-beijing',
        width: 3,
        lineColor: '#ff0000',
        fillColor: 'rgba(255, 0, 0, 0.3)',
        attributes:{name:123}
      })
      this.$refs.olmap.centerAt(87.611935, 43.963691)

🔥 热力图（MapHeat）

<MapHeat :map="mapObj" :data="heatData"></MapHeat>
   this.heatData.push({
        log: 87.62081797338869,  // 经度
        lat: 43.83722919055176, // 纬度
        weight: 0.2 // 该坐标点的权重值(0-1之间的小数)
      })

📏 测量工具（MapMeasureTool） 测距 测面积

Attributes

Events

  <MapMeasureTool :name="'MapMeasureTool'" :id="'MapMeasureTool'" :actived="actived"  :type="'LineString'" @mesureEnd="mesureEnd"></MapMeasureTool>

✏️ 绘制工具（MapDraw）绘制圆形矩形多边形

Events

 <MapDraw id="drawLayers" name="绘制图层" :actived="drawActive" @drawend="drawFinish" :type="drawType"></MapDraw>

🏷️ 海量文本标注（addTextLabels）

// 1. 一次性渲染
const labels = this.$refs.olmap.addTextLabels({
  layerId: 'city-names', // 图层 id（重复调用会复用同一层）
  data: [
    {
      text: '北京',
      coord: fromLonLat([116.404, 39.915]),
      attributes: { id: 1 }
    },
    { text: '上海', coord: fromLonLat([121.4737, 31.2304]) }
  ],
  style: {
    // 文字样式
    font: 'bold 14px Arial',
    fillColor: '#ff0000',
    strokeColor: '#fff',
    strokeWidth: 2,
    offsetX: 0,
    offsetY: 0
  },
  onClick: (feature, attrs, evt) => console.log('点击 →', attrs.text),
  onHover: (feature, attrs, evt) => console.log('悬停 →', attrs.text),
  onMouseOut: (feature, attrs, evt) => console.log('移出 →', attrs.text),
  clearBefore: false, // 首次渲染是否清空旧数据
  zIndex: 100 // 图层层级
})

// 2. 动态追加 / 替换
labels.update([{ text: '广州', coord: fromLonLat([113.2644, 23.1291]) }], {
  clear: true
}) // clear=true 先清空再添加

// 3. 仅移除图层
labels.remove()

// 4. 完全销毁（清理交互）
labels.dispose()

setMapIconMarks 添加标注物 图片+文字

list 数组字段

opts 配置字段

// 模拟生成 5 个点
const points = [
  {
    id: 'p1',
    position: [87.3, 43.7],
    icon: '/img/hot.png',
    label: '点位1',
    attributes: { pop: 100 }
  },
  {
    id: 'p2',
    position: [87.35, 43.75],
    icon: '/img/hot.png',
    label: '点位2',
    attributes: { pop: 200 }
  },
  {
    id: 'p3',
    position: [87.4, 43.78],
    label: '点位3',
    attributes: { pop: 150 }
  }
]
// 添加/更新图标图层
const layer = setMapIconMarks(points, {
  className: 'my-icon-layer',
  zIndex: 50,
  defaultIcon: '/img/default.png'
})

// 后续更新或删除某些点，只需再次调用 setMapIconMarks
const updatedPoints = [
  {
    id: 'p1',
    position: [87.31, 43.71],
    label: '点位1更新',
    attributes: { pop: 120 }
  },
  {
    id: 'p4',
    position: [87.42, 43.79],
    icon: '/img/new.png',
    label: '新增点',
    attributes: { pop: 300 }
  }
]

this.$refs.olmap.setMapIconMarks(updatedPoints)

🟨 多边形绘制（createMapPolygon）

// 在组件 methods 中直接调用
this.$refs.olmap.createMapPolygon({
  id: 'fence',
  pointList: [
    [120, 30],
    [121, 30],
    [121, 31],
    [120, 31],
    [120, 30] // 外环闭合
  ],
  fillColor: 'rgba(255,0,0,0.2)',
  lineColor: '#ff0000',
  lineWidth: 3,
  zIndex: 200
})

参数总览

单条多边形配置（polygons[i]）

返回值

// 1) 导入方法
// 已在组件 methods 中提供 createMapPolygons

// 2) 准备数据
const polygons = [
  {
    id: 'area1',
    pointList: [
      [120, 30],
      [121, 30],
      [121, 31],
      [120, 31],
      [120, 30] // 外环
    ],
    fillColor: 'rgba(255,0,0,0.3)',
    lineColor: '#f00',
    lineWidth: 2,
    attributes: { name: 'A区域' } // 任意业务字段
  },
  {
    id: 'area2',
    pointList: [
      [
        [120.5, 30.5],
        [120.8, 30.5],
        [120.8, 30.8],
        [120.5, 30.8],
        [120.5, 30.5]
      ], // 外环
      [
        [120.6, 30.6],
        [120.7, 30.6],
        [120.7, 30.7],
        [120.6, 30.7],
        [120.6, 30.6]
      ] // 内环（孔）
    ],
    fillColor: 'rgba(0,128,255,0.2)',
    lineDash: [5, 5],
    attributes: { name: 'B区域（带孔）' }
  }
]

// 3) 调用
const { layer, remove } = this.createMapPolygons(polygons, {
  layerKey: 'myPolygons',
  zIndex: 300
})

// 4) 一键删除
// remove()
// 更新数据
this.createMapPolygons(newPolygons, { layerKey: 'myPolygons' })

addPointsWithNumbers 使用说明

一键在 OpenLayers 地图上批量绘制 带数字序号 的点位（图标 + 文字），支持 自定义图标、偏移、样式、坐标系自动转换 等。

1. 快速上手

// 最简单的调用
mapComp.addPointsWithNumbers({
  points: [
    { lon: 116.3974, lat: 39.9092 },
    { lon: 121.4737, lat: 31.2304 }
  ]
})

2. 参数总览

3. 点位数据格式

三种写法均可混用：

// ① 对象式（推荐）
{ lon: 116.3, lat: 39.9, text: 'A', attributes: { id: 1001 } }

// ② 数组式
[116.3, 39.9]

// ③ 备用中心（当 lon/lat 缺失时使用）
{ lon: null, lat: null }   // 会退化成 center

4. 自定义单点样式

{
  lon: 116.3,
  lat: 39.9,
  text: '起',               // 显示文字
  style: {
    iconUrl: '/img/start.png',
    iconScale: 0.8,
    offsetX: 10,            // 单独偏移
    offsetY: -20,
    textColor: '#ff0000',
    font: 'bold 16px Arial'
  }
}

单点 style 里的字段会 覆盖全局参数。

5. 完整示例

// 删除旧图层并重新绘制
mapComp.addPointsWithNumbers({
  layerId: 'patrol-points',
  points: [
    { lon: 116.3974, lat: 39.9092, text: '起' },
    { lon: 116.41, lat: 39.915 },
    { lon: 116.42, lat: 39.92, text: '终', style: { iconUrl: '/img/end.png' } }
  ],
  iconUrl: '/img/dot.png',
  iconScale: 0.6,
  startIndex: 0,
  offsetY: -15,
  zIndex: 999
})

6. 返回值

7. 错误排查速查表

8. 与地图坐标系无关

函数内部已自动：

// 如果地图不是 EPSG:4326，会自动 fromLonLat
if (mapProjection !== 'EPSG:4326') {
  pointCoords = fromLonLat([lon, lat], mapProjection)
}

无论地图是 3857 还是 4326，直接给经纬度即可。

9. 清理图层

// 按 ID 移除
mapComp.removeLayerById('patrol-points')

✈️MapFlyline飞线组件

让地图飞线像电影一样丝滑：粒子 + 流光尾巴 + 起点终点标记，一行组件即可拥有。

✨ 特性

⚙️ Props

📡 Events

🔧 快速使用

<template>
  <MapFlyline
    id="fly-1"
    name="北京→上海"
    :flights="flights"
    :visible="true"
    :zIndex="10"
    lineColor="#00ffff"
    glowColor="#52e884"
    :glowWidth="6"
    :glowTrailLength="0.3"
    :speed="5"
    :animationDuration="3000"
    :loop="true"
    @flightClick="onFlightClick"
  />
</template>

<script>
import MapFlyline from '@/components/MapFlyline.vue'

export default {
  components: { MapFlyline },
  data() {
    return {
      flights: [
        {
          from: { lon: 116.4074, lat: 39.9042 }, // 北京
          to: { lon: 121.4737, lat: 31.2304 },   // 上海
          curve: 0.3,                            // 弯曲度
          value: 80                              // 热力值
        }
      ]
    }
  },
  methods: {
    onFlightClick(e) {
      console.log('点击飞线', e.flightData, e.index)
    }
  }
}
</script>