10. OpenLayers 3 Based Routing Interface — Workshop – FOSS4G routing with pgRouting

The goal of this chapter is to create a simple web-based user interface to pgRouting based on OpenLayers 3. The user will be able to choose start and destination locations, and get the route from the start point to the destination point. The start and destination points are created by the user, with simple clicks on the map. The start and destination coordinates are then sent to the WMS server (GeoServer), as parameters to a WMS GetMap request. The resulting image is added as an image layer to the map. OpenLayers 3 is a complete rewrite of OpenLayers 2. It uses modern JavaScript, and HTML5 technologies such as Canvas and WebGL for the rendering of images/tiles and vectors. Creating an OpenLayers 3 map in a web page involves creating a map object, which is an instance of the ol.Map class. Then, data layers and controls can be added to that map object. The center and resolution (zoom level) of the map are controlled through the view object. Unless other mapping libraries, the view is separated from the map, one advantage is to allow multiple maps to share the same view. See this example. OpenLayers 3 features three renderers: the Canvas renderer, the WebGL renderer, and the DOM renderer. Currently, the most capable renderer is Canvas. In particular the Canvas renderer supports vector layers, while the other two don’t. Canvas is the default renderer, and the renderer used in this workshop. Let’s create our first OpenLayers 3 map: open a text editor and copy this code into a file named ol3.html. You can save this file on the Desktop and open it with a web browser. This web page includes a simple map with an OpenStreetMap layer and center to a predifined location. There is no routing-related code for now, just a simple map with stantard navigation tools. This code creates an ol.Map instance whose target is the map DOM element in the HTML page. The map is configured with a tile layer, itself configured with an OpenStreetMap source. The map is also configured with a view instance (of the ol.View class) with predefined values for the center and the zoom level. You can change the center and zoom level in the code and observe the effect of your changes by reloading the page in the browser. You can also use the browser’s JavaScript console to make live changes to the view. For example: The params object holds the WMS GET parameters that will be sent to GeoServer. Here we set the values that will never change: the layer name and the output format. We now want to allow the user to add the start and destination positions by clicking on the map. Add the following code for that: That code creates two vector features, one for the “start” position and one for the “destination” position. These features are empty for now – they do not include a geometry. The code also creates a vector layer, with the “start” and “destination” features added to it. It also adds the vector layer to the map, using the map’s addLayer method. This code registers a listener function for the map click event. This means that OpenLayers 3 will call that function each time a click is detected on the map. The event object passed to the listener function includes a coordinate property that indicates the geographical location of the click. That coordinate is used to create a point geometry for the “start” and “destination” features. Once we have the start and destination points (after two clicks), the two pairs of coordinates are transformed from the map projection (EPSG:3857) into the server projection (EPSG:4326) using the transform function. The viewparams property is then set on WMS GET parameters object. The value of this property has a special meaning: GeoServer will substitute the value before executing the SQL query for the layer. For example, if we have: Finally, a new OpenLayers WMS layer is created and added to the map, the param object is passed to it. This creates a button to we will use to allow the user to clear the routing points and start a new routing query. When the button is clicked, this function passed to addEventListener is executed. That function resets the “start” and “destination” features and remove the routing result layer from the map. Source.


Яндекс.Метрика Рейтинг@Mail.ru Free Web Counter
page counter
Last Modified: April 18, 2016 @ 11:06 am