[GIS] How to save new drawing feature to the own WorldImage layer(only base layer)

openlayers-2

Recently, I have been learning geoserver and openlayers to construct my own indoor map. As I am going to build a indoor wifi location system so I need to create the map. I use Raster Data Sources — WorldImage to create the stores in my geoserver, but it needs a .meta and a .prj to save the store. I just changed the default file usa.meta and usa.prj's name to the same name of my .png file.(I don't know whether it is a right or accepted way to do so, just try) Then a base layer finished, it can be viewed at the Layer Preview.

My target is to add a feature layer on the base layer in my browser from a html file. Inside, I use javescript to get the base layer from my geoserver and it can be displayed in the Firefox browser. After reading many tutorials, I can draw a OpenLayers.Layer.Vector above my base layer which has some rectangles to represent different stores in the supermark. Their attributes can be displayed after selecting the vector.

But how to save the vector layer which is a new layer created by in the javascript. I finally find two possible way. One is to create a layer programmatically bt using REST. But it seems a little difficult for me in few days. Another way is to load the feature layer from the geoserver which can be a real layer in geoserver or using OpenLayers.Protocol.HTTP to load from a XML/JSON file. I have tried the second way. The feature can be loaded from my customed XML but I cannot save changes to the XML file. Stuck here for a few days. Here is a good example on the topic: http://maps.peterrobins.co.uk/files/ol6.html

Hope I can get some help or ideas here. Thanks in advance!

Best Answer

I am currently building an application in which the user draws lines and shapes on a map. I am using the browser's LocalStorage to save the vector data in GeoJSON format (see here). It's a concise, legible format. I retrieve the vector data using these 2 functions:

    function getFeatures(){ 
      var ret=new Array();
      for(i in vectors.features){
        if(vectors.features[i].geometry.getVertices().length>1){ //excludes points
          ret.push(serialize(vectors.features[i]));
        }
      }
      return ret;
    }
    function serialize(feature) {
      var out_options = {
      'internalProjection': map.baseLayer.projection,
      'externalProjection': new OpenLayers.Projection("EPSG:4326")
      };

      var type = "geojson";
      var pretty = false;
      var str = new OpenLayers.Format.GeoJSON(out_options).write(feature, pretty);
      return(str);

    }

I also built a server-side script which returns the user's drawing as a file, and allows a user to upload that file which then gets saved back to LocalStorage. Does that help at all?

Related Question