GeoGlobe JS SDK

Class: BuildingLayer

.Visuals.Three. BuildingLayer

建筑物图层，通过矢量面拉伸而来。

new BuildingLayer()

Author:
  • liuck
Source:
View2D/Visuals/Three/BuildingLayer.js
Example
//构造地图对象
var map = new GeoGlobe.Map({
    style: Cfg.style,
    container: 'map',
    zoom: 16,
    bearing: -47,
	pitch: 45,
    units: "degrees",
    center: [114.26734490525155, 30.594607628267966]
});
//构造THREE可视化图层
var threebox = new GeoGlobe.Visuals.Three();
//绑定鼠标点击事件
threebox.on('overlayerclick', function(e){
	var xyz = threebox.unprojectFromWorld(e.param.pickedInfos[0].point);
	alert(e.param.info.userData.attributes.OriginalData.properties.name + '\n经纬度及高程:' + xyz);
});
//绑定鼠标移动事件
threebox.on('overlayerhover', function(e){
	console.info(e);
})
//添加到地图中
threebox.addTo(map);
//构造建筑图层
var buildingLayer = new GeoGlobe.Visuals.Three.BuildingLayer({
	id: '3D building',
    data: [
		{"type":"Feature","properties":{"level":1,"name":"中国邮政储蓄银行（湖北省分行营业部）","height":280,"base_height":0,"color":"#ddd"},"geometry":{"type":"Polygon","coordinates":[[[114.26730001377071,30.595149654035424],[114.26737510423808,30.594983416111138],[114.26728930608508,30.594946561374197],[114.26731076201405,30.59488191979089],[114.26717133751096,30.594845110133267],[114.26709624642238,30.59501134779343],[114.26717132160428,30.595029748326304],[114.26713914030533,30.595094398742066],[114.26707478473918,30.59514061236826],[114.26699970846724,30.59513144350006],[114.26698898951582,30.59505759734068],[114.26678520845394,30.595048535449614],[114.26677447111632,30.595187022721653],[114.26687099882221,30.59519617428873],[114.26687099245959,30.595270029320062],[114.26707477280914,30.595279090587976],[114.26730001377071,30.595149654035424]]]}},
		{"type":"Feature","properties":{"level":1,"name":"凯盟大厦","height":30,"base_height":0,"color":"#ddd"},"geometry":{"type":"Polygon","coordinates":[[[114.26804014434877,30.59393963131797],[114.268050873183,30.59389346186711],[114.2680723228841,30.593893443111675],[114.26807232367943,30.593884211092995],[114.26800798326931,30.593782715043524],[114.26798653351257,30.59378273375209],[114.26798653351257,30.59378273375209],[114.26777203890069,30.59373675981695],[114.26775058416766,30.59379217054334],[114.26792217935898,30.593838181945106],[114.26793290347216,30.59384740463971],[114.26795435247995,30.593856617992756],[114.26797579908315,30.593893527388122],[114.26797579669712,30.593921223438407],[114.26798652078709,30.593930446104824],[114.26793288358859,30.594078204914656],[114.26779346180174,30.594050629883768],[114.26773982498072,30.594189156154734],[114.26793287006767,30.594235148758642],[114.26799723453291,30.59405968485938],[114.26804014434877,30.59393963131797]]]}},
		{"type":"Feature","properties":{"level":1,"name":"天下·国际公馆","height":80,"base_height":0,"color":"#b0c4de","side_texture":'../../images/building3.png'},"geometry":{"type":"Polygon","coordinates":[[[114.26934845937154,30.59490781536552],[114.26933774779835,30.5947601144835],[114.26881224988759,30.594779055829616],[114.26881223716111,30.594926766522196],[114.26934845937154,30.59490781536552]]]}}
	],
    visible: true,
    drawMode:{
    	high:{
    		minZoom: 14,
    		maxZoom: 15
    	},
    	middle:{
    		minZoom: 16,
    		maxZoom: 17
    	},
    	low:{
    		minZoom: 18,
    		maxZoom: 20
    	}
    }
});
//添加到THREE图层
buildingLayer.addTo(threebox);
//绘制
threebox.render();

Members

data :Array

数据
Type:
  • Array
