javaScript 【CAD转jeojson数据在canvas绘制】

javaScript 【CAD转jeojson数据在canvas绘制】

由于需求想要实现canvas绘制出跟CAD模型一样的2D平面效果

需求

1.根据CAD的模型绘制canvas
2.将CAD的模型数据导出转成 jeojson
3.将jeojson转成json可用数据
4.将数据拿到处理根据类型 绘制 ，经纬度坐标转成2D平面坐标，将坐标数据转为三维数组
5.创建canvas
创建开始设置线 beginPath()
设置线 lineTo
断开closePath（）

代码

首先拿到jeojson数据 ，我的是这样的（一小部分）

 var arr = [
            {
                "type": "Feature",
                "id": "42F",
                "properties": {
                    "SubClasses": "AcDbEntity : AcDbLwPolyline",
                    "Layer": "楼栋1",
                    "Color": 256,
                    "EntityHandle": "42F"
                },
                "geometry": {
                    "type": "LineString",
                    "coordinates": [
                        [95775.469643, 39352.816374],
                        [106477.561748, 39352.816374],
                        [106477.561748, 36119.539026],
                        [118815.189952, 36119.539026],
                        [117250.764441, 31038.674907],
                        [95775.469643, 31038.674907],
                        [95775.469643, 39352.816374]
                    ]
                }
            },
            {
                "type": "Feature",
                "id": "432",
                "properties": {
                    "SubClasses": "AcDbEntity : AcDbLine",
                    "Layer": "车道",
                    "Color": 256,
                    "EntityHandle": "432"
                },
                "geometry": {
                    "type": "LineString",
                    "coordinates": [
                        [93713.272361, 39956.835177],
                        [131295.038551, 39956.835177]
                    ]
                }
            },
            {
                "type": "Feature",
                "id": "433",
                "properties": {
                    "SubClasses": "AcDbEntity : AcDbLine",
                    "Layer": "车道",
                    "Color": 256,
                    "EntityHandle": "433"
                },
                "geometry": {
                    "type": "LineString",
                    "coordinates": [
                        [94175.489033, 42657.154611],
                        [131295.038551, 42657.154611]
                    ]
                }
            },
            {
                "type": "Feature",
                "id": "436",
                "properties": {
                    "SubClasses": "AcDbEntity : AcDbLwPolyline",
                    "Layer": "车位1",
                    "Color": 256,
                    "EntityHandle": "436"
                },
                "geometry": {
                    "type": "Polygon",
                    "coordinates": [

                        [100077.639701, 43047.990248],
                        [101784.285606, 43047.990248],
                        [101784.285606, 46281.267430],
                        [100077.639701, 46281.267430],
                        [100077.639701, 43047.990248]

                    ]
                }
            },
            {
                "type": "Feature",
                "id": "437",
                "properties": {
                    "SubClasses": "AcDbEntity : AcDbLwPolyline",
                    "Layer": "车位2",
                    "Color": 256,
                    "EntityHandle": "437"
                },
                "geometry": {
                    "type": "Polygon",
                    "coordinates": [

                        [101784.285606, 43083.520776],
                        [103917.593085, 43083.520776],
                        [103917.593085, 46281.267430],
                        [101784.285606, 46281.267430],
                        [101784.285606, 43083.520776]

                    ]
                }
            },
            {
                "type": "Feature",
                "id": "43D",
                "properties": {
                    "SubClasses": "AcDbEntity : AcDbLwPolyline",
                    "Layer": "车位3",
                    "Color": 256,
                    "EntityHandle": "43D"
                },
                "geometry": {
                    "type": "Polygon",
                    "coordinates": [

                        [103917.593085, 43047.990248],
                        [105659.794089, 43047.990248],
                        [105659.794089, 46281.267430],
                        [103917.593085, 46281.267430],
                        [103917.593085, 43047.990248]

                    ]
                }
            },
            {
                "type": "Feature",
                "properties": null,
                "geometry": null
            }
        ]

