Hope you can guide me in this issue I have.My aim is to connect to a Postgis database from Openlayers 3 using Mapserver WMS.
(All test I have done as localhost)
I have read that I can do that creating a WMS or WFS.
Apparently all is set up in my mapfile for WMS service(postgres connection inside). I have tested and validated the getmap request, no errors found.
Here is my URL:
http://localhost/cgi-bin/mapserv.ex...878&WIDTH=105&HEIGHT=22&FORMAT=image/pngAfter that I change the path inside the "http.conf" file as follows:SetEnv myMap "C:/ms4w/Apache/htdocs/maquetado/mapfiles/demo3.map"
Here is my final URL: http://localhost/cgi-bin/mapserv.exe?map=myMap
I have tested it in GIS clients as a QGIS and ArcGIS and all is ok.
Ok now for a simple explanation using Openlayers 3. I exported the map using the plugin in QGIS for OL3....here is the code for the "layers.js":
////////layers.js//////////var baseLayer = new ol.layer.Group({'title': 'Base maps',layers: [new ol.layer.Tile({title: 'OSM', source: new ol.source.OSM()})]});var lyr_agave1gcs = new ol.layer.Tile({ source: new ol.source.TileWMS(({ url: "http://localhost/cgi-bin/mapserv.exe?map=myMap", params: {"LAYERS": "agave_01_gcs", "TILED": "true"}, })), title: "agave_01_gcs" });var lyr_agave2gcs = new ol.layer.Tile({ source: new ol.source.TileWMS(({ url: "http://localhost/cgi-bin/mapserv.exe?map=myMap", params: {"LAYERS": "agave_02_gcs", "TILED": "true"}, })), title: "agave_02_gcs" });lyr_agave1gcs.setVisible(true);lyr_agave2gcs.setVisible(true);var layersList = [baseLayer,lyr_agave1gcs,lyr_agave2gcs];////////////////////////////////////////here is the index part:
var map = new ol.Map({ controls: ol.control.defaults().extend([ new ol.control.ScaleLine({}),new ol.control.LayerSwitcher({tipLabel: "Layers"}) ]), target: document.getElementById('map'), renderer: 'canvas', overlays: [overlayPopup], layers: layersList, view: new ol.View({ maxZoom: 28, minZoom: 1 }) }); map.getView().fitExtent([-11556223.837575, 2372629.375584, -11545353.489299, 2378912.517576], map.getSize());//////////////////////////////I have instantiated in many ways with no success. The layers in the map show nothing.I think that probably something is wrong with my WMS url that OL3 can not read..
Here is the map file I created using QGIS after some changes in order to make it work correctly.
//////////////mapfile/////////////# Map file created from QGIS project file C:/ms4w/Apache/htdocs/maquetado/mapfiles/demo2.qgs# Edit this file to customize for your map interface# (Created with PyQgis MapServer Export plugin)MAP NAME "QGIS-MAP" # Map image size SIZE 100 100 UNITS meters EXTENT -103.809450 20.841926 -103.715675 20.887761 #FONTSET './fonts/fonts.txt' # SYMBOLSET './symbols/symbols.txt' PROJECTION 'proj=longlat' 'datum=WGS84' 'no_defs' END # Background color for the map canvas -- change as desired IMAGECOLOR 255 255 255 IMAGEQUALITY 95 # IMAGETYPE userdefined #OUTPUTFORMAT # NAME userdefined # DRIVER 'GD/USERDEFINED' # MIMETYPE 'image/userdefined' # IMAGEMODE RGBA # EXTENSION 'userdefined' # END # Legend LEGEND IMAGECOLOR 255 255 255 STATUS ON KEYSIZE 18 12 LABEL TYPE BITMAP SIZE MEDIUM COLOR 0 0 89 END END # Web interface definition. Only the template parameter # is required to display a map. See MapServer documentation WEB # Set IMAGEPATH to the path where MapServer should # write its output. IMAGEPATH '/tmp/' # Set IMAGEURL to the url that points to IMAGEPATH # as defined in your web server configuration IMAGEURL '/tmp/' # WMS server settings METADATA 'ows_title' 'QGIS-MAP' 'ows_onlineresource' 'http://localhost/cgi-bin/mapserv.exe?map=myMap' 'ows_srs' 'EPSG:4326' WMS_ENABLE_REQUEST "*" #"wms_enable_request" "GetCapabilities GetMap GetFeatureInfo" END #Scale range at which web interface will operate # Template and header/footer settings # Only the template parameter is required to display a map. See MapServer documentation TEMPLATE "C:\ms4w\Apache\htdocs\maquetado\mapfiles\demojordan2.map.html.tmpl" END LAYER NAME 'agave_01_gcs' TYPE POLYGON DUMP true #TEMPLATE demojordan.map.html.tmpl EXTENT -103.809450 20.841926 -103.715675 20.887761 CONNECTIONTYPE postgis CONNECTION "dbname='mapserver' host=localhost port=5432 user='****' password='****' sslmode=disable" DATA 'the_geom FROM "agave_01_gcs" USING UNIQUE gid USING srid=4326' METADATA 'ows_title' 'agave_01_gcs' END STATUS OFF TRANSPARENCY 100 PROJECTION 'proj=longlat' 'datum=WGS84' 'no_defs' END CLASS NAME 'agave_01_gcs' STYLE WIDTH 0.91 OUTLINECOLOR 255 170 0 END END END LAYER NAME 'agave_02_gcs' TYPE POLYGON DUMP true #TEMPLATE demojordan.map.html.tmpl EXTENT -103.809450 20.841926 -103.715675 20.887761 CONNECTIONTYPE postgis CONNECTION "dbname='mapserver' host=localhost port=5432 user='postgres' password='gtt**' sslmode=disable" DATA 'the_geom FROM "agave_02_gcs" USING UNIQUE gid USING srid=4326' METADATA 'ows_title' 'agave_02_gcs' END STATUS OFF TRANSPARENCY 100 PROJECTION 'proj=longlat' 'datum=WGS84' 'no_defs' END CLASS NAME 'agave_02_gcs' STYLE WIDTH 0.91 OUTLINECOLOR 255 0 0 END END ENDEND///////////////////////////////////////////////mapfile/////////////# Map file created from QGIS project file C:/ms4w/Apache/htdocs/maquetado/mapfiles/demo2.qgs# Edit this file to customize for your map interface# (Created with PyQgis MapServer Export plugin)MAP NAME "QGIS-MAP" # Map image size SIZE 100 100 UNITS meters EXTENT -103.809450 20.841926 -103.715675 20.887761 #FONTSET './fonts/fonts.txt' # SYMBOLSET './symbols/symbols.txt' PROJECTION 'proj=longlat' 'datum=WGS84' 'no_defs' END # Background color for the map canvas -- change as desired IMAGECOLOR 255 255 255 IMAGEQUALITY 95 # IMAGETYPE userdefined #OUTPUTFORMAT # NAME userdefined # DRIVER 'GD/USERDEFINED' # MIMETYPE 'image/userdefined' # IMAGEMODE RGBA # EXTENSION 'userdefined' # END # Legend LEGEND IMAGECOLOR 255 255 255 STATUS ON KEYSIZE 18 12 LABEL TYPE BITMAP SIZE MEDIUM COLOR 0 0 89 END END # Web interface definition. Only the template parameter # is required to display a map. See MapServer documentation WEB # Set IMAGEPATH to the path where MapServer should # write its output. IMAGEPATH '/tmp/' # Set IMAGEURL to the url that points to IMAGEPATH # as defined in your web server configuration IMAGEURL '/tmp/' # WMS server settings METADATA 'ows_title' 'QGIS-MAP' 'ows_onlineresource' 'http://localhost/cgi-bin/mapserv.exe?map=myMap' 'ows_srs' 'EPSG:4326' WMS_ENABLE_REQUEST "*" #"wms_enable_request" "GetCapabilities GetMap GetFeatureInfo" END #Scale range at which web interface will operate # Template and header/footer settings # Only the template parameter is required to display a map. See MapServer documentation TEMPLATE "C:\ms4w\Apache\htdocs\maquetado\mapfiles\demojordan2.map.html.tmpl" END LAYER NAME 'agave_01_gcs' TYPE POLYGON DUMP true #TEMPLATE demojordan.map.html.tmpl EXTENT -103.809450 20.841926 -103.715675 20.887761 CONNECTIONTYPE postgis CONNECTION "dbname='mapserver' host=localhost port=5432 user='****' password='****' sslmode=disable" DATA 'the_geom FROM "agave_01_gcs" USING UNIQUE gid USING srid=4326' METADATA 'ows_title' 'agave_01_gcs' END STATUS OFF TRANSPARENCY 100 PROJECTION 'proj=longlat' 'datum=WGS84' 'no_defs' END CLASS NAME 'agave_01_gcs' STYLE WIDTH 0.91 OUTLINECOLOR 255 170 0 END END END LAYER NAME 'agave_02_gcs' TYPE POLYGON DUMP true #TEMPLATE demojordan.map.html.tmpl EXTENT -103.809450 20.841926 -103.715675 20.887761 CONNECTIONTYPE postgis CONNECTION "dbname='mapserver' host=localhost port=5432 user='postgres' password='gtt**' sslmode=disable" DATA 'the_geom FROM "agave_02_gcs" USING UNIQUE gid USING srid=4326' METADATA 'ows_title' 'agave_02_gcs' END STATUS OFF TRANSPARENCY 100 PROJECTION 'proj=longlat' 'datum=WGS84' 'no_defs' END CLASS NAME 'agave_02_gcs' STYLE WIDTH 0.91 OUTLINECOLOR 255 0 0 END END ENDEND/////////////////////////////////here is the mapServer template:
///////////////////////////MapServer Template////////////// QGIS-MAP [resultset layer="agave_02_gcs"]"agave_02_gcs" "gid" "Area" "Perimeter" "GroupId"[feature limit=20] [item name="gid"] [item name="Area"] [item name="Perimeter"] [item name="GroupId"] [/feature][/resultset][resultset layer="agave_01_gcs"]"agave_01_gcs" "gid" "Area" "Perimeter" "Municipio" "Estado" "NumPlantas"[feature limit=20] [item name="gid"] [item name="Area"] [item name="Perimeter"] [item name="Municipio"] [item name="Estado"] [item name="NumPlantas"] [/feature][/resultset] //////////////////////////Any suggestions?
أكثر...
(All test I have done as localhost)
I have read that I can do that creating a WMS or WFS.
Apparently all is set up in my mapfile for WMS service(postgres connection inside). I have tested and validated the getmap request, no errors found.
Here is my URL:
http://localhost/cgi-bin/mapserv.ex...878&WIDTH=105&HEIGHT=22&FORMAT=image/pngAfter that I change the path inside the "http.conf" file as follows:SetEnv myMap "C:/ms4w/Apache/htdocs/maquetado/mapfiles/demo3.map"
Here is my final URL: http://localhost/cgi-bin/mapserv.exe?map=myMap
I have tested it in GIS clients as a QGIS and ArcGIS and all is ok.
Ok now for a simple explanation using Openlayers 3. I exported the map using the plugin in QGIS for OL3....here is the code for the "layers.js":
////////layers.js//////////var baseLayer = new ol.layer.Group({'title': 'Base maps',layers: [new ol.layer.Tile({title: 'OSM', source: new ol.source.OSM()})]});var lyr_agave1gcs = new ol.layer.Tile({ source: new ol.source.TileWMS(({ url: "http://localhost/cgi-bin/mapserv.exe?map=myMap", params: {"LAYERS": "agave_01_gcs", "TILED": "true"}, })), title: "agave_01_gcs" });var lyr_agave2gcs = new ol.layer.Tile({ source: new ol.source.TileWMS(({ url: "http://localhost/cgi-bin/mapserv.exe?map=myMap", params: {"LAYERS": "agave_02_gcs", "TILED": "true"}, })), title: "agave_02_gcs" });lyr_agave1gcs.setVisible(true);lyr_agave2gcs.setVisible(true);var layersList = [baseLayer,lyr_agave1gcs,lyr_agave2gcs];////////////////////////////////////////here is the index part:
var map = new ol.Map({ controls: ol.control.defaults().extend([ new ol.control.ScaleLine({}),new ol.control.LayerSwitcher({tipLabel: "Layers"}) ]), target: document.getElementById('map'), renderer: 'canvas', overlays: [overlayPopup], layers: layersList, view: new ol.View({ maxZoom: 28, minZoom: 1 }) }); map.getView().fitExtent([-11556223.837575, 2372629.375584, -11545353.489299, 2378912.517576], map.getSize());//////////////////////////////I have instantiated in many ways with no success. The layers in the map show nothing.I think that probably something is wrong with my WMS url that OL3 can not read..
Here is the map file I created using QGIS after some changes in order to make it work correctly.
//////////////mapfile/////////////# Map file created from QGIS project file C:/ms4w/Apache/htdocs/maquetado/mapfiles/demo2.qgs# Edit this file to customize for your map interface# (Created with PyQgis MapServer Export plugin)MAP NAME "QGIS-MAP" # Map image size SIZE 100 100 UNITS meters EXTENT -103.809450 20.841926 -103.715675 20.887761 #FONTSET './fonts/fonts.txt' # SYMBOLSET './symbols/symbols.txt' PROJECTION 'proj=longlat' 'datum=WGS84' 'no_defs' END # Background color for the map canvas -- change as desired IMAGECOLOR 255 255 255 IMAGEQUALITY 95 # IMAGETYPE userdefined #OUTPUTFORMAT # NAME userdefined # DRIVER 'GD/USERDEFINED' # MIMETYPE 'image/userdefined' # IMAGEMODE RGBA # EXTENSION 'userdefined' # END # Legend LEGEND IMAGECOLOR 255 255 255 STATUS ON KEYSIZE 18 12 LABEL TYPE BITMAP SIZE MEDIUM COLOR 0 0 89 END END # Web interface definition. Only the template parameter # is required to display a map. See MapServer documentation WEB # Set IMAGEPATH to the path where MapServer should # write its output. IMAGEPATH '/tmp/' # Set IMAGEURL to the url that points to IMAGEPATH # as defined in your web server configuration IMAGEURL '/tmp/' # WMS server settings METADATA 'ows_title' 'QGIS-MAP' 'ows_onlineresource' 'http://localhost/cgi-bin/mapserv.exe?map=myMap' 'ows_srs' 'EPSG:4326' WMS_ENABLE_REQUEST "*" #"wms_enable_request" "GetCapabilities GetMap GetFeatureInfo" END #Scale range at which web interface will operate # Template and header/footer settings # Only the template parameter is required to display a map. See MapServer documentation TEMPLATE "C:\ms4w\Apache\htdocs\maquetado\mapfiles\demojordan2.map.html.tmpl" END LAYER NAME 'agave_01_gcs' TYPE POLYGON DUMP true #TEMPLATE demojordan.map.html.tmpl EXTENT -103.809450 20.841926 -103.715675 20.887761 CONNECTIONTYPE postgis CONNECTION "dbname='mapserver' host=localhost port=5432 user='****' password='****' sslmode=disable" DATA 'the_geom FROM "agave_01_gcs" USING UNIQUE gid USING srid=4326' METADATA 'ows_title' 'agave_01_gcs' END STATUS OFF TRANSPARENCY 100 PROJECTION 'proj=longlat' 'datum=WGS84' 'no_defs' END CLASS NAME 'agave_01_gcs' STYLE WIDTH 0.91 OUTLINECOLOR 255 170 0 END END END LAYER NAME 'agave_02_gcs' TYPE POLYGON DUMP true #TEMPLATE demojordan.map.html.tmpl EXTENT -103.809450 20.841926 -103.715675 20.887761 CONNECTIONTYPE postgis CONNECTION "dbname='mapserver' host=localhost port=5432 user='postgres' password='gtt**' sslmode=disable" DATA 'the_geom FROM "agave_02_gcs" USING UNIQUE gid USING srid=4326' METADATA 'ows_title' 'agave_02_gcs' END STATUS OFF TRANSPARENCY 100 PROJECTION 'proj=longlat' 'datum=WGS84' 'no_defs' END CLASS NAME 'agave_02_gcs' STYLE WIDTH 0.91 OUTLINECOLOR 255 0 0 END END ENDEND///////////////////////////////////////////////mapfile/////////////# Map file created from QGIS project file C:/ms4w/Apache/htdocs/maquetado/mapfiles/demo2.qgs# Edit this file to customize for your map interface# (Created with PyQgis MapServer Export plugin)MAP NAME "QGIS-MAP" # Map image size SIZE 100 100 UNITS meters EXTENT -103.809450 20.841926 -103.715675 20.887761 #FONTSET './fonts/fonts.txt' # SYMBOLSET './symbols/symbols.txt' PROJECTION 'proj=longlat' 'datum=WGS84' 'no_defs' END # Background color for the map canvas -- change as desired IMAGECOLOR 255 255 255 IMAGEQUALITY 95 # IMAGETYPE userdefined #OUTPUTFORMAT # NAME userdefined # DRIVER 'GD/USERDEFINED' # MIMETYPE 'image/userdefined' # IMAGEMODE RGBA # EXTENSION 'userdefined' # END # Legend LEGEND IMAGECOLOR 255 255 255 STATUS ON KEYSIZE 18 12 LABEL TYPE BITMAP SIZE MEDIUM COLOR 0 0 89 END END # Web interface definition. Only the template parameter # is required to display a map. See MapServer documentation WEB # Set IMAGEPATH to the path where MapServer should # write its output. IMAGEPATH '/tmp/' # Set IMAGEURL to the url that points to IMAGEPATH # as defined in your web server configuration IMAGEURL '/tmp/' # WMS server settings METADATA 'ows_title' 'QGIS-MAP' 'ows_onlineresource' 'http://localhost/cgi-bin/mapserv.exe?map=myMap' 'ows_srs' 'EPSG:4326' WMS_ENABLE_REQUEST "*" #"wms_enable_request" "GetCapabilities GetMap GetFeatureInfo" END #Scale range at which web interface will operate # Template and header/footer settings # Only the template parameter is required to display a map. See MapServer documentation TEMPLATE "C:\ms4w\Apache\htdocs\maquetado\mapfiles\demojordan2.map.html.tmpl" END LAYER NAME 'agave_01_gcs' TYPE POLYGON DUMP true #TEMPLATE demojordan.map.html.tmpl EXTENT -103.809450 20.841926 -103.715675 20.887761 CONNECTIONTYPE postgis CONNECTION "dbname='mapserver' host=localhost port=5432 user='****' password='****' sslmode=disable" DATA 'the_geom FROM "agave_01_gcs" USING UNIQUE gid USING srid=4326' METADATA 'ows_title' 'agave_01_gcs' END STATUS OFF TRANSPARENCY 100 PROJECTION 'proj=longlat' 'datum=WGS84' 'no_defs' END CLASS NAME 'agave_01_gcs' STYLE WIDTH 0.91 OUTLINECOLOR 255 170 0 END END END LAYER NAME 'agave_02_gcs' TYPE POLYGON DUMP true #TEMPLATE demojordan.map.html.tmpl EXTENT -103.809450 20.841926 -103.715675 20.887761 CONNECTIONTYPE postgis CONNECTION "dbname='mapserver' host=localhost port=5432 user='postgres' password='gtt**' sslmode=disable" DATA 'the_geom FROM "agave_02_gcs" USING UNIQUE gid USING srid=4326' METADATA 'ows_title' 'agave_02_gcs' END STATUS OFF TRANSPARENCY 100 PROJECTION 'proj=longlat' 'datum=WGS84' 'no_defs' END CLASS NAME 'agave_02_gcs' STYLE WIDTH 0.91 OUTLINECOLOR 255 0 0 END END ENDEND/////////////////////////////////here is the mapServer template:
///////////////////////////MapServer Template////////////// QGIS-MAP [resultset layer="agave_02_gcs"]"agave_02_gcs" "gid" "Area" "Perimeter" "GroupId"[feature limit=20] [item name="gid"] [item name="Area"] [item name="Perimeter"] [item name="GroupId"] [/feature][/resultset][resultset layer="agave_01_gcs"]"agave_01_gcs" "gid" "Area" "Perimeter" "Municipio" "Estado" "NumPlantas"[feature limit=20] [item name="gid"] [item name="Area"] [item name="Perimeter"] [item name="Municipio"] [item name="Estado"] [item name="NumPlantas"] [/feature][/resultset] //////////////////////////Any suggestions?
أكثر...