图层高亮(动画)

框架支持多种图层的动画效果

支持说明

INFO

1. 支持坐标点的闪烁、呼吸、跳跃图层动画，支持线的呼吸、闪烁动画，支持面的呼吸动画
2. 广告版参数包括 scale-缩放比,width-宽度, height-高度, onGround-是否贴地, image-图标路径,
3. 线参数包括 width-线宽, color-颜色, onGround-是否贴地, index-层级,
4. 面参数包括 fill-填充色, outline-是否显示边框, outlineColor-边框颜色, outlineWidth-边框宽度, onGround-是否贴地, index-层级,

代码实例

场景初始化

import { onMounted, onBeforeUnmount, ref } from 'vue'
const LarkExplorer = window.LarkExplorer
let map: any
onMounted(() => {
  LarkExplorer.ready({
    baseUrl: './dist/resources/',
  }).then(initMap)
})

function initMap() {
  // 默认谷歌影像地图
  const baseImagery = LarkExplorer.BaseLayer.DefaultTdtImg
  // 默认全球地形
  const baseTerrain = LarkExplorer.BaseLayer.DefaultTerrain
  map = new LarkExplorer.Map('map', baseImagery, baseTerrain)
  console.log(map)
  setTimeout(() => {
    geojson()
  }, 3000)
}

参数配置

const data: any = {
  0: {
    id: 'point-1',
    name: 'point',
    options: {
      scale: 1.0,
      width: 50,
      height: 50,
      onGround: true,
      image: new URL('../assets/images/point.png', import.meta.url).href,
    },
  },
  1: {
    id: 'polyline-1',
    name: 'polyline',
    options: { width: 2, color: '#ff00ff', onGround: true, index: 2 },
  },
  2: {
    id: 'polygon-1',
    name: 'polygon',
    options: {
      fill: '#52d43a50',
      outline: true,
      outlineColor: '#000',
      outlineWidth: 1.0,
      onGround: true,
      index: 1,
    },
  },
}

加载

const geojson = async () => {
  for (let index = 0; index < 3; index++) {
    const { id, options } = data[index]
    const url = 'https://app.larkview.cn/larkexplorersdk/resources/geojson/' + data[index].name + '.json'
    let geojson = await map.Layers.Geojson.add(url, id, 1, options)
    map.Navigation.flyToItem(geojson)
  }
}

const boolBillboard = ref(false)
const activeBillboard = (type: number) => {
  const activeType: any = {
    1: LarkExplorer.ActiveType.BLINK,
    2: LarkExplorer.ActiveType.SCALING,
    3: LarkExplorer.ActiveType.JUMP,
  }
  if (boolBillboard.value) return
  const element = data[0]
  const layer = map.Layers.getById(element.id)
  for (let index = 0; index < layer._children.length; index++) {
    const item = layer._children[index]
    map.Layers.active(item, true, activeType[type])
  }
  boolBillboard.value = true
}

const boolPolyline = ref(false)
const activePolyline = (type: number) => {
  const activeType: any = {
    1: LarkExplorer.ActiveType.BLINK,
    2: LarkExplorer.ActiveType.SCALING,
  }
  if (boolPolyline.value) return
  const element = data[1]
  const layer = map.Layers.getById(element.id)
  for (let index = 0; index < layer._children.length; index++) {
    const item = layer._children[index]
    map.Layers.active(item, true, activeType[type])
  }
  boolPolyline.value = true
}
const boolPolygon = ref(false)
const activePolygon = () => {
  if (boolPolygon.value) return
  const element = data[2]
  const layer = map.Layers.getById(element.id)
  for (let index = 0; index < layer._children.length; index++) {
    const item = layer._children[index]
    map.Layers.active(item, true, LarkExplorer.ActiveType.BLINK)
  }
  boolPolygon.value = true
}

const inactive = () => {
  if (boolBillboard.value) {
    const element = data[0]
    const layer = map.Layers.getById(element.id)
    for (let index = 0; index < layer._children.length; index++) {
      const item = layer._children[index]
      map.Layers.active(item, false)
    }
    boolBillboard.value = false
  }
  if (boolPolyline.value) {
    const element = data[1]
    const layer = map.Layers.getById(element.id)
    for (let index = 0; index < layer._children.length; index++) {
      const item = layer._children[index]
      map.Layers.active(item, false)
    }
    boolPolyline.value = false
  }
  if (boolPolygon.value) {
    const element = data[2]
    const layer = map.Layers.getById(element.id)
    for (let index = 0; index < layer._children.length; index++) {
      const item = layer._children[index]
      map.Layers.active(item, false)
    }
    boolPolygon.value = false
  }
}
</script>

运行效果 更多示例