Openlayers graphics and list Interaction

The project encountered such a requirement: After the database is queried, a list of results (with geographical locations) is obtained. Each result is a quadrilateral on the map, with overlapping and overlapping quadrilateral, interaction between the Quadrilateral and the result list on the map is required. Aside from other logic functions, the interaction requirement can be expressed as follows:

1. Click the Quadrilateral on the map. The clicked (or selected) quadrilateral changes from blue to green, and the corresponding items in the result list are checked;

2. In turn, click the check box in the result list. The quadrilateral on the map corresponding to the selected result will change from blue to green. If you cancel the check, the green will be restored to blue.

(Convention: the query result quadrilateral is represented in blue, and the selected quadrilateral is represented in green)

:

Implementation ideas:

1. Each quadrilateral is an openlayers. feature. Vector object that contains a FID attribute, which is unique and can be set by the user. We can implement a one-to-one correspondence between the FID and the checkbox ID in the result list (directly set the FID to the ID value). The Code for drawing a quadrilateral is as follows:

// Lefttop, righttop, rightdown, and letdown are four two-dimensional vectors that represent the longitude and latitude coordinates of the four vertices of the Quadrilateral.
// Featureid is used to set the FID of openlayers. feature. Vector. It can be used to save the checkbox id value.
Function drawpolygon (lefttop, righttop, rightdown, letdown, featureid) {var LR = new openlayers. geometry. linearring ([New openlayers. geometry. point (lefttop [0], lefttop [1]), new openlayers. geometry. point (righttop [0], righttop [1]), new openlayers. geometry. point (rightdown [0], rightdown [1]), new openlayers. geometry. point (letdown [0], letdown [1]), new openlayers. geometry. point (lefttop [0], lefttop [1]); LR = LR. transform ("epsg: 4326", "epsg: 900913"); var polygonfeature = new openlayers. feature. vector (New openlayers. geometry. polygon (LR), {'location': 'fanghorn forest ', 'description': 'Land of the ents'}); polygonfeature. renderintent = "default"; polygonfeature. FID = featureid; vectorlayer. addfeatures ([polygonfeature]); // vectorlayer is the container layer of the Quadrilateral geometric object, which is described ...}

 

2. draw all the Quadrilateral vector objects in an openlayers. layer. in the vector parent container layer object (set as vectorlayer), specify a set of styles for vectorlayer to uniformly set the color of the selected and unselected values in the Quadrilateral. The style code is as follows:

VaR polygonlayerstyle = new openlayers. stylemap ({'default': {fillcolor: "# 0000ff", // blue indicates the default state: fillopacity: 0.1, strokecolor: "# 0000ff", strokeopacity: 1, strokewidth: 1}, 'select': {fillcolor: "#00ff00", // Green indicates the selected state: fillopacity: 0.1, strokecolor: "#00ff00", strokeopacity: 1, strokewidth: 1 }});

3. Use openlayers. control. selectfeature component, bind the vectorlayer layer, so that each quadrilateral vector in the vectorlayer can be selected, and add the Action event to be triggered when the feature is selected to the vectorlayer layer. The Code is as follows:

VaR selcetctl = new openlayers. control. selectfeature (vectorlayer, {// bind vectorlayer to the selectfeature component clickout: false, toggle: false, multiple: True, hover: false, clickout: True, renderintent: "select"}); vectorlayer. events. on ({// register Action event 'featureselected': function (feature) {selcetctl. unselect (feature. feature); // Why do you want to call this function? It is to make the style uncontrollable when the vector is selected or removed (the default style defined in the selectfeature space is different from what we want) vaR A = document. getelementbyid (feature. feature. FID);. checked = true; checkboxchange (a); // manually triggers the checkbox status change event. It seems that after the code changes its checked attribute, there is no focus loss action, no way to trigger automatically}); map. addcontrol (selcetctl); selcetctl. activate (); // after adding a space, it must be activated explicitly.

4. The implementation of the function of modifying the Quadrilateral style and changing the status of the checkbox is as follows:

        function checkboxchange(e) {            var theFeature = vectorLayer.getFeatureByFid(e.id);            if (e.checked) {                theFeature.renderIntent = "select";            } else {                theFeature.renderIntent = "default";            }            vectorLayer.drawFeature(theFeature);         }

Here, we will mention a few details. By modifying the renderintent of the feature object, we can specify which style in the style object to apply. However, after the modification, the feature style will not change immediately (Static Page ...), you need to call vectorlayer. drawfeature (thefeature) to re-paint (scaling can also refresh the re-painting effect), the meaning of the drawfeature function can refer to the annotations in the API, here part of the screenshot is as follows:

 * This function is not designed to be used when adding features to  * the layer (use addFeatures instead). It is meant to be used when * the style of a feature has changed, or in some other way needs to  * visually updated *after* it has already been added to a layer. You * must add the feature to the layer for most layer-related events to  * happen.

Shows the effect:

(Supplement: it is just an implementation idea, and the specific details need to be improved slowly. For example, how can we make the operation of the selectfeature component not affect the custom style? You do not need to reconstruct the selectfeature class, does selectfeature have relevant functions)