ol3中有個ol.Overlay，使用這個類我們可以根據經緯度在地圖中新增各種html要素。

我們現在地圖中增加一個彈出框，再在彈出框中生成圖表，如下圖所示：

html中新增一個div容器:

    <div id="popup" class="ol-popup">
    <div class="pophead" style="width:100%;height: 20px;">
    <div id="popup-title" style="font:bold 15px sans-serif;align:left;position: absolute;top: 5px;left: 8px;color: #000000">測試點資訊</div>
    <a href="#" id="popup-closer" class="ol-popup-closer" style="color:#8e908c;"></a>
    </div>
    <div id="popup-content" style="padding: 10px"></div>
    </div>
 

彈出框CSS：

   /*設定彈出框樣式*/
     .ol-popup {
        position: absolute;
        background-color: #eeeeee;
        -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
        filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
        padding: 15px;
        border-radius: 10px;
        border: 1px solid #cccccc;
        bottom: 12px;
        left: -50px;
        min-width: 280px;
    }
    .ol-popup:after, .ol-popup:before {
        top: 100%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }
    .ol-popup:after {
        border-top-color: #eeeeee;
        border-width: 10px;
        left: 48px;
        margin-left: -10px;
    }
    .ol-popup:before {
        border-top-color: #cccccc;
        border-width: 11px;
        left: 48px;
        margin-left: -11px;
    }
    .ol-popup-closer {
        text-decoration: none;
        position: absolute;
        top: 2px;
        right: 8px;
    }
    .ol-popup-closer:after {
        content: "✖";
    }
 

  var pop_container = document.getElementById('popup');
  var pop_content = document.getElementById('popup-content');
  var pop_closer = document.getElementById('popup-closer');
  var popTitle = document.getElementById('popup-title');
  var overlay = new ol.Overlay({
        element: pop_container,
        autoPan: true,
        autoPanAnimation: {
            duration: 250
        }
    });
    pop_closer.onclick = function () {
        overlay.setPosition(undefined);
        pop_closer.blur();
        return false;
    };
    map.addOverlay(overlay);
 

此時，彈出框已初始化完成，若要彈出內容，則需設定彈出框標題（popTitle.innerHTML)、彈出框內容(pop_content.innerHTML)、彈出框經緯度(overlay.setPosition([經度，緯度]))；若要不顯示彈出框則只需設定overlay.setPosition(undefined)。 

接下來我們要在彈出框中增加一個圖表，這裡圖表我用的是百度echarts。

1.在彈出框中生成放置圖表的容器

我們先在彈出框的內容中，增加一個id為chartcontainer的div(或td，都可以)，如：

              str += "<tr>"
                  + "<td width='60px' align='right'>地  址：</td>"
                  + "<td width='120px' align='left'><font color='#ff0000'>" + selectedFeatures.getArray(1)[0].get('address') + "</font></td>"
                  + "<td width='150px' height='180px' id='<strong>chartcontainer</strong>' rowspan='4'></td>"
                  + "</tr>"
                  + "<tr>"
                  + "<td width='60px' align='right'>上行裝置名稱：</td>"
                  + "<td width='120px' align='left'><font color='#ff0000'>" + selectedFeatures.getArray(1)[0].get('UpgoingName') + "</font></td>"
                  + "</tr>"
                  + "<tr>"
                  + "<td width='60px' align='right'>安裝地址：</td>"
                  + "<td width='120px' align='left'><font color='#ff0000'>" + selectedFeatures.getArray(1)[0].get('InstallAddress') + "</font></td>"
                  + "</tr>"
                  + "<tr>"
                  + "<td width='60px' align='right'>投運日期：</td>"
                  + "<td width='120px' align='left'><font color='#ff0000'>" + selectedFeatures.getArray(1)[0].get('WorkingDate') + "</font></td>"
                  + "</tr>"
                  + "</tbody></table></div>";
            pop_content.innerHTML = str;

var data = new Array(
                  "",
                  "{a} <br/>{c}{b}",
                  new Array(['測試', 0, 150, 6, 0, '{value}', 120, ''])
            );
            var option = ECharts.ChartOption.createGaugeChart(data);
            var container = $("#dianBiAo");
            var opt = ECharts.ChartConfig(container, option);
            ECharts.Charts.RenderChart(opt, "<span style="font-size: 13.92px; line-height: 20.88px; font-family: Verdana, Arial, Helvetica, sans-serif;"><strong>chartcontainer</strong></span>");

 popTitle.innerHTML = selectedFeatures.getArray(1)[0].get('sbmc');
 overlay.setPosition(coordinate);

末尾，我覺得這篇文也不錯，分享給大家。

http://www.cnblogs.com/shitao/p/3376495.html