We make a map of cable routes "on the knee"
Hi, Habr!
Working in the telecom-service structure, I encounter daily data such as the fiber distribution scheme in an optical cable. This is a document (usually Visio), where a cable is schematically drawn and its splicing on the ODF and in the couplings . It looks like this:
In our organization, "historically formed" the division of cables into regions, therefore, on the common network drive there is a conditional folder "Schemes", and in it there is a folder by regions. There are a lot of cables, there is a division by types. Each time, the search for a route to any node was carried out by sequential opening of the cable diagrams from the beginning of the “switching on” to this node. If the track is short and within the district, there are no problems, but when it includes several, it becomes a tedious task.
')
Due to the fact that once I became interested in such a project as OpenStreetMap, it was decided to draw a diagram of the passage of cables over the cartographic base and teach this scheme to be "interactive."
So, the task:
For implementation we use:
Attention! The article describes an approximate procedure for obtaining the simplest card.
Download / install QGIS, deliver the QSpatiaLite plugin.
Create a database, agree to convert
We will store data in different tables, because 1 table = 1 layer in QGIS, and the layers should be only of identical types (Point, line, polygon).
Create 2 tables and load them into QGIS:
We now have vector geodata in the database, they can be edited in QGIS and output anywhere.
To display the data we will use the Leaflet library (a review on Habré - one , two ).
To output an array of points and lines to a Leaflet map, you need geojson, which means we’ll take PHP in hand.
We need a great geoPHP project, as well as the PHP SpatiaLite add-on - libspatialite . The first will receive data from sqlite and convert to geojson, and the add-on will convert the coordinates to a readable format.
We drop the file on the server, put myDB.sqlite next to it, in which 2 layers are drawn.
In the same folder we put the library geoPHP.
In php.ini we set the path to the sqlite3 extensions, allow dynamic loading and throw the add-on in the specified folder:
Now when you open the layer.php file? Layer = point, geojson will be displayed with dots from the point layer.
It is time to display the data on the map.
It remains to convert the schemes from VSD to PNG and put them in the line folder next to the map files.
Working in the telecom-service structure, I encounter daily data such as the fiber distribution scheme in an optical cable. This is a document (usually Visio), where a cable is schematically drawn and its splicing on the ODF and in the couplings . It looks like this:
In our organization, "historically formed" the division of cables into regions, therefore, on the common network drive there is a conditional folder "Schemes", and in it there is a folder by regions. There are a lot of cables, there is a division by types. Each time, the search for a route to any node was carried out by sequential opening of the cable diagrams from the beginning of the “switching on” to this node. If the track is short and within the district, there are no problems, but when it includes several, it becomes a tedious task.
')
Due to the fact that once I became interested in such a project as OpenStreetMap, it was decided to draw a diagram of the passage of cables over the cartographic base and teach this scheme to be "interactive."
So, the task:
- Schematically draw the cable route
- Link road sections to visio documents
- Show the document when clicking on a part of the road
- Draw points in cities
For implementation we use:
- QGIS - geodata drawing
- Sqlite with the addition of spatialite - data storage
- Leaflet - geodata display
- Php magic
Attention! The article describes an approximate procedure for obtaining the simplest card.
Location drawing
Download / install QGIS, deliver the QSpatiaLite plugin.
Create a database, agree to convert
We will store data in different tables, because 1 table = 1 layer in QGIS, and the layers should be only of identical types (Point, line, polygon).
Create 2 tables and load them into QGIS:
- Point - for provider points
- Line - connecting lines
And then, draw what we need:
To draw on the basis of any maps you need to add a substrate of these same maps. This will help the plugin QuickMapServices
We now have vector geodata in the database, they can be edited in QGIS and output anywhere.
Display of geodata
To display the data we will use the Leaflet library (a review on Habré - one , two ).
To output an array of points and lines to a Leaflet map, you need geojson, which means we’ll take PHP in hand.
We need a great geoPHP project, as well as the PHP SpatiaLite add-on - libspatialite . The first will receive data from sqlite and convert to geojson, and the add-on will convert the coordinates to a readable format.
Make a layer.php page that converts data from a database to geojson:
<?php # geoPHP geojson include_once('geoPHP/geoPHP.inc'); function wkt_to_json($wkt) { $geom = geoPHP::load($wkt,'wkt'); return $geom->out('json'); } $layer = $_GET['layer']; # $conn = new SQLite3('myDB.sqlite'); # $conn->loadExtension('libspatialite.so'); # SQL , switch ($layer) { case 'point': $sql = 'SELECT PK_UID, ST_asText(Geometry) AS wkt FROM '.$layer.''; break; case 'line': $sql = 'SELECT PK_UID, ST_asText(Geometry) AS wkt FROM '.$layer.''; break; } # $rs = $conn->query($sql); if (!$rs) { echo 'An SQL error occured.\n'; exit; } # GeoJson $geojson = array( 'type' => 'FeatureCollection', 'features' => array() ); while ($row = $rs->fetchArray(SQLITE3_ASSOC)) { $properties = $row; # unset($properties['wkt']); unset($properties['GEOMETRY']); $feature = array( 'type' => 'Feature', 'geometry' => json_decode(wkt_to_json($row['wkt'])), 'properties' => $properties ); # array_push($geojson['features'], $feature); } header('Content-type: application/json; charset=utf8'); echo json_encode($geojson, JSON_UNESCAPED_UNICODE); $conn = NULL; ?> We drop the file on the server, put myDB.sqlite next to it, in which 2 layers are drawn.
In the same folder we put the library geoPHP.
In php.ini we set the path to the sqlite3 extensions, allow dynamic loading and throw the add-on in the specified folder:
[sqlite3] sqlite3.extension_dir = /usr/lib/ enable_dl=on; Now when you open the layer.php file? Layer = point, geojson will be displayed with dots from the point layer.
It is time to display the data on the map.
Create the simplest HTML page with the Leaflet library:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> </title> <link rel="stylesheet" href="css/leaflet.css" /> <link rel="stylesheet" href="css/MarkerCluster.css" /> <link rel="stylesheet" href="css/MarkerCluster.Default.css" /> <!--[if lte IE 8]> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.ie.css" /> <![endif]--> <!-- Custom styles for this template --> <style> html, body, #map { height: 100%; width: 100%; } </style> </head> <body> <div id="map"></div> <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="js/leaflet.js"></script> <script type="text/javascript" src="js/leaflet.markercluster-src.js"></script> <script type="text/javascript"> var map; var minimal = L.tileLayer('http://b.tiles.maps.sputnik.ru/{z}/{x}/{y}.png', { attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors', minZoom: 0, maxZoom: 18}); // Overlay Layers var line = L.geoJson(null, { style: function( feature ) { var style = {}; style.color = "#1110d6"; style.weight = 4; style.opacity = 0.9; return style; }, onEachFeature: function( feature, line ) { var id_line = feature.properties.PK_UID; line.bindPopup('<a class="link" href="line/'+id_line+'.png"" target="_blank"></a>'); } }); $.getJSON("layer.php?layer=line", function (data) { line.addData(data); }); var points = new L.MarkerClusterGroup({ spiderfyOnMaxZoom: false, showCoverageOnHover: false,disableClusteringAtZoom: 15}); var point = L.geoJson(null, { onEachFeature: function( feature, point ) { var aa = feature.geometry.coordinates; var id = feature.properties.PK_UID; var sw = new L.Marker( new L.LatLng(aa[1], aa[0])); sw.bindPopup('<a class="link" target="_blank">'+id+'</a>'); points.addLayer(sw); } }); $.getJSON("layer.php?layer=point", function (data) { point.addData(data); }); map = L.map("map", {layers: [minimal,line,points]}); map.setView([57.545995,29.930411], 6); var baseLayers = { "OSM": minimal }; var overlays = { " ": line, "": points }; var scaleControl = L.control.scale(); var layerControl = L.control.layers(baseLayers, overlays).addTo(map); </script> </body> </html> It remains to convert the schemes from VSD to PNG and put them in the line folder next to the map files.
Source: https://habr.com/ru/post/251459/
All Articles