console
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>武汉科创基地信息展示</title>
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
<style>
html, body, #container {
height: 100%;
width: 100%;
}
.content-window-card {
position: relative;
box-shadow: none;
bottom: 0;
left: 0;
width: auto;
padding: 0;
}
.content-window-card p {
height: 2rem;
}
.custom-info {
border: solid 1px silver;
}
div.info-top {
position: relative;
background: none repeat scroll 0 0 #F9F9F9;
border-bottom: 1px solid #CCC;
border-radius: 5px 5px 0 0;
}
div.info-top div {
display: inline-block;
color: #333333;
font-size: 14px;
font-weight: bold;
line-height: 31px;
padding: 0 10px;
}
div.info-top img {
position: absolute;
top: 10px;
right: 10px;
transition-duration: 0.25s;
}
div.info-top img:hover {
box-shadow: 0px 0px 5px #000;
}
div.info-middle {
font-size: 12px;
padding: 10px 6px;
line-height: 20px;
}
div.info-bottom {
height: 0px;
width: 100%;
clear: both;
text-align: center;
}
div.info-bottom img {
position: relative;
z-index: 104;
}
span {
margin-left: 5px;
font-size: 11px;
}
.info-middle img {
float: left;
margin-right: 6px;
}
</style>
</head>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
<script language="javascript" src="//webapi.amap.com/maps?v=1.4.15&key=您申请的key值&plugin=AMap.ControlBar"></script>
</script>
<script src="//a.amap.com/jsapi_demos/static/demo-center/model/js/three.js"></script>
<script src="//a.amap.com/jsapi_demos/static/demo-center/model/js/loaders/MTLLoader.js"></script>
<script src="//a.amap.com/jsapi_demos/static/demo-center/model/js/loaders/LoaderSupport.js"></script>
<script src="//a.amap.com/jsapi_demos/static/demo-center/model/js/loaders/OBJLoader2.js"></script>
</head>
<body >
<div id="container" style="width:100%; height:100%;resize:both;"></div>
<script language="javascript">
var map;
function mapInit(){
map = new AMap.Map('container', {
resizeEnable: true,
rotateEnable:true,
pitchEnable:true,
zoom: 17,
pitch:80,
rotation:-15,
viewMode:'3D',
buildingAnimation:true,
expandZoomRange:true,
zooms:[3,20],
center:[114.309083, 30.599992]
});
map.addControl(new AMap.ControlBar({
showZoomBar:false,
showControlButton:true,
position:{
right:'10px',
top:'10px'
}
}))
}
mapInit()
map.AmbientLight = new AMap.Lights.AmbientLight([1,1,1],1);
map.DirectionLight = new AMap.Lights.DirectionLight([1,0,-0.5],[1,1,1],1);
var loadModel = function () {
var modelName = 'building';
var scope = this;
var objLoader = new THREE.OBJLoader2();
var callbackOnLoad = function ( event ) {
var object3Dlayer = new AMap.Object3DLayer();
var meshes = event.detail.loaderRootNode.children;
for(var i=0;i<meshes.length;i++){
var vecticesF3 = meshes[i].geometry.attributes.position;
var vecticesNormal3 = meshes[i].geometry.attributes.normal;
var vecticesUV2 = meshes[i].geometry.attributes.uv;
var vectexCount = vecticesF3.count;
mesh = new AMap.Object3D.MeshAcceptLights();
var geometry = mesh.geometry;
var c,opacity;
var material = meshes[i].material[0]||meshes[i].material;
if(material.map)
mesh.textures.push('https://a.amap.com/jsapi_demos/static/demo-center/model/1519/1519.bmp')
c = material.color;
opacity = material.opacity
for(var j=0;j<vectexCount;j+=1){
var s = j*3;
geometry.vertices.push(vecticesF3.array[s],vecticesF3.array[s+2],-vecticesF3.array[s+1]);
if(vecticesNormal3) {
geometry.vertexNormals.push(vecticesNormal3.array[s],vecticesNormal3.array[s+2],-vecticesNormal3.array[s+1]);
}
if(vecticesUV2) {
geometry.vertexUVs.push(vecticesUV2.array[j*2],1-vecticesUV2.array[j*2+1]);
}
geometry.vertexColors.push(c.r,c.g,c.b,opacity)
}
mesh.DEPTH_TEST = material.depthTest
mesh.transparent = opacity<1;
mesh.scale(6,6,6)
mesh.rotateZ(-150)
mesh.position(new AMap.LngLat(114.304487, 30.597854))
object3Dlayer.add(mesh)
}
map.add(object3Dlayer)
};
var onLoadMtl = function ( materials ) {
objLoader.setModelName( modelName );
objLoader.setMaterials( materials );
objLoader.load( 'https://a.amap.com/jsapi_demos/static/demo-center/model/1519/1519.obj', callbackOnLoad, null, null, null, false );
};
objLoader.loadMtl( 'https://a.amap.com/jsapi_demos/static/demo-center/model/1519/1519.mtl', null, onLoadMtl );
};
var A = new AMap.Text({
text:'XX大厦A座',
position:[114.304487, 30.597854],
height:650,
verticalAlign:'bottom',
map:map,
style:{
'background-color':'red',
'border-color':'white',
'font-size':'12px'
}
})
var B = new AMap.Text({
text:'XX大厦B座',
verticalAlign:'bottom',
position:[114.309074,30.600087],
height:651,
map:map,
style:{
'background-color':'red',
'border-color':'white',
'font-size':'12px'
}
})
addMarker1();
addMarker2();
function addMarker1() {
var marker1 = new AMap.Marker({
map: map,
position: [114.309564,30.5998055]
});
AMap.event.addListener(marker1, 'click', function () {
infoWindow1.open(map, marker1.getPosition());
});
}
function addMarker2() {
var marker2 = new AMap.Marker({
map: map,
position: [114.304487, 30.597854]
});
AMap.event.addListener(marker2, 'click', function () {
infoWindow2.open(map, marker2.getPosition());
});
}
var title1 = '中国长江三峡集团<span style="font-size:11px;color:#F00;">',
content1 = [];
content1.push("<img src='https://wwjossaliyun.oss-cn-hangzhou.aliyuncs.com/typora-img/20220902155931.jpg'>地址：江岸区六合路1号");
content1.push("入园企业：");
content1.push("企业1<br/>企业2<br/>企业3");
var infoWindow1 = new AMap.InfoWindow({
isCustom: true,
content: createInfoWindow(title1, content1.join("<br/>")),
offset: new AMap.Pixel(16, -45)
});
var title2 = '中国武汉科创园<span style="font-size:11px;color:#F00;">',
content2 = [];
content2.push("<img src='https://wwjossaliyun.oss-cn-hangzhou.aliyuncs.com/typora-img/20220902155931.jpg'>地址：江岸区中山大道与三阳路交叉口东");
content2.push("入园企业：");
content2.push("企业1<br/>企业2<br/>企业3");
var infoWindow2 = new AMap.InfoWindow({
isCustom: true,
content: createInfoWindow(title2, content2.join("<br/>")),
offset: new AMap.Pixel(16, -45)
});
function createInfoWindow(title, content) {
var info = document.createElement("div");
info.className = "custom-info input-card content-window-card";
var top = document.createElement("div");
var titleD = document.createElement("div");
var closeX = document.createElement("img");
top.className = "info-top";
titleD.innerHTML = title;
closeX.src = "https://webapi.amap.com/images/close2.gif";
closeX.onclick = closeInfoWindow;
top.appendChild(titleD);
top.appendChild(closeX);
info.appendChild(top);
var middle = document.createElement("div");
middle.className = "info-middle";
middle.style.backgroundColor = 'white';
middle.innerHTML = content;
info.appendChild(middle);
var bottom = document.createElement("div");
bottom.className = "info-bottom";
bottom.style.position = 'relative';
bottom.style.top = '0px';
bottom.style.margin = '0 auto';
var sharp = document.createElement("img");
sharp.src = "https://webapi.amap.com/images/sharp.png";
bottom.appendChild(sharp);
info.appendChild(bottom);
return info;
}
function closeInfoWindow() {
map.clearInfoWindow();
}
loadModel()
</script>
</body>
</html>