Vissza az előzőleg látogatott oldalra (nem elérhető funkció)Vissza a tananyag kezdőlapjára (P)Ugrás a tananyag előző oldalára (E)Ugrás a tananyag következő oldalára (V)Fogalom megjelenítés (nem elérhető funkció)Fogalmak listája (nem elérhető funkció)Oldal nyomtatása (nem elérhető funkció)Oldaltérkép megtekintése (D)Keresés az oldalon (nem elérhető funkció)Súgó megtekintése (S)

Open source fejlesztő eszközök Windows környezetben / A SharpMap használata webes alkalmazásokban

Tanulási útmutató

Összefoglalás

Ebben a leckében áttekintjük a SharpMap webes GIS alkalmazás fejlesztési lehetőségeinek alapjait. Egy C# és egy VB nyelvű alkalmazás teljes forráskódját is bemutatjuk.

Követelmény

A demo alkalmazás továbbfejlesztésének képessége

A SharpMap használata webes alkalmazásokban

A Sharmap tartalmaz egy SharpMap.Web és egy SharpMap.UI nevű névteret. Az UI, nevéből következően webes vezérlőket tartalmaz, a Web név pedig webes funkciókra utal. Amikor VisualStdio.net-ben webes alkalmazást szeretnénk fejleszteni, a fenti két névteret fel kell venni a referenciák közé. A tennivalók ugyanazok, mint a win32-es alkalmazások esetén. Az alkalmazás fejlesztés során azonban van két lényeges különbség. Mint már tudjuk, a Map osztály példánya rendereli a térképet, ezt azonban át kell adnunk egy webes objektumnak, az Image-nek, amely képes megjeleníteni a térképet. A másik alapvető jelentőségű tény, hogy itt nem használhatjuk a .NET FrameWork 4.0-t, mint a win32 alkalmazások esetében, hanem csak Framework 2.0-t. Ezt a project tulajdonságai között kell megadnunk a Compile fülön található Advanced Compiled Options gombra kattintva (18. ábra).

A kép (nagyobb változata) külön ablakban is megtekinthető.18_framework2_full.jpg18. ábra. A Framework 2.0 megadása a project ablakban. A Compile fülön lévő Advanced Compiled Options gombra kattintva megnyíló dialógus ablakban

Egy ASP.NET térképes alkalmazás

A következőkben bemutatunk egy sharpmappel elkészített egyszerű webes alkalmazást, amely három térkép mutat meg, azokat nagyítja, kicsinyíti, középre pozícionálja az egér kurzorral történt klikkelés helyét. Az alkalmazás C# -ban íródott, de mint az előbbiekben látható volt, VB.NET-ben ugyanúgy elkészíthető, hiszen a VisualStudio.NET névterei ugyanazok. A két nyelv csak szintaktikailag különböző.

A 19. ábrán az elkészült alkalmazás userinterface-ét láthatjuk. Pillanatnyilag három vektoros réteget jelenítettünk meg: a magyarországi megyéket, a folyókat és a nagyobb tavakat. A térképeket nagyítani, kicsinyíteni és mozgatni lehet (20. ábra).

A program C# nyelvű forráskódja letölthető.

  • Fájl letöltése: download_SharpMap1_src.zip című háttéranyag letöltése
  • Információ az állományról:A letöltött fájl kicsomagolás után VisualStudio.net-tel beolvasható, szerkeszthető és futtatható. Egy webes (ASP.NET) vektoros alkalmazás, amellyel vektor térképeket jeleníthetünk meg, nagyíthatunk, kicsinyíthetünk
  • Fájlméret: 0.2 MB

A VisualStudio designerében látható egy ImageMap vezérlő (imgMap a neve), melynek Click eseménykezelőjébe helyezzük el a térkép megjelenítést. A másik vezérlő egy RedioButtonList (rblMapTools a neve), amellyel a zoomolás üzemmódjait tudjuk állítani. A következőkben a program C# nyelvű változatát láthatjuk.

