OSM在开发中的应用

最新推荐文章于 2020-01-28 11:39:43 发布

开发者的将来

最新推荐文章于 2020-01-28 11:39:43 发布

阅读量1.1k

点赞数

分类专栏： OpenStreetMap 文章标签： asp.net javascript OpenStreetMap Mark Line

本文链接：https://blog.csdn.net/oFuHuaDeRenSheng/article/details/26167479

版权

OpenStreetMap 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

近期由于实验室项目的要求，需要在客户端中使用离线地图，经过反复查找资料，终于在网上找到了OSM，因为它的开源性，受到了广大开发爱好者的推崇，当然我也是其中之一。废话不说了，直入正题啊。。。

第一步、架设一台离线地图服务器

关于这一步，网上已经有很多高手贴出了搭建教程，我相信这对于大家应该不是难题，在这里就不多描述了。关于搭建地图服务器，给大家几个比较给力的网站，当然要以外文网站为主，中文网站为辅....

中文网站：http://blog.csdn.net/goldenhawking/article/category/1232382

http://blog.csdn.net/scy411082514/article/category/1130386

外文网站：http://switch2osm.org/serving-tiles/

架设好之后所达到的效果应该是在一个局域网之内在不联网的情况下实现离线地图的访问。

第二步、在ASP.NET中对离线地图进行二次开发

（1）、首先下载Openlayers相关的JS库，这个大家应该知道怎么下载吧。在我的CSDN里面有免费的下载资源，欢迎大家下载....然后再前台页面中加载js库

（2）、加载完js库之就要对我们所加载的离线地图进行实例化了

显示位置设置:

</body>

你所达到的效果应该是这样的：

第三步、后台数据的加载，气泡的显示，气泡点击事件，以及位置之间的连线，时间有限，直接上代码了....上面的几个代码片在下边都有体现.

<%@ Page Language="C#" MasterPageFile="MasterPage.master" AutoEventWireup="true" CodeFile="GuijiMess.aspx.cs" Inherits="main_NoteList" Theme="mta" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<script type="text/javascript">
    changePageTitle("显示历史轨迹");
