使用Leaflet建立地圖拓撲圖

以前咱們採用過 Openlayers+Qunee的方案，實現地圖拓撲圖，鑑於Openlayers是一個古老項目，略顯臃腫，對於現代的前端地圖應用，顯得笨重，在客戶的介紹下，咱們找到了leaflet - 基於HTML5的輕量地圖客戶端方案，結合Qunee使用，以及第三方插件，實現更加輕快的地圖拓撲圖應用 Leaflet介紹 leaflet是一個開源軟件，做者在烏克蘭，在移動設備上的有良好的體驗，比較新和現代的地圖客戶端，類庫壓縮後只有33k，很是小巧，這一點讓qunee都相形見絀，先看一個leaflet的入門示例

官方示例

首先引入leaflet相關js和css

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

而後構建地圖，並添加openStreetMap

// create a map in the "map" div, set the view to a given place and zoom
var map = L.map('map').setView([51.505, -0.09], 13);

// add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);

// add a marker in the given location, attach some popup content to it and open the popup
L.marker([51.5, -0.09]).addTo(map)
    .bindPopup('A pretty CSS3 popup. 
 Easily customizable.')
    .openPopup();

運行效果以下： 

結合Qunee拓撲圖

Leaflet地圖上能夠添加點線面基本圖形，若是須要展現更復雜的圖形或者連接關係，顯得力不足，能夠結合Qunee組件使用，下面咱們讓地圖和拓撲圖疊加起來，在地圖上顯示拓撲元素，並整合二者的交互

圖層疊加

在地圖的DIV容器中添加一個孩子div，做爲拓撲圖的畫布，並設置相應的css，而後調用超類的構造函數，取消默認的雙擊和滾輪操做，已被後面地圖與拓撲圖的交互同步

var MapGraph = function (map) {
    var container = map._container;
    var canvas = document.createElement("div");
    canvas.style.width = "100%";
    canvas.style.height = "100%";

    container.appendChild(canvas);

    Q.doSuperConstructor(this, MapGraph, [canvas]);
    this.enableWheelZoom = false;
    this.enableDoubleClickToOverview = false;
    this.originAtCenter = false;
    this.setMap(map);
    ...
}

關聯地圖

下面實現拓撲圖與地圖的綁定，在#setMap(map)函數中，監聽了地圖的zoomstart和zoomend事件，根據經緯度動態的調整圖元的屏幕位置，一樣在節點被拖動後，也須要設置新的經緯度

MapGraph.prototype = {
    map: null,
    mapShowing: true,
    enableInertia: false,
    createNodeByLonLat: function (name, lon, lat) {
        var l = this.toLonLat(lon, lat);
        var p = this.getPixelFromLonLat(l);
        var node = graph.createNode(name, p.x, p.y);
        node.lonLat = l;
        return node;
    },
    toLonLat: function (lon, lat) {
        return new L.latLng(lat, lon);
    },
    getPixelFromLonLat: function (lonLat) {
        return this.map.latLngToContainerPoint(lonLat, this.map._zoom);
    },
    getLonLatFromPixel: function (x, y) {
        return this.map.containerPointToLatLng([x, y]);
    },
    setMap: function (map) {
        this.map = map;

        this.map.on("zoomstart", this.hideGraph, this);
        this.map.on("zoomend", this.updateNodes, this);

        this.html.ondblclick = createEventFunction(this, function (evt) {
            if (this.getElementByMouseEvent(evt)) {
                Q.stopEvent(evt);
            }
        });
        this.interactionDispatcher.addListener(function (evt) {
            if (evt.kind == Q.InteractionEvent.ELEMENT_MOVE_END) {
                var datas = evt.datas;
                Q.forEach(datas, function (data) {
                    var pixel = this.toCanvas(data.location.x, data.location.y);
                    data.lonLat = this.getLonLatFromPixel(pixel.x, pixel.y);
                }, this);
            }
        }, this)
    },
    hideGraph: function(){
        this.html.style.visibility = "hidden";
    },
    showGraph: function(){
        this.html.style.visibility = "";
    },
    translate: function (tx, ty) {
        Q.doSuper(this, MapGraph, "translate", arguments);
        this.map.panBy([-tx, -ty], {animate: false});
    },
    resetVisibility: function () {
        this.forEach(function (e) {
            if (e.invalidateVisibility) {
                e.invalidateVisibility(true);
            }
        });
    },
    updateNodes: function () {
        this.translateTo(0, 0, 1, true);
        this.resetVisibility();
        this.forEach(function (d) {
            if (d instanceof Q.Node) {
                var l = d.lonLat;
                var p = this.getPixelFromLonLat(l);
                d.location = p;
            }
        }, this);
        this.showGraph();
    }
}

Q.extend(MapGraph, Q.Graph);

此外還能夠經過可見過濾器實現，不一樣比例尺顯示不一樣的節點

運行效果

在線示例： http://demo.qunee.com/map/mapByLeafLet.html