forked from JointCloud/JCC-RIP
fix
This commit is contained in:
ann
parent
dd4d96a057
commit
8427fac534
|
|
@ -42,7 +42,7 @@ export default {
|
|||
getEarthRegion().then(res => {
|
||||
const demo = res.data
|
||||
const that = this
|
||||
for (let i = 0; i < demo.length; i++) {
|
||||
for (let i = 0; i < 6; i++) {
|
||||
const modelItem = []
|
||||
const value = []
|
||||
modelItem['name'] = demo[i].area
|
||||
|
|
@ -69,7 +69,6 @@ export default {
|
|||
// cancelAnimationFrame(this.aniId)
|
||||
this.orbitControls.autoRotate = false// 将自动旋转关闭
|
||||
// this.camera.zoom = 2.3
|
||||
console.log()
|
||||
this.scene.children[6].visible = false
|
||||
this.scene.children[7].visible = false
|
||||
this.scene.children[8].visible = false
|
||||
|
|
@ -89,15 +88,16 @@ export default {
|
|||
// var zoom = { val: this.camera.zoom }
|
||||
// var zoomEnd = { value: 2.3 }
|
||||
const tweenL2 = new TWEEN.Tween(this.camera).to({ left: -s * k, right: s * k, top: s, bottom: -s }, 1000).easing(TWEEN.Easing.Sinusoidal.InOut)
|
||||
// .onUpdate(() => {
|
||||
// this.camera.zoom = 2.3
|
||||
// })
|
||||
.onUpdate(() => {
|
||||
// this.camera.zoom = 2.3
|
||||
this.scene.children[4].material.color.copy(new Three.Color(0x0a263e))
|
||||
})
|
||||
tweenL1.chain(tweenL2).start()
|
||||
this.renderChinaDetailData()
|
||||
},
|
||||
renderChinaDetailData() {
|
||||
// chinamap
|
||||
// this.scene.children[2].visible = false
|
||||
// this.scene.children[4].visible = false
|
||||
// this.setRandomDot(this.mapMarks)
|
||||
const groupLines = new Three.Group()
|
||||
this.mapMarks.forEach(r => {
|
||||
|
|
@ -107,6 +107,52 @@ export default {
|
|||
}
|
||||
})
|
||||
this.scene.add(groupLines)
|
||||
// this.setChinaMark(this.mapMarks)
|
||||
},
|
||||
setChinaMark(_markData) {
|
||||
for (var i = 0; i < _markData.length; i++) {
|
||||
var markPos = this.getPosition(_markData[i].value[0] + 90, _markData[i].value[1], 100)
|
||||
// mark.position.set(markPos.x, markPos.y, markPos.z)
|
||||
|
||||
var textureLoader = new Three.TextureLoader()
|
||||
var material = new Three.MeshBasicMaterial({
|
||||
map: textureLoader.load(process.env.VUE_APP_PUBLIC_SOURCE_API + '/point.png'),
|
||||
transparent: true, // 使用背景透明的png贴图，注意开启透明计算
|
||||
blending: Three.AdditiveBlending,
|
||||
// side: THREE.DoubleSide, //双面可见
|
||||
depthWrite: false // 禁止写入深度缓冲区数据
|
||||
})
|
||||
var mesh = new Three.Mesh(new Three.PlaneGeometry(8, 8, 3, 3), material)
|
||||
// var size = 10 * 0.04// 矩形平面Mesh的尺寸
|
||||
// mesh.scale.set(size, size, size)// 设置mesh大小
|
||||
// 设置mesh位置
|
||||
mesh.position.set(markPos.x, markPos.y, markPos.z)
|
||||
// mesh在球面上的法线方向(球心和球面坐标构成的方向向量)
|
||||
var coordVec3 = new Three.Vector3(markPos.x, markPos.y, markPos.z).normalize()
|
||||
// mesh默认在XOY平面上，法线方向沿着z轴new THREE.Vector3(0, 0, 1)
|
||||
var meshNormal = new Three.Vector3(0, 0, 1)
|
||||
// 四元数属性.quaternion表示mesh的角度状态
|
||||
// .setFromUnitVectors();计算两个向量之间构成的四元数值
|
||||
mesh.quaternion.setFromUnitVectors(meshNormal, coordVec3)
|
||||
this.marking.add(mesh)
|
||||
|
||||
// 添加文字 eg: 北京：18个
|
||||
var texture = new Three.CanvasTexture(this.getCanvasFont(_markData[i].name + '：' + _markData[i].count + '个'))
|
||||
// 计算字体总长
|
||||
const fontNumber = _markData[i].count.toString().length * 5.8642578125 + _markData[i].name.length * 10 + 10 + 2.4072265625 + 5
|
||||
texture.needsUpdate = true
|
||||
var fontMesh = new Three.Sprite(
|
||||
new Three.SpriteMaterial({
|
||||
map: texture
|
||||
})
|
||||
)
|
||||
fontMesh.scale.x = fontNumber
|
||||
fontMesh.scale.y = 10
|
||||
fontMesh.position.set(markPos.x + 10, markPos.y + 10, markPos.z - 20)
|
||||
this.textMarking.add(fontMesh)
|
||||
}
|
||||
this.scene.add(this.marking)
|
||||
this.scene.add(this.textMarking)
|
||||
},
|
||||
lineConnect(posStart, posEnd) {
|
||||
// 根据目标坐标设置3D坐标 z轴位置在地图表面
|
||||
|
|
@ -259,7 +305,7 @@ export default {
|
|||
},
|
||||
initLight() {
|
||||
const ambientLight = new Three.AmbientLight(0xcccccc, 1.1)
|
||||
this.scene.add(ambientLight) // 1
|
||||
this.scene.add(ambientLight) // 0
|
||||
var directionalLight = new Three.DirectionalLight(0xffffff)
|
||||
directionalLight.position.set(1, 500, -20)
|
||||
directionalLight.castShadow = true
|
||||
|
|
@ -267,7 +313,7 @@ export default {
|
|||
directionalLight.shadow.camera.bottom = -10
|
||||
directionalLight.shadow.camera.left = -52
|
||||
directionalLight.shadow.camera.right = 12
|
||||
this.scene.add(directionalLight) // 2
|
||||
this.scene.add(directionalLight) // 1
|
||||
},
|
||||
initControl() {
|
||||
this.orbitControls = new OrbitControls(this.camera, this.renderer.domElement)
|
||||
|
|
@ -288,7 +334,7 @@ export default {
|
|||
var textureLoader = new Three.TextureLoader()
|
||||
textureLoader.load(process.env.VUE_APP_PUBLIC_SOURCE_API + '/earth.jpg', (texture) => {
|
||||
var material = new Three.MeshLambertMaterial({
|
||||
// color: 0x0000ff,
|
||||
// color: 0x0a263e,
|
||||
transparent: true,
|
||||
opacity: 0.96,
|
||||
map: texture
|
||||
|
|
@ -301,7 +347,7 @@ export default {
|
|||
})
|
||||
this.mesh = new Three.Mesh(geometry, material)
|
||||
this.mesh2 = new Three.Mesh(geometry, material2)
|
||||
this.scene.add(this.mesh) // 4
|
||||
this.scene.add(this.mesh) // 4地球
|
||||
this.scene.add(this.mesh2) // 5
|
||||
this.setMark(this.mapMarks) // 打点
|
||||
this.setAreaMark(this.area)
|
||||
|
|
@ -343,7 +389,7 @@ export default {
|
|||
const coordinates = elem.geometry.coordinates
|
||||
coordinates.forEach(multiPolygon => {
|
||||
multiPolygon.forEach(polygon => {
|
||||
const lineMaterial = new Three.LineBasicMaterial({ color: 0x3BFA9E })
|
||||
const lineMaterial = new Three.LineBasicMaterial({ color: 0x3EDFFC })
|
||||
const positions = []
|
||||
const lineGeometry = new Three.BufferGeometry()
|
||||
for (let i = 0; i < polygon.length; i++) {
|
||||
|
|
@ -538,7 +584,7 @@ export default {
|
|||
fontMesh.position.set(markPos.x - 30, markPos.y - 10, markPos.z - 20)
|
||||
this.scene.add(fontMesh) // 8
|
||||
},
|
||||
// 设定地区点数量框
|
||||
// 设定地区点数量框 全球数据点显示
|
||||
setMark(_markData) {
|
||||
this.marking = new Three.Group() // 6
|
||||
this.textMarking = new Three.Group() // 7
|
||||
|
|
|
|||
Loading…
Reference in New Issue