OpenLayersまたはトランスポート監視サービスを行う

移動オブジェクトまたはトラッカーを制御するように設計されたモバイルデバイスの販売に関して、多くのオファーが市場に出回っています。 それらのほとんどは、特定の時間間隔後にGPRSを介して任意のWebアドレスに情報を送信する機能を備えています。 ほとんどの場合、データ転送形式は異なります。 したがって、トラッカーからデータベースにデータをダウンロードする問題は考慮しません。 データがあり、トランスポート監視サービスの作成を開始するとします。 そのようなシステムの基礎は可能性によって形成されます：

-地図とその表示の選択

-ポイントまたは画像とそれにキャプションの表示

-ポリゴンの表示と編集

-線の表示とその編集

-ポリゴン、ライン、ポイントに関連付けられたマップ情報（ツールチップ）

-小さな計算（移動距離、ポリゴンの面積、ポイントがポリゴンに属していることをカウント）

これらの機能はすべて、JavaScriptライブラリであるOpenLayersを使用して簡単に実装できます。





地図の選択と表示

これを行うには、ページ上で目的のサイズのdiv要素を作成する必要があります。 マップが表示されます。 例：

div id="map" style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;"
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

OpenLayersを接続します。

 script type="text/javascript" src="Scripts/OpenLayers.js"
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

マップオブジェクトが格納されるグローバルマップ変数を作成します。 ページ読み込みイベントで関数呼び出しを作成します。これには、マップを直接作成するためのコードがあります。 例：

 body onload="LoadMap()"
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

LoadMap関数について説明します。

 //    EPSG:900913. var maxExtent = new OpenLayers.Bounds(-20037508, -20037508, 20037508, 20037508); var restrictedExtent = maxExtent.clone(); var maxResolution = 156543.0339; //     EPSG:4326. var options = { projection: new OpenLayers.Projection("EPSG:900913"), displayProjection: new OpenLayers.Projection("EPSG:4326"), numZoomLevels: 18, maxResolution: maxResolution, maxExtent: maxExtent, restrictedExtent: restrictedExtent }; //  map = new OpenLayers.Map('map', options); //  - VirtualEarth var veroad = new OpenLayers.Layer.VirtualEarth("Virtual Earth Roads", { 'type': VEMapStyle.Road, sphericalMercator: true }); var veaer = new OpenLayers.Layer.VirtualEarth("Virtual Earth Aerial", { 'type': VEMapStyle.Aerial, hericalMercator: true }); var vehyb = new OpenLayers.Layer.VirtualEarth("Virtual Earth Hybrid", { 'type': VEMapStyle.Hybrid, sphericalMercator: true }); //  - OpenStreet var mapnik = new OpenLayers.Layer.OSM(); //       map.addControl(new OpenLayers.Control.ScaleLine()); map.addControl(new OpenLayers.Control.MousePosition()); //     OpenLayers.Map map.addLayers([ mapnik, veroad, veaer, vehyb]); //    map.addControl(new OpenLayers.Control.LayerSwitcher()); //         var point0 = new OpenLayers.Geometry.Point(37.600328, 55.574624); //      ,       . point0.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913")); //       9.    15. map.setCenter(new OpenLayers.LonLat(point0.x, point0.y), 9); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

openlayersプロジェクトサイトでは、約200の多くの例を見つけることができます。 特定のサービスからの地図の視覚化の例は、 ここで見ることができます 。 この記事のタスクのほとんどは、これらの例をカバーしています。 提示されたコードでは、Googleとyandexカードの結合はありません。これらのカードの操作にはキーが必要です。 登録し、サービスアクセスキーを取得する必要があります。その後のみ、これらのサービスに接続できます。 上記のコードの結果：



ポイントまたは画像とそのキャプションの表示

オブジェクト（ドットと写真）を保存するレイヤーを作成します。

 //    .   , ,     , (${} -   ,      ), url  ,  . var styleImage = new OpenLayers.Style( { graphicWidth: 21, graphicHeight: 25, graphicYOffset: -28, label: "${label}", externalGraphic: "http://www.openlayers.org/dev/img/marker.png", fontSize: 12 }); //labelYOffset -       var stylePoint = new OpenLayers.Style( { pointRadius: 5, strokeColor: "red", strokeWidth: 2, fillColor: "lime", labelYOffset: -16, label: "${label}", fontSize: 16 }); //   .   styleMap      .  select     . var vectorPoint = new OpenLayers.Layer.Vector("", { styleMap: new OpenLayers.StyleMap( { "default": stylePoint, "select": { pointRadius: 20} }) }); //     ,       ,         45  var vectorImage = new OpenLayers.Layer.Vector("", { styleMap: new OpenLayers.StyleMap( { "default": styleImage, "select": { rotation: 45} }) }); //    map.addLayer(vectorImage ); map.addLayer(vectorPoint );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

