leafletjs怎么设置地图

z0106551513

leafletjs怎么设置地图

wqt0806

首先引入leaflet相关js和css
<link rel="stylesheet" href="http://cdn.***.com/leaflet-0.7.3/***.css" />
<script src="http://cdn.***.com/leaflet-0.7.3/***.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
***.ti***e***ayer('http://{s}.tile.***.org/{z}/{x}/{y}.png').addTo(map);

// add a marker in the given location, attach some popup content to it and open the popup
***.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 = ***.createelement("div");
    canvas.***.width = "100%";
    canvas.***.height = "100%";

    ***.appendchild(canvas);

    ***.dosuperConstructor(this, MapGraph, [canvas]);
    ***.enablewheelzoom = false;
    ***.enabledoubleclicktooverview = false;
    ***.originatcenter = false;
    ***.setmap(map);
    ...
}

关联地图
下面实现拓扑图与地图的绑定，在#setMap(map)函数中，监听了地图的zoomstart和zoomend事件，根据经纬度动态的调整图元的屏幕位置，同样在节点被拖动后，也需要设置新的经纬度***.prototype = {
    map: null,
    mapShowing: true,
    enableInertia: false,
    createNodeByLonLat: function (name, lon, lat) {
        var l = ***.tolonlat(lon, lat);
        var p = ***.getpixelfromlonlat(l);
        var node = ***.createnode(name, p.x, p.y);
        ***.lonlat = l;
        return node;
    },
    toLonLat: function (lon, lat) {
        return new ***.***at***ng(lat, lon);
    },
    getPixelFromLonLat: function (lonLat) {
        return ***.map.latLngToContainerPoint(lonLat, ***.map._zoom);
    },
    getLonLatFromPixel: function (x, y) {
        return this.***.containerpointtolatlng([x, y]);
    },
    setMap: function (map) {
        ***.map = map;

        this.***.on("zoomstart", ***.hidegraph, this);
        this.***.on("zoomend", ***.updatenodes, this);

        this.***.ondblclick = createEventFunction(this, function (evt) {
            if (***.getelementbymouseevent(evt)) {
                ***.stopevent(evt);
            }
        });
        this.***.addlistener(function (evt) {
            if (***.kind == q.***.element_MOVE_END) {
                var datas = ***.datas;
                ***.foreach(datas, function (data) {
                    var pixel = ***.tocanvas(***.location.x, ***.location.y);
                    ***.lonlat = ***.getlonlatfrompixel(pixel.x, pixel.y);
                }, this);
            }
        }, this)
    },
    hideGraph: function(){
        this.***.visibility = "hidden";
    },
    showGraph: function(){
        this.***.visibility = "";
    },
    translate: function (tx, ty) {
        ***.dosuper(this, MapGraph, "translate", arguments);
        this.***.panby([-tx, -ty], {animate: false});
    },
    resetVisibility: function () {
        ***.foreach(function (e) {
            if (***.invalidat***visibility) {
                ***.invalidat***visibility(true);
            }
        });
    },
    updateNodes: function () {
        ***.translateto(0, 0, 1, true);
        ***.resetvisibility();
        ***.foreach(function (d) {
            if (d instanceof ***.node) {
                var l = ***.lonlat;
                var p = ***.getpixelfromlonlat(l);
                ***.location = p;
            }
        }, this);
        ***.showgraph();
    }
}

***.extend(MapGraph, ***.graph);
此外还可以通过可见过滤器实现，不同比例尺显示不同的节点