因为这里的数据只用到坐标，数据坐标是世界地图坐标，要转成2D坐标 并转成三维数组

		let points = arr;
        var ArrayObj = new Array()
        for (let i = 0; i < points.length; i++) {
            if (points[i].geometry != undefined) {
                if (points[i].geometry.type == 'LineString') {
                    let p = points[i].geometry.coordinates
                    ArrayObj.push(p)

                    for (let j = 0; j < p.length; j++) {
                        // console.log(p[j])
                        amuXArr.push(p[j][0])
                        amuYArr.push(p[j][1])
                        console.log(p[j])

                    }
                }

            }
        }
        

将经纬度处理

1.拿到经纬度的最大值和最小值，
2.并处理数据转成三维数组

let xMax = Math.max(...amuXArr);
        let xMin = Math.min(...amuXArr);
        let yMax = Math.max(...amuYArr);
        let yMin = Math.min(...amuYArr);
        // 根据canvas宽高计算缩放级别
        let xScale = canvas.width / (xMax - xMin);
        let yScale = canvas.height / (yMax - yMin);
        let scale = xScale < yScale ? xScale : yScale;
        let xoffset =
            parseInt((canvas.width - (xMax - xMin) * scale) / 2)
        let yoffset =
            parseInt((canvas.height - (yMax - yMin) * scale) / 2)

创建canvas根据坐标画出图形

let canvas = document.getElementById('my-canvas')
        canvas.width = 1600
        canvas.height = 1200
        var amuXArr = []
        var amuYArr = []
        let cxt = canvas.getContext('2d')
for (var i = 0; i < ArrayObj.length; i++) {
            //开始设置线样式
            cxt.beginPath();
            cxt.strokeStyle = "red";
            // cxt.fillStyle = "#ccc";
            for (var j = 0; j < ArrayObj[i].length; j++) {
                //线的坐标连接
                cxt.lineTo(
                    ((ArrayObj[i][j][0] - xMin) * scale + xoffset),
                    ((yMax - ArrayObj[i][j][1]) * scale + yoffset));
            }
            cxt.closePath();
            cxt.stroke();
        }

效果图
完整代码

<canvas id="my-canvas"></canvas>

let canvas = document.getElementById('my-canvas')
        canvas.width = 1600
        canvas.height = 1200
        var amuXArr = []
        var amuYArr = []
        let cxt = canvas.getContext('2d')

        // // 取得各个经纬度坐标数据并绘制
        let points = arr;
        var ArrayObj = new Array()
        for (let i = 0; i < points.length; i++) {
            if (points[i].geometry != undefined) {
                if (points[i].geometry.type == 'LineString') {
                    let p = points[i].geometry.coordinates
                    ArrayObj.push(p)

                    for (let j = 0; j < p.length; j++) {
                        // console.log(p[j])
                        amuXArr.push(p[j][0])
                        amuYArr.push(p[j][1])
                        console.log(p[j])

                    }
                }

            }
        }
        console.log(ArrayObj, '///')
        // // 现在可以将x，y坐标转换为2D的XY坐标
        let xMax = Math.max(...amuXArr);
        let xMin = Math.min(...amuXArr);
        let yMax = Math.max(...amuYArr);
        let yMin = Math.min(...amuYArr);
        // 根据canvas宽高计算缩放级别
        let xScale = canvas.width / (xMax - xMin);
        let yScale = canvas.height / (yMax - yMin);
        let scale = xScale < yScale ? xScale : yScale;
        let xoffset =
            parseInt((canvas.width - (xMax - xMin) * scale) / 2)
        let yoffset =
            parseInt((canvas.height - (yMax - yMin) * scale) / 2)
        //循环
        for (var i = 0; i < ArrayObj.length; i++) {
            //开始设置线样式
            cxt.beginPath();
            cxt.strokeStyle = "red";
            // cxt.fillStyle = "#ccc";
            for (var j = 0; j < ArrayObj[i].length; j++) {
                //线的坐标连接
                cxt.lineTo(
                    ((ArrayObj[i][j][0] - xMin) * scale + xoffset),
                    ((yMax - ArrayObj[i][j][1]) * scale + yoffset));
            }
            cxt.closePath();
            cxt.stroke();
        }