1. 需要有一个被选择的mesh,通过raycaster获取 2. 创建先和一个平面 3. 将线和标注的面放在获取的mesh上 var mouse =new THREE.Vector2() var raycaster =new THREE.Raycaster() mouse.x = (event.clientX / domElement.width) *2 -1 mouse.y = -(event.clientY / domElement.height) *2 +1 raycaster.setFromCamera(mouse, camera) var intersects = raycaster.intersectObjects(scene.children, false)// selectedObject = intersects[0].object// 被选中的标注对象 // var startP,endP// 这里也是通过raycaster获取到的 var color = parameters.hasOwnProperty("color") ? parameters.color :0x0000ff var lineMat =new THREE.LineBasicMaterial({ "color": 0xff0000 }) var lineGeo =new THREE.Geometry() lineGeo.vertices.push(startPos) lineGeo.vertices.push(endPos) var line =new THREE.Line(lineGeo, lineMat) // 初始化一个sprite,这是一个始终面向相机的平面, var sprite = new textSprite(这并不是一个构造函数,不想写那么多,自行去官网查看) ....... sprite.scale.set(_spriteScale, _spriteScale, _spriteScale)// 设置的是sprite的大小 selectedObject.add(line)// 添加 line.worldToLocal(_endPos)// 设置点 sprite.position.copy(_endPos)// 设置sprite的位置 line.add(sprite)添加并进行关联 注: sprite可以用于进行标注热点等操作,具体实现较为简单,同时因为也算是mesh,所以sprite可以设置texture,使用图片作为背景等,也可以把一个canvas,把需要的文字图片等都加入进来.})
我们在map对象上添加了一个click事件的监听函数，当点击地图上某个位置时，监听函数通过控制台把当前点击的位置输出出来（注意需要有控制台的支持，比如firebug，如果没有控制台则可使用alert把point的lng和lat属性输出出来）。此外，你也可以使用API提供的坐标拾取工具来完成（http://dev.baidu.com/wiki/static/map/API/tool/getPoint/），它支持检索并且点击地图上任意位置时会出现该位置的坐标。
标注元素组成
从DOM元素构成角度看，一个完整的标注是由以下几个部分组成的：
标注点击区域
标注图标
标注阴影
下面是示意图：
