Geekly Articles each Day

地図上の写真の選択、キャッシュ、レンダリングの実装

この記事では、マップの特定のセクションで写真をサンプリングして表示する機能が、 gfranq.comフォトサービスでどのように実装されているかを説明することにしました。



私たちのサービスには多くの写真があり、表示ウィンドウが変更されるたびにデータベースにクエリを送信するにはリソースを大量に消費するため、すでに抽出されたデータに関する情報が保存されるセクションにマップを分割することは論理的でした。 明らかな理由から、これらのセクションは長方形です（ただし、六角形のグリッドを使用するオプションも考慮されています）。 大規模になると断面がより球体に近くなるため、球体ジオメトリの要素とそれを操作するためのツールも考慮されました。


この記事では、次の問題に対処しています。



内容



サーバー側


地理情報をサンプリングしてデータベースに保存する次の方法が考案されました。



さらに、これらの方法について詳しく説明します。


埋め込みジオタイプ


ご存知のように、SQL Server 2008では、地理およびジオメトリの種類のサポートが導入されました。これにより、ポイント、ライン、ポリゴンなどの地理情報（球体）および幾何情報（平面）を指定できます。 。 座標（ lngMin latMin ）および（ latMax lngMax ）を持つ長方形で囲まれたすべての写真を取得するには、次のクエリを使用できます。


 DECLARE @h geography; DECLARE @p geography; SET @rect = geography::STGeomFromText('POLYGON((lngMin latMin, lngMax latMin, lngMax latMax, lngMin latMax, lngMin latMin))', 4326); SELECT TOP @cound id, image75Path, geoTag.Lat as Lat, geoTag.Long as Lng, popularity, width, height FROM Photo WITH (INDEX(IX_Photo_geoTag)) WHERE @rect.STContains(geoTag) = 1 ORDER BY popularity DESC

ポリゴンは反時計回りにバイパスIX_Photo_geoTag 、空間インデックスIX_Photo_geoTagことに注意してください。これは座標によって構築されます（ところで、空間インデックスはBツリーの原理によって機能します ）。


ただし、Microsoft SQL Server 2008では、ジオタイプを持つ列がNULL値を受け入れることができる場合、空間インデックスは機能せず、複合インデックスにタイプgeographyの列を含めることができないため、この質問はstackoverflowで発生しました 。 このため、このようなクエリ（インデックスなし）のパフォーマンスは非常に低くなります。


この問題の解決策として、以下を提案できます。



地理的タイプの幅広い可能性（および、上記の例で示したような単純な選択だけでなく、距離、さまざまなポリゴンを使用することもできます）にもかかわらず、それらはプロジェクトでは使用されませんでした。


定期的なサンプル


座標（ lngMin latMin ）および（ latMax lngMax ）によって制限された領域からの写真の選択は、次のクエリを使用して簡単に実装できます。


 SELECT TOP @Count id, url, ... FROM Photo WHERE latitude > @latMin AND longitude > @lngMin AND latitude < @latMax AND longitude < @lngMax ORDER BY popularity DESC

この場合、通常の浮動小数点型であるため、 latitudeとlongitudeフィールドのインデックスを作成できることに注意してください（最初のオプションとは異なります）。 ただし、このサンプルには4つの比較があります。


ハッシュを持つ追加のテーブルを使用する


特定の領域から写真を選択する問題に対する最も最適な解決策は、次の図に示すように、各ズームの領域のハッシュを含む線をZoomsする追加のズームテーブルを作成することです。



SQLクエリは次の形式を取ります（ znは現在のズームレベルです）：


 DECLARE @hash float; SET @hash = (@latMin + 90) + (@lngMin + 180) * 180 + (@latMax + 90) * 64800 + (@lngMax + 180) * 11664000; SELECT TOP @Count id, url, ... FROM Photo WHERE id = (SELECT id FROM Zooms WHERE zn = @hash)

このアプローチの欠点は、追加のテーブルが追加のメモリ領域を占有することです。


後者の方法の利点にもかかわらず、通常の選択を行う2番目のオプションは、非常に優れたパフォーマンスを示したため、サーバーに実装されました。