Forráskód
using System;
using System.Data;
using System.Drawing;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class Default : System.Web.UI.Page
{
private SharpMap.Map myMap;
protected void Page_Load(object sender, EventArgs e)
{
//Set up the map
myMap = InitializeMap(new System.Drawing.Size((int)imgMap.Width.Value,(int)imgMap.Height.Value));
if (Page.IsPostBack) 
{
//Page is post back. Restore center and zoom-values from viewstate
myMap.Center = (SharpMap.Geometries.Point)ViewState["mapCenter"];
myMap.Zoom = (double)ViewState["mapZoom"];
}
else
{
//This is the initial view of the map. Zoom to the extents of the map:
myMap.ZoomToExtents();
//Save the current mapcenter and zoom in the viewstate
ViewState.Add("mapCenter", myMap.Center);
ViewState.Add("mapZoom", myMap.Zoom);
//Create the map
CreateMap();
}
}
  
protected void imgMap_Click(object sender, ImageClickEventArgs e)
{
//Set center of the map to where the client clicked
myMap.Center = SharpMap.Utilities.Transform.MapToWorld(new System.Drawing.Point(e.X, e.Y), myMap);
//Set zoom value if any of the zoom tools were selected
if (rblMapTools.SelectedValue == "0") //Zoom in
myMap.Zoom = myMap.Zoom * 0.5;
else if (rblMapTools.SelectedValue == "1") //Zoom out
myMap.Zoom = myMap.Zoom * 2;
//Save the new map's zoom and center in the viewstate
ViewState.Add("mapCenter", myMap.Center);
ViewState.Add("mapZoom", myMap.Zoom);
//Create the map
CreateMap();
}
  
/// <summary>
/// Sets up the map, add layers and sets styles
/// </summary>
/// <param name="outputsize">Initiatial size of output image</param>
/// <returns>Map object</returns>
private SharpMap.Map InitializeMap(System.Drawing.Size outputsize)
{
//Initialize a new map of size 'imagesize'
SharpMap.Map map = new SharpMap.Map(outputsize);

//Set up the countries layer
SharpMap.Layers.VectorLayer layCountries = new SharpMap.Layers.VectorLayer("Megye");
//Set the datasource to a shapefile in the App_data folder
layCountries.DataSource = new SharpMap.Providers.ShapeFile(Server.MapPath(@"~\App_data\megye.shp"), true);
//Set fill-style to green
layCountries.Style.Fill = new SolidBrush(Color.Green);
//Set the polygons to have a black outline
layCountries.Style.Outline = System.Drawing.Pens.Black;
layCountries.Style.EnableOutline = true;
//Set up a river layer
SharpMap.Layers.VectorLayer layRivers = new SharpMap.Layers.VectorLayer("Folyok");
//Set the datasource to a shapefile in the App_data folder
layRivers.DataSource = new SharpMap.Providers.ShapeFile(Server.MapPath(@"~\App_data\folyok.shp"), true);
//Define a blue 1px wide pen
layRivers.Style.Line = new Pen(Color.Blue,1);
//Add the layers to the map object.
//The order we add them in are the order they are drawn, so we add the rivers last to put them on top
map.Layers.Add(layCountries);
map.Layers.Add(layRivers);

return map;
}
/// <summary>
/// Creates the map, inserts it into the cache and sets the ImageButton Url
/// </summary>
private void CreateMap()
{
System.Drawing.Image img = myMap.GetMap();
string imgID = SharpMap.Web.Caching.InsertIntoCache(1, img);
imgMap.ImageUrl = "getmap.aspx?ID=" + HttpUtility.UrlEncode(imgID);
}
}

A következőkben ugyanennek a programnak a VB.NET nyelvű forráskódja letölthető.

  • Fájl letöltése: sharpMap_vb.zip című háttéranyag letöltése
  • Információ az állományról:A letöltött fájl kicsomagolás után VisualStudio.net-tel beolvasható, szerkeszthető és futtatható. Egy webes (ASP.NET) vektoros alkalmazás, amellyel vektor térképeket jeleníthetünk meg, nagyíthatunk, kicsinyíthetünk
  • Fájlméret: 1.09 MB