レイヤーが作成されます;レイヤーで機能する関数を作成します。

 //    . : , , ,  , .  ,          . function addImg(lon,lat,title,ident, layr){ var ttt = new OpenLayers.LonLat(parseFloat(lon), parseFloat(lat)); ttt.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913")); // features-   .    : , , ,  for (var k = 0; k < layr.features.length; k++) { //   features  ,       if(layr.features[k].attributes.ImgId==ident) { // move -       layr.features[k].move(ttt); layr.features[k].attributes.label=title; return false; } } var point0 = new OpenLayers.Geometry.Point(parseFloat(lon), parseFloat(lat)); point0.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913")); //   Feature   OpenLayers.Feature.Vector layr.addFeatures(new OpenLayers.Feature.Vector(point0, { label: title, name: title, ImgId: ident })); } function addPoint(lon,lat,title,ident){ var ttt = new OpenLayers.LonLat(parseFloat(lon), parseFloat(lat)); ttt.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913")); for (var k = 0; k < map.layers[5].features.length; k++) { if(map.layers[5].features[k].attributes.PointId==ident) { map.layers[5].features[k].move(ttt); map.layers[5].features[k].attributes.label=title; return false; } } var point0 = new OpenLayers.Geometry.Point(parseFloat(lon), parseFloat(lat)); point0.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913")); map.layers[5].addFeatures(new OpenLayers.Feature.Vector(point0, { label: title, name: title, PointId: ident })); } </code>       : <code> addPoint(37,55.5,' 1','1',map.layers[4]); addPoint(37,55.1,' 2','2',map.layers[4]); addImg(37,55.6,' 1','2',map.layers[5]); addImg(37,55.9,' 2','2',map.layers[5]);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

結果：



関数呼び出しが同じ画像識別子を持っているため、1つの画像のみが追加されました。 オブジェクトが移動し、名前が新しいものに変更されました。

ポリゴンの表示と編集

ポリゴン作成機能：

 //  :     ,      function addPoly(data,title,ident,layr){ var featuress = Array(); var coords = data.split(';'); for (var i = 0; i < coords.length; i++) { var d = coords[i].split(' '); var ttt = new OpenLayers.LonLat(parseFloat(d[0]), parseFloat(d[1])); var point0 = new OpenLayers.Geometry.Point(ttt.lon, ttt.lat); point0.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913")); featuress.push(point0); } //   ,     var linearRing2 = new OpenLayers.Geometry.LinearRing(featuress); var polygonFeature2 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Polygon([linearRing2]), { label: title, PolyID: ident }); layr.addFeatures(polygonFeature2); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ポリゴン描画関数を呼び出す例：

 addPoly('37 55.9;37.5 55.4;37 55','','1',map.layers[5]);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

OpenLayrsでの編集は、OpenLayers.Control.ModifyFeatureを使用して行われます。 オブジェクトを変更するレイヤーを指定して、このクラスのインスタンスを作成する必要があります。

 var modef = new OpenLayers.Control.ModifyFeature(map.layers[5]) modef.clickout = false; modef.toggle = false; modef.standalone = true; map.addControls([ modef]); modef.activate(); //   modef.selectFeature(map.layers[5].features[2]); //   var centr = map.layers[5].features[2].geometry.getCentroid() //     map.setCenter(new OpenLayers.LonLat(centr.x, centr.y));
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

編集時のポリゴンの各頂点はポイントで示され、ポイントのレイヤーにポリゴンを配置したため、このレイヤーのスタイルがそれらに適用されました。 結果：ポリゴンの頂点にある「未定義」のラベル。 これは、オブジェクトの種類ごとに個別のレイヤーを作成する方が良いという事実にもかかわらずです。 編集モードを表示する例：



編集モードの終了：

 modef.deactivate();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

行の表示と編集

既に述べたように、ポリゴンはラインから作成されるため、AddPoly関数では1つのラインを変更する必要があります。

  layr.addFeatures(polygonFeature2);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

に

 layr.addFeatures(linearRing2 );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

編集プロセスも同じです。

ツールチップ

ツールチップを実装するには、イベントハンドラーをマップに追加する必要があります。これは、クラスのインスタンスであるOpenLayers.Control.SelectFeatureです。

 var selectControl = new OpenLayers.Control.SelectFeature([map.layers[5]]); map.addControls([selectControl], { clickout: true, toggle: false, multiple: false, hover: true, toggleKey: "ctrlKey", multipleKey: "shiftKey" }); selectControl.activate();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その後、レイヤーオブジェクトのクリックが処理されます。 ポイントのサイズが大きくなり、写真が45度回転します。 ポイント選択イベントハンドラーを作成します。

 // on -    map.layers[5].events.on( { "featureselected": function (e) { var HTMLcontent; var point //     HTMLcontent = 'table style="width: 100%;" tr td    td tr table '; //getCentroid() -   ,    ,         point = new OpenLayers.LonLat(e.feature.geometry.getCentroid().x, e.feature.geometry.getCentroid().y); //OpenLayers.Popup.AnchoredBubble -  ,     OpenLayers.Popup var popup = new OpenLayers.Popup.AnchoredBubble("SDVegetationInfo", point, new OpenLayers.Size(100, 100), HTMLcontent, null, false); popup.opacity = 0.9; popup.autoSize = true; popup.setBackgroundColor("#bcd2bb"); //   map.addPopup(popup, true); } //   ,     , "featureunselected": function (e) { setTimeout('if(map.popups.length - 1>-1){map.removePopup(map.popups[map.popups.length - 1]);}', 1000); } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

移動距離、ポリゴンの面積、ポイントはポリゴンに属している

移動距離を数える

 map.layers[4].features[2].feature.geometry.getLength()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

埋め立て地

 map.layers[4].features[2].feature.geometry.getArea()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ポリゴンポイント

 map.layers[4].features[2].containsPoint(map.layers[4].features[0])
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

以前のすべてのアクションの結果は、ページで見ることができます： リンク



結論として、多くの企業がすでにOpenLayersのトラッカーを安価で簡単に作成していることに注意してください。 OpenLayersのドキュメントはこちらにあります 。