マルチスレッドの写真キャッシュ


何らかの方法でデータベースから情報が抽出された後、マルチスレッドをサポートする同期オブジェクトを使用して、写真が次のようにサーバーキャッシュに配置されます。


 private static object SyncObject = new object(); ... List<Photo> photos = (List<Photo>)CachedAreas[hash]; if (photos == null) { //    ,           1 . lock (SyncObject) { photos = (List<Photo>)CachedAreas[hash]; if (photos == null) { photos = PhotoList.GetAllFromRect(latMin, lngMin, latMax, lngMax, count); //          2     . CachedAreas.Add(hash, photos, null, DateTime.Now.AddSeconds(120), Cache.NoSlidingExpiration, CacheItemPriority.High, null); } } } //   CachedAreas[hash]

このセクションでは、データベースから写真を取得してキャッシュに保存するためのサーバー機能について説明しました。 次のセクションでは、ブラウザでクライアント側で何が起こるかを説明します。


クライアント部


地図と地図上の写真を視覚化するために、Google Maps APIが使用されました。 最初に、ユーザーの地図を地理位置に対応する特定の適切な場所に移動する必要があります。


マップの初期化


マップを初期化するときに場所を決定するには、2つの方法があります。 1つ目はHTML5の機能を使用することであり、2つ目はすべての領域に対して事前に計算された座標を使用することです。


HTML5でのポジショニング


 function detectRegion() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(success); } else { map.setZoom(defaultZoom); map.setCenter(defaultPoint); } } function success(position) { ... map.setZoom(defaultZoom); map.setCenter(new google.maps.LatLng(position.coords.latitude, position.coords.longitude)); }

このアプローチの欠点は、すべてのブラウザがこのHTML5機能をサポートしているわけではなく、さらにユーザーが自分のデバイスの地理情報へのアクセスを許可しない可能性があることです。


サーバー情報を使用した場所


