diff --git a/src/assets/img/map_bg.png b/src/assets/img/map_bg.png index 71553ba..d547e61 100644 Binary files a/src/assets/img/map_bg.png and b/src/assets/img/map_bg.png differ diff --git a/src/assets/img/park-map-bg1-1.png b/src/assets/img/park-map-bg1-1.png deleted file mode 100644 index 8441429..0000000 Binary files a/src/assets/img/park-map-bg1-1.png and /dev/null differ diff --git a/src/assets/img/park-map-bg1.png b/src/assets/img/park-map-bg1.png index 16bbf4d..941742d 100644 Binary files a/src/assets/img/park-map-bg1.png and b/src/assets/img/park-map-bg1.png differ diff --git a/src/assets/img/yuanmou_line.png b/src/assets/img/yuanmou_line.png deleted file mode 100644 index e5ea99e..0000000 Binary files a/src/assets/img/yuanmou_line.png and /dev/null differ diff --git a/src/assets/svg/fullScreen.svg b/src/assets/svg/fullScreen.svg new file mode 100644 index 0000000..7250b0d --- /dev/null +++ b/src/assets/svg/fullScreen.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/router/index.js b/src/router/index.js index 8cec16b..7fd86c6 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -6,13 +6,13 @@ export const menu = [ { path:"/", name:"home", - redirect:"/company", + redirect:"/park", component:()=>import('@/view/home.vue'), meta:{ }, children:[ + {path:"park",name:"park",meta:{title:"元谋县国家现代农业产业园"},component:()=>import('@/view/park/index.vue')}, {path:"company",name:"company",meta:{title:"企业专栏"},component:()=>import('@/view/company/index.vue')}, {path:"goods",name:"goods",meta:{title:"品种专栏"},component:()=>import('@/view/goods/index.vue')}, - {path:"park",name:"park",meta:{title:"产业园区门户"},component:()=>import('@/view/park/index.vue')}, ] }, ]; diff --git a/src/view/home.vue b/src/view/home.vue index da75032..7964ba7 100644 --- a/src/view/home.vue +++ b/src/view/home.vue @@ -40,6 +40,7 @@ top:10px; left:10px; cursor: pointer; + pointer-events: all; transition: all 0.3s; &:hover{ opacity: 0.7; @@ -78,15 +79,30 @@ } } .title{ + letter-spacing: 5px; position:absolute; font-weight: bold; - font-size:52px; + font-size:48px; background-image:-webkit-linear-gradient(top, #fff,#429EFA); -webkit-background-clip:text; -webkit-text-fill-color:transparent; left:50%; transform: translate(-50%,10px); } + .time{ + position:absolute; + right: 68px; + top: 24px; + color:#1587FC; + font-size:18px; + } + .fullScreen{ + position:absolute; + right:20px; + top:24px; + color:#1587FC; + font-size:30px; + } } &>.el-select{ pointer-events: all; @@ -148,13 +164,14 @@ - - + - + {{$route.meta.title}} + {{time}}11 + { + time.value=new Date().format('yyyy-MM-dd hh:mm') + },1000*60) + } onMounted(()=>{ + refreshTime() + AMAPLoader.load({ key:"3b999eeef15d7b6ca6a3fd0c9531160d", version:"2.0", @@ -320,5 +347,6 @@ import mapPopover from './mapPopover.vue' }) onUnmounted(()=>{ window.removeEventListener('click') + clearTimeout(refreshTime) }) \ No newline at end of file diff --git a/src/view/park/center.vue b/src/view/park/center.vue index fc4de64..9ca2c6b 100644 --- a/src/view/park/center.vue +++ b/src/view/park/center.vue @@ -85,7 +85,7 @@ - + @@ -104,7 +104,7 @@ import {SVGToBase64} from 'black-knight/lib/config/tools' color:"#fff" }) - var offset=reactive({x:0,y:0,z:0}) + var offset=reactive({x:0,y:0,z:0,w:0,h:0}) var map=ref(); var scene,renderer,camera; @@ -133,6 +133,7 @@ import {SVGToBase64} from 'black-knight/lib/config/tools' camera = new THREE.PerspectiveCamera(40, map.value.clientWidth / map.value.clientHeight, 10, 1000) camera.position.set(0, 100, 90) + window.c=camera var directionalLight = new THREE.DirectionalLight(0xffffff, 0.6); directionalLight.position.set(0, 0, 10).normalize(); @@ -146,8 +147,9 @@ import {SVGToBase64} from 'black-knight/lib/config/tools' var controls = new MapControls(camera, map.value) // controls.enableRotate=false - controls.maxPolarAngle=Math.PI/2.7 - controls.minPolarAngle=Math.PI/8 + controls.maxPolarAngle=Math.PI/2 + controls.minPolarAngle=0 + controls.maxZoom=1.3 } function addMap(){ var shape = new THREE.Shape() @@ -155,27 +157,6 @@ import {SVGToBase64} from 'black-knight/lib/config/tools' for (var i of yuanmou.slice(1)){ shape.lineTo(...i) } - - var geometry = new THREE.ExtrudeBufferGeometry( shape, { - depth: 0, //二维面厚度 - bevelEnabled: false, - } ); - geometry.translate(-center[0],-center[1],0.01) - var texture = new THREE.TextureLoader().load(require('@/assets/img/yuanmou_line.png')) - texture.wrapS = texture.wrapT = THREE.RepeatWrapping; - texture.repeat.set(2.15, 1.38) - texture.offset.set(-0.53,-0.06) - var material = new THREE.MeshBasicMaterial({ - transparent:true, - map:texture, - opacity:0.8, - color:0x0C89FE, - }) - var mesh = new THREE.Mesh( geometry, material ); - //添加边线 - var line = new THREE.LineBasicMaterial({ color: 0x0C89FE }) - var side = new THREE.LineSegments( new THREE.EdgesGeometry(geometry,1), line) - mesh.add(side) //底边 var bottomGeometry=new THREE.ExtrudeBufferGeometry( shape, { depth: 5, //二维面厚度 @@ -184,8 +165,8 @@ import {SVGToBase64} from 'black-knight/lib/config/tools' bottomGeometry.translate(-center[0],-center[1],-5) var mian = new THREE.TextureLoader().load(require('@/assets/img/map_bg.png')) mian.wrapS = mian.wrapT = THREE.RepeatWrapping; - mian.repeat.set(1.87, 1.28) - mian.offset.set(0.04,0.56) + mian.repeat.set(1.964, 1.346) + mian.offset.set(0.465,-0.141) var materialUp=new THREE.MeshBasicMaterial({ // transparent:true, map: mian, @@ -202,8 +183,6 @@ import {SVGToBase64} from 'black-knight/lib/config/tools' color:0x0C89FE, }) var mesh1=new THREE.Mesh(bottomGeometry,[materialUp,materialSide]) - - group.add(mesh) group.add(mesh1) } async function addLabel(){ @@ -226,7 +205,7 @@ import {SVGToBase64} from 'black-knight/lib/config/tools' await new Promise(result=>{ nextTick(()=>{ var box=svg.value.children[0].getBBox() - var adsGeometry=new THREE.PlaneGeometry(box.width/14,box.height/14) + var adsGeometry=new THREE.PlaneGeometry(box.width/16,box.height/16) var adsMaterial=new THREE.MeshBasicMaterial({ transparent:true, side:THREE.DoubleSide, @@ -246,7 +225,7 @@ import {SVGToBase64} from 'black-knight/lib/config/tools' } } function addBG1(){ - var bgGeometry=new THREE.PlaneGeometry(387/9.2,758/9.2) + var bgGeometry=new THREE.PlaneGeometry(253/6,464/5.9) var bgMaterial=new THREE.MeshBasicMaterial({ transparent:true, depthWrite:false, @@ -254,7 +233,7 @@ import {SVGToBase64} from 'black-knight/lib/config/tools' map:new THREE.TextureLoader().load(require('@/assets/img/park-map-bg1.png')) }) var bgMesh=new THREE.Mesh(bgGeometry,bgMaterial) - bgMesh.position.set(115*(-center[0]+101.856473),0.1,115*(-center[1]+25.815215)) + bgMesh.position.set(115*(-center[0]+101.859473),0.1,115*(-center[1]+25.825215)) bgMesh.rotation.x=-Math.PI/2 bgMesh.renderOrder=1 scene.add(bgMesh) @@ -267,14 +246,14 @@ import {SVGToBase64} from 'black-knight/lib/config/tools' map:new THREE.TextureLoader().load(require('@/assets/img/park-map-bg2.png')) }) var bgMesh=new THREE.Mesh(bgGeometry,bgMaterial) - bgMesh.position.set(115*(-center[0]+101.856473),0.2,115*(-center[1]+25.820215)) + bgMesh.position.set(115*(-center[0]+101.855473),0.2,115*(-center[1]+25.827215)) bgMesh.rotation.x=-Math.PI/2 bgMesh.renderOrder=2 scene.add(bgMesh) //标记 await setLine( [101.800373,0.21,25.565215], - {text:"现代种业联农带农业示范区",color:"#10CC40"}, + {text:"现代种业联农带农业示范区",color:"#10CC40",order:2}, [ 0.02, 2, 0, 0.2, 2, 0 @@ -282,7 +261,7 @@ import {SVGToBase64} from 'black-knight/lib/config/tools' ) await setLine( [101.750373,0.21,25.725215], - {text:"现代冬早蔬菜联农带农业产业示范区",color:"#10CC40"}, + {text:"现代冬早蔬菜联农带农业产业示范区",color:"#10CC40",order:2}, [ -0.02, 2, 0, -0.16, 2, 0 @@ -290,7 +269,7 @@ import {SVGToBase64} from 'black-knight/lib/config/tools' ) await setLine( [101.900373,0.21,26.065215], - {text:"种业和蔬菜融合联农带农业示范区",color:"#10CC40"}, + {text:"种业和蔬菜融合联农带农业示范区",color:"#10CC40",order:2}, [ -0.02, 2, 0, -0.16, 2, 0 @@ -311,7 +290,7 @@ import {SVGToBase64} from 'black-knight/lib/config/tools' scene.add(bgMesh) await setLine( [101.820373,0.31,25.695215], - {text:"三产融合发展产业带",color:"#FFF100"}, + {text:"三产融合发展产业带",color:"#FFF100",order:3}, [ -0.02, 5, 0, -0.16, 5, 0 @@ -332,7 +311,7 @@ import {SVGToBase64} from 'black-knight/lib/config/tools' scene.add(bgMesh) await setLine( [101.740373,0.41,25.905215], - {text:"左廊-要素聚集特色产业发展廊道",color:"#F19149"}, + {text:"左廊-要素聚集特色产业发展廊道",color:"#F19149",order:4}, [ -0.02, 5, 0, -0.16, 5, 0 @@ -353,26 +332,24 @@ import {SVGToBase64} from 'black-knight/lib/config/tools' scene.add(bgMesh) await setLine( [101.740373+0.13,0.51,25.905215-0.08], - {text:"科技引领示范和核心地",color:"#E60012"}, + {text:"科技引领示范和核心地",color:"#E60012",order:5}, [ 0.02, 3, 0, 0.16, 3, 0 ] ) } - async function setLine(label,{text,color},points){ + async function setLine(label,{text,color,order},points){ var point=new THREE.PlaneGeometry(1.2,1.2) var pointMaterial=new THREE.MeshBasicMaterial({ - map:new THREE.TextureLoader().load("data:image/svg+xml,%3Csvg width='12.000000' height='12.000000' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cdesc%3E Created with Pixso. %3C/desc%3E %3Cpath id='矢量 1' d='M11.5 0.5L11.5 11.5L0.5 11.5L0.5 0.5L11.5 0.5Z' stroke='%23C0DBF7'/%3E %3Crect id='矩形 1' x='2.000000' y='2.000000' width='8.000000' height='8.000000' fill='%23C0DBF7'/%3E %3Cdefs/%3E %3C/svg%3E"), + map:new THREE.TextureLoader().load("data:image/svg+xml,%3Csvg width='100.000000' height='100.000000' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Crect id='矩形 1' x='4.000000' y='4.000000' width='92.000000' height='92.000000' stroke='%23FFFFFF' stroke-width='8.000000'/%3E %3Crect id='矩形 2' x='20.000000' y='21.000000' width='60.000000' height='60.000000' fill='%23FFFFFF'/%3E %3C/svg%3E"), transparent:true, }) var pointMesh=new THREE.Mesh(point,pointMaterial) pointMesh.position.set(115*(-center[0]+label[0]),label[1],115*(-center[1]+label[2])) - watch(offset,n=>{ - pointMesh.position.set(115*(-center[0]+label[0]+n.x/100),label[1],115*(-center[1]+label[2]+n.y/100)) - }) pointMesh.rotation.x=-Math.PI/2 + pointMesh.renderOrder=order+0.1 scene.add(pointMesh) var lineGeometry=new THREE.BufferGeometry() @@ -391,8 +368,9 @@ import {SVGToBase64} from 'black-knight/lib/config/tools' await new Promise(resolve=>{ nextTick(()=>{ var box=svg.value.children[0].getBBox() - var adsGeometry=new THREE.PlaneGeometry(box.width/14,box.height/14) - adsGeometry.translate(0,box.height/14/2,0) + var times=17 + var adsGeometry=new THREE.PlaneGeometry(box.width/times,box.height/times) + adsGeometry.translate(0,box.height/times/2,0) var adsMaterial=new THREE.MeshBasicMaterial({ transparent:true, side:THREE.DoubleSide, @@ -402,7 +380,6 @@ import {SVGToBase64} from 'black-knight/lib/config/tools' names.push(adsMesh) adsMesh.renderOrder=7 adsMesh.position.set(115*(-center[0]+label[0]+points[3]), label[1]+points[4], 115*(-center[1]+label[2]+points[5])) - adsMesh.rotation.x=-Math.tan(90/100) scene.add(adsMesh) resolve() }) @@ -411,9 +388,16 @@ import {SVGToBase64} from 'black-knight/lib/config/tools' function render(){ renderer.render(scene, camera); requestAnimationFrame(render) + + var z=Math.sqrt(Math.pow(camera.position.x,2)+Math.pow(camera.position.z,2)) + // var h=Math.tan(camera.position.z/camera.position.x) + var ver=-Math.tan(z/camera.position.y) names.forEach(v=>{ + // v.rotation.x=ver + // v.rotation.y=h + // v.rotation.z=camera.rotation.z v.rotation.x=camera.rotation.x - // v.rotation.y=camera.rotation.y + v.rotation.y=camera.rotation.y v.rotation.z=camera.rotation.z }) labels.forEach(v=>{ @@ -422,6 +406,12 @@ import {SVGToBase64} from 'black-knight/lib/config/tools' v.rotation.z=camera.rotation.z }) } + function tap(){ + var z=Math.sqrt(Math.pow(camera.position.x,2)+Math.pow(camera.position.z,2)) + console.log("z:", z) + console.log("y:",camera.position.y) + console.log('角度',180/Math.PI*-Math.tan(z/camera.position.y)) + } onMounted(()=>{ nextTick(async()=>{ init() diff --git a/src/view/park/left_1.vue b/src/view/park/left_1.vue index 10cd061..bd62e84 100644 --- a/src/view/park/left_1.vue +++ b/src/view/park/left_1.vue @@ -19,6 +19,7 @@ height:43px; object-fit: contain; margin:auto 63px; + animation:upDown 3s ease-in infinite; } &>.info{ flex-shrink: 0; @@ -149,6 +150,17 @@ opacity: 0; } } + @keyframes upDown { + 0%{ + transform: translateY(0); + } + 50%{ + transform: translateY(-7px); + } + 100%{ + transform: translateY(0); + } + } diff --git a/src/view/park/right_1.vue b/src/view/park/right_1.vue index 6e67069..1d8ac6a 100644 --- a/src/view/park/right_1.vue +++ b/src/view/park/right_1.vue @@ -41,7 +41,7 @@ 单位统一为: 10元/kg - +