HTML5 network topology diagram Integration openlayers implement GIS map application

In front of the "Baidu map, Echarts integration HT for Web network topology diagram application" We have introduced the Baidu map and the HT for Web integration, we are today to talk about the integration of Openlayers and HT for Web.

The HT for Web, as the logical topology graphics component itself, does not have GIS capabilities, but can be fused with a variety of GIS engines, namely its client components, to achieve seamless integration of logical and physical topologies, and this chapter will specifically describe the HT for Web and development free Openlayers map combined with the application of key technology points, the introduction of the principle of combining, in fact, can also be extended to ArcGIS, Baidu Map and GoogleMap and many other GIS map engine fusion solution.

The above screenshot for the example described in the final running effect, the next step to achieve, the preferred display map information needs to have the city latitude and longitude data, search the next thanks to the data provided by this blog. With such a large amount of data, I use the Getrawtext function described in "the Way (iv) of HT graphics component Design", with the data remaining the problem of presentation, and we need to overlay the HT Graphview component with the Openlayers map component. That is openlayers tile map picture below, Graphview component is above, because Graphview is transparent by default, so non-entity part user can penetrate see map content. Finding the right component insertion location is a headache, ArcGIS, Baidu maps including GoogleMap almost every different GIS component needs to be tried to find the right insertion location, and the integration of other GIS engine components will be introduced later in the chapter. The openlayers we focus on in this article is Map.viewPortDiv.appendChild (Graphview.getview ()).

After the HT and openlayers components are stacked together, the rest is the problem of the placement of elements in the topology and the latitude and longitude, which is stored in the general network topology diagram in HT. Node position is a logical location, and latitude and longitude does not have any relationship, so in the GIS application we need to use the latitude and longitude information of the entity to convert the position screen logical coordinate information, if you know the projection algorithm can also provide their own function processing, But all GIS components provide similar API functions for invocation, and of course this part is not standardized, and different GIS components need to call the API to differ, but the rationale is consistent, for openlayers we pass Map.getpixelfromlonlat ( Data.lonlat) can convert latitude and longitude information into screen pixel logical coordinates, which is HT. node needs the position coordinate information.

The careful classmate will think that the conversion is bidirectional, it is possible that the user needs to drag the element node to change its latitude and longitude information, this time we need another direction function, that is, according to the screen logical coordinates converted to the current coordinates corresponding latitude and longitude, In Openlayers we pass Map.getlonlatfrompixel (new Openlayers.pixel (x, y));

Show done after the rest is the problem of interaction, HT own set of interactive system, Openlayers also need map roaming and scaling interaction, how to combine them? If you can keep the function of both the best, the answer is certain, we only need to add MouseDown or Touchstart event monitoring, if Graphview.getdataat (e) Selected elements we pass the e.stoppropagation (); Stop the propagation of the event so that the map does not respond, when HT takes over the interaction, and if no entities are selected, the map takes over the interaction of the maps operation.

The above interaction design seems to be perfect, and the results run to find a few places that have been frustrating me for a long time to find a solution to the pit:

1. Set Map.events.fallThrough = true; otherwise the map will not pass events to the Graphview component of HT
2. Graphview.getview (). Style.zindex = 999; Need to specify a certain zindex otherwise it will be obscured
3. Graphview.getview (). ClassName = ' olscrollable '; Otherwise the wheel does not respond to map scaling
4. Set HT. default.basezindex:1000 otherwise the tooltip will be obscured

In order to make this example user experience more friendly, I also toss some technical points for reference:

1. Open source free http://llllll.li/randomColor/random color class library, the library has a lot of very good color get function, I just simply display a different color for each province
2. IsVisible, isnotevisible, and islabelvisible are overloaded to show more detail only when scaled to a certain level, otherwise all city information is displayed at full visibility when zoomed out, and how much can improve display performance

The following is the final effect of the capture, video and source code: http://v.youku.com/v_show/id_XODM5Njk0NTU2.html

