【QT】QT的学习：qt中使用mapbox添加自定义样式（例如讲一个图片作为一个图层）

环境：QT5.10

背景：不适用mapbox在线的样式，而是自定义瓦片或者样式

（1）一般情况下，我们使用qt加载mapbox的时候，会发现我们会自动的调用mapbox在线的样式例如：卫星、道路、dark。

举例1：

 Map{
    anchors.fill: parent
    Plugin {
        id: mapPlugin
        name: "mapboxgl"
      }
    center: QtPositioning.coordinate(59.91, 10.75)
    zoomLevel: 14
    }

上面是一个简单的mapboxgl的地图实例。没有加任何的插件参数，此时默认的地图样式为light-v9：如图：

举例二：对上述例子进行稍加修改，显示mapbox自带的卫星样式以及dark样式：如下所示 

 Map{
    anchors.fill: parent
    Plugin {
        id: mapPlugin
        name: "mapboxgl"
        PluginParameter {
            name: "mapboxgl.mapping.additional_style_urls"
            value: "mapbox://styles/mapbox/dark-v9,mapbox://styles/mapbox/satellite-v9"
        } 
      }
    center: QtPositioning.coordinate(59.91, 10.75)
    zoomLevel: 14
    }

采用了两种样式：mapbox://styles/mapbox/dark-v9以及卫星样式：mapbox://styles/mapbox/satellite-v9，其中样式一为”dark-v9“，样式二是”satellite-v9“。可以通过设置：

mainMap.activeMapType = mainMap.supportedMapTypes[0];//设置当前的地图的样式是dark
mainMap.activeMapType = mainMap.supportedMapTypes[1];//卫星地图

  

（2）如果想要添加一个自定义的样式（本地化），需要定义一个style.json文件详见：官网：https://www.mapbox.com/mapbox-gl-js/api

举例：test.json文件

{
    "version": 8,
    "name": "testimage",
    "sprite": "mapbox://sprites/tmpsantos/35fb3795",
    "glyphs": "mapbox://fonts/tmpsantos/{fontstack}/{range}.pbf",
    "sources": {
        "test": {
            "type": "image",
            "url": "http://XXXXXXXXXXXXX.png",
            "coordinates": [
                [11.286407114808, 9.863747068868],
                [11.299161991398, 9.863747068868],
                [11.299161991398, 9.854218133828],
                [11.286407114808, 9.854218133828]
            ]
        }
    },
    "layers": [
        {
            "id": "background",
            "type": "background",
            "paint": {
                "background-color": "rgb(4,7,14)"
            },
            "interactive": true
        },
        {
            "id": "testlay",
            "source": "test",
            "type": "raster",
            "paint": { "raster-opacity": 0.6 }
        }
    ],
    "draft": true,
    "id": "cjb1kxpcabzjb2rr0mltlvp0i",
    "modified": "2017-12-11T02:29:15.055Z",
    "owner": "scfjp",
    "visibility": "private",
    "created": "2017-12-11T02:29:15.055Z"
}

在qt的插件参数中加入：

 Map{
    anchors.fill: parent
    Plugin {
        id: mapPlugin
        name: "mapboxgl"
        PluginParameter {
            name: "mapboxgl.mapping.additional_style_urls"
            value: "qrc:/test.json,mapbox://styles/mapbox/dark-v9,mapbox://styles/mapbox/satellite-v9"
        } 
      }
    center: QtPositioning.coordinate(59.91, 10.75)
    zoomLevel: 14
    }

会发现样式一变为自己定义的json文件，样式二跟三变为dark跟卫星