A user interface-t kicsit megváltoztattuk, mert egy úja radiobuttont (ZoomtoFullExtens) tettük a hozzá, amely a térkép teljes tartalmarára zoomol, amikor az imageMap vezérlőre kattintunk.

Forráskód
Imports SharpMap
Imports System.Drawing
Public Class WebForm1
    Inherits System.Web.UI.Page
    Dim myMap As New SharpMap.Map
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        myMap = InitializeMap(New System.Drawing.Size(imgMap.Width.Value, imgMap.Height.Value))
        If (Page.IsPostBack) Then
            myMap.Center = ViewState.Item("mapCenter")
            myMap.Zoom = ViewState.Item("mapZoom")
        Else
            myMap.ZoomToExtents()
            ViewState.Add("mapCenter", myMap.Center)
            ViewState.Add("mapZoom", myMap.Zoom)
            CreateMap()
        End If
    End Sub
    Private Sub imgMap_Click(ByVal sender As Object, ByVal e As System.Web.UI.ImageClickEventArgs) Handles imgMap.Click
        myMap.Center = SharpMap.Utilities.Transform.MapToWorld(New System.Drawing.Point(e.X, e.Y), myMap)
        Select Case rblMapTools.SelectedValue
            Case "0" 'zoom in
                myMap.Zoom = myMap.Zoom * 0.5
                ViewState.Add("mapCenter", myMap.Center)
                ViewState.Add("mapZoom", myMap.Zoom)
            Case "1"
                myMap.Zoom = myMap.Zoom * 2 'zoom out
                ViewState.Add("mapCenter", myMap.Center)
                ViewState.Add("mapZoom", myMap.Zoom)
            Case "2" 'Save the new map's zoom and center in the viewstate
                ViewState.Add("mapCenter", myMap.Center)
                ViewState.Add("mapZoom", myMap.Zoom)
            Case "3" ' zoom to map extent
                myMap.ZoomToExtents()
        End Select
        CreateMap()
    End Sub
    Function InitializeMap(ByVal outputSize As System.Drawing.Size) As SharpMap.Map
        Dim map As New SharpMap.Map(outputSize)
        Dim layCountries As New SharpMap.Layers.VectorLayer("Megye")
        layCountries.DataSource = New SharpMap.Data.Providers.ShapeFile(MapPath("~\App_data\megye.shp"), True)
        layCountries.Style.Fill = New SolidBrush(Color.LightGreen)
        layCountries.Style.Outline = System.Drawing.Pens.Blue
        layCountries.Style.EnableOutline = True
        Dim layRivers As New SharpMap.Layers.VectorLayer("Folyok")
        layRivers.DataSource = New SharpMap.Data.Providers.ShapeFile(Server.MapPath("~\App_data\folyok.shp"), True)
        layRivers.Style.Line = New Pen(Color.Blue, 1)
        map.Layers.Add(layCountries)
        map.Layers.Add(layRivers)
        Return map
    End Function
    Sub CreateMap()
        Dim img As System.Drawing.Image = myMap.GetMap
        Dim imgID As String = SharpMap.Web.Caching.InsertIntoCache(1, img)
        imgMap.ImageUrl = "getmap.aspx?ID=" + HttpUtility.UrlEncode(imgID)
    End Sub
End Class

Vissza a tartalomjegyzékhez

Új Széchenyi terv
A projekt az Európai Unió támogatásával, az Európai Szociális Alap társfinanszirozásával valósul meg.

A Társadalominformatika: moduláris tananyagok, interdiszciplináris tartalom- és tudásmenedzsment rendszerek fejlesztése az Európai Unió támogatásával, az Európai Szociális Alap társfinanszírozásával, az ELTE TÁMOP 4.1.2.A/1-11/1-2011-0056 projekt keretében valósult meg.
A tananyag elkészítéséhez az ELTESCORM keretrendszert használtuk.