最近公司用SharpMap作了一個作桌面程序,它是一個開源的Gis項目,功能還能夠,最大的特色就是簡單易用,這裏介紹下怎麼在web下使用:javascript
此次咱們根據demo先了解一下如何show一個地圖。這是最基本的步驟,也比較簡單,但願能對剛入門的同窗有所幫助。css
咱們使用SharpMap.UI.dll中的ajax控件 <smap:AjaxMapControl width="1600px" Height="600px" id="ajaxMap" runat="server"
OnClickEvent="MapClicked" onmouseout="toolTip();"; OnViewChange="ViewChanged" CssClass="Ly" UseCache="false"
OnViewChanging="ViewChanging" ZoomSpeed="1" /> 來展現地圖,主要代碼分析以下:html
首先,初始化地圖java
public static SharpMap.Map InitializeMap(System.Drawing.Size size) { HttpContext.Current.Trace.Write("Initializing map"); //Initialize a new map of size 'imagesize' SharpMap.Map map = new SharpMap.Map(size); //Set up the countries layer SharpMap.Layers.VectorLayer layCountries = new SharpMap.Layers.VectorLayer("Countries"); //Set the datasource to a shapefile in the App_data folder layCountries.DataSource = new SharpMap.Data.Providers.ShapeFile(HttpContext.Current.Server.MapPath(@"~\App_data\countries.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; layCountries.SRID = 4326; //Set up a river layer SharpMap.Layers.VectorLayer layRivers = new SharpMap.Layers.VectorLayer("Rivers"); //Set the datasource to a shapefile in the App_data folder layRivers.DataSource = new SharpMap.Data.Providers.ShapeFile(HttpContext.Current.Server.MapPath(@"~\App_data\rivers.shp"), true); //Define a blue 1px wide pen layRivers.Style.Line = new Pen(Color.Blue,1); layRivers.SRID = 4326; //Set up a river layer SharpMap.Layers.VectorLayer layCities = new SharpMap.Layers.VectorLayer("Cities"); //Set the datasource to a shapefile in the App_data folder layCities.DataSource = new SharpMap.Data.Providers.ShapeFile(HttpContext.Current.Server.MapPath(@"~\App_data\cities.shp"), true); //Define a blue 1px wide pen //layCities.Style.Symbol = new Bitmap(HttpContext.Current.Server.MapPath(@"~\App_data\icon.png")); layCities.Style.SymbolScale = 0.8f; layCities.MaxVisible = 40; layCities.SRID = 4326; //Set up a country label layer SharpMap.Layers.LabelLayer layLabel = new SharpMap.Layers.LabelLayer("Country labels"); layLabel.DataSource = layCountries.DataSource; layLabel.Enabled = true; layLabel.LabelColumn = "Name"; layLabel.Style = new SharpMap.Styles.LabelStyle(); layLabel.Style.ForeColor = Color.White; layLabel.Style.Font = new Font(FontFamily.GenericSerif, 12); layLabel.Style.BackColor = new System.Drawing.SolidBrush(Color.FromArgb(128,255,0,0)); layLabel.MaxVisible = 90; layLabel.MinVisible = 30; layLabel.Style.HorizontalAlignment = SharpMap.Styles.LabelStyle.HorizontalAlignmentEnum.Center; layLabel.SRID = 4326; layLabel.MultipartGeometryBehaviour = SharpMap.Layers.LabelLayer.MultipartGeometryBehaviourEnum.Largest; //Set up a city label layer SharpMap.Layers.LabelLayer layCityLabel = new SharpMap.Layers.LabelLayer("City labels"); layCityLabel.DataSource = layCities.DataSource; layCityLabel.Enabled = true; layCityLabel.LabelColumn = "Name"; layCityLabel.Style = new SharpMap.Styles.LabelStyle(); layCityLabel.Style.ForeColor = Color.Black; layCityLabel.Style.Font = new Font(FontFamily.GenericSerif, 11); layCityLabel.MaxVisible = layLabel.MinVisible; layCityLabel.Style.HorizontalAlignment = SharpMap.Styles.LabelStyle.HorizontalAlignmentEnum.Left; layCityLabel.Style.VerticalAlignment = SharpMap.Styles.LabelStyle.VerticalAlignmentEnum.Bottom; layCityLabel.Style.Offset = new PointF(3, 3); layCityLabel.Style.Halo = new Pen(Color.Yellow, 2); layCityLabel.TextRenderingHint = System.Drawing.Text.TextRenderingHint.AntiAlias; layCityLabel.SmoothingMode = SmoothingMode.AntiAlias; layCityLabel.SRID = 4326; layCityLabel.LabelFilter = SharpMap.Rendering.LabelCollisionDetection.ThoroughCollisionDetection; layCityLabel.Style.CollisionDetection = true; //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); map.Layers.Add(layCities); map.Layers.Add(layLabel); map.Layers.Add(layCityLabel); //limit the zoom to 360 degrees width map.MaximumZoom = 360; map.BackColor = Color.LightBlue; map.Zoom = 360; map.Center = new SharpMap.Geometries.Point(0,0); HttpContext.Current.Trace.Write("Map initialized"); return map; }
這段代碼中,web
SharpMap.Layers.VectorLayer layCountries = new SharpMap.Layers.VectorLayer("Countries");
layCountries.DataSource = new SharpMap.Data.Providers.ShapeFile(HttpContext.Current.Server.MapPath(@"~\App_data\countries.shp"), true);ajax
這兩句話定義並初始化了一個map的一個層。一個map可能包含多個層,咱們對map進行操做,其實就是對map的各個層進行操做,好比說道路層,建築層等等。根據業務的複雜程度,可能有不少個層。通常來講,每一個層都有各自的抽象特徵(一類對象),能夠進行同樣的操做。各個層組合起來,就是一個map.網絡
好,接着說初始化。這裏爲VectorLayer的構造函數提供了一個層的名稱,然受設置了數據源。一個層的Datasource是一個IProvider類型的數據,而ShapeFile類正是實現了Iprovider接口的類。(這點很重要,之後有不少機會須要把一個datasource轉換成ShapeFile)。asp.net
接下來是對這個層進行着色,呵呵 就是這個層上的對象如何填充顏色。這裏由於是剛剛開始,咱們就用最簡單的辦法,設置了一個less
layCountries.Style.Fill = new SolidBrush(Color.Green);ide
這樣,就把層上的對象都填充成了綠色。在之後的講解中,咱們會讓你們瞭解到如何自定義theme,這樣咱們能根據實現設置的對象的類型填充不一樣的顏色,以實現自定義的樣式,讓地圖多彩多姿。
而後咱們看到label層。每個map的layer都有本身的label層。
SharpMap.Layers.LabelLayer layLabel = new SharpMap.Layers.LabelLayer("Country labels");
layLabel.DataSource = layCountries.DataSource;
layLabel.Enabled = true;
layLabel.LabelColumn = "Name";
這裏咱們首先定義了一個label層,而後把countries層的datasource直接賦給label層的datasource就OK了。這樣,這個新定義的label層就屬於countries層了。而後咱們給它制定一個labelColumn,這個是必須指定的。它表示countries層的每一個對象應該顯示什麼內容。這個內容在ShapeFile(咱們在MapWindow GIS中創建的shapefile文件)的attribute中進行增長和更新。
我想有必要說一下地圖的對象。
地圖上有不少點,線和多邊形。這些都是對象。咱們均可以對他們進行操做。每一個對象有相應的屬性,這些屬性咱們也能夠添加,修改和刪除。而上述的label的LabelColumn就是這些屬性中的一個。咱們在這裏能夠指定一個,也能夠經過LabelStringDelegate來委託一個方法返回一個字符串(這個將在之後進行詳細講解)。
OK,在設置了label的字體顏色,大小和背景色以後,有兩個個屬性是特別值得咱們注意的。
layLabel.MaxVisible = 90;
ayLabel.MinVisible = 30;
這兩個值說明了咱們在多大/多小的比例尺下能夠看到這個label層。我就常常會忽略這個問題,以致於在放大或縮小比例尺的時候看不到label,也找不到緣由。
在初始化的最後,咱們把全部的層都加到地圖中來,在設置一下最大的比例尺,背景色和中心點,就能夠了
map.Layers.Add(layCountries);
map.Layers.Add(layRivers);
map.Layers.Add(layCities);
map.Layers.Add(layLabel);
map.Layers.Add(layCityLabel);
//limit the zoom to 360 degrees width
map.MaximumZoom = 360;
map.BackColor = Color.LightBlue;
最後,咱們經過一個maphandler(ashx)把地圖輸出到頁面上。
System.Drawing.Bitmap img = (System.Drawing.Bitmap)map.GetMap();
context.Response.ContentType = "image/png";
System.IO.MemoryStream MS = new System.IO.MemoryStream();
img.Save(MS, System.Drawing.Imaging.ImageFormat.Png);
// tidy up
img.Dispose();
byte[] buffer = MS.ToArray();
context.Response.OutputStream.Write(buffer, 0, buffer.Length);
代碼都來自www.codeplex.com/sharpmap的demo。
添加主題 更具一些特性:
private VectorStyle GetCountryStyle(FeatureDataRow row) { VectorStyle style = new VectorStyle(); switch (row["NAME"].ToString().ToLower()) { case "denmark": //If country name is Danmark, fill it with green style.Fill = Brushes.Green; return style; case "united states": //If country name is USA, fill it with Blue and add a red outline style.Fill = Brushes.Blue; style.Outline = Pens.Red; return style; case "china": //If country name is China, fill it with red style.Fill = Brushes.Red; return style; default: break; } //If country name starts with S make it yellow if (row["NAME"].ToString().StartsWith("S")) { style.Fill = Brushes.Yellow; return style; } // If geometry is a (multi)polygon and the area of the polygon is less than 30, make it cyan else if (row.Geometry is IMultiPolygon && (row.Geometry as IMultiPolygon).Area < 30 || row.Geometry is IPolygon && (row.Geometry as IPolygon).Area < 30) { style.Fill = Brushes.Cyan; return style; } else //None of the above -> Use the default style return null; }
在通過第一篇的簡單學習以後,咱們開始瞭解一些稍微有點兒意思的東西,進一步掌握和學習利用sharpmap進行開發的技巧。
此次,咱們主要是跟你們一塊兒學習一下如何根據地圖上的一個點,來查詢這個點所在的對象的信息,並顯示到點擊的位置。這很是有用,好比說一個想把一個房子顯示在地圖上,咱們用鼠標一點,便知道這個房子裏住的什麼人,幹什麼的,以及其它相關信息。
一樣的,咱們仍是使用sharpmap提供的ajax控件,環境和第一篇如出一轍。可是這裏,咱們要引用一個叫作NetTopologySuite的類庫。它常常和SharpMap一塊兒使用,此次咱們只使用其中的一個小部分,廢話很少說,開始作。
這裏咱們使用asp.net ajax 1.0,首先引用了dll,而且拖上scripmanager並設置爲EnablePageMethods=true,這樣咱們就能夠在頁面中寫靜態方法來實現AJAX。
在MapClicked方法(AjaxMapControl控件提供的方法,直接寫在js中便可,表示單擊的時候發生一些事情)中,咱們調用咱們寫的js,根據兩個點來返回一個字符串。這個字符串就是拼好的html,直接顯示出來。
這個方法裏面的SharpMap_GetRelatiovePosition和 SharpMap_PixelToMap方法根據鼠標在屏幕上的座標計算出鼠標點在地圖上的座標,再調用咱們本身寫的GetData方法便可。在GetData方法中,咱們使用了PageMethods來調用一個後臺方法,並返回一個字符串。
PageMethods.GetData(x, y, GetDataSuccess);
而後,在GetDataSuccess中調用一個寫好的用來顯示這些返回數據的方法(此方法來自網絡,js源碼以下)。
須要指出的是,這個效果須要作一些初始化的工做:
<div id="toolTipLayer" style="position:absolute;visibility: hidden;z-index:10000">
</div>
<script type="text/javascript">
initToolTips();
</script>
這樣,咱們在前臺的工做就基本完成了。
固然,若是想要更好看一些,再寫一個css幫助從後臺傳來的html進行淡化。
.clarity
{
filter:alpha(opacity=80,Style=0);
}
OK,如今轉去後臺。
在根據兩個點查詢對象數據時,咱們首先要初始化須要初始化shapefile,也就是你要查詢的那個層的數據源。
new SharpMap.Data.Providers.ShapeFile(filepath true);
而後遍歷shapefile裏面的每個feature,對比傳入的點和feature所在的Geometry,若是傳入的點在feature所在Geometry以內(within方法)的話,就讀取當前feature的一個attribute(一般是某個業務對象的ID),這樣,根據這個ID就能取到業務對象的值,而後Build一下HTML,返回就OK了。主要代碼以下:
這裏把sharpfile的Geometry都轉換成了NTS 的,這樣,使用NTS的Within方法進行比較。sharpmap本身的方法在個人測試中是不能用的,但願你們在使用過程當中作些嘗試,看看是不是我本身的代碼有問題,總之,我是用的NTS。
到這裏,咱們就實現了根據點來查詢對象數據的功能,咱們只須要在shapefile中存儲一個attribute(好比對象的ID),而後取出來顯示出去就OK了。
同理的,咱們也能夠實現根據一個用戶ID來找到這個對象在地圖中的位置,並顯示在地圖中間。
代碼以下:
找到這個點以後,設置一下控件的地圖的中心點,就OK了。
ajaxMap.Map.Center = pCenter;
雖然東西很簡單,可是仍是費了我不少功夫。很大一部分緣由是由於sharpmap本身提供的方法不太完善,致使不少時間花費在了追蹤問題上。不過這種追蹤對理解開源的代碼也是頗有好處的。
在這個例子中,我使用了遍歷地圖中全部feature的方法來定位一個對象,這樣很是的耗費資源,效率並很差。若是地圖對象比較少還能夠,一旦超過必定的數量級,可能會出現性能問題。之後我會在這個基礎上進行改進,利用其它方法來實現這個功能(事實上我已經進行了一些嘗試,只是尚未成功。若是有人成功了,但願給我一些建議,謝謝)。
今天就到這裏,感謝你們的關注,但願多多拍磚,共同進步。
在下一篇中,我將和你們共同窗習關於根據attribute的值來填充地圖上對象的顏色,設置他們的樣式以及一些有趣的小玩意兒。但願你們繼續關注,謝謝。
天天學一天,天天都會進步一點兒。
我寫的東西內容淺顯,但願能給初學者一些幫助。至於深刻研究sharpmap和GIS技術的大牛,請不吝賜教,給咱們這些菜鳥多一些指導。
今天咱們接着來聊sharpmap的基本使用技巧,根據attribute來填充地圖對象的顏色,讓用戶更清晰的看到重點的業務對象對應在地圖上的表示,以及如何自定義label層的顯示內容,字體的大小等。因此,今天的主題主要是自定義:自定義theme,自定義label以及label字體。
首先,咱們要爲地圖填充上不一樣的色彩,讓他們看起來五光十色,容易分辨。好比河流和湖泊要填成藍色,草地要填充上綠色,房子要填充上白色,道路要填充上青色等等。怎麼作呢?很簡單,先看下代碼:
SharpMap.Rendering.Thematics.CustomTheme iTheme = new SharpMap.Rendering.Thematics.CustomTheme(GetMyStyle);
在初始化Map的時候,加上上面的一行代碼。它定義了一個自定義的Theme對象,這個對象的構造函數須要傳入一個咱們本身寫的方法(委託),這個方法裏面具體說明了這個 theme是如何定義的,方法代碼以下:
這段簡單代碼你們都看得懂,這個委託定義須要傳入一個FeatureDataRow,它的做用就是在初始化地圖的過程當中,每處理一個對象,都要到這個方法中來考察一下feature的值是多少以決定具體要填充哪些顏色。在這裏,當status爲available時,就填充黃色,不然就填充綠色。定義的VectorStyle用來返回給地圖。是否是很簡單呢?
地圖填充完了,咱們要在上面顯示出到底他們是什麼。在第一篇中,咱們已經能夠把對象的一個屬性顯示出來,可是當地圖擴大到必定比例時,僅僅顯示名字這一種信息已經不足以知足用戶的須要了。好比說一棟房子,在很遠處看它時,咱們只須要看到他的顏色就好了。可是當咱們離的很近的時候,難道看到的是全白色嗎?顯然不是,咱們還能夠看到門牌號,窗戶上的貼紙以及其它詳細信息。地圖也同樣,當比例尺改變之後,應該有更詳細的信息被列出來。老規矩,先貼代碼:
SharpMap.Layers.LabelLayer myLabel = new SharpMap.Layers.LabelLayer("labels");
myLabel .DataSource = myLayer.DataSource;
myLabel.LabelStringDelegate= new SharpMap.Layers.LabelLayer.GetLabelMethod(GetLabelString);
在這裏,首先定義了一個label(就像在初始化地圖裏同樣,或者就在初始化地圖裏作),而後把你所要顯示的圖層的數據源賦值給這個label的數據源,接着爲label層的LabelStringDelegate指定一個方法(這個方法傳入一個FeatureDataRow,返回一個字符串),最後去實現這個方法,代碼以下:
代碼簡單的要死,再也不詳述,值得注意的是:若是要換行,請使用「\r\n」, 這裏不支持html拼的字符串。哈,又解決一個問題。爽吧?
而後,新的問題又來了,字體一直都是那麼大,或者一直都是那麼小,這可怎麼辦呢?看起來也至關不舒服啊。若是字體能隨着比例尺的變化而變化就行了。這個沒問題,咱們立刻就搞定它。看代碼:
這個方法傳入了一個Zoom值和一個ILayer,沒有返回值,直接修改ILayer就能夠了。
相信你們都看得懂吧?值得注意的問題是:AjaxMap上面的map對象有個屬性叫作zoomAmount,這是個javascript的屬性須要在前臺指定,它說明了地圖放大或縮小的比例尺倍數。Demo中是在RadioButtonList的ListItem中指定的。這個過程是這樣的:當點擊Zoom In這個button,自動執行了一段javascript:
ajaxMapObj.disableClickEvent(); ajaxMapObj.zoomAmount = 3;
而後當咱們點擊地圖,click事件已經被禁止,系統刷新地圖,此時在handler裏接受到了地圖的新的參數(zoom等),而後從新繪製了地圖。因此,咱們在handler裏取得zoom參數,而且使用GetLayerByName(「」)方法來取得label層
ChangeFontSize(Zoom, map.GetLayerByName("mylabels"));
這樣,就實現了字體隨着比例尺變化兒變化。有同窗可能問:那如何讓label的內容隨着比例尺變化而變化呢?只須要把剛纔那句話
myLabel.LabelStringDelegate= new SharpMap.Layers.LabelLayer.GetLabelMethod(GetLabelString);
放到相應的if。。。else語句裏就好了。簡單吧?
今天就到這裏。
這些都是些小技巧,在大牛眼裏也許不值一提,可是我但願能給初學者帶來一些幫助,但願你們工做愉快,每天好心情。
最後歡迎拍磚。