Source:
View2D/Visuals/Three/BuildingLayer.js
Example
[{
	"type":"Feature",
	"properties":{
		"id": 100001,
		"level":1,
		"name":"中国银行（武汉新台北支行）",
		"height":50,
		"base_height":0,
		"color":"#ddd", //颜色纹理。如果没有纹理图片时，则有效。 图片纹理优先于颜色纹理。
		"face_texture":'assets/textures/building.png', //图片纹理，顶部纹理
		"side_texture":'assets/textures/building2.png' //图片纹理，侧面纹理
	},
	"geometry":{
		"type":"Polygon",
		"coordinates":[[[114.27731517981033,30.597299735680195],[114.2771650822979,30.59732760632838],[114.27706858577743,30.597401572142914],[114.2771114663513,30.597447680396996],[114.27731517981033,30.597299735680195]]]
	}
}]

drawMode :Object

高中低绘制机制，在zoom区间采用不同的绘制机制：'high'作为整体绘制，'middle'单个建筑绘制，'low'精细模型绘制
Type:
  • Object
Default Value:
  • { high:{ minZoom: 14, maxZoom: 15 }, middle:{ minZoom: 16, maxZoom: 17 }, low:{ minZoom: 18, maxZoom: 20 } }
Source:
View2D/Visuals/Three/BuildingLayer.js

id :String

图层id
Type:
  • String
Default Value:
  • '1'
Source:
View2D/Visuals/Three/BuildingLayer.js

opacity :Number

透明度 0-1
Type:
  • Number
Default Value:
  • 1.0
Source:
View2D/Visuals/Three/BuildingLayer.js

visible :Boolean

可见性
Type:
  • Boolean
Default Value:
  • true
Source:
View2D/Visuals/Three/BuildingLayer.js

Methods

addTo(three)

关联Three
Parameters:
Name Type Description
three GeoGlobe.Visuals.Three
Source:
View2D/Visuals/Three/BuildingLayer.js

getBaseElevation(data)

建筑起始高程的GET属性
Parameters:
Name Type Description
data Feature geojson中的一个Feature
Default Value:
  • data.properties.base_height
Source:
View2D/Visuals/Three/BuildingLayer.js
Returns:
elevation - 返回起始高程值
Type
Int

getColor(data)

颜色GET属性
Parameters:
Name Type Description
data Feature geojson中的一个Feature
Default Value:
  • data.properties.color
Source:
View2D/Visuals/Three/BuildingLayer.js
Returns:
color - 颜色值
Type
String

getElevation(data)

建筑高程的GET属性
Parameters:
Name Type Description
data Feature geojson中的一个Feature
Default Value:
  • data.properties.height
Source:
View2D/Visuals/Three/BuildingLayer.js
Returns:
elevation - 返回高程值
Type
Int

getFaceTexture(data)

建筑顶部纹理图片资源路径GET属性
Parameters:
Name Type Description
data Feature geojson中的一个Feature
Default Value:
  • data.properties.face_texture
Source:
View2D/Visuals/Three/BuildingLayer.js
Returns:
uri - 图片路径
Type
String

getFaceTextureRepeat(data)

建筑顶部纹理平铺参数GET属性
Parameters:
Name Type Description
data Feature geojson中的一个Feature
Default Value:
  • data.properties.face_texture_repeat
Source:
View2D/Visuals/Three/BuildingLayer.js
Returns:
repeat - 平铺参数 '10,10'
Type
String

getPolygon(data)

多边形几何对象GET属性
Parameters:
Name Type Description
data Feature geojson中的一个Feature
Default Value:
  • data.geometry.coordinates
Source:
View2D/Visuals/Three/BuildingLayer.js
Returns:
coordinates - 返回组成多边形的坐标数组
Type
Array
Example
[[[114.27731517981033,30.597299735680195],[114.2771650822979,30.59732760632838],[114.27706858577743,30.597401572142914],[114.2771114663513,30.597447680396996],[114.27731517981033,30.597299735680195]]]

getSideTexture(data)

建筑侧部纹理图片资源路径GET属性
Parameters:
Name Type Description
data Feature geojson中的一个Feature
Default Value:
  • data.properties.side_texture
Source:
View2D/Visuals/Three/BuildingLayer.js
Returns:
uri - 图片路径
Type
String

getSideTextureRepeat(data)

建筑侧部纹理平铺参数GET属性
Parameters:
Name Type Description
data Feature geojson中的一个Feature
Default Value:
  • data.properties.side_texture_repeat
Source:
View2D/Visuals/Three/BuildingLayer.js
Returns:
repeat - 平铺参数 '30,30'
Type
String

remove()

从父对象中移除自己
Source:
View2D/Visuals/Three/BuildingLayer.js

render()

绘制
Source:
View2D/Visuals/Three/BuildingLayer.js