如何在嵌入Widget的QML地图中绘制多条独立MapPolyline

你的代码里所有折线相互连接的核心原因是把所有LineString的坐标都累加到同一个路径数组中，导致所有折线被合并成了一条。另外MapItemView的使用逻辑也有误，没有为每个独立的LineString创建对应的MapPolyline实例。

修正步骤： #

1. 创建一个ListModel来存储每个LineString的独立路径和样式属性
2. 解析JSON时，为每个LineString单独生成路径数组，并存入模型
3. 通过MapItemView绑定模型，为每个模型项渲染独立的MapPolyline

修正后的完整代码： #

import QtQuick
import QtQuick.Dialogs
import QtQuick.Controls
import QtPositioning
import QtLocation
import QtCore
import QtQuick.Controls.Basic

Rectangle {
    anchors.fill: parent

    Plugin {
        id: mapPlugin
        name: "osm"
    }

    Map {
        id: map
        anchors.fill: parent
        plugin: mapPlugin
        center: QtPositioning.coordinate(59.441706425544,19.50356807068)
        zoomLevel: 5

        // 存储所有折线数据的模型
        ListModel {
            id: lineModel
        }

        WheelHandler {    // 滚轮缩放
            id: wheel
            rotationScale: 1/100
            property: "zoomLevel"
        }

        DragHandler {
            id: drag
            target: null
            onTranslationChanged: (delta) => map.pan(-delta.x, -delta.y)
        }

        // 为每个LineString渲染独立的折线
        MapItemView {
            model: lineModel
            delegate: MapPolyline {
                line.color: model.color
                width: 2
                visible: true
                path: model.path
            }
        }

        Component.onCompleted: {
            var JsonString = '{"features":[{"geometry":{"coordinates":[19.50356807068,59.441706425544],"type":"Point"},"properties":{"color":"Red","name":"Svenska Högarna"},"type":"Feature"},{"geometry":{"coordinates":[18.474967922139,57.474603476726],"type":"Point"},"properties":{"color":"Red","name":"Gotland Island"},"type":"Feature"},{"geometry":{"coordinates":[[23.958410829456,61.156042630065],[23.040209031792,61.150377804625]],"type":"LineString"},"type":"Feature"},{"geometry":{"coordinates":[[24.958410829456,60.156042630065],[25.040209031792,60.150377804625]],"type":"LineString"},"type":"Feature"},{"geometry":{"coordinates":[24.958410829456,60.156042630065],"type":"Point"},"properties":{"color":"Red","name":""},"type":"Feature"},{"geometry":{"coordinates":[25.040209031792,60.150377804625],"type":"Point"},"properties":{"color":"Green","name":""},"type":"Feature"},{"geometry":{"coordinates":[[24.9945,60.1518],[23.1585,59.1111],[21.1988,59.5741],[20.0335,59.8579],[19.4794,59.4686],[18.1034,58.4287],[17.89,57.3109],[17.789,56.5184],[18.6508,56.8946],[20.2978,57.6451],[21.3818,58.618],[21.9284,59.0893],[22.9255,59.2777],[24.2345,59.5249],[24.9983,60.1533]],"type":"LineString"},"properties":{"color":"white"},"type":"Feature"}],"type":"FeatureCollection"}'
            var data = JSON.parse(JsonString);
            var list = data["features"];
            
            for (var i in list) {
                if (list[i]["geometry"]["type"] === "LineString") {
                    // 为当前LineString创建独立的路径数组
                    var linePath = [];
                    for(var j in list[i]["geometry"]["coordinates"]) {
                        linePath.push(QtPositioning.coordinate(
                            list[i]["geometry"]["coordinates"][j][1],
                            list[i]["geometry"]["coordinates"][j][0]
                        ));
                    }
                    // 将当前折线数据添加到模型
                    lineModel.append({
                        "path": linePath,
                        "color": list[i].properties?.color || "blue"
                    });
                }
            }
        }
    }
}

关键修改说明： #

• 新增lineModel用于存储每个LineString的独立路径和颜色属性
• 解析JSON时，每个LineString都生成独立的linePath数组，避免坐标累加
• MapItemView通过delegate为每个模型项创建独立的MapPolyline，确保折线相互独立
• 保留了JSON中LineString的自定义颜色，没有颜色时默认使用蓝色

内容的提问来源于stack exchange，提问作者Laura Lyon