目前接触了一些室内地图的开发工作，二维的、三维的，数据源基本都是采用geojson格式
基于geojson的地图绘制目前已经有比较成熟的框架和解决方案了。
但是今天我们还是要在Threejs里来简单实现一下三维数据的展示。
主要实现了2个功能
- 三维地图展示
- POI信息显示
首先我们需要一份中国省份的轮廓数据
在这份数据我们需要的字段有
- 用于POI信息的展示
- 用于POI信息的定位
- 用于构建我们的三维模型
- 以下仅是核心代码
- 绿色的线是y轴
- 红色的线是x轴
- 蓝色的线是z轴
mounted () {
// 初始化3D环境
this.initEnvironment()
// 构建光照系统
this.buildLightSystem()
// 构建辅助系统
this.buildAuxSystem()
},
methods: {
// 初始化3D环境
initEnvironment () {
this.scene = new THREE.Scene();
this.scene.background = new THREE.Color(0xf0f0f0)
// 建一个空对象存放对象
this.map = new THREE.Object3D()
// 设置相机参数
this.setCamera();
// 初始化
this.renderer = new THREE.WebGLRenderer({
alpha: true,
canvas: document.querySelector('canvas')
})
this.renderer.setPixelRatio(window.devicePixelRatio)
this.renderer.setSize(window.innerWidth, window.innerHeight - 10)
document.addEventListener('mousemove', this.onDocumentMouseMove, false)
window.addEventListener('resize', this.onWindowResize, false)
},
setCamera () {
this.camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 10000);
this.camera.position.set(0, -70, 90);
this.camera.lookAt(0, 0, 0);
},
// 构建辅助系统: 网格和坐标
buildAuxSystem () {
let axisHelper = new THREE.AxesHelper(2000)
this.scene.add(axisHelper)
let gridHelper = new THREE.GridHelper(600, 60)
this.scene.add(gridHelper)
let controls = new THREE.OrbitControls(this.camera, this.renderer.domElement)
controls.enableDamping = true
controls.dampingFactor = 0.25
controls.rotateSpeed = 0.35
},
// 光照系统
buildLightSystem () {
let directionalLight = new THREE.DirectionalLight(0xffffff, 1.1);
directionalLight.position.set(300, 1000, 500);
directionalLight.target.position.set(0, 0, 0);
directionalLight.castShadow = true;
let d = 300;
const fov = 45 //拍摄距离 视野角值越大，场景中的物体越小
const near = 1 //相机离视体积最近的距离
const far = 1000//相机离视体积最远的距离
const aspect = window.innerWidth / window.innerHeight; //纵横比
directionalLight.shadow.camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
directionalLight.shadow.bias = 0.0001;
directionalLight.shadow.mapSize.width = directionalLight.shadow.mapSize.height = 1024;
this.scene.add(directionalLight)
let light = new THREE.AmbientLight(0xffffff, 0.6)
this.scene.add(light)
},
// 根据浏览器窗口变化动态更新尺寸
onWindowResize () {
this.camera.aspect = window.innerWidth / window.innerHeight;
this.camera.updateProjectionMatrix();
this.renderer.setSize(window.innerWidth, window.innerHeight);
},
onDocumentMouseMove (event) {
event.preventDefault();
}
}
接下来我们需要根据 geometry.coordinates 来绘制地图
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[
117.210024,
40.082262
],
[
117.105315,
40.074479
],
[
117.105315,
40.074479
],
...
]
]
]
}
我们的坐标数据是经纬度坐标，我们需要把它转化成平面坐标 这里用到了 d3-geo 的坐标转化方法
注意这里的类型是 MultiPolygon（多面），我们的坐标点是嵌套在多层数组里面的。
因为我们的数据中，
有的省份轮廓是闭合的
有的省份是多个部分组成的
我们的模型分成2部分
- 主体部分：我们用THREE.Shape() + THREE.ExtrudeGeometry()来实现
- 轮廓线部分：我们用THREE.Line()来实现
initMap () {
// d3-geo转化坐标
const projection = d3geo.geoMercator().center([104.0, 37.5]).scale(80).translate([0, 0]);
// 遍历省份构建模型
chinaJson.features.forEach(elem => {
// 新建一个省份容器：用来存放省份对应的模型和轮廓线
const province = new THREE.Object3D()
const coordinates = elem.geometry.coordinates
coordinates.forEach(multiPolygon => {
multiPolygon.forEach(polygon => {
// 这里的坐标要做2次使用：1次用来构建模型，1次用来构建轮廓线
const shape = new THREE.Shape()
const lineMaterial = new THREE.LineBasicMaterial({ color: 0xffffff })
const linGeometry = new THREE.Geometry()
for (let i = 0; i < polygon.length; i++) {
const [x, y] = projection(polygon[i])
if (i === 0) {
shape.moveTo(x, -y)
}
shape.lineTo(x, -y);
linGeometry.vertices.push(new THREE.Vector3(x, -y, 4.01))
}
const extrudeSettings = {
depth: 4,
bevelEnabled: false
};
const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings)
const material = new THREE.MeshBasicMaterial({ color: '#d13a34', transparent: true, opacity: 0.6 })
const mesh = new THREE.Mesh(geometry, material)
const line = new THREE.Line(linGeometry, lineMaterial)
province.add(mesh)
province.add(line)
})
})
// 将geojson的properties放到模型中，后面会用到
province.properties = elem.properties
if (elem.properties.centroid) {
const [x, y] = projection(elem.properties.centroid)
province.properties._centroid = [x, y]
}
this.map.add(province)
})
this.scene.add(this.map)
}
实现后的效果是这样
如果是在室内地图的开发，我们通常会需要显示模块的一些信息，比如名称、图标之类的。这里我们就简单显示一下省份的名称就好。
我的做法是:
showName () {
const width = window.innerWidth
const height = window.innerHeight
let canvas = document.querySelector('#name')
if (!canvas) return
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
// 新建一个离屏canvas
const offCanvas = document.createElement('canvas')
offCanvas.width = width
offCanvas.height = height
const ctxOffCanvas = canvas.getContext('2d');
// 设置canvas字体样式
ctxOffCanvas.font = '16.5px Arial';
ctxOffCanvas.strokeStyle = '#FFFFFF';
ctxOffCanvas.fillStyle = '#000000';
// texts用来存储显示的名称，重叠的部分就不会放到里面
const texts = [];
/**
* 遍历省份数据，有2个核心功能
* 1. 将3维坐标转化成2维坐标
* 2. 后面遍历到的数据，要和前面的数据做碰撞对比，重叠的就不绘制
* */
this.map.children.forEach((elem, index) => {
if (!elem.properties._centroid) return
// 找到中心点
const y = -elem.properties._centroid[1]
const x = elem.properties._centroid[0]
const z = 4
// 转化为二维坐标
const vector = new THREE.Vector3(x, y, z)
const position = vector.project(this.camera)
// 构建文本的基本属性：名称，left, top, width, height -> 碰撞对比需要这些坐标数据
const name = elem.properties.name
const left = (vector.x + 1) / 2 * width
const top = -(vector.y - 1) / 2 * height
const text = {
name,
left,
top,
width: ctxOffCanvas.measureText(name).width,
height: 16.5
}
// 碰撞对比
let show = true
for (let i = 0; i < texts.length; i++) {
if (
(text.left + text.width) < texts[i].left ||
(text.top + text.height) < texts[i].top ||
(texts[i].left + texts[i].width) < text.left ||
(texts[i].top + texts[i].height) < text.top
) {
show = true
} else {
show = false
break
}
}
if (show) {
texts.push(text)
ctxOffCanvas.strokeText(name, left, top)
ctxOffCanvas.fillText(name, left, top)
}
})
// 离屏canvas绘制到canvas中
ctx.drawImage(offCanvas, 0, 0)
}
注意，因为我们的canvas是叠在threejs的canvas上仅作为展示的，所以需要加个样式 pointer-events: none;
谢谢阅读