jiangdong
/
screen
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

调整3D地图动画

master
邓宏 2 years ago
parent
f2cdf39c75
commit
91f436b7d1
3 changed files with 334 additions and 67 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      src/assets/img/park-center-popver-bg.png
  2. 2
      src/assets/style/index.less
  3. 399
      src/view/park/center.vue

BIN
src/assets/img/park-center-popver-bg.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

2
src/assets/style/index.less
View File

@ -1,7 +1,7 @@
@import url("variables.less"); @import url("variables.less");
@import url("base.less"); @import url("base.less");
@import url('https://at.alicdn.com/t/c/font_4006769_n9ff4895s3f.css'); @import url('https://at.alicdn.com/t/c/font_4006769_9qy7hm49cu4.css');
[class*=plantBS-]{ [class*=plantBS-]{
font-family: "plantManaBS"; font-family: "plantManaBS";
src: url('//at.alicdn.com/t/c/font_4006769_tj4ca5pc17h.woff2?t=1681117510410') format('woff2'), src: url('//at.alicdn.com/t/c/font_4006769_tj4ca5pc17h.woff2?t=1681117510410') format('woff2'),

399
src/view/park/center.vue
View File

@ -53,7 +53,7 @@
} }
} }
} }
&>canvas,&>.modelPopover{ &>canvas,&>.mapCSS2D{
position:fixed; position:fixed;
pointer-events: all; pointer-events: all;
z-index: -10; z-index: -10;
@ -62,13 +62,143 @@
width:100%; width:100%;
height:100%; height:100%;
} }
&>.modelPopover{ &>.mapCSS2D{
pointer-events: none; pointer-events: none;
} }
.model{
&>div{
opacity:0;
position:absolute;
bottom:0;
right:calc(-289px/2);
width:289px;
height:149px;
background-image:url(@/assets/img/park-center-popver-bg.png);
&>.title{
font-weight: bold;
font-size:13px;
color:#50A7F9;
font-weight: bold;
position:absolute;
text-align: center;
top: 25px;
left: 28px;
width: 240px;
}
&>.ads{
position: absolute;
top: 49px;
left: 30px;
width: 241px;
display:flex;
align-items: center;
span{
&.plantBS-dingwei{
color:#F19149;
margin-right:auto;
}
&.item{
color:var(--c);
font-weight: bold;
font-size:14px;
&:before{
content:attr(data-title);
font-weight: normal;
color:#C0DBF7;
font-size:12px;
}
&:after{
content:"个";
color:#C0DBF7;
font-weight: normal;
font-size:12px;
}
&+.item{
margin-left:10px;
}
}
}
}
&>.line{
position:absolute;
top: 73px;
left: 30px;
width: 239px;
height: 1px;
background: linear-gradient(rgba(12, 137, 254, 0.3), rgba(9, 207, 251, 0.3));
&:before{
content:"";
background-image:url(@/assets/img/line.png);
width:152px;
height:29px;
position:absolute;
top: -17px;
left: -43px;
animation: move 4s linear infinite;
}
}
&>.scroll-board{
position:absolute;
top: 73px;
left: 30px;
width: 239px;
margin-top:5px;
height:55px;
&:deep>div{
display:flex;
align-items: center;
span{
font-size:12px;
color:#0C89FE;
&:first-child{
width:80px;
flex-shrink: 0;
}
&:nth-child(2){
flex-grow: 1;
&:after{
content:"亩";
}
}
&:nth-child(3){
width:120px;
text-align: right;
flex-shrink: 0;
&:before{
content:"预估产量";
}
&:after{
content:"吨";
}
}
&:before,&:after{
color:#C0DBF7;
}
}
}
}
}
}
svg{ svg{
opacity: 0; opacity: 0;
} }
} }
@keyframes move {
0%{
left:-43px;
opacity: 0;
}
30%{
opacity: 1;
}
70%{
opacity: 1;
}
100%{
left:141px;
opacity: 0;
}
}
</style> </style>
<template> <template>
<div class="center"> <div class="center">
@ -88,9 +218,26 @@
</div> </div>
</div> </div>
</div> </div>
<div ref="demoEl" style="height:20px;background:red;">asdaf</div> <canvas ref="map" @mousemove="move"/>
<canvas ref="map" @click="tap"/> <div ref="mapCSS2D" class="mapCSS2D"/>
<div ref="modelPopover" class="modelPopover"/> <div ref="model" class="model">
<div>
<div class="title over">元谋xxxx水果有限公司</div>
<div class="ads">
<span class="plantBS-dingwei">物茂乡</span>
<span class="item" data-title="基地：" style="--c:#10CC40;">8</span>
<span class="item" data-title="品种：" style="--c:#00E4FF;">3</span>
</div>
<div class="line"/>
<d-scroll-board :data="list" :num="3" :delay="2000000">
<template #default="{row}">
<span>{{row.name}}</span>
<span>{{row.area}}</span>
<span>{{row.output}}</span>
</template>
</d-scroll-board>
</div>
</div>
<svg ref="svg"> <svg ref="svg">
<text :fill="labelName.color" dominant-baseline="text-before-edge" font-size="30" font-weight="900" v-html="labelName.text"></text> <text :fill="labelName.color" dominant-baseline="text-before-edge" font-size="30" font-weight="900" v-html="labelName.text"></text>
</svg> </svg>
@ -101,38 +248,45 @@ import * as THREE from 'three'
import {CSS2DRenderer, CSS2DObject} from 'three/examples/jsm/renderers/CSS2DRenderer' import {CSS2DRenderer, CSS2DObject} from 'three/examples/jsm/renderers/CSS2DRenderer'
import gsap from 'gsap' import gsap from 'gsap'
import { MapControls } from 'three/examples/jsm/controls/MapControls' import { MapControls } from 'three/examples/jsm/controls/MapControls'
import { nextTick, onMounted, reactive, ref, resolveTransitionHooks, watch } from 'vue'; import { nextTick, onMounted, reactive, ref, resolveTransitionHooks, shallowRef, watch } from 'vue';
import yuanmou from '@/assets/map/yuanmou.json' import yuanmou from '@/assets/map/yuanmou.json'
import {SVGToBase64} from 'black-knight/lib/config/tools' import {SVGToBase64} from 'black-knight/lib/config/tools'
import {dScrollBoard} from 'black-knight/lib/components'
import { Thumbs } from 'swiper';
var time_line=gsap.timeline() var time_line=gsap.timeline()
var value={value:0} time_line.pause()
time_line.to(value,{value:3,duration:1,onUpdate(a,b,c,d){
console.log(a,b,c,d,time_line,'-----afd----------')
},onUpdateParams:[1,2,value]})
var list=shallowRef([
{name:"黄瓜",area:32,output:256},
{name:"黄瓜",area:32,output:256},
{name:"黄瓜",area:32,output:256},
{name:"黄瓜",area:32,output:256},
{name:"黄瓜",area:32,output:256},
])
var svg=ref() var svg=ref()
var labelName=reactive({ var labelName=reactive({
text:"", text:"",
color:"#fff" color:"#fff"
}) })
var demoEl=ref() var model=ref()
var offset=reactive({x:0,y:0,z:0,w:0,h:0}) var offset=reactive({x:0,y:0,z:0,w:0,h:0})
var map=ref(); var map=ref();
var modelPopover=ref() var mapCSS2D=ref()
var scene,renderer,camera,modalRenderer; var scene,renderer,camera,modalRenderer;
var raycaster= new THREE.Raycaster();//鼠标移动点
var group=new THREE.Group() var group=new THREE.Group()
var names=[] var names=[]
var labels=[] var labels=[]
var items={select:null,list:[]}
var center=[101.863986 -0.02,25.776215 -0.01] var center=[101.863986 -0.02,25.776215 -0.01]
var region=reactive([ var region=reactive([
{name:"羊街乡",lan:101.9611474,lng:26.0824059}, {name:"羊街乡",lan:101.9611474,lng:26.0824059},
{name:"老城乡",lan:101.9111474,lng:25.9554059}, {name:"老城乡",lan:101.9111474,lng:25.9554059},
{name:"元谋镇",lan:101.8931474,lng:25.8484059}, {name:"元谋镇",lan:101.8921474,lng:25.8484059},
{name:"平甸乡",lan:101.7527297,lng:25.8148077}, {name:"平甸乡",lan:101.7527297,lng:25.8148077},
{name:"新华乡",lan:101.6810768,lng:25.7208770}, {name:"新华乡",lan:101.6810768,lng:25.7208770},
{name:"物茂乡",lan:101.7810768,lng:25.6308770}, {name:"物茂乡",lan:101.7810768,lng:25.6308770},
@ -184,9 +338,9 @@ import {SVGToBase64} from 'black-knight/lib/config/tools'
mian.repeat.set(1.964, 1.346) mian.repeat.set(1.964, 1.346)
mian.offset.set(0.465,-0.141) mian.offset.set(0.465,-0.141)
var materialUp=new THREE.MeshBasicMaterial({ var materialUp=new THREE.MeshBasicMaterial({
// transparent:true, transparent:true,
opacity:0,
map: mian, map: mian,
// color:0x000000,
}) })
var side = new THREE.TextureLoader().load("data:image/svg+xml,%3Csvg width='44.000000' height='24.000000' viewBox='0 0 44 24' fill='none' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Crect id='矩形 1' y='3.000000' width='44.000000' height='3.000000' fill='%231EB5FC'/%3E %3Crect id='矩形 1' y='9.000000' width='44.000000' height='3.000000' fill='%231EB5FC'/%3E %3Crect id='矩形 1' y='15.000000' width='44.000000' height='3.000000' fill='%231EB5FC'/%3E %3Crect id='矩形 1' y='21.000000' width='44.000000' height='3.000000' fill='%231EB5FC'/%3E %3C/svg%3E") var side = new THREE.TextureLoader().load("data:image/svg+xml,%3Csvg width='44.000000' height='24.000000' viewBox='0 0 44 24' fill='none' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Crect id='矩形 1' y='3.000000' width='44.000000' height='3.000000' fill='%231EB5FC'/%3E %3Crect id='矩形 1' y='9.000000' width='44.000000' height='3.000000' fill='%231EB5FC'/%3E %3Crect id='矩形 1' y='15.000000' width='44.000000' height='3.000000' fill='%231EB5FC'/%3E %3Crect id='矩形 1' y='21.000000' width='44.000000' height='3.000000' fill='%231EB5FC'/%3E %3C/svg%3E")
@ -194,27 +348,45 @@ import {SVGToBase64} from 'black-knight/lib/config/tools'
side.repeat.set(0.1, 0.25) side.repeat.set(0.1, 0.25)
var materialSide=new THREE.MeshBasicMaterial({ var materialSide=new THREE.MeshBasicMaterial({
transparent:true, transparent:true,
opacity:0,
map:side, map:side,
opacity:0.8, opacity:0.8,
color:0x0C89FE, color:0x0C89FE,
}) })
var mesh1=new THREE.Mesh(bottomGeometry,[materialUp,materialSide]) var mesh=new THREE.Mesh(bottomGeometry,[materialUp,materialSide])
group.add(mesh1) mesh.scale.set(0.5,0.5,0.5)
time_line.to(mesh.scale,{x:1,y:1,z:1, duration:2, onStart(){
group.add(mesh)
}})
time_line.to(mesh.rotation,{z:Math.PI*2, duration:2},'-=2')
time_line.to(materialUp,{opacity:1, duration:2},'-=2')
time_line.to(materialSide,{opacity:1, duration:2},'-=2')
} }
async function addLabel(){ async function addLabel(){
for(var v of region){ for(var v of region){
//定位 //定位
var geometry=new THREE.PlaneGeometry(3,3) await new Promise(resolve=>{
var material=new THREE.MeshBasicMaterial({ var geometry=new THREE.PlaneGeometry(3,3)
transparent:true, var material=new THREE.MeshBasicMaterial({
side:THREE.DoubleSide, transparent:true,
map:new THREE.TextureLoader().load("data:image/svg+xml,%3Csvg width='32.000000' height='37.000000' viewBox='0 0 32 37' fill='none' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cellipse id='椭圆 1' cx='15.500000' cy='26.000000' rx='4.500000' ry='3.000000' filter='url(%23filter_38_6_dd)' fill='%23FED44C'/%3E %3Cellipse id='椭圆 1' cx='15.500000' cy='26.500000' rx='10.000000' ry='6.000000' stroke='%23FED44C'/%3E %3Cellipse id='椭圆 1' cx='16.000000' cy='27.000000' rx='14.500000' ry='9.500000' stroke='%23FED44C'/%3E %3Cpath id='path' d='M7.32259 17.6772C7.05646 17.4381 6.80397 17.1877 6.56514 16.926C6.32631 16.6644 6.10229 16.3927 5.89308 16.111C5.68388 15.8292 5.49051 15.5389 5.31296 15.2399C5.13542 14.9409 4.97458 14.6347 4.83041 14.3213C4.68626 14.0079 4.55951 13.6888 4.45015 13.3641C4.34079 13.0393 4.24936 12.7105 4.17586 12.3776C4.10236 12.0447 4.04713 11.7093 4.01021 11.3714C3.97327 11.0336 3.9548 10.6949 3.9548 10.3554C3.9548 10.0159 3.97327 9.67717 4.01021 9.33931C4.04713 9.00145 4.10236 8.66606 4.17586 8.33315C4.24936 8.00023 4.34079 7.6714 4.45015 7.34666C4.55951 7.02192 4.68626 6.70286 4.83041 6.38946C4.97458 6.07606 5.13542 5.76985 5.31296 5.47084C5.49051 5.17183 5.68388 4.88147 5.89308 4.59976C6.10229 4.31805 6.32631 4.04636 6.56514 3.7847C6.80397 3.52303 7.05646 3.27264 7.32259 3.03357C11.8135 -1.01118 19.0955 -1.01118 23.5864 3.03357C23.8526 3.27264 24.1051 3.52304 24.344 3.78471C24.5829 4.04639 24.8069 4.3181 25.0162 4.59982C25.2254 4.88155 25.4188 5.17193 25.5964 5.47095C25.774 5.76999 25.9349 6.07622 26.079 6.38963C26.2232 6.70306 26.35 7.02216 26.4594 7.34692C26.5687 7.67168 26.6602 8.00054 26.7337 8.33349C26.8072 8.66644 26.8625 9.00185 26.8994 9.33974C26.9363 9.67763 26.9548 10.0163 26.9548 10.3559C26.9548 10.6954 26.9363 11.0341 26.8994 11.372C26.8625 11.7099 26.8072 12.0453 26.7337 12.3783C26.6602 12.7112 26.5687 13.0401 26.4594 13.3648C26.35 13.6896 26.2232 14.0087 26.079 14.3221C25.9349 14.6356 25.774 14.9418 25.5964 15.2408C25.4188 15.5398 25.2254 15.8302 25.0162 16.1119C24.8069 16.3937 24.5829 16.6654 24.344 16.927C24.1051 17.1887 23.8526 17.4391 23.5864 17.6782L15.4545 25L7.32259 17.6772ZM15.4545 13.5418C15.6811 13.5419 15.9056 13.522 16.1278 13.482C16.3501 13.442 16.5659 13.3828 16.7753 13.3044C16.9847 13.2259 17.1836 13.1296 17.3721 13.0157C17.5606 12.9017 17.7349 12.7721 17.8952 12.627C18.0555 12.4819 18.1986 12.3241 18.3245 12.1534C18.4504 11.9828 18.5568 11.8027 18.6435 11.613C18.7303 11.4234 18.7958 11.228 18.84 11.0267C18.8842 10.8253 18.9063 10.6221 18.9063 10.4168C18.9063 10.2116 18.8842 10.0083 18.84 9.80698C18.7958 9.60567 18.7303 9.41021 18.6435 9.2206C18.5568 9.03098 18.4504 8.85085 18.3245 8.68021C18.1986 8.50957 18.0555 8.35169 17.8952 8.2066C17.7349 8.06149 17.5606 7.93195 17.3721 7.81797C17.1836 7.70399 16.9847 7.60777 16.7753 7.52929C16.5659 7.45081 16.3501 7.39159 16.1278 7.35164C15.9056 7.31168 15.6811 7.29175 15.4545 7.29185C15.228 7.29195 15.0038 7.31206 14.7817 7.35216C14.5596 7.39226 14.3439 7.4516 14.1347 7.53017C13.9255 7.60873 13.7268 7.70502 13.5385 7.81903C13.3503 7.93304 13.1761 8.06259 13.016 8.20767C12.8559 8.35275 12.713 8.51058 12.5872 8.68115C12.4614 8.85173 12.3552 9.03178 12.2685 9.2213C12.1819 9.41082 12.1165 9.60617 12.0723 9.80736C12.0282 10.0085 12.0061 10.2117 12.0061 10.4168C12.0061 10.6219 12.0282 10.8251 12.0723 11.0263C12.1165 11.2275 12.1819 11.4228 12.2685 11.6123C12.3552 11.8019 12.4614 11.9819 12.5872 12.1525C12.713 12.3231 12.8559 12.4809 13.016 12.626C13.1761 12.771 13.3503 12.9006 13.5385 13.0146C13.7268 13.1286 13.9255 13.2249 14.1347 13.3035C14.3439 13.382 14.5596 13.4414 14.7817 13.4815C15.0038 13.5216 15.228 13.5417 15.4545 13.5418Z' fill-rule='nonzero' fill='url(%23paint_linear_38_5_0)'/%3E %3Cdefs%3E %3Cfilter id='filter_38_6_dd' x='5.000000' y='17.000000' width='21.000000' height='18.000000' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E %3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E %3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E %3CfeMorphology radius='2' in='' result='BackgroundImageFix'/%3E %3CfeOffset dx='0' dy='0'/%3E %3CfeGaussianBlur stdDeviation='1.33333'/%3E %3CfeColorMatrix type='matrix' values='0 0 0 0 0.99608 0 0 0 0 0.83137 0 0 0 0 0.29804 0 0 0 0.25 0'/%3E %3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect_dropShadow_1'/%3E %3CfeBlend mode='normal' in='SourceGraphic' in2='effect_dropShadow_1' result='shape'/%3E %3C/filter%3E %3CclipPath id='clip38_2'%3E %3Crect id='画板 1' width='32.000000' height='37.000000' fill='white'/%3E %3C/clipPath%3E %3ClinearGradient id='paint_linear_38_5_0' x1='15.500000' y1='0.000000' x2='15.500000' y2='25.000000' gradientUnits='userSpaceOnUse'%3E %3Cstop stop-color='%23FB7694'/%3E %3Cstop offset='1.000000' stop-color='%23FED44C'/%3E %3C/linearGradient%3E %3C/defs%3E %3C/svg%3E"), opacity:0,
side:THREE.DoubleSide,
map:new THREE.TextureLoader().load("data:image/svg+xml,%3Csvg width='32.000000' height='37.000000' viewBox='0 0 32 37' fill='none' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cellipse id='椭圆 1' cx='15.500000' cy='26.000000' rx='4.500000' ry='3.000000' filter='url(%23filter_38_6_dd)' fill='%23FED44C'/%3E %3Cellipse id='椭圆 1' cx='15.500000' cy='26.500000' rx='10.000000' ry='6.000000' stroke='%23FED44C'/%3E %3Cellipse id='椭圆 1' cx='16.000000' cy='27.000000' rx='14.500000' ry='9.500000' stroke='%23FED44C'/%3E %3Cpath id='path' d='M7.32259 17.6772C7.05646 17.4381 6.80397 17.1877 6.56514 16.926C6.32631 16.6644 6.10229 16.3927 5.89308 16.111C5.68388 15.8292 5.49051 15.5389 5.31296 15.2399C5.13542 14.9409 4.97458 14.6347 4.83041 14.3213C4.68626 14.0079 4.55951 13.6888 4.45015 13.3641C4.34079 13.0393 4.24936 12.7105 4.17586 12.3776C4.10236 12.0447 4.04713 11.7093 4.01021 11.3714C3.97327 11.0336 3.9548 10.6949 3.9548 10.3554C3.9548 10.0159 3.97327 9.67717 4.01021 9.33931C4.04713 9.00145 4.10236 8.66606 4.17586 8.33315C4.24936 8.00023 4.34079 7.6714 4.45015 7.34666C4.55951 7.02192 4.68626 6.70286 4.83041 6.38946C4.97458 6.07606 5.13542 5.76985 5.31296 5.47084C5.49051 5.17183 5.68388 4.88147 5.89308 4.59976C6.10229 4.31805 6.32631 4.04636 6.56514 3.7847C6.80397 3.52303 7.05646 3.27264 7.32259 3.03357C11.8135 -1.01118 19.0955 -1.01118 23.5864 3.03357C23.8526 3.27264 24.1051 3.52304 24.344 3.78471C24.5829 4.04639 24.8069 4.3181 25.0162 4.59982C25.2254 4.88155 25.4188 5.17193 25.5964 5.47095C25.774 5.76999 25.9349 6.07622 26.079 6.38963C26.2232 6.70306 26.35 7.02216 26.4594 7.34692C26.5687 7.67168 26.6602 8.00054 26.7337 8.33349C26.8072 8.66644 26.8625 9.00185 26.8994 9.33974C26.9363 9.67763 26.9548 10.0163 26.9548 10.3559C26.9548 10.6954 26.9363 11.0341 26.8994 11.372C26.8625 11.7099 26.8072 12.0453 26.7337 12.3783C26.6602 12.7112 26.5687 13.0401 26.4594 13.3648C26.35 13.6896 26.2232 14.0087 26.079 14.3221C25.9349 14.6356 25.774 14.9418 25.5964 15.2408C25.4188 15.5398 25.2254 15.8302 25.0162 16.1119C24.8069 16.3937 24.5829 16.6654 24.344 16.927C24.1051 17.1887 23.8526 17.4391 23.5864 17.6782L15.4545 25L7.32259 17.6772ZM15.4545 13.5418C15.6811 13.5419 15.9056 13.522 16.1278 13.482C16.3501 13.442 16.5659 13.3828 16.7753 13.3044C16.9847 13.2259 17.1836 13.1296 17.3721 13.0157C17.5606 12.9017 17.7349 12.7721 17.8952 12.627C18.0555 12.4819 18.1986 12.3241 18.3245 12.1534C18.4504 11.9828 18.5568 11.8027 18.6435 11.613C18.7303 11.4234 18.7958 11.228 18.84 11.0267C18.8842 10.8253 18.9063 10.6221 18.9063 10.4168C18.9063 10.2116 18.8842 10.0083 18.84 9.80698C18.7958 9.60567 18.7303 9.41021 18.6435 9.2206C18.5568 9.03098 18.4504 8.85085 18.3245 8.68021C18.1986 8.50957 18.0555 8.35169 17.8952 8.2066C17.7349 8.06149 17.5606 7.93195 17.3721 7.81797C17.1836 7.70399 16.9847 7.60777 16.7753 7.52929C16.5659 7.45081 16.3501 7.39159 16.1278 7.35164C15.9056 7.31168 15.6811 7.29175 15.4545 7.29185C15.228 7.29195 15.0038 7.31206 14.7817 7.35216C14.5596 7.39226 14.3439 7.4516 14.1347 7.53017C13.9255 7.60873 13.7268 7.70502 13.5385 7.81903C13.3503 7.93304 13.1761 8.06259 13.016 8.20767C12.8559 8.35275 12.713 8.51058 12.5872 8.68115C12.4614 8.85173 12.3552 9.03178 12.2685 9.2213C12.1819 9.41082 12.1165 9.60617 12.0723 9.80736C12.0282 10.0085 12.0061 10.2117 12.0061 10.4168C12.0061 10.6219 12.0282 10.8251 12.0723 11.0263C12.1165 11.2275 12.1819 11.4228 12.2685 11.6123C12.3552 11.8019 12.4614 11.9819 12.5872 12.1525C12.713 12.3231 12.8559 12.4809 13.016 12.626C13.1761 12.771 13.3503 12.9006 13.5385 13.0146C13.7268 13.1286 13.9255 13.2249 14.1347 13.3035C14.3439 13.382 14.5596 13.4414 14.7817 13.4815C15.0038 13.5216 15.228 13.5417 15.4545 13.5418Z' fill-rule='nonzero' fill='url(%23paint_linear_38_5_0)'/%3E %3Cdefs%3E %3Cfilter id='filter_38_6_dd' x='5.000000' y='17.000000' width='21.000000' height='18.000000' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E %3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E %3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E %3CfeMorphology radius='2' in='' result='BackgroundImageFix'/%3E %3CfeOffset dx='0' dy='0'/%3E %3CfeGaussianBlur stdDeviation='1.33333'/%3E %3CfeColorMatrix type='matrix' values='0 0 0 0 0.99608 0 0 0 0 0.83137 0 0 0 0 0.29804 0 0 0 0.25 0'/%3E %3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect_dropShadow_1'/%3E %3CfeBlend mode='normal' in='SourceGraphic' in2='effect_dropShadow_1' result='shape'/%3E %3C/filter%3E %3CclipPath id='clip38_2'%3E %3Crect id='画板 1' width='32.000000' height='37.000000' fill='white'/%3E %3C/clipPath%3E %3ClinearGradient id='paint_linear_38_5_0' x1='15.500000' y1='0.000000' x2='15.500000' y2='25.000000' gradientUnits='userSpaceOnUse'%3E %3Cstop stop-color='%23FB7694'/%3E %3Cstop offset='1.000000' stop-color='%23FED44C'/%3E %3C/linearGradient%3E %3C/defs%3E %3C/svg%3E"),
})
var mesh=new THREE.Mesh(geometry,material)
mesh.name=v.name
labels.push(mesh)
mesh.renderOrder=6
mesh.position.set(115*(-center[0]+v.lan),1.5,115*(-center[1]+v.lng))
mesh.rotation.x=-Math.PI/6
time_line.to(material,{opacity:1, duration:1,onStart(){
scene.add(mesh)
}})
resolve()
}) })
var mesh=new THREE.Mesh(geometry,material)
labels.push(mesh)
mesh.renderOrder=6
mesh.position.set(115*(-center[0]+v.lan),1.5,115*(-center[1]+v.lng))
mesh.rotation.x=-Math.PI/6
//地名 //地名
labelName.text=v.name; labelName.text=v.name;
labelName.color="#fff" labelName.color="#fff"
@ -224,6 +396,7 @@ import {SVGToBase64} from 'black-knight/lib/config/tools'
var adsGeometry=new THREE.PlaneGeometry(box.width/16,box.height/16) var adsGeometry=new THREE.PlaneGeometry(box.width/16,box.height/16)
var adsMaterial=new THREE.MeshBasicMaterial({ var adsMaterial=new THREE.MeshBasicMaterial({
transparent:true, transparent:true,
opacity:0,
side:THREE.DoubleSide, side:THREE.DoubleSide,
map:new THREE.TextureLoader().load(SVGToBase64(`<svg height="${box.height}" width="${box.width}">${svg.value.innerHTML}</svg>`)) map:new THREE.TextureLoader().load(SVGToBase64(`<svg height="${box.height}" width="${box.width}">${svg.value.innerHTML}</svg>`))
}) })
@ -232,12 +405,14 @@ import {SVGToBase64} from 'black-knight/lib/config/tools'
adsMesh.renderOrder=6 adsMesh.renderOrder=6
adsMesh.position.set(115*(-center[0]+v.lan),1.5,115*(-center[1]+v.lng +0.03)) adsMesh.position.set(115*(-center[0]+v.lan),1.5,115*(-center[1]+v.lng +0.03))
adsMesh.rotation.x=-Math.PI/8 adsMesh.rotation.x=-Math.PI/8
scene.add(adsMesh)
time_line.to(adsMaterial,{opacity:1, duration:1,onStart(){
scene.add(adsMesh)
}},"-=1")
result() result()
}) })
}) })
scene.add(mesh)
} }
} }
function addBG1(){ function addBG1(){
@ -245,27 +420,38 @@ import {SVGToBase64} from 'black-knight/lib/config/tools'
var bgMaterial=new THREE.MeshBasicMaterial({ var bgMaterial=new THREE.MeshBasicMaterial({
transparent:true, transparent:true,
depthWrite:false, depthWrite:false,
opacity:0,
side:THREE.DoubleSide, side:THREE.DoubleSide,
map:new THREE.TextureLoader().load(require('@/assets/img/park-map-bg1.png')) map:new THREE.TextureLoader().load(require('@/assets/img/park-map-bg1.png'))
}) })
var bgMesh=new THREE.Mesh(bgGeometry,bgMaterial) var bgMesh=new THREE.Mesh(bgGeometry,bgMaterial)
bgMesh.position.set(115*(-center[0]+101.859473),0.1,115*(-center[1]+25.825215)) bgMesh.position.set(115*(-center[0]+101.859473),10,115*(-center[1]+25.825215))
bgMesh.rotation.x=-Math.PI/2 bgMesh.rotation.x=-Math.PI/2
bgMesh.renderOrder=1 bgMesh.renderOrder=1
scene.add(bgMesh)
time_line.to(bgMaterial,{opacity:1,duration:2,onStart(){
scene.add(bgMesh)
}})
time_line.to(bgMesh.position,{y:0.1,duration:1},"-=2")
} }
async function addBG2(){ async function addBG2(){
var bgGeometry=new THREE.PlaneGeometry(316/9.1,599/9.1) var bgGeometry=new THREE.PlaneGeometry(316/9.1,599/9.1)
var bgMaterial=new THREE.MeshBasicMaterial({ var bgMaterial=new THREE.MeshBasicMaterial({
transparent:true, transparent:true,
opacity:0,
side:THREE.DoubleSide, side:THREE.DoubleSide,
map:new THREE.TextureLoader().load(require('@/assets/img/park-map-bg2.png')) map:new THREE.TextureLoader().load(require('@/assets/img/park-map-bg2.png'))
}) })
var bgMesh=new THREE.Mesh(bgGeometry,bgMaterial) var bgMesh=new THREE.Mesh(bgGeometry,bgMaterial)
bgMesh.position.set(115*(-center[0]+101.855473),0.2,115*(-center[1]+25.827215)) bgMesh.position.set(115*(-center[0]+101.855473),10,115*(-center[1]+25.827215))
bgMesh.rotation.x=-Math.PI/2 bgMesh.rotation.x=-Math.PI/2
bgMesh.renderOrder=2 bgMesh.renderOrder=2
scene.add(bgMesh)
time_line.to(bgMaterial,{opacity:1,duration:2,onStart(){
scene.add(bgMesh)
}})
time_line.to(bgMesh.position,{y:0.2,duration:1},"-=2")
//标记 //标记
await setLine( await setLine(
[101.800373,0.21,25.565215], [101.800373,0.21,25.565215],
@ -297,13 +483,19 @@ import {SVGToBase64} from 'black-knight/lib/config/tools'
var bgMaterial=new THREE.MeshBasicMaterial({ var bgMaterial=new THREE.MeshBasicMaterial({
transparent:true, transparent:true,
side:THREE.DoubleSide, side:THREE.DoubleSide,
opacity:0,
map:new THREE.TextureLoader().load(require('@/assets/img/park-map-bg3.png')) map:new THREE.TextureLoader().load(require('@/assets/img/park-map-bg3.png'))
}) })
var bgMesh=new THREE.Mesh(bgGeometry,bgMaterial) var bgMesh=new THREE.Mesh(bgGeometry,bgMaterial)
bgMesh.renderOrder=3 bgMesh.renderOrder=3
bgMesh.position.set(115*(-center[0]+101.886473),0.3,115*(-center[1]+25.770215)) bgMesh.position.set(115*(-center[0]+101.886473),10,115*(-center[1]+25.770215))
bgMesh.rotation.x=-Math.PI/2 bgMesh.rotation.x=-Math.PI/2
scene.add(bgMesh)
time_line.to(bgMaterial,{opacity:1,duration:2,onStart(){
scene.add(bgMesh)
}})
time_line.to(bgMesh.position,{y:0.3,duration:1},"-=2")
await setLine( await setLine(
[101.820373,0.31,25.695215], [101.820373,0.31,25.695215],
{text:"三产融合发展产业带",color:"#FFF100",order:3}, {text:"三产融合发展产业带",color:"#FFF100",order:3},
@ -318,16 +510,30 @@ import {SVGToBase64} from 'black-knight/lib/config/tools'
var bgMaterial=new THREE.MeshBasicMaterial({ var bgMaterial=new THREE.MeshBasicMaterial({
transparent:true, transparent:true,
side:THREE.DoubleSide, side:THREE.DoubleSide,
opacity:0,
map:new THREE.TextureLoader().load(require('@/assets/img/park-map-bg4.png')) map:new THREE.TextureLoader().load(require('@/assets/img/park-map-bg4.png'))
}) })
var bgMesh=new THREE.Mesh(bgGeometry,bgMaterial) var bgMesh=new THREE.Mesh(bgGeometry,bgMaterial)
bgMesh.renderOrder=4 bgMesh.renderOrder=4
bgMesh.position.set(115*(-center[0]+101.806473),0.4,115*(-center[1]+25.770215)) bgMesh.position.set(115*(-center[0]+101.806473),10,115*(-center[1]+25.770215))
bgMesh.rotation.x=-Math.PI/2 bgMesh.rotation.x=-Math.PI/2
scene.add(bgMesh)
time_line.to(bgMaterial,{opacity:1,duration:2,onStart(){
scene.add(bgMesh)
}})
time_line.to(bgMesh.position,{y:0.4,duration:1},"-=2")
await setLine(
[101.891373,0.41,25.644215],
{text:"<tspan>右廊-要素聚集特色产业</tspan><tspan x='0' y='36'>发展廊道</tspan>",color:"#F19149",order:4},
[
0.02, 5, 0,
0.16, 5, 0
]
)
await setLine( await setLine(
[101.740373,0.41,25.905215], [101.740373,0.41,25.905215],
{text:"<tspan>左廊-要素聚集特</tspan><tspan x='0' y='36'>色产业发展廊道</tspan>",color:"#F19149",order:4}, {text:"<tspan>左廊-要素聚集特色</tspan><tspan x='0' y='36'>产业发展廊道</tspan>",color:"#F19149",order:4},
[ [
-0.02, 5, 0, -0.02, 5, 0,
-0.16, 5, 0 -0.16, 5, 0
@ -335,17 +541,23 @@ import {SVGToBase64} from 'black-knight/lib/config/tools'
) )
} }
async function addBG5(){ async function addBG5(){
var bgGeometry=new THREE.PlaneGeometry(95/9.3,93/9.3) var bgGeometry=new THREE.CircleGeometry(95/19,32)
var bgMaterial=new THREE.MeshBasicMaterial({ var bgMaterial=new THREE.MeshBasicMaterial({
transparent:true, transparent:true,
opacity:0,
side:THREE.DoubleSide, side:THREE.DoubleSide,
map:new THREE.TextureLoader().load(require('@/assets/img/park-map-bg5.png')) map:new THREE.TextureLoader().load(require('@/assets/img/park-map-bg5.png'))
}) })
var bgMesh=new THREE.Mesh(bgGeometry,bgMaterial) var bgMesh=new THREE.Mesh(bgGeometry,bgMaterial)
bgMesh.renderOrder=5 bgMesh.renderOrder=5
bgMesh.position.set(115*(-center[0]+101.869473),0.5,115*(-center[1]+25.827215)) bgMesh.position.set(115*(-center[0]+101.869473),10,115*(-center[1]+25.827215))
bgMesh.rotation.x=-Math.PI/2 bgMesh.rotation.x=-Math.PI/2
scene.add(bgMesh)
time_line.to(bgMaterial,{opacity:1,duration:2,onStart(){
scene.add(bgMesh)
}})
time_line.to(bgMesh.position,{y:0.5,duration:1},"-=2")
await setLine( await setLine(
[101.740373+0.13,0.51,25.905215-0.08], [101.740373+0.13,0.51,25.905215-0.08],
{text:"科技引领示范和核心地",color:"#E60012",order:5}, {text:"科技引领示范和核心地",color:"#E60012",order:5},
@ -364,17 +576,38 @@ import {SVGToBase64} from 'black-knight/lib/config/tools'
}) })
var pointMesh=new THREE.Mesh(point,pointMaterial) var pointMesh=new THREE.Mesh(point,pointMaterial)
pointMesh.position.set(115*(-center[0]+label[0]),label[1],115*(-center[1]+label[2])) 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/1000),label[1],115*(-center[1]+label[2] +n.y/1000))
})
pointMesh.rotation.x=-Math.PI/2 pointMesh.rotation.x=-Math.PI/2
pointMesh.renderOrder=order+0.1 pointMesh.renderOrder=order+0.1
scene.add(pointMesh)
var lineGeometry=new THREE.BufferGeometry() var lineGeometry=new THREE.BufferGeometry()
var point1=[115*(-center[0]+label[0]), label[1], 115*(-center[1]+label[2])]
var point2=[115*(-center[0]+label[0]+points[0]), label[1]+points[1], 115*(-center[1]+label[2]+points[2])]
var point3=[115*(-center[0]+label[0]+points[3]), label[1]+points[4], 115*(-center[1]+label[2]+points[5])]
lineGeometry.setAttribute('position',new THREE.Float32BufferAttribute([ lineGeometry.setAttribute('position',new THREE.Float32BufferAttribute([
115*(-center[0]+label[0]), label[1], 115*(-center[1]+label[2]), ...point1,
115*(-center[0]+label[0]+points[0]), label[1]+points[1], 115*(-center[1]+label[2]+points[2]), ...point1,
115*(-center[0]+label[0]+points[3]), label[1]+points[4], 115*(-center[1]+label[2]+points[5]),
], 3)) ], 3))
//动画时间线
var value1={x:point1[0],y:point1[1]}
time_line.to(value1, {x:point2[0],y:point2[1], duration:0.5,onUpdate(){
lineGeometry.setAttribute('position',new THREE.Float32BufferAttribute([
...point1,
value1.x,value1.y,point2[2]
], 3))
},onStart(){
scene.add(pointMesh)//添加定点标签
}})
var value2={x:point2[0]}
time_line.to(value2,{x:point3[0], duration:1,onUpdate(){
lineGeometry.setAttribute('position',new THREE.Float32BufferAttribute([
...point1,
...point2,
value2.x,point3[1],point3[2]
], 3))
}})
var lineMaterial=new THREE.LineBasicMaterial({ var lineMaterial=new THREE.LineBasicMaterial({
color:color, color:color,
@ -391,20 +624,26 @@ import {SVGToBase64} from 'black-knight/lib/config/tools'
adsGeometry.translate(0,box.height/times/2,0) adsGeometry.translate(0,box.height/times/2,0)
var adsMaterial=new THREE.MeshBasicMaterial({ var adsMaterial=new THREE.MeshBasicMaterial({
transparent:true, transparent:true,
opacity:0,
side:THREE.DoubleSide, side:THREE.DoubleSide,
map:new THREE.TextureLoader().load(SVGToBase64(`<svg height="${box.height}" width="${box.width}">${svg.value.innerHTML}</svg>`)) map:new THREE.TextureLoader().load(SVGToBase64(`<svg height="${box.height}" width="${box.width}">${svg.value.innerHTML}</svg>`))
}) })
var adsMesh=new THREE.Mesh(adsGeometry,adsMaterial) var adsMesh=new THREE.Mesh(adsGeometry,adsMaterial)
adsMesh.name=labelName.text
names.push(adsMesh) names.push(adsMesh)
adsMesh.renderOrder=7 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.position.set(115*(-center[0]+label[0]+points[3] +0.1*(points[3]>0?1:-1)), label[1]+points[4], 115*(-center[1]+label[2]+points[5]))
scene.add(adsMesh) scene.add(adsMesh)
time_line.to(adsMaterial,{opacity:1, duration:1})
time_line.to(adsMesh.position,{x:115*(-center[0]+label[0]+points[3]), duration:2},'-=2')
resolve() resolve()
}) })
}) })
} }
function addPoint(){ function addPoint(){
const geometry = new THREE.SphereGeometry( 1, 20, 20 ); const geometry = new THREE.SphereGeometry( 0.7, 20, 20 );
let material = new THREE.MeshPhysicalMaterial( { let material = new THREE.MeshPhysicalMaterial( {
clearcoat: 1.0, clearcoat: 1.0,
clearcoatRoughness: 0.4, clearcoatRoughness: 0.4,
@ -416,13 +655,15 @@ import {SVGToBase64} from 'black-knight/lib/config/tools'
normalScale: new THREE.Vector2( 0.15, 0.15 ), normalScale: new THREE.Vector2( 0.15, 0.15 ),
}); });
var mesh=new THREE.Mesh(geometry, material) var mesh=new THREE.Mesh(geometry, material)
mesh.position.set(0,1.5,0) mesh.name="点"
mesh.position.set(0,0.7,0)
scene.add(mesh) scene.add(mesh)
items.list.push(mesh)
modalRenderer=new CSS2DRenderer({element: modelPopover.value}) modalRenderer=new CSS2DRenderer({element: mapCSS2D.value})
modalRenderer.setSize(map.value.clientWidth, map.value.clientHeight) modalRenderer.setSize(map.value.clientWidth, map.value.clientHeight)
var demo=new CSS2DObject(demoEl.value) var demo=new CSS2DObject(model.value)
demo.position.set(-10,7,0) demo.position.set(-10,7,0)
scene.add(demo) scene.add(demo)
@ -450,26 +691,52 @@ import {SVGToBase64} from 'black-knight/lib/config/tools'
v.rotation.z=camera.rotation.z v.rotation.z=camera.rotation.z
}) })
} }
function tap(){ function move({clientX, clientY}){
var z=Math.sqrt(Math.pow(camera.position.x,2)+Math.pow(camera.position.z,2)) raycaster.setFromCamera(
console.log("z:", z) new THREE.Vector2(
console.log("y:",camera.position.y) clientX/window.innerWidth*2-1,
console.log('角度',180/Math.PI*-Math.tan(z/camera.position.y)) -clientY/window.innerHeight*2+1
),
camera
)
const intersects=raycaster.intersectObjects(items.list, false)
if(intersects.length>0){
map.value.style.cursor="pointer"
if(items.select){
if(items.select!=intersects[0].object){
items.select.scale.set(1,1,1)
items.select=intersects[0].object
items.select.scale.set(1.4, 1.4, 1.4)
}
}else{
items.select=intersects[0].object
items.select.scale.set(1.4, 1.4, 1.4)
}
}else{
map.value.style.cursor="default"
if(items.select){
items.select.scale.set(1,1,1)
items.select=null
}
}
} }
onMounted(()=>{ onMounted(()=>{
nextTick(async()=>{ nextTick(async()=>{
init() init()
addMap() addMap()
await addLabel()
addPoint() addPoint()
render() render()
// setTimeout(()=>{
await addBG1() await addBG1()
await addBG2() await addBG2()
await addBG3() await addBG3()
await addBG4() await addBG4()
await addBG5() await addBG5()
// },3000) await addLabel()
setTimeout(()=>{
time_line.play()
},1000)
}) })
}) })
</script> </script>
Write Preview
Loading…
Cancel
Save