GIS network topology application of Baidu Map and HT for web

In the "HT for Web integration openlayers implementation of GIS Map Application" chapter introduces the integration of HT for Web and Openlayers, many friends respond to the domestic use of more than Baidu map, although the integration of the principle of the integrated Baidu map with openlayers consistent, But different GIS engine client combined with code details or a lot of differences, custom map style is completely different, so I will introduce the next HT and Baidu Map integration scheme, this time we'll improve the previous example, in addition to representing the city's topological nodes, and then increase the connection between the provincial capital and cities, Realize the flow effect of network topology link.

Baidu Map has a variety of client SDK, we use the nature of the JavaScript version of the API, Baidu Map version 2.0 added a lot of new features, such as the ability to customize the map style template, in this case we deliberately set a style: ' Midnight ' dark background style. The location to insert the map is not the same as openlayers, through MapDiv.firstChild.firstChild.appendChild (view), insert, ZIndex These properties are OK no need to set.

The conversion of coordinates from latitude and longitude to planar coordinates is the Map.pointtopixel function, via Node.setposition (Map.pointtopixel (lon, LAT)), and HT can be set. Node corresponds to the plane logical coordinates, through the Map.pixeltopoint (new Bmap.pixel (x, y)) can convert the plane coordinates into latitude coordinates, we listen to the node element is dragged and the end of the endmove need to recalculate the latitude and longitude of the current position.

Map data is the first of the provincial capitals in each province, so we built a larger size with a progressive color to represent the capital city, while other cities build HT at the same time. The edge is connected to the provincial capital node, and the Ht-flow.js plug-in of HT is introduced, only Graphview.enableflow (60) is required, and a word can start the mobile connection function, and each edge connection can have a lot of flow.* The relevant flow reference controls the flow effect, and here's a simple example where we don't need to make a custom, keeping the HT default flow parameters cool enough.

In addition through Graphview.setlayers ([' Edgelayer ', ' Nodelayer ']), we set up two layers for the topology, Node.setlayer (' Nodelayer '), and Edge.setlayer (' Edgelayer ') makes the element nodes all appear on the line, from this detail you can find that previously needed in the GIS SDK extension functions can also be implemented in the Graphview of HT, the map is just as the background, the business logic code is completely in the more flexible and powerful HT model.

Other aspects of the details also by the monitoring map scaling and other operations on the topological elements of the relocation, as well as the monitoring interaction decision Graphview or map control and so on are similar to the previous article, here is no longer introduced, the following is the operation of video, capture and source code for everyone to refer to, Such a combination can be perfect Baidu map rich map data information, and HT powerful logical topology function, otherwise, relying on the Baidu Map SDK API expansion, users can only do some simple effect, such as the line flow and other effects are far less than HT such a row of code to be done easy. Http://v.youku.com/v_show/id_XODQxMDcwNjQ0.html

