一般的な情報
エンジンは、特別なライブラリまたはフレームワークを使用せずに開発されました。 使用されるライブラリはjQueryのみです。
マップイメージ-タイル-は、ユーティリティを使用して生成されます。 まだ最適化に対処していないため、まだ努力が必要です。
追加のツールのパネルやラベルのポップアップなどの要素を除き、すべてがCANVASに描画されます（ただし、下のリンクのデモではまだ表示されていません）。
実装
実装はモジュール式であり、その名前から明らかなように、CanvasDragger、CanvasEventer、CanvasImgLoader、CanvasMapper、CanvasMarker、CanvasMiniMapper、CanvasResizer、CanvasTools、CanvasZoomerの主要な部分で構成されています。
カードを接続するには、適切な場所html'aに次の行を書くだけで十分です。
<canvas id="map2d"></canvas>
次に、JSコードで（例として）初期化します。
$(function() { mWrap = new MapsWrapper({ mapDivId: "map2d" // ID canvas'a, }); }); MapsWrapper = function(properties) { this.initialize(properties); }; $.extend(MapsWrapper.prototype, { v2DMapDiv : null, v2DMapComponent : null, initialize: function(prop){ this.v2DMapDiv = prop.mapDivId; this.initMap(); }, initMap: function(){ var GlobalParams = { staticMapUrl: ["http://gate.looxity.ru:8088/map.html", "http://zain.looxity.ru:8088/map.html", "http://kaph.looxity.ru:8088/map.html"], initCrd : {x: 7445, y: 9925}, initZoom : 0.25, zoomList : [1, 0.5, 0.25, 0.1, 0.05, 0.025], miniMap : true, tools : {scaler: true, polygoner: true} }; this.v2DMapComponent = new CanvasMapper (this.v2DMapDiv); this.v2DMapComponent.initialize(GlobalParams); } });
パラメーターについてさらに詳しく説明します。
- staticMapUrl-マップタイルのロード元のホスト
- initCrd -Gauss-Krueger投影法の初期座標。この場合は、Manege Squareの近くにあるゼロキロメートルの道路にほぼ対応しています。
- miniMap-ミニマップモジュールの接続
- tools-追加ツールのモジュールの接続
内部力学
または、これまたはそのユーザーアクションの背後に隠されているもの。 メインイベントを見ていきましょう。
始める
マップが初期化されると、キャンバスを完全にカバーするために、表示されるタイルの数が計算されます。 キャンバスのサイズがわかっている場合、タイルサイズが256x256の場合、この操作を実行します。
動いています
さらに、マップが移動するとき（ドラッグ）、新しいタイルをロードする必要があるほどマップを移動したかどうかを確認します。 また、すべてのタイルがスコープ内にあるかどうかを確認し、そうでない場合は、「ガベージコレクター」を起動します。
unVisibleTilesCollector: function() { for(var cnt = 0; cnt < this.__TILES__.length; cnt++) { if( (this.__TILES__[cnt].canvX + this.tileSize) < 0 || this.__TILES__[cnt].canvX > this.canvas.width || this.__TILES__[cnt].canvY > this.canvas.height || (this.__TILES__[cnt].canvY + this.tileSize) < 0 ) { this.__TILES__.splice(cnt, 1); cnt--; } } }
スケーラブル（zoomIn、zoomOut）
「マウスホイール」イベントがトリガーされると、次の主なアクションが順番に発生します。
- すべてのタイルの現在の位置をコピーします
$.extend(this.__ANIM_TILES__, this.mapper.__TILES__)
- キャンバスを使用し、数学の助けを借りて、pp1で作成されたコピーからタイルが減少または増加します（マウスホイールの回転方法によって異なります）。
for(cnt; cnt < this.animSteps; cnt++){ setTimeout(function(){ _this.ctx.clearRect(0,0,_this.canvas.width,_this.canvas.height); _this.ctxMarker.clearRect(0,0,_this.canvas.width,_this.canvas.height); animScale += scale*stepScale; _this.drawAllAnimTiles(evt, { animScale: animScale, stepCurrNum: Math.round(Math.abs(animScaleStart-animScale)/stepScale), stepScale: stepScale }); }, delay*cnt); }
- 新しいタイルは、新しいスケールに応じて、ロード時に上部に重ねられます
MapsWrapper.v2DMapComponent.update()
ブラウザで作業する
作業は、FireFox、Chrome、Safari、Opera、およびIEの最新バージョンでテストされました。
まだ知らない人のために、私は再び以下を強調します。 キャンバスが使用されているため、このテクノロジーをサポートしていないすべてのブラウザーは自動的に消えます。これはIEバージョン8以下で、上記のブラウザーの非常に古いバージョンです。
カード別TODOリスト
1.マップタイルのサイズを縮小します（速度が目に見えるほど向上します）。
2.ズームスライダー。
3.マップ上のポイントに関する情報（建物の住所、座標など）を取得するためのツール。
4. ???
デモ ： share.arkada-sw.ru/canvasmap