12. Design of vector layers in WebGIS

12.1. Preface

With the knowledge we’ve learned in the previous chapters about vector queries, the transformation before screen and geographic coordinates, and the design of features, we’ve finally been able to design vector layers.

When we create a ClassFeature in Catalog, we can choose to create point layers or line layers or polygon layers, and so on. A point layer, in which features can only be a point, as the name suggests, several other layers. In WebGIS, then, we can also design our vector layers according to this design idea in ArcGIS,although this method is definitely feasible, in actual business requirements, if according to such dot layer, etc. to strictly control, the flexibility and simplicity of the code will be greatly reduced. So how do we design our vector layer to achieve the best results? Let’s talk about it together.

12.2. Put out a few needs

(1).There is a section of road that needs to be shown on the map, and each node on the road needs to be clearly marked.

(2).You need to show the location of a fire squadron and show it as a buffer from the service radius.

(3).You want to show the location of the person of interest on the map, and when you move the mouse over the person icon, you can have a bubble pop-up to show the person’s current information.

12.3. Analyzing requirements

If we design the ArcGIS midpoint, line, polygon layer, the first requirement, we need to design two layers, a line layer, a polygon layer. For the second requirement, we also need to make a point layer and a polygon layer.

Now, can we change our minds to think about it, can we fuse point layers, line layers, and polygon layers into one business layer? For example, the first requirement is that as long as the line and point features are added to the same Canvas, a vector layer separated by business is generated.

Similarly, the second solution to the problem is to integrate point and polygon features (circular features). The third solution is simpler, just add points (icons) features. In the design of the features, we have explained that each feature is inherited UIComponent, can listen to mouse events, so the need for pop-up bubbles can naturally be implemented.

12.4. Design diagram

../_images/img_14.jpeg

12.5. Design flow chart

../_images/img_27.png

12.6. Detailed by a case

Here, we explain the problem with the first road in the previously proposed requirements.

As a first step, the client lists the request parameters, such as the ID number of the road that needs to be displayed, and then sends the request to the vector service. If it is the shortest path analysis, you can use the start ingest and end points as parameters to send requests to the NA service in the background.

The second step is to resolve the data returned by the server. Geometry and Attribute of the various elements in the data. Geometry and Attribute are then instantiated according to the corresponding feature in Geometry, which is used as attributes of the feature. In this requirement, you first need to instantiate the same number of line features based on the returned line feature data. At the same time, point features are instantiated according to the endpoint information in Geometry of line features.

In the third step, all instantiated point and line features are added to the road layer (Canvas) and the painting function for each feature is triggered. Because each feature has an internal implementation of redrawing and coordinate conversion, we don’t need to do the same thing in Canvas.

However, here I need to explain a problem, in our homemade layer, we still need to listen to map events to perform some necessary operations. This operation is related to map panning. Otherwise, when the map is dragged, the features on the layer are redrawed, and an offset problem occurs. As mentioned in the previous section, I will spend a special section on the issue of feature offsets in the map.

12.7. Summary

So far, in this series, I’ve finished designing and involving raster and vector layers. For the display of maps and some basic business customization features to implement, I think you should all have some ideas. In the next series, I’d like to discuss with you the design implementation of the basic functions in the map toolbar, such as zooming in, zooming out, panning, full graph, I query, point of interest query, positioning, etc.