在地图上添加POI（二）

最新推荐文章于 2022-08-27 22:09:41 发布

转载最新推荐文章于 2022-08-27 22:09:41 发布 · 173 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/btian/p/6143006.html

本文介绍如何使用Tangram地图库在一个Marker中同时显示图标和文字，通过嵌套样式实现，并提供了具体的代码实现。

在上一篇中实现一个icon + label的Marker需要使用两个Tangram的Marker，今天分析了Tangram的源码后，发现Tangram时支持单一Marker同时显示的，这需要使用嵌套的Style。

上一篇使用的Style是两个：

 style: points,
 color: white,
 size: [32px, 32px],
 order: 100,
 collide: false

和

text:
    text_source: function(){ return "label"},
    priority: 100

但其实points style支持text属性，两个合并后变成：

style: points,
color: white,
size: [32px, 32px],
order: 100,
collide: false,
text:
    text_source: 'function(){ return \"Title\"}',
    priority: 100

代码如下

void MarkerImpl::createMarker(const std::string &iconURI, const std::string &title)
{
    QImage img(QString(iconURI.c_str()));
    int width = img.width();
    int height = img.height();
    auto argb = new unsigned int [width * height];
    for(int h=height-1; h>-1; --h){
        for(int w=0; w<width; ++w){
            int pix = img.pixelColor(w, h).rgba();
            int pb = (pix >> 16) & 0xff;
            int pr = (pix << 16) & 0x00ff0000;
            int pix1 = (pix & 0xff00ff00) | pr | pb;
            argb[w + h*width] = pix1;
        }
    }
    m_map->markerSetBitmap(m_ID, width, height, argb);
    delete[] argb;

    static const char* MARKER_STYLE_TEMPLATE =
            "{ style: 'points',"
            " color: 'white',"
            " size: [%1px, %2px],"
            " order: 100,"
            " collide: false,"
            " text: {"
                " text_source: 'function(){ return \"%3\"}',"
                " priority: 100 } }";
    QString iconStyle = QString(MARKER_STYLE_TEMPLATE).arg(width).arg(height).arg(title.c_str());
    m_map->markerSetStyling(m_ID, iconStyle.toStdString().c_str());
}