maptalks.mapboxgl加载 .dae 3D模型,摄像
2020-08-21 本文已影响0人
飘_摇_
拿到的是.skp 3d模型文件,下载SketchUp软件.安装后打开模型文件，导出三维模型
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Add a 3D model</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
<link type="text/css" rel="stylesheet" href="dist/maptalks.css">
<script type="text/javascript" src="dist/maptalks.min.js"></script>
<script src='dist/mapbox-gl.js'></script>
<link href='dist/mapbox-gl.css' rel='stylesheet' />
<script type="text/javascript" src="dist/maptalks.mapboxgl.js"></script>
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-language/v0.10.1/mapbox-gl-language.js'></script>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<script src="../build/three.js"></script>
<script src="js/loaders/ColladaLoader.js"></script>
<div id="map"></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoiemh1bGlwaWFvIiwiYSI6ImNqemtsbXZwdzBtNjAzZG9hOWt4Z21ocHUifQ.dsdPomNsO7w4Q-rRduoBcg';
var baseLayer = new maptalks.MapboxglLayer('tile',{
glOptions : {
'style' : 'mapbox://styles/mapbox/dark-v9'
}
});
var mapT = new maptalks.Map("map",{
//limit max pitch to 60 as mapbox-gl-js required
maxPitch : 60,
center: [121.509758, 31.300800],
zoom : 16,
pitch: 60,
bearing: 10,
baseLayer : baseLayer
});
var markers=[];//所有摄像头
let cameraWidth=15,cameraHeight=15,textSize=4;
//根据层级来控制摄像头大小
mapT.on('zoomend',function(zoom){
let temp=zoom.from-zoom.to;
if(temp>0){
temp=1.2*temp;
cameraWidth=cameraWidth/temp;
cameraHeight=cameraHeight/temp;
textSize=textSize/temp;
}else if(temp<0){
temp=Math.abs(temp)*1.2;
cameraWidth=cameraWidth*temp;
cameraHeight=cameraHeight*temp;
textSize=textSize*temp;
}
markers.forEach(function(g){
g.updateSymbol({
'markerWidth' : cameraWidth,
'markerHeight' : cameraHeight,
'textSize' : textSize
});
});
});
var layer=new maptalks.VectorLayer('vector',{
enableAltitude : true, // enable altitude
altitudeProperty : 'altitude' // altitude property in properties, default by 'altitude'
}).addTo(mapT);
var marker1 = new maptalks.Marker(
[121.510758, 31.301800],
{
symbol:
{
'markerFile' : 'dist/2.png',//摄像头图片
'markerWidth' : cameraWidth,
'markerHeight' : cameraHeight,
'markerDx' : 0,
'markerDy' : 0,
'markerOpacity': 1,
'textFaceName' : 'sans-serif',
'textName' : '{name}',
'textSize' : textSize,
'textDy' : 3
},
properties : {
altitude : 20,
name:'摄像头1'
}
}
);
markers.push(marker1);
layer.addGeometry(markers);
var map=baseLayer.getGlMap();
mapboxgl.setRTLTextPlugin('https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.1.0/mapbox-gl-rtl-text.js');
map.addControl(new MapboxLanguage({
defaultLanguage: 'zh'
}));
// parameters to ensure the model is georeferenced correctly on the map
var modelOrigin = [121.509758, 31.300800];
var modelAltitude = 0;
var modelRotate = [Math.PI / 2, 0, 0];
var modelAsMercatorCoordinate = mapboxgl.MercatorCoordinate.fromLngLat(
modelOrigin,
modelAltitude
);
// transformation parameters to position, rotate and scale the 3D model onto the map
var modelTransform = {
translateX: modelAsMercatorCoordinate.x,
translateY: modelAsMercatorCoordinate.y,
translateZ: modelAsMercatorCoordinate.z,
rotateX: modelRotate[0],
rotateY: modelRotate[1],
rotateZ: modelRotate[2],
/* Since our 3D model is in real world meters, a scale transform needs to be
* applied since the CustomLayerInterface expects units in MercatorCoordinates.
*/
scale: modelAsMercatorCoordinate.meterInMercatorCoordinateUnits()
};
var THREE = window.THREE;
// configuration of the custom layer for a 3D model per the CustomLayerInterface
var customLayer = {
id: '3d-model',
type: 'custom',
renderingMode: '3d',
onAdd: function (map, gl) {
this.camera = new THREE.Camera();
this.scene = new THREE.Scene();
// create two three.js lights to illuminate the model
var directionalLight = new THREE.DirectionalLight(0xcccccc);
directionalLight.position.set(0, -70, 100).normalize();
this.scene.add(directionalLight);
var directionalLight2 = new THREE.DirectionalLight(0xcccccc);
directionalLight2.position.set(0, 70, 100).normalize();
this.scene.add(directionalLight2);
// use the three.js GLTF loader to add the 3D model to the three.js scene
var loader = new THREE.ColladaLoader();
loader.load('./models/collada/五角场.dae',
function (gltf) {
this.scene.add(gltf.scene);
}.bind(this)
);
this.map = map;
// use the Mapbox GL JS map canvas for three.js
this.renderer = new THREE.WebGLRenderer({
canvas: map.getCanvas(),
context: gl,
antialias: true
});
this.renderer.autoClear = false;
},
render: function (gl, matrix) {
var rotationX = new THREE.Matrix4().makeRotationAxis(
new THREE.Vector3(1, 0, 0),
modelTransform.rotateX
);
var rotationY = new THREE.Matrix4().makeRotationAxis(
new THREE.Vector3(0, 1, 0),
modelTransform.rotateY
);
var rotationZ = new THREE.Matrix4().makeRotationAxis(
new THREE.Vector3(0, 0, 1),
modelTransform.rotateZ
);
var m = new THREE.Matrix4().fromArray(matrix);
var l = new THREE.Matrix4()
.makeTranslation(
modelTransform.translateX,
modelTransform.translateY,
modelTransform.translateZ
)
.scale(
new THREE.Vector3(
modelTransform.scale,
-modelTransform.scale,
modelTransform.scale
)
)
.multiply(rotationX)
.multiply(rotationY)
.multiply(rotationZ);
this.camera.projectionMatrix = m.multiply(l);
this.renderer.state.reset();
this.renderer.render(this.scene, this.camera);
this.map.triggerRepaint();
}
};
map.on('style.load', function () {
map.addLayer(customLayer, 'waterway-label');
});
</script>
</body>
</html>
效果图:
image.png
