在Canvas画布上如何绘制广东地图轮廓？

作者：图形开发学院
canvas
时间：2025-02-21 15:58:23
99次访问

运行效果

在Canvas画布上绘制地图通过beginPath方法开始绘制路径；利用moveTo、lineTo、closePath等方法定义路径的形状；然后使用strokeStyle、fillStyle 等属性为路径设置样式；最后，通过stroke或fill方法完成路径的描边或填充，从而绘制出地图。然而，地图绘制的一个关键步骤在于如何获取和处理地图数据。

地图数据格式GeoJSON

运行效果

在地图绘制示例中，我们采用的是GeoJSON地理数据格式，如图。GeoJSON是一种基于JavaScript对象表示法的地理空间信息数据交换格式，它能够对各种地理数据结构进行编码。在GeoJSON中，geometry属性用于表示对象的坐标数据，支持点、线、面、多点、多线、多面等多种几何类型。由于JSON格式的通用性，GeoJSON数据能够被多种编程语言解析和生成，方便数据交换。

运行效果

为了进一步理解GeoJSON数据文件，我们通过具体示例来展示GeoJSON数据格式的结构。GeoJSON数据通常包含"type":为"FeatureCollection"和features两个关键部分。“type”:为"FeatureCollection"是固定格式，表示该数据是一个包含多个地理特征（Feature）的集合。而features则是一个数组，其中包含了多个地理特征（Feature）对象。每个Feature对象通常包含type、geometry、properties等属性。type属性值为Feature，表示这是一个地理特征；geometry属性定义了该特征的空间位置；properties属性则是一个JSON对象，包含了与该特征相关的各种属性。

运行效果

在GeoJSON中，geometry对象的格式尤为重要。它包含type和coordinates两个属性。type属性表示几何类型，如点、线、多边形、多个多边形等；而coordinates属性则是一个坐标集合，用于描述该几何对象的具体位置。根据不同的type值，coordinates的格式也会有所不同。例如，当type为Point时，coordinates表示一个点的坐标数组；当type为LineString时，coordinates表示线段的坐标数组；当type为Polygon时，coordinates表示多边形的坐标数组，其中包含了多条线段的坐标；当type为MultiPolygon时，coordinates表示多个多边形的坐标数组。

示例效果与源代码

以下是一个简单的HTML文件示例，展示了如何在Canvas画布上绘制广东地图轮廓：

运行效果

<!DOCTYPE html>
<html lang="zh_CN">

<head>
    <title>绘制曲线和路径(绘制地图)</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="图形系统开发实战:基础篇 示例">
    <meta name="author" content="hjq">
    <meta name="keywords" content="canvas,anygraph,javascript,图形">
    <script src="../js/helper.js"></script>
</head>

<body style="margin:10px;">
    <canvas id="canvas" width="840" height="570" style="border:solid 1px #CCCCCC;"></canvas>
</body>
<script>
    // 从页面中获取画板对象
    let canvas = document.getElementById('canvas');
    // 从画板中获取“2D渲染上下文”对象
    let ctx = canvas.getContext('2d');


    // GeoJSON格式的广东省界数据
    let data = {
        "type": "FeatureCollection",
        "features": [
            {
                "type": "Feature",
                "properties": {
                    "name": "广东省"
                },
                "geometry": {
                    "type": "Polygon",
                    "coordinates": [
                        [
                            [400, 360], [412, 382], [444, 365], [458, 309], [474, 329], [518, 313], [541, 323], [548, 295], [552, 315], [589, 293],
                            [627, 308], [634, 287], [717, 274], [747, 227], [774, 218], [735, 116], [663, 83], [640, 121], [612, 95], [525, 125],
                            [506, 110], [522, 77], [551, 61], [538, 36], [491, 47], [473, 31], [446, 44], [413, 23], [383, 43], [394, 80], [373, 85],
                            [367, 67], [325, 59], [295, 112], [307, 136], [290, 152], [296, 176], [255, 212], [238, 289], [188, 318], [177, 358],
                            [157, 352], [145, 383], [118, 384], [102, 407], [111, 428], [88, 480], [111, 545], [166, 528], [139, 465], [216, 426],
                            [289, 416], [307, 395], [383, 388], [400, 360]
                        ]
                    ]
                }
            }
        ]
    };
    let featureGD = data.features[0];

    // 绘制省界多边形
    ctx.beginPath();
    for (let j = 0, len = featureGD.geometry.coordinates.length; j < len; j++) {
        let lineString = featureGD.geometry.coordinates[j];
        for (let i = 0, ii = lineString.length; i < ii; i++) {
            if (i === 0) {
                ctx.moveTo(lineString[i][0], lineString[i][1]);
            } else {
                ctx.lineTo(lineString[i][0], lineString[i][1]);
            }
        }
        ctx.closePath();
    }
    // 将坐标数据连接起来绘制出地图
    ctx.strokeStyle = "black";
    ctx.lineWidth = 2;
    ctx.stroke();
    // 填充多边形
    ctx.fillStyle = "#DCFF7C";
    ctx.fill();

    // 绘制文字
    ctx.font = "40px 黑体";
    ctx.fillStyle = "black";
    ctx.fillText("广东省", 400, 220);
</script>

</html>

尝试一下 »

上一篇：没有了

下一篇：详解地图数据格式GeoJSON