新版本地图尝试
This commit is contained in:
58
src/views/App3DMap.vue
Normal file
58
src/views/App3DMap.vue
Normal file
@@ -0,0 +1,58 @@
|
||||
<script>
|
||||
const KENGEE_CDN_BASE = "http://10.0.97.209/presource/datascreen/js/threejs"
|
||||
const importMapScript = document.createElement('script');
|
||||
importMapScript.type = 'importmap';
|
||||
importMapScript.textContent = JSON.stringify({
|
||||
imports: {
|
||||
three: `${KENGEE_CDN_BASE}/three.module.js`,
|
||||
OrbitControls: `${KENGEE_CDN_BASE}/jsm/controls/OrbitControls.js`,
|
||||
'three/jsm/renderers/CSS3DRenderer': `${KENGEE_CDN_BASE}/jsm/renderers/CSS3DRenderer.js`,
|
||||
}
|
||||
});
|
||||
document.head.appendChild(importMapScript);
|
||||
const THREE = await import('three')
|
||||
const {OrbitControls} = await import('OrbitControls')
|
||||
const CSS3DRenderer = await import('three/jsm/renderers/CSS3DRenderer')
|
||||
export default {
|
||||
name: "App3DMap",
|
||||
label: "vue3DModel地图",
|
||||
data() {
|
||||
return {
|
||||
scene: null,
|
||||
camera: null,
|
||||
renderer: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
animate() {
|
||||
requestAnimationFrame(this.animate);
|
||||
// 更新控制器
|
||||
this.controls.update();
|
||||
// 渲染场景
|
||||
this.renderer.render(this.scene, this.camera);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.scene = new THREE.Scene();
|
||||
this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
|
||||
this.camera.position.set(0, 0, 40);
|
||||
this.camera.lookAt(new THREE.Vector3(0, 0, 0));
|
||||
// this.renderer = new CSS3DRenderer();
|
||||
this.scene.add(this.camera)
|
||||
|
||||
this.renderer = new THREE.WebGLRenderer({antialias: true});
|
||||
this.renderer.setSize(this.$el.offsetWidth, this.$el.offsetHeight);
|
||||
this.$el.appendChild(this.renderer.domElement);
|
||||
this.controls = new OrbitControls(this.camera, this.renderer.domElement);
|
||||
this.animate();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="App3DMap"/>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -16,7 +16,9 @@ export default {
|
||||
const {$waitFor, THREE, $loadScript} = window
|
||||
return $waitFor(THREE).then(() => Promise.all([
|
||||
`http://10.0.97.209/presource/datascreen/js/three/js/controls/OrbitControls.js`,
|
||||
// `http://10.0.97.209/presource/datascreen/js/renderers/CSS3DRenderer.js`,
|
||||
`http://10.0.97.209/presource/datascreen/js/three/js/renderers/CSS3DRenderer.js`,
|
||||
`http://10.0.97.209/presource/datascreen/js/three/js/renderers/CSS2DRenderer.js`,
|
||||
`http://10.0.97.209/presource/datascreen/js/three/js/objects/Reflector.js`,
|
||||
].map(e => $loadScript('js', e))))
|
||||
},
|
||||
initMap() {
|
||||
@@ -34,10 +36,8 @@ export default {
|
||||
this.renderer = null; // 渲染器
|
||||
this.controls = null; // 控制器
|
||||
this.mapGroup = []; // 组
|
||||
this.meshList = []; // 接受鼠标事件对象
|
||||
this.selectedObject = null; // 当前选中对象
|
||||
this.loopIndex = 0; // 循环标记
|
||||
this.cameraPath = null; // 相机运动轨迹
|
||||
this.mouse = new THREE.Vector2();
|
||||
}
|
||||
|
||||
@@ -47,7 +47,6 @@ export default {
|
||||
init() {
|
||||
this.setScene();
|
||||
this.setCamera();
|
||||
// this.setLight();
|
||||
// this.setAxes();
|
||||
this.setRenderer();
|
||||
this.setControl();
|
||||
@@ -61,11 +60,8 @@ export default {
|
||||
/**
|
||||
* @desc 动画循环
|
||||
* */
|
||||
|
||||
animat() {
|
||||
requestAnimationFrame(this.animat.bind(this));
|
||||
this.lightWave();
|
||||
// this.moveCamera();
|
||||
TWEEN.update();
|
||||
this.controls.update();
|
||||
this.renderer.render(this.scene, this.camera);
|
||||
@@ -74,7 +70,6 @@ export default {
|
||||
/**
|
||||
* @desc 获取地图
|
||||
* */
|
||||
|
||||
getMap(url) {
|
||||
const that = this;
|
||||
axios.get(url).then(function (res) {
|
||||
@@ -86,20 +81,6 @@ export default {
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* @desc 添加基础灯光
|
||||
* */
|
||||
|
||||
setLight() {
|
||||
const pointLight = new THREE.PointLight(0xffffff, 1, 0);
|
||||
pointLight.position.set(0, 0, 5);
|
||||
this.scene.add(pointLight);
|
||||
|
||||
const sphereSize = 1;
|
||||
const pointLightHelper = new THREE.PointLightHelper(pointLight, sphereSize);
|
||||
this.scene.add(pointLightHelper);
|
||||
}
|
||||
|
||||
/**
|
||||
* @desc 绘制地图
|
||||
* @params geojson
|
||||
@@ -217,7 +198,6 @@ export default {
|
||||
side: THREE.DoubleSide,
|
||||
blending: THREE.AdditiveBlending,
|
||||
color: bakeStockAmt > 0 ? "#66FFFF" : "#FFD15C",
|
||||
// color: "#66FFFF",
|
||||
depthTest: false,
|
||||
transparent: true,
|
||||
opacity: 1
|
||||
@@ -228,6 +208,7 @@ export default {
|
||||
// marker.scale.set(scale, scale, 1)
|
||||
marker.data = item
|
||||
marker.position.set(v3.x * scale, v3.y * scale, 0.201 * scale)
|
||||
console.log(marker)
|
||||
return marker
|
||||
}
|
||||
|
||||
@@ -240,32 +221,6 @@ export default {
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* @desc 移动相机
|
||||
* */
|
||||
moveCamera() {
|
||||
// 第一次绘制相机路径
|
||||
if (this.cameraPath === null) {
|
||||
this.cameraPath = new THREE.Path();
|
||||
this.cameraPath.moveTo(150, 0);
|
||||
this.cameraPath.lineTo(70, 0);
|
||||
let geometry = new THREE.BufferGeometry().setFromPoints(this.cameraPath.getPoints());
|
||||
let material = new THREE.LineBasicMaterial({color: 0xff0000});
|
||||
let line = new THREE.Line(geometry, material);
|
||||
line.position.z = 100;
|
||||
this.scene.add(line);
|
||||
this.progress = 0;
|
||||
} else {
|
||||
if (this.progress < 1) {
|
||||
this.progress += 0.01; // 增量 也就是说将该线端，按照1/500的比例进行分割。也就是说有500个坐标点
|
||||
let point = this.cameraPath.getPointAt(this.progress); // 从路径中拿取坐标点点
|
||||
if (point) {
|
||||
this.camera.position.set(point.x, point.y, 100);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @desc 坐标转换
|
||||
* @param lnglat [x,y]
|
||||
@@ -323,7 +278,7 @@ export default {
|
||||
* */
|
||||
setControl() {
|
||||
this.controls = new THREE.OrbitControls(this.camera, rootEl);
|
||||
this.controls.enableRotate = false
|
||||
// this.controls.enableRotate = false
|
||||
this.camera.position.set(this.cameraPosition.x, this.cameraPosition.y, this.cameraPosition.z);
|
||||
}
|
||||
|
||||
@@ -338,7 +293,6 @@ export default {
|
||||
/**
|
||||
* @desc 鼠标 hover 事件
|
||||
* */
|
||||
|
||||
bindMouseEvent() {
|
||||
const that = this, _this = this;
|
||||
const raycaster = new THREE.Raycaster();
|
||||
@@ -439,12 +393,26 @@ export default {
|
||||
this.scene.add(ground);
|
||||
ground.receiveShadow = true;
|
||||
ground.castShadow = true;
|
||||
const div = document.createElement("div");
|
||||
div.style.color = "#fff";
|
||||
div.style.width = "40px";
|
||||
div.style.height = "25px";
|
||||
div.style.borderWidth = "1px";
|
||||
div.style.borderStyle = "solid";
|
||||
div.style.borderColor = "#00ffc4";
|
||||
div.style.borderRadius = "5px";
|
||||
div.style.fontSize = "14px";
|
||||
div.style.fontWeight = 600;
|
||||
div.style.textShadow = "1px 1px 6px #fff";
|
||||
div.style.textAlign = "center";
|
||||
div.style.lineHeight = "25px";
|
||||
div.textContent = `我操你大爷`;
|
||||
const tip = new THREE.CSS2DObject(div);
|
||||
tip.scale.set(0.01, 0.01, 0.01);
|
||||
tip.position.set(0, 0, 1);
|
||||
this.scene.add(tip);
|
||||
}
|
||||
|
||||
/**
|
||||
* @desc 地区名称 采用sprite
|
||||
* */
|
||||
|
||||
tipsSprite(areaData) {
|
||||
let canvas = document.createElement("canvas");
|
||||
canvas.width = 500;
|
||||
@@ -472,39 +440,6 @@ export default {
|
||||
|
||||
return textSprite
|
||||
}
|
||||
|
||||
/**
|
||||
* @desc 光柱波纹动画
|
||||
* */
|
||||
|
||||
lightWave() {
|
||||
if (this.mapGroup.children) {
|
||||
let that = this;
|
||||
if (this.loopIndex >= 1) {
|
||||
this.loopIndex = 0;
|
||||
} else {
|
||||
this.loopIndex += 0.02;
|
||||
}
|
||||
this.mapGroup.children.forEach(function (item) {
|
||||
if (item.name === 'area') {
|
||||
item.children.forEach(function (g) {
|
||||
if (g.name === 'lightTipGroup') {
|
||||
g.children.forEach(function (c) {
|
||||
if (c.name === 'circleMesh') {
|
||||
c.scale = {
|
||||
x: 4 * Math.asin(that.loopIndex) + 1,
|
||||
y: 4 * Math.asin(that.loopIndex) + 1,
|
||||
z: 4 * Math.asin(that.loopIndex) + 1
|
||||
};
|
||||
c.material.opacity = 0.3 * Math.acos(that.loopIndex) - 0.1
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return new GeoMap()
|
||||
@@ -541,3 +476,9 @@ export default {
|
||||
<template>
|
||||
<section class="AppThreeMap"/>
|
||||
</template>
|
||||
<style>
|
||||
.AppThreeMap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user