如下图所示：
接着，设置下禁止浏览器窗口大小改变地图大小，并引入地图核心JS
<meta name="viewport" content="initial-scale=1.0,user-scalable=no">
设置因浏览器大小改变地图大小，进行禁止；引入地图核心js前，记得到官网上申请密钥
如下图所示：
地图如何在页面上展示出来，这里就需要一个地图容器。于是，我在<body></body>中设置一个div，作为地图容器，
如下图所示：
接着，设置下body、div元素的样式，如宽度、高度、字体以及字体大小等。这里，必须要设置下宽度和高度，且使用百分比，这样让其自适应，
如下图所示：
然后，编写生成地图的核心JS，指定地图的经纬度，地图为2D的，放大级别zoom，
如下图所示：
最后，将地图初始化函数放到body中的onload事件中，让初始化页面就加载地图，
如下图所示：
7
但是，我发现这样写的话，地图始终不出来；于是，我仔细检查下，结果发现地图容器的ID和初始化函数地图ID不一致，还有没有设置html元素的样式，导致地图始终显示不了。修改完了之后，重新刷新浏览器，地图显示出来了
three.js创建地图的方法：
1.定义html页面
<!DOCTYPE html>
<html>
<head>
<title>Three.js Step Tutorial</title>
<style>
body {
margin: 0px
background-color: #fff
overflow: hidden
}
</style>
</head>
<body>
<script src="js/three.min.js"></script>
<script src="js/three-tut.js"></script>
</body>
</html>
2、编写动画脚本anotation.js
var camera定义相机
var scene定义场景画布
var renderer定义渲染入口
var mesh定义恢复
init()初始化画布
animate()开始动画
函数定义
function init() {
scene = new THREE.Scene()
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000)
var light = new THREE.DirectionalLight( 0xffffff )
light.position.set( 0, 1, 1 ).normalize()
scene.add(light)
var geometry = new THREE.CubeGeometry( 10, 10, 10)
var material = new THREE.MeshPhongMaterial( { ambient: 0x050505, color: 0x0033ff, specular: 0x555555, shininess: 30 } )
mesh = new THREE.Mesh(geometry, material )
mesh.position.z = -50
scene.add( mesh )
renderer = new THREE.WebGLRenderer()
renderer.setSize( window.innerWidth, window.innerHeight )
document.body.appendChild( renderer.domElement )
window.addEventListener( 'resize', onWindowResize, false )
render()
}
function animate() {
mesh.rotation.x += .04
mesh.rotation.y += .02
render()
requestAnimationFrame( animate )
}
function render() {
renderer.render( scene, camera )
}
形状变换
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight
camera.updateProjectionMatrix()
renderer.setSize( window.innerWidth, window.innerHeight )
render()
}
3、运行以上程序，效果如下：
室内地图制作流程说明
一、获取测试点室内分布图层
室内分布图可能是CAD或其他格式。若为CAD格式图片，如下图
需删除图片中多余连线及天线信息，删除后效果如下图
保存为pdf格式，然后用pdf工具打开，利用快拍工具，如下图所示
选择图片区域（图片区域选择时请尽量减少周边的空白，如下图所选），确定后在photoshop中新建一个文件后粘贴即可。
二、调整室内分布图角度，转换图片
部分室内分布图可能不是正南正北，需要用photoshop工具将其调整一定角度，
调整到正确的方向，使其和google earth上的方向保持一致。最后将图层转化成JPG格式（像素在1080*800以上，文件大小在100K左右）。记录好JPG图片的像素。 例如：
三、图片名称
图片名称格式：025#001#JLHY#FU#03#03.jpg 025：区号
001：1号网格（建筑在网格外则写999） JLHY：金陵会议的缩写（大写） FU：地上（地下为FD） 03#03：3层（起始和结束楼层）
注意图片名称中的“#”。
四、选择必测、可选点、校准点
在图片上用红色圆点标注必测点，蓝色点标注可选点，绿色的为校准点。
五、在google earth上获取三个点的经纬度
1、打开google earth，找到所需要的测试点建筑。在建筑的边角上选取3个较为明显的点，获取其经纬度信息。注意：三点的分布要分散，最后的结果误差才会小。
2、获取3个点的经纬度完成后，如格式不是度，请在工具>选项界面中设置为‘度’：