</script>
<script src="../OpenLayers/OpenLayers.js" type="text/javascript"></script>
    <script src="../OpenLayers/OpenStreetMap.js" type="text/javascript"></script>
    <link href="../OpenLayers/theme/default/style.css" rel="stylesheet" type="text/css" />
     <script type="text/javascript">
         var lat = 32.07386;
         var lon = 118.77132;
         var zoom = 13;
         var map;
         function init() {
             map = new OpenLayers.Map("map", {
                 controls: [
                    new OpenLayers.Control.Navigation(),
                    new OpenLayers.Control.PanZoomBar(),
                    new OpenLayers.Control.Permalink(),
                    new OpenLayers.Control.ScaleLine({ geodesic: true }),
                    new OpenLayers.Control.Permalink('permalink'),
                    new OpenLayers.Control.LayerSwitcher(),
                    new OpenLayers.Control.Attribution()],
                 maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34),
                 maxResolution: 156543.0339,
                 numZoomLevels: 19,
                 units: 'm',
                 projection: new OpenLayers.Projection("EPSG:900913"),
                 displayProjection: new OpenLayers.Projection("EPSG:4326")
             });
             var newLayer = new OpenLayers.Layer.OSM("OSM Tiles", "http://192.168.0.87/osm_tiles2/${z}/${x}/${y}.png", { numZoomLevels: 19, transitionEffect: "resize" });
             map.addLayer(newLayer);
             //地图显示图标
             var markers = new OpenLayers.Layer.Markers("Markers");
             map.addLayer(markers);

             var size = new OpenLayers.Size(21, 25);
             var offset = new OpenLayers.Pixel(-(size.w / 2), -size.h);
             var lonLat1, popupContentHTML, popupClass;
             var newPoint;
             var gridview = document.getElementById("<%=PositionData.ClientID%>");
             var pointList = [];
             //在IE里执行代码
             if (gridview) {
                 var rows = gridview.rows;
                 for (var i = 1; i < rows.length; i++) {
                     var sid = rows[i].cells[1].innerText;
                     var temperature = rows[i].cells[2].innerText;
                     var pluse = rows[i].cells[3].innerText;
                     var breath = rows[i].cells[4].innerText;
                     var recordTime = rows[i].cells[5].innerText;
                     var lnt1 = rows[i].cells[6].innerText;
                     var lan1 = rows[i].cells[7].innerText;
                     var warn = rows[i].cells[8].innerText;
                     if (warn=="1") {
                         var icon = new OpenLayers.Icon('../images/2.png', size, offset);
                     }
                     else if (warn >"1") {
                         var icon = new OpenLayers.Icon('../images/1.png', size, offset);
                     }
                     lonLat1 = new OpenLayers.LonLat(lnt1, lan1);

                     newPoint = new OpenLayers.Geometry.Point(lnt1, lan1);
                     newPoint.transform(
                               new OpenLayers.Projection("EPSG:4326"),
                               new OpenLayers.Projection("EPSG:900913")
                                       );
                     //划线代码
                     pointList.push(newPoint);
                     lonLat1.transform(map.displayProjection, map.getProjectionObject())
                     popupContentHTML = "<b>士兵编号： " + sid + "</b><br><b>士兵体温： " + temperature + "</b><br><b>士兵血氧：" + pluse + "</b><br><b>士兵心率： " + breath + "</b><br><b>记录时间：<br> " + recordTime + "</b><br><b>报警类别： " + warn + "</b>";
                     popupClass = OpenLayers.Popup.Anchored;
                     addMarker(markers, icon, lonLat1, popupClass, popupContentHTML, true);
                 }
                AddLine(pointList);
             }
             if (!map.getCenter()) {
                 var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
                 map.setCenter(lonLat, zoom);
             }
         }
         function addMarker(markerName, icon, ll, popupClass, popupContentHTML, closeBox, overflow) {
             var feature = new OpenLayers.Feature(markerName, ll, { icon: icon.clone() });
             feature.closeBox = closeBox;
             feature.popupClass = popupClass;
             feature.data.popupContentHTML = popupContentHTML;
             feature.data.overflow = (overflow) ? "auto" : "hidden";
             var marker = feature.createMarker();
             var markerClick = function (evt) {
                 if (this.popup == null) {
                     this.popup = this.createPopup(this.closeBox);
                     this.popup.setBackgroundColor("#E2E7EB");
                     this.popup.setBorder("1px #0066ff solid");
                     map.addPopup(this.popup);
                     this.popup.show();
                 } else {
                     this.popup.toggle();
                 }
                 currentPopup = this.popup;
                 OpenLayers.Event.stop(evt);
             };
             marker.events.register("mousedown", feature, markerClick);
             markerName.addMarker(marker);
         }
         function AddLine(PointList) {
             //线路样式
             var style_green = {
                 strokeColor: "#00FF00",
                 strokeWidth: 3,
                 strokeDashstyle: "dashdot",
                 pointRadius: 6,
                 pointerEvents: "visiblePainted"
             };
             var vector = new OpenLayers.Layer.Vector("Line");
             var line = new OpenLayers.Geometry.LineString(PointList);
             vector.addFeatures([new OpenLayers.Feature.Vector(line, null, style_green)]);
             map.addLayers([vector]);
         }
         function CountDistance() {
             //计算两点之间的距离
             var distance = 0.0;
             var Point1 = new OpenLayers.Geometry.Point(113.689, 35.68);
             var Point2 = new OpenLayers.Geometry.Point(114.698, 36.256);
             var dx2 = Math.pow(Point1.x - Point2.x, 2);
             var dy2 = Math.pow(Point1.y - Point2.y, 2);
             distance = Math.sqrt(dx2 + dy2);
         }
    </script>
