百度 html 3d,百度地图实现3D棱柱

如图：

lz.png

1.项目根目录下下载百度地图插件

npm install vue-baidu-map –save

2.在首页index.html中引入百度地图:

3.在显示地图的组件中 template 中：

4.在显示地图的组件中 script 中：// path ， // path array 这里是3D棱柱的重要部分

import {addPrisms} from '../../statics/js/map3D' // 这里是将构成3D棱柱的方法单独放在一个js文件中了，js见下文

import styleJson2 from '../../statics/js/styleJson2' // 此处引入的地图的样式(不重要，可以忽略)

export default {

data () {

return {

value: true,

val: true,

mode: true,

map: '',

polyline: '',

polylines: '',

polylinein: '',

items: [],

item: {},

item1: [],

item2: [],

item3: [],

log: '',

lat: '',

id: '',

}

},

mounted () {

// 百度地图API功能

this.maps()

},

methods: {

maps () {

// 百度地图API功能

this.map = new BMapGL.Map('container', {

style: {

// 地图样式

styleJson: styleJson2

}

});

this.map.enableScrollWheelZoom(true);

this.map.setTilt(50);

this.$api({

method: "get",

url: `/analysis/bireport/${this.id}`,

headers: { tenant: 'HO', 'token': localStorage.getItem("token")}

})

.then(res => {

this.item = res.data.data.reoprtFlight

this.items = []

this.item1 = []

this.item2 = []

// 经纬度

var lonandlat = res.data.data.reoprtFlight.lonandlat

var planLonandlat = res.data.data.reoprtFlight.planLonandlat

var actualDirectLocus = res.data.data.reoprtFlight.actualDirectLocus

// 转化为JSON格式(因为后端传过来的数据格式不能直接用，所以需要转换格式)

this.items = JSON.parse(lonandlat)

for (var i = 0; i < this.items.length; i++) {

this.log = this.items[0].longitude

this.lat = this.items[0].latitude

}

// 设置地图中心点

this.map.centerAndZoom(new BMapGL.Point(this.log, this.lat), 7);

// 计划时长

this.item1 = JSON.parse(planLonandlat)

this.item3 = JSON.parse(actualDirectLocus)

var pois = []

for (var i = 0; i < this.item3.length; i++) {

const start = {

longitude: this.item3[i].longitudeStart,

latitude: this.item3[i].latitudeStart,

pointname: this.item3[i].pointnameStart

}

const end = {

longitude: this.item3[i].longitudeEnd,

latitude: this.item3[i].latitudeEnd,

pointname: this.item3[i].pointnameEnd

}

pois.push(start, end);

}

// path

this.add = addPrisms(this.map, this.items);

this.first = addPrisms(this.map, this.item1, {prism:{topFillColor:'#4f77e1',sideFillColor:'#4f77e1'}});

this.item2 = [pois]

// path array

this.dest = []

this.item2.forEach(path => {

const prisms = addPrisms(this.map, path, {prism:{topFillColor:'#feb837',sideFillColor:'#feb837'}});

this.dest.push(...prisms)

})

})

.catch(function(error) {

console.log(error)

})

},

PS：上文中 this.item3和pois的数据格式

js.png

使用按钮控制3D棱柱的显示与隐藏

template:

计划航路

v-model="value"

color="green"

@input="clicBox(value)"

/>

实际直飞

v-model="val"

color="green"

@input="practical(val)"

/>

实际航路

v-model="mode"

color="green"

@input="fires(mode)"

/>

script部分

clicBox(value){

this.add.forEach(a => a[value ? 'show' : 'hide']())

},

practical(val){

this.dest.forEach(c => c[val ? 'show' : 'hide']())

},

fires(mode){

this.first.forEach(b => b[mode ? 'show' : 'hide']())

},

}

}

map3D.js

export {addPrisms}

function items2path(items) {

return (() => {

const __arr = [];

for (let __i = 0; __i < items.length; __i++) {

let item = items[__i];

__arr.push([ item.longitude, item.latitude ]);

}

return __arr;

})();

}

function addPrisms(map, items, op= {}) {

const prisms = items2prisms(items, op);

for (let __i = 0; __i < prisms.length; __i++) {

let prism = prisms[__i];

map.addOverlay(prism);

}

return prisms

}

function items2prisms(items, op) {

const path = items2path(items, op);

const prisms = (() => {

const __arr = [];

for (let i = 1; i < path.length; i++) {

let p = path[i];

__arr.push(path2prism(path[i - 1], p, op));

}

return __arr;

})();

return prisms;

}

function path2prism(p1, p2, op = {}) {

const path = path2prismPath(p1, p2);

const points = path2points(path);

const prism = new BMapGL.Prism(points, 50000, {

topFillColor: '#2cc78e',

topFillOpacity: 0.6,

sideFillColor: '#2cc78e',

sideFillOpacity: 0.9,

...(op.prism || {})

});

return prism;

}

function path2prismPath(p1, p2) {

const p12 = p1.slice(0);

const p22 = p2.slice(0);

const offset = .01;

for (let __a = [ p12, p22 ], __i = 0; __i < __a.length; __i++) {

let p = __a[__i];

p[1] *= 1;

p[1] += offset;

}

return [

p1,

p2,

p22,

p12

];

}

function path2points(path) {

return (() => {

const __arr = [];

for (let __i = 0; __i < path.length; __i++) {

let p = path[__i];

__arr.push(new BMapGL.Point(...p));

}

return __arr;

})();

}