# mapvThreeFn

**Repository Path**: PointMY/mapv-three-fn

## Basic Information

- **Project Name**: mapvThreeFn
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 3
- **Created**: 2023-11-27
- **Last Updated**: 2023-11-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# mapvThreeFn

### 地图特殊能力的使用方法

1. 设置地图的背景图

```javascript
import * as THREE from "bmap-three"

const textureLoader = new THREE.TextureLoader()
const plane = new THREE.Mesh(
	new THREE.PlaneGeometry(2, 2, 1, 1),
	new THREE.MeshBasicMaterial({
		color: new THREE.Color("rgb(176,241,250)"),
		roughness: 0,
		metalness: 0,
		map: textureLoader.load("/serviceArea/apaas/map_bg.jpg"),
	})
)
plane.scale.set(3840 * 300, 2160 * 360, 1) // plane.scale.set(7680 * 300, 2401 * 360, 1);
plane.rotateZ(Math.PI / 9)
plane.position.set(12567825.834400661, 2684599.5913183833, -100)
map.engine.add(plane)
```

2. 根据模型 ID（uuid）获取模型对象

```javascript
const model = map.engine.scene.getObjectByName("模型ID")
```

3. 修改模型颜色

```javascript
map.assetsScene.lightModelColor(model, "#dd001b")
```

4. 监听模型点击事件

```javascript
map.assetsScene.addEventListener("click", (e) => {
	console.log("模型信息：", e)
})
```

5. flyTo 方法优化（起飞-平移-下降）

```javascript
import { FlyManager } from '@baidu/mapv-three'
import * as THREE from "bmap-three"

upAndFly(center, flyParameters = {}, callback) {
  let engine = this.map.engine
  let position = engine.map.projectPointArr(center)
  // 如果当前位置到目标点的高度大于两个位置点距离的0.1，直接flyTo过去
  // 若小于两个位置点的距离的0.1，先抬升视角再flyTo过去
  const flyManager = engine.add(new FlyManager())
  flyManager.onFinish = null
  const cameraPosition = engine.camera.position
  const start = new THREE.Vector2(...cameraPosition.toArray())
  const target = new THREE.Vector2(...position)
  const distance = start.distanceTo(target)
  const height = Math.abs(cameraPosition.z - position[2])

  if (distance > height * 1 && distance > 5000) {
    const duration = Math.max(Math.min(distance / 10, 3000), 2000)
    const tempRange = flyParameters.range ? flyParameters.range : 100
    flyManager.onFinish = () => {
      flyManager.flyTo({
        center: engine.map.unprojectPointArr(position),
        pitch: 0,
        heading: 30,
        range: tempRange + 400,
        ...flyParameters
      }, {
        duration
      })

      flyManager.onFinish = () => {
        flyManager.flyTo({
          center: engine.map.unprojectPointArr(position),
          pitch: 70,
          heading: 10,
          range: tempRange,
          ...flyParameters
        }, {
          duration: 2000
        })

        callback && callback()

        flyManager.onFinish = null
      }
    }
    const upDuration = Math.max(Math.min(distance / 20, 2000), 1000)
    flyManager.flyTo({
      pitch: 30,
      heading: 30,
      range: distance / 5
    }, {
      duration: upDuration
    })
  } else {
    flyManager.onFinish = () => {
      callback && callback()
    }
    flyManager.flyTo({
      center: engine.map.unprojectPointArr(position),
      heading: 0,
      pitch: 70,
      range: 183,
      ...flyParameters
    }, {
      duration: 3000
    })
  }
}
// 使用
// upAndFly(center, {heading, pitch, range})
```

6. 跳转前提前加载模型

```javascript
/** 定位到模型 */
const onModelClick = useCallback(
	(modelInfo) => {
		if (flyToModel) {
			flyToModel.levels[0].distance = flyToModel.levelDistance
		}
		const { position, flyParameters, customPosition } = modelInfo
		let targetPositon = customPosition ? customPosition : position
		if (modelInfo.isOblique || !modelInfo.lod) {
			flyTo(false, targetPositon, flyParameters)
			return
		}
		const lodModel = models[modelInfo.path]
		lodModel.levelDistance = lodModel.levels[0].distance
		flyToModel = lodModel
		// 设置一个很大的distance用来点击时马上加载模型，在飞行结束或者飞向其他模型时还原到原本的distance
		lodModel.levels[0].distance = 10000000
		// 有些模型的offset和模型位置有偏差，使用customPosition来替换position值
		flyTo(false, targetPositon, flyParameters, () => {
			lodModel.levels[0].distance = lodModel.levelDistance
			flyToModel = null
			delete lodModel.levelDistance
		})
	},
	[flyTo]
)
```

7. 形变时校正地图点击域

```javascript
map.engine.event.setScale(x, y)
```

8. 根据经纬度以km为半径绘制圆形范围
```javascript
import * as THREE from "bmap-three"
const flyToByKm = ({ km = "", center = "" }) => {
  const { lng, lat } = center
  if (!lng || !lat) return;
  const heading = 7.2;
  const pitch = 35;
  const range = 226.15091989535898 * (km / 0.1); //一公里与实际视觉角度比
  const zoom = 13;
  const thisCenter = [lng, lat];
  const is3DControl = true;
  this.map.flyTo(
    {
      center: thisCenter,
      heading,
      pitch,
      range: is3DControl ? range : false,
      zoom: is3DControl ? false : zoom,
    },
    { duration: 2000 }
  );
}
const DrawCircle = ({ center, km }) => {
  const { lng, lat } = center;
  if (!lng || !lat) return;
  flyToByKm({ km: number });
  // this.circleData ? this.map.engine.remove(this.circleData) : ""; //如为全局唯一半径 可挂载到全局变量 初始化时置空
  let size = 1000 * number * 2; //公里转米(转直径)
  size += size * 0.1; //会有大约1%比例的误差 补参
  const circle = this.map.engine.add(
    new THREE.Circle({
      type: "Gradient", // 渐变 不传为不渐变
      color: "#a0fe9c",
      size: size,
      borderWidth: 20,
      opacity: 0.5,
      borderColor: "#00ffba",
      vertexSizes: true,
    })
  );
  // this.circleData = circle; //全局挂载
  let features = [];
  let dataSourses = await mapvthree.GeoJSONDataSource.fromGeoJSON(features);
  dataSourses.add(new mapvthree.DataItem([lng, lat, 18]));
  dataSourses.setAttribute("size", (p) => size);
  dataSourses.setAttribute("color", (p) => "#010e20");
  circle.dataSource = dataSourses;
}
DrawCircle({ center, km })
```