maptalk.three 实现动态路网样式

123456aadddsad

已于 2024-12-13 13:56:59 修改

阅读量164

点赞数 3

分类专栏：地图文章标签：前端 javascript 开发语言

于 2024-12-13 13:56:15 首次发布

本文链接：https://blog.youkuaiyun.com/vvddkkk/article/details/144448065

版权

地图专栏收录该内容

4 篇文章

订阅专栏

项目依赖

Maptalks、Maptalks.three、Three.js

关键代码

    // 资源文件
    let urlTemplate = 路线.geojson` 
    fetch(urlTemplate)
      .then(res => res.json())
      .then(geojson => {
          // 创建ThreeLayer图层
          threeLayer = new ThreeLayer('threeLayer', {
            forceRenderOnMoving: true,
            forceRenderOnRotating: true
          })
          threeLayer.prepareToDraw = function (gl, scene) {
            const light = new THREE.DirectionalLight(0xffffff)
            light.position.set(0, -10, 10).normalize()
            scene.add(light)
            geojson.features.forEach((item, index) => {
              const lineStrings = maptalks.GeoJSON.toGeometry(item)
              let material
              material = getPathMaterial(Colors[index], loadimg
              // 存放材质
              materialMap.set(item.properties.Id, material)
              addLines(lineStrings, item.properties.Id)

              // 存放路网，便于控制显隐
              let meshs = threeLayer.getMeshes()
              // 泛光
              meshs[meshs.length - 1].options.bloom = true
            })
          }
          threeLayer.addTo(group3D)
        }
      })

function addLines(lineStrings, materialName) {
  const line = threeLayer.toPaths(
    lineStrings,
    {
      interactive: false,
      asynchronous: true,
      altitude: Math.random() * 0.2,
      width: 20,
      bloom: materialName === 'Network' ? false : true
    },
    materialMap.get(materialName)
  )
  threeLayer.addMesh(line)
  if (offAnimation) {
    animation(threeLayer)
  }
}

//循环渲染
function animation() {
  offAnimation = false
  // layer animation support Skipping frames
  threeLayer._needsUpdate = !threeLayer._needsUpdate
  if (threeLayer._needsUpdate) {
    threeLayer.redraw()
  }
  materialMap.forEach(item => {
    item.map.offset.x -= 0.002
  })

  requestAnimationFrame(animation)
}

// 材质
function getPathMaterial(color = '#fff', loadimg) {
  const texture = new THREE.TextureLoader().load(loadimg)
  texture.needsUpdate = true //使用贴图时进行更新
  texture.wrapS = texture.wrapT = THREE.RepeatWrapping
  texture.repeat.set(0.002, 1)

  const material = new THREE.MeshBasicMaterial({
    map: texture,
    transparent: true,
    color: color
  })
  return material
}

在Vue中引入材质需Import

import BlueLoadImg from '@/assets/images/贴图.png'