Threejs绘制地图(geojson)

目前接触了一些室内地图的开发工作,二维的、三维的,数据源基本都是采用geojson格式

基于geojson的地图绘制目前已经有比较成熟的框架和解决方案了。

但是今天我们还是要在Threejs里来简单实现一下三维数据的展示。

代码地址
预览地址

主要实现了2个功能

  • 三维地图展示
  • POI信息显示

数据采集

首先我们需要一份中国省份的轮廓数据

geojson代码截图

在这份数据我们需要的字段有

  • properties.name

    用于POI信息的展示

  • properties.centroid

    用于POI信息的定位

  • geometry.coordinates

    用于构建我们的三维模型

三维环境搭建

注意

  • 以下仅是核心代码
  • 绿色的线是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部分

  1. 主体部分:我们用THREE.Shape() + THREE.ExtrudeGeometry()来实现
  2. 轮廓线部分:我们用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)
        }

实现后的效果是这样

POI信息显示

如果是在室内地图的开发,我们通常会需要显示模块的一些信息,比如名称、图标之类的。这里我们就简单显示一下省份的名称就好。

我的做法是:

  1. 获取每个省份模块的中心点坐标,并转化成屏幕坐标
  2. 新建一个canvas,将省份名称根据坐标绘制到canvas上
  3. 解决坐标的碰撞问题

代码实现

        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;

谢谢阅读

https://juejin.im/post/5e344733e51d453ce13d2579

「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!
JAVA
Scrapy
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论