function init () {Graphview = new Ht.graph.GraphView ();                     var view = Graphview.getview ();    Map = new Openlayers.map ("map"); var ol_wms = new OpenLayers.Layer.WMS ("Openlayers wms", "Http://vmap0.tiles.osgeo.org/wms/vmap0", {L    Ayers: "Basic"});    Map.addlayers ([ol_wms]);    Map.addcontrol (New OpenLayers.Control.LayerSwitcher ());                    Map.zoomtomaxextent ();    Map.events.fallThrough = true;    Map.zoomtoproxy = Map.zoomto;        Map.zoomto = function (zoom,xy) {view.style.opacity = 0;            Map.zoomtoproxy (zoom, XY);    Console.log (zoom);                    };    Map.events.register ("MoveStart", this, function () {});    Map.events.register ("Move", this, function () {});        Map.events.register ("MoveEnd", this, function () {view.style.opacity = 1;    Reset ();                    });    Graphview.getview (). ClassName = ' olscrollable '; Graphview.setscrollbarvisiBLE (false);    Graphview.setautoscrollzone (-1);    Graphview.handlescroll = function () {};         Graphview.handlepinch = function () {}; GRAPHVIEW.MI (function (e) {if (E.kind = = = ' Endmove ') {Graphview.sm (). each (function (data) {I F (Data instanceof ht.                       Node) {var position = Data.getposition (), x = position.x + graphview.tx (),                     y = position.y + graphview.ty ();                                                                                     Data.lonlat = Map.getlonlatfrompixel (new Openlayers.pixel (x, y));        }                                        });    }    });    Graphview.enabletooltip ();        Graphview.gettooltip = function (event) {var data = This.getdataat (event);        if (data) {return ' city: ' + data.s (' note ') + ' Longitude: ' + Data.lonLat.lon + ' dimension: ' + Data.lonLat.lat;    } return null;    }; graphview.isvisible = function (data) {return MAP.zoom > 1 | |    this.isselected (data);    };    graphview.isnotevisible = function (data) {return map.zoom > 6 | | this.isselected (DATA);     };    Graphview.getlabel = function (data) {return ' Longitude: ' + Data.lonLat.lon + ' \ n dimension: ' + Data.lonLat.lat;    };    graphview.islabelvisible = function (data) {return map.zoom > 7 | | this.isselected (DATA);                     }; View.addeventlistener ("Ontouchend" in document?        ' Touchstart ': ' MouseDown ', function (e) {var data = Graphview.getdataat (e);        if (data | | e.metakey | | e.ctrlkey) {e.stoppropagation ();     }}, False);    view.style.position = ' absolute ';    View.style.top = ' 0 ';    View.style.left = ' 0 ';    View.style.right = ' 0 ';                    View.style.bottom = ' 0 ';    View.style.zIndex = 999;    Map.viewPortDiv.appendChild (view);    var color = Randomcolor ();    lines = China.split (' \ n '); for (var i=0; i<lines.length; i++) {line = lines[i].trIm ();                            if (Line.indexof (' "') = = = 0) {//province = line.substring (1, line.length-1);        color = Randomcolor ();            }else{var ss = Line.split ("); if (ss.length = = = 3) {CreateNode (Parsefloat (SS[1].SUBSTR (3)), Parsefloat (SS[2].SUBSTR (3)), SS[0].SUBSTR (3),                                                                  color);    }}}}function reset () {graphview.tx (0);    Graphview.ty (0); GRAPHVIEW.DM (). each (function (data) {if (Data.lonlat) {dat                                   A.setposition (Map.getpixelfromlonlat (Data.lonlat));    }    }); Graphview.validate ();} function CreateNode (lon, LAT, name, color) {var node = new ht.    Node (); NODE.S ({' Shape ': ' Circle ', ' shape.background ': color, ' note ': Name, ' Labe    L.background ': ' Rgba (255, 255, 0, 0.5) ',                        ' Select.type ': ' Circle '});    Node.setsize (10, 10);    var Lonlat = new Openlayers.lonlat (lon, LAT);    Lonlat.transform (' epsg:4326 ', Map.getprojectionobject ());    Node.setposition (Map.getpixelfromlonlat (Lonlat));    Node.lonlat = Lonlat;    GRAPHVIEW.DM (). Add (node); return node;}

HTML5 network topology diagram Integration openlayers implement GIS map application