マップは、ソースコードの次のセクションで初期化されます。ここで、 boundsはサーバーによって返される地域（都市、地域、または国）の座標です。 おおよそのズームレベルの決定は、 getZoomFromBounds関数（ stackoverflowから借用）で指定されたアルゴリズムに従って計算されます。


 var northEast = bounds.getNorthEast(); var southWest = bounds.getSouthWest(); var myOptions = { zoom: getZoomFromBounds(northEast, southWest), center: new google.maps.LatLng((northEast.lat() + southWest.lat()) / 2, (northEast.lng() + southWest.lng()) / 2), mapTypeId: google.maps.MapTypeId.ROADMAP, minZoom: 3, maxZoom: 19 } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

 function getZoomFromBounds(ne, sw) { var GLOBE_WIDTH = 256; // a constant in Google's map projection var west = sw.lng(); var east = ne.lng(); var angle = east - west; if (angle < 0) { angle += 360; } return Math.round(Math.log($('#map_canvas').width() * 360 / angle / GLOBE_WIDTH) / Math.LN2); }

サーバーでは、リージョンはユーザーのIPに基づいて計算されます。 各地域のすべての境界座標の集計には、 google geocoding apiが使用されましたが 、このような情報をオフラインで使用することは正当ではありません。さらに、1日あたり2500件のリクエストという制限があります。 都市、地域、国ごとに、データベースから要求が生成され、目的のviewportとbounds境界が返されました。 ビューポートに完全に収まらない大きな領域でのみ異なります。 同時に、回答がエラーで返された場合は、地域の母国語または英語での記述を組み合わせた他のリクエストを使用し、{Settlement}などの部分を削除しましたhttp://maps.googleapis.com/maps/api/geocode/xml?address={},{/},{ }&sensor=false


たとえば、そのようなリクエストの場合： http : //maps.googleapis.com/maps/api/geocode/xml?address=Russia、Ivanovo％20 area、Ivanovo＆sensor = false


次の座標が返されます（フラグメント）
 ... <location> <lat>56.9951313</lat> <lng>40.9796047</lng> </location> <location_type>APPROXIMATE</location_type> <viewport> <southwest> <lat>56.9420231</lat> <lng>40.8765941</lng> </southwest> <northeast> <lat>57.0703221</lat> <lng>41.0876169</lng> </northeast> </viewport> <bounds> <southwest> <lat>56.9420231</lat> <lng>40.8765941</lng> </southwest> <northeast> <lat>57.0703221</lat> <lng>41.0876169</lng> </northeast> </bounds> ...

部分的に見える長方形の領域の計算


キャッシュ領域のサイズを計算する


したがって、前述のように、クライアントとサーバーの両方のすべての写真は長方形の領域にキャッシュされ、その開始点は任意の点（この場合、座標（0、0）の点）であり、サイズは現在の近似レベルに応じて計算されます（ズーム）次のように：


 //  ,    initMapSizeLat  initMapSizeLng var initDefaultDimX = 1000, var initDefaultDimY = 800; //     ,     . var currentDefaultDimX = 1080, var currentDefaultDimY = 500; var initMapSizeLat = 0.0003019; var initMapSizeLng = 0.00067055; //  () . var initRatio = 0.75; //               // .. initMapSizeLat  initMapSizeLng   . var initZoomSize = new google.maps.Size( initMapSizeLat / initDefaultDimX * currentDefaultDimX * initRatio, initMapSizeLng / initDefaultDimY * currentDefaultDimY * initRatio); //      ,     (     2,        1,     2 ,   -  4). function initZoomSizes() { zoomSizes = []; var coef = 1; for (var i = 21; i >= 0; i--) { zoomSizes[i] = new google.maps.Size(initZoomSize.width * coef, initZoomSize.height * coef); coef *= 2; } }

したがって、各ズームレベルで、領域内の長方形領域のサイズは、幅= 1080pxおよび高さheight = 500pxの場合、現在の表示ウィンドウから0.75^2=0.5625です。


再描画中に遅延を使用する


マップ上のすべての写真を再描画するのは非常に高速な操作ではないため（後で説明します）、ユーザーの入力後、一定の遅延を伴うことを決定しました。


 google.maps.event.addListener(map, 'bounds_changed', function () { if (boundsChangedInverval != undefined) clearInterval(boundsChangedInverval); var zoom = map.getZoom(); boundsChangedInverval = setTimeout(function () { boundsChanged(); }, prevZoom === zoom ? moveUpdateDelay : zoomUpdateDelay); prevZoom = zoom; });

部分的に見える領域の座標とハッシュの計算


前述のアルゴリズムに従って計算された座標（ latMin 、 lngMin ）と次元を持つ可視ウィンドウに重なるすべての長方形の座標とハッシュの計算は次のとおりです。



 var s = zoomSizes[zoom]; var beginLat = Math.floor((latMin - initPoint.x) / s.width) * s.width + initPoint.x; var beginLng = Math.floor((lngMin - initPoint.y) / s.height) * s.height + initPoint.y; var lat = beginLat; var lng = beginLng; if (lngMax <= beginLng) beginLng = beginLng - 360; while (lat <= maxlat) { lng = beginLng; while (lng <= maxLng) { //  lat  normalizeLng(lng)    . //    - ,        180     -180. loadIfNeeded(lat, normalizeLng(lng)); lng += s.height; } lat += s.width; } function normalizeLng(lng) { var rtn = lng % 360; if (rtn <= 0) rtn += 360; if (rtn > 180) rtn -= 360; return rtn; }

次に、各エリアに対して次の関数が呼び出され、必要に応じてサーバーにリクエストが送信されます。 ハッシュ計算式は、参照ポイントとディメンションが固定されているため、各エリアに一意の値を返します。


 function loadIfNeeded(lat, lng) { var hash = calculateHash(lat, lng, zoom); if (!(hash in items)) { //           . } else { //    . } } function calculateHash(lat, lng, zoom) { // lat: [-90..90] // lng: [-180..180] return (lat + 90) + ((lng + 180) * 180) + (zoom * 64800); }

表示された写真の再描画


すべての写真をロードまたはキャッシュから抽出した後、それらの一部を再描画する必要があります。 1か所に大量の写真、またはマーカーが蓄積されているため、それらのいくつかを非表示にすることが望まれますが、この場所にいくつの写真があるのか​​が不明確になります。 この問題を解決するため、写真を表示するマーカーと、この場所に写真があることを示すマーカーの2種類のマーカーをサポートすることにしました。 また、境界線を変更するときにすべてのマーカーが非表示になってから再表示されると、ちらつきが目立ちます。 上記の問題を解決するために、次のアルゴリズムが開発されました。


  1. すべての表示可能な写真をクライアントキャッシュからvisMarks配列に抽出します。 写真を使用したこれらの領域の計算については、前述のとおりです。
  2. 受信したマーカーを人気順に並べ替えます。
  3. markerSize 、 smallMarkerSize 、 minPhotoDistRatioおよびpixelDistance関数を使用して、オーバーラップマーカーを定義します。
  4. maxBigVisPhotosCountの数で大きなマーカーの配列を作成し、 maxBigVisPhotosCountの数で小さなマーカーの配列を作成します。
  5. bigMarksToHideを使用して、非表示にする古いマーカーを定義し、 smlMarksToHideおよびbigMarksToHideにそれらを入力します。
  6. updateMarkersVisを使用して表示する必要がある新しいマーカーの可視性とzIndex深度インデックスを更新します。
  7. addPhotoToRibbonを使用して、現在トップリボンに表示されている写真を追加します。

可視マーカー再計算アルゴリズム
 function redraw() { isRedrawing = true; var visMarker; var visMarks = []; var visBigMarks2; var visSmlMarks2; var bigMarksToHide = []; var smlMarksToHide = []; var photo; var i, j; var bounds = map.getBounds(); var northEast = bounds.getNorthEast(); var southWest = bounds.getSouthWest(); var latMin = southWest.lat(); var lngMin = southWest.lng(); var latMax = northEast.lat(); var lngMax = northEast.lng(); var ratio = (latMax - latMin) / $("#map_canvas").height(); var zoom = map.getZoom(); visMarks = []; var k = 0; var s = zoomSizes[zoom]; var beginLat = Math.floor((latMin - initPoint.x) / s.width) * s.width + initPoint.x; var beginLng = Math.floor((lngMin - initPoint.y) / s.height) * s.height + initPoint.y; var lat = beginLat; var lng = beginLng; i = 0; if (lngMax <= beginLng) beginLng = beginLng - 360; //    . while (lat <= latMax) { lng = beginLng; while (lng <= lngMax) { var hash = calcHash(lat, normLng(lng), zoom); if (!(hash in curItems)) { } else { var item = curItems[hash]; for (photo in item.photos) { if (bounds.contains(item.photos[photo].latLng)) { visMarks[i] = item.photos[photo]; visMarks[i].overlapCount = 0; i++; } } } k++; lng += s.height; } lat += s.width; } //    . visMarks.sort(function (a, b) { if (b.priority !== a.priority) { return b.priority - a.priority; } else if (b.popularity !== a.popularity) { return b.popularity - a.popularity; } else { return b.id - a.id; } }); //     ,    . var curInd; var contains; var contains2; var dist; visBigMarks2 = []; visSmlMarks2 = []; for (i = 0; i < visMarks.length; i++) { contains = false; contains2 = false; visMarker = visMarks[i]; for (j = 0; j < visBigMarks2.length; j++) { dist = pixelDistance(visMarker.latLng, visBigMarks2[j].latLng, zoom); if (dist <= markerSize * minPhotoDistRatio) { contains = true; if (contains && contains2) break; } if (dist <= (markerSize + smallMarkerSize) / 2) { contains2 = true; if (contains && contains2) break; } } if (!contains) { if (visBigMarks2.length < maxBigVisPhotosCount) { smlMarksToHide[smlMarksToHide.length] = visMarker; visBigMarks2[visBigMarks2.length] = visMarker; } } else { bigMarksToHide[bigMarksToHide.length] = visMarker; if (!contains2 && visSmlMarks2.length < maxSmlVisPhotosCount) { visSmlMarks2[visSmlMarks2.length] = visMarker; } else { visBigMarks2[j].overlapCount++; } } } //  ,     smlMarksToHide  bigMarksToHide . refreshMarkerArrays(visibleSmallMarkers, visSmlMarks2, smlMarksToHide); refreshMarkerArrays(visibleBigMarkers, visBigMarks2, bigMarksToHide); //         zIndex. var curZInd = maxBigVisPhotosCount + 1; curZInd = updateMarkersVis(visBigMarks2, bigMarksToHide, true, curZInd); curZInd = 0; curZInd = updateMarkersVis(visSmlMarks2, smlMarksToHide, false, curZInd); visibleBigMarkers = visBigMarks2; visibleSmallMarkers = visSmlMarks2; //     . trPhotosOnMap.innerHTML = ''; for (var marker in visBigMarks2) { addPhotoToRibbon(visBigMarks2[marker]); } isRedrawing = false; } function refreshMarkerArrays(oldArr, newArr, toHide) { for (var j = 0; j < oldArr.length; j++) { contains = false; var visMarker = oldArr[j]; for (i = 0; i < newArr.length; i++) { if (newArr[i].id === visMarker.id) { contains = true; break; } } if (!contains) { toHide[toHide.length] = visMarker; } } } function updateMarkersVis(showArr, hideArr, big, curZInd) { var marker; var bounds = map.getBounds(); for (var i = 0; i < showArr.length; i++) { var photo = showArr[i]; if (big) { marker = photo.bigMarker; $('#divOvlpCount' + photo.id).html(photo.overlapCount); } else { marker = photo.smlMarker; } marker.setZIndex(++curZInd); if (marker.getMap() === null) { marker.setMap(map); } } for (i = 0; i < hideArr.length; i++) { marker = big ? hideArr[i].bigMarker : hideArr[i].smlMarker; if (marker.getMap() !== null) { marker.setMap(null); marker.setZIndex(0); if (!bounds.contains(hideArr[i].latLng)) hideArr[i].priority = 0; } } return curZInd; } function addPhotoToRibbon(marker) { var td = createColumn(marker); if (isLatLngValid(marker.latLng)) { trPhotosOnMap.appendChild(td); } else { trPhotosNotOnMap.appendChild(td); if (photoViewMode == 'user') { var img = $("#photo" + marker.id).children()[0]; $('#photo' + marker.id).draggable({ helper: 'clone', appendTo: $('#map_canvas'), stop: function (e) { var mapBoundingRect = document.getElementById("map_canvas").getBoundingClientRect(); var point = new google.maps.Point(e.pageX - mapBoundingRect.left, e.pageY - mapBoundingRect.top); var latLng = overlay.getProjection().fromContainerPixelToLatLng(point); marker.latLng = latLng; marker.priority = ++curPriority; placeMarker(marker); }, containment: 'parent', distance: 5 }); } } }

地図距離


マップ上の2点間の距離をピクセル単位で取得するには、次の関数を使用します。


 var Offset = 268435456; var Radius = 85445659.4471; function pixelDistance(latLng1, latLng2, zoom) { var x1 = lonToX(latLng1.lng()); var y1 = latToY(latLng1.lat()); var x2 = lonToX(latLng2.lng()); var y2 = latToY(latLng2.lat()); return Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2)) >> (21 - zoom); } function lonToX(lng) { return Math.round(Offset + Radius * lng * Math.PI / 180); } function latToY(lat) { return Math.round(Offset - Radius * Math.log((1 + Math.sin(lat * Math.PI / 180)) / (1 - Math.sin(lat * Math.PI / 180))) / 2); }

この関数は、膨大なスタックオーバーフローでも見られました。


VKontakteのような写真で円のようにマーカーをスタイル設定するために、RichMarkerプラグインが使用され、div要素に任意のスタイルが追加されました。


おわりに


判明したように、マップ上の写真を迅速かつ正確に表示するためには、キャッシングと球体ジオメトリに関連するかなり面白くて自明でないタスクを解決する必要がありました。 使用されているすべてのメソッドが実際にプロジェクトで使用されているわけではないという事実にもかかわらず、時間は無駄になりませんでした。 経験を積むことは、他のプロジェクトで役立ちます。また、この記事を読んで掘り下げた人にとっても役に立つかもしれません。



Source: https://habr.com/ru/post/J182532/

More articles:


All Articles