<style>
.hidden{display:none;}
</style>
<body οnlοad="init()">
<div align="center">
    <asp:Label ID="Label1" runat="server" Text="请输入士兵的ID："></asp:Label>
    <asp:TextBox ID="TextBox1" runat="server" Width="53px"></asp:TextBox>
    <asp:Label ID="Label2" runat="server" Text="查询起始时间："></asp:Label>
    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
    <asp:Label ID="Label3" runat="server" Text="查询终止时间："></asp:Label>
    <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
    <asp:Button ID="Button1" runat="server" Text="显示轨迹" οnclick="Button1_Click"/>
    <br />
    <asp:Label ID="Label4" runat="server" ForeColor="Red"></asp:Label>
</div>
<div id="map" style="width: 750px; height: 410px; border: 3px solid #ccc"></div>
    <asp:GridView ID="PositionData" runat="server"
        AutoGenerateColumns="False" DataSourceID="SqlDataSource" Height="16px"
        Width="746px" DataKeyNames="id,sid">
        <Columns>
            <asp:BoundField DataField="id" HeaderText="id" SortExpression="id"
                InsertVisible="False" ReadOnly="True" >
            <FooterStyle CssClass="hidden" />
            <HeaderStyle CssClass="hidden" />
            <ItemStyle CssClass="hidden" />
            </asp:BoundField>
            <asp:BoundField DataField="sid" HeaderText="sid" SortExpression="sid"
                ReadOnly="True">
            <FooterStyle CssClass="hidden" />
            <HeaderStyle CssClass="hidden" />
            <ItemStyle CssClass="hidden" />
            </asp:BoundField>
            <asp:BoundField DataField="temperature" HeaderText="temperature"
                SortExpression="temperature" >
             <FooterStyle CssClass="hidden" />
            <HeaderStyle CssClass="hidden" />
            <ItemStyle CssClass="hidden" />
            </asp:BoundField>
            <asp:BoundField DataField="pluse" HeaderText="pluse" SortExpression="pluse" >
            <FooterStyle CssClass="hidden" />
            <HeaderStyle CssClass="hidden" />
            <ItemStyle CssClass="hidden" />
            </asp:BoundField>
            <asp:BoundField DataField="breath" HeaderText="breath"
                SortExpression="breath" >
             <FooterStyle CssClass="hidden" />
            <HeaderStyle CssClass="hidden" />
            <ItemStyle CssClass="hidden" />
            </asp:BoundField>
            <asp:BoundField DataField="recordTime" HeaderText="recordTime"
                SortExpression="recordTime" >
             <FooterStyle CssClass="hidden" />
            <HeaderStyle CssClass="hidden" />
            <ItemStyle CssClass="hidden" />
            </asp:BoundField>
            <asp:BoundField DataField="lat" HeaderText="lat" SortExpression="lat" >
            <FooterStyle CssClass="hidden" />
            <HeaderStyle CssClass="hidden" />
            <ItemStyle CssClass="hidden" />
            </asp:BoundField>
            <asp:BoundField DataField="lnt" HeaderText="lnt" SortExpression="lnt" >
            <FooterStyle CssClass="hidden" />
            <HeaderStyle CssClass="hidden" />
            <ItemStyle CssClass="hidden" />
            </asp:BoundField>
            <asp:BoundField DataField="warn" HeaderText="warn" SortExpression="warn" >
            <FooterStyle CssClass="hidden" />
            <HeaderStyle CssClass="hidden" />
            <ItemStyle CssClass="hidden" />
            </asp:BoundField>
        </Columns>
    </asp:GridView>
     <asp:SqlDataSource ID="SqlDataSource" runat="server"
        ConnectionString="<%$ ConnectionStrings:db_testConnectionString %>"
        SelectCommand="SELECT [id], [sid], [temperature], [pluse], [breath], [recordTime], [lat], [lnt], [warn] FROM [tb_sensorData] ORDER BY [recordTime]">
    </asp:SqlDataSource>
</body>
</asp:Content>