Var datamodel = new ht. Datamodel (); Var graphview = new ht.graph.graphview (Datamodel);               var map = null;    Function init ()  {map = new bmap.map ("map");    var point =  new bmap.point (116.404, 39.915);                            Map.addtilelayer (New bmap.trafficlayer ());                     map.centerandzoom (point, 4);                      Map.enablescrollwheelzoom ();                        map.addcontrol (New bmap.navigationcontrol ());                                 map.setmapstyle ({features: ["road ", " Building "," water "," Land "],style: ' Midnight '}); Var view = graphview.getview (); view.classname =  ' Graphview ';  var mapdiv = document.getelementbyid (' map '); MapDiv.firstChild.firstChild.appendChild (view); Map.addeventlistener (' MoveStart ',  function (e) {                        view.style.opacity = 0;}); Map.addeventlistener (' MoveEnd ',  function (e) {   view.style.opacity = 1;     resetposition ();  }); Map.addeventlistener (' DragStart ',  function (e) {&Nbsp;  view.style.opacity = 0;                 }); Map.addeventlistener (' Dragend ',  function (e) {    View.style.opacity = 1;    resetposition ();  });                                  map.addeventlistener (' Zoomstart ',  function (e) {view.style.opacity = 0;});                  Map.addeventlistener (' Zoomend ',  function (e) {view.style.opacity = 1;     Resetposition ();  });                 graphview.setlayers ([' Edgelayer ',  ' Nodelayer ']); Graphview.enableflow (60); Graphview.enabletooltip(); Graphview.gettooltip = function (event) {Var data = this.getdataat (event); if (data  instanceof ht. Node) {return  ' City: '  + data.s (' note ')  +  ' Longitude: '  + data.lonLat.lng +  ' Dimension: '  + data.lonlat.lat;} return null;}; Graphview.isvisible = function (data) {return map.getzoom ()  > 1 | |  this.isselected (data);}; Graphview.isnotevisible = function (data) {return map.getzoom ()  > 8 | |  this.isselected (data);};  graphview.getlabel = function (data) {if (data instanceof ht. Node) {return  ' Longitude: '  + data.lonLat.lng +  ' \ n dimension: '  + data.lonlat.lat;}                      };graphview.islabelvisible = function (data) {return map.getzoom ()  > 9  | |  this.isselected (data);};  grAPHVIEW.MI (function (e) {if (e.kind ===  ' Endmove ') {Graphview.sm (). Each function (data) {if (data  Instanceof ht. Node) {   var position = data.getposition (),   x =  Position.x + graphview.tx (),    y = position.y + graphview.ty ();                                  data.lonLat =  Map.pixeltopoint (New bmap.pixel (x, y)); }                             }) ;}}); Graphview.setautoscrollzone ( -1); Graphview.handlescroll = function () {};graphview.handlepinch =  function () {};var handleclick = function (e) {Var data = graphview.getdataat ( e);if (data) {e.stoppropagation ();} Else if (e.metakey | |  e.ctrlkey) {e.stoppropagation ();}}; Graphview.getview (). AddEventListener (' click ',  handleclick, false);                 graphview.getview (). AddEventListener (' DblClick ',  handleclick, false); Graphview.getview (). AddEventListener (HT. default.istouchable ?  ' Touchstart '  :  ' MouseDown ',  handleclick, false); Window.addeventlistener ("Resize",  function (e)  {graphview.invalidate ();}, false);                  var color  = randomcolor (), Province = null;lines = china.split (' \ n '); for (var i=0; i <lines.length; i++)  {line = lines[i].trim (); if (Line.indexof (' "')  === 0) {              &nBsp; color = randomcolor ();p rovince = null;} Else{var ss = line.split ('   '); if (ss.length === 3) {var node =  CreateNode (Parsefloat (SS[1].SUBSTR (3)),  parsefloat (SS[2].SUBSTR (3)), &NBSP;SS[0].SUBSTR (3),  color);  if (province) {var edge = new ht. Edge (Province, node); Edge.s ({' Edge.center ':  true, ' Edge.width ': 1,                                       ' flow ':  true}); Edge.setlayer (' Edgelayer ');d atamodel.add (edge);} ELSE{PROVINCE&NBSP;=&NBSP;NODE;NODE.S ({                                      ' shape.gradient ':  ' radial.center ', &NBSP;&Nbsp;                                    ' Border.type ':  ' circle ', ' border.width ':  1, ' border.color ':  ' Rgba (200, 200, 200,  0.5) '                                       }); Node.setsize (15, 15);}}}                 }function  createnode (Lon, lat, name, color) {var node = new ht. Node (); Node.s ({' Shape ':  ' circle ', ' shape.background ':  color, ' note ': name,                      ' Label.background ':  ‘ RGBA (255, 255, 0, 0.5) ',                      ' select.type ':  ' Circle '}); Node.setlayer (' Nodelayer ' ); Node.setsize (10, 10); Var lonlat = new bmap.point (Lon, lat);  Node.setposition (Map.pointtopixel (Lonlat)); node.lonlat = lonlat;graphview.dm (). Add (node); return  node;}             function resetposition (e) { GRAPHVIEW.TX (0); graphview.ty (0);d Atamodel.each (function (data) {if (data instanceof ht. Node) {var lonlat = data.lonlat,position = map.pointtopixel (lonLat);    Data.setposition (POSITION.X,POSITION.Y);                            }});             } 

GIS network topology application of Baidu Map and HT for web