关于地图局部加载技术的原理

wenjianghe 2012-03-14 09:33:36

日前在研究类似谷歌百度电子地图的东西。有关地图局部加载技术不知道如何实现。就是当观察口内的地图被拖动后，加载空缺的部分。我现在能够处理初始化时加载地图，然后移动也没有问题。分两个层。一个层为观察口，另外一个层加载地图。当拖动地图层时，超出观察口的进行加载，实现局部加载。请知道的高手指教一下。

...全文

243 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

wenjianghe 2012-03-23

打赏
举报

发现一个开源的javascript库，可以用于开发地图叫MapEasy.我尝试测试时，在初始化地图时中心点定位有点问题。不知道怎么设置坐标，正常坐标引入无法定位。

wenjianghe 2012-03-20

打赏
举报



<html>

    <head>

        <title>Ajaxian Maps</title>

        <style type="text/css">

            h1 {

                font: 20pt sans-serif;

            }

            #outerDiv {

                height: 600px;

                width: 800px;

                border: 1px solid black;

                position: relative;

                overflow: hidden;

            }



            #innerDiv {

                position: relative;

                left: 0px;

                top: 0px;

            }

        </style>

        <script type="text/javascript">

            // constants

            var viewportWidth = 800;

            var viewportHeight = 600;

            var tileSize = 100;



            // used to control moving the map div

            var dragging = false;

            var top;

            var left;

            var dragStartTop;

            var dragStartLeft;



            function init() {

                // make inner div big enough to display the map

                setInnerDivSize('2000px', '1400px');



                // wire up the mouse listeners to do dragging

                var outerDiv = document.getElementById("outerDiv");

                outerDiv.onmousedown = startMove;

                outerDiv.onmousemove = processMove;

                outerDiv.onmouseup = stopMove;



                // necessary to enable dragging on IE

                outerDiv.ondragstart = function() { return false; }



                checkTiles();

            }



            function startMove(event) {

                // necessary for IE

                if (!event) event = window.event;



                dragStartLeft = event.clientX;

                dragStartTop = event.clientY;

                var innerDiv = document.getElementById("innerDiv");

                innerDiv.style.cursor = "-moz-grab";



                top = stripPx(innerDiv.style.top);

                left = stripPx(innerDiv.style.left);



                dragging = true;

                return false;

            }



            function processMove(event) {

                if (!event) event = window.event;  // for IE

                var innerDiv = document.getElementById("innerDiv");

                if (dragging) {

                    innerDiv.style.top = top + (event.clientY - dragStartTop);

                    innerDiv.style.left = left + (event.clientX - dragStartLeft);

                }



                checkTiles();

            }

            // START:checktiles

            function checkTiles() {

                // check which tiles should be visible in the inner div

                var visibleTiles = getVisibleTiles();



                // add each tile to the inner div, checking first to see

                // if it has already been added

                var innerDiv = document.getElementById("innerDiv");

                var visibleTilesMap = {};      //<label id="empty.map"/>

                for (i = 0; i < visibleTiles.length; i++) {  //<label id="iterate.visible.tiles"/>

                    var tileArray = visibleTiles[i];

                    var tileName = "x" + tileArray[0] + "y" + tileArray[1] + "z0";

                    visibleTilesMap[tileName] = true;

                    var img = document.getElementById(tileName); //<label id="id.attribute"/>

                    if (!img) { //<label id="id.attribute.3"/>

                        img = document.createElement("img");  //<label id="create.img"/>

                        img.src = "resources/tiles/" + tileName + ".jpg";  //<label id="tile.url"/>

                        img.style.position = "absolute";

                        img.style.left = (tileArray[0] * tileSize) + "px";

                        img.style.top = (tileArray[1] * tileSize) + "px";

                        img.setAttribute("id", tileName); //<label id="id.attribute.2"/>

                        innerDiv.appendChild(img);         //<label id="add.img"/>

                    }

                }

            }

            // END:checktiles



            function getVisibleTiles() {

                var innerDiv = document.getElementById("innerDiv");



                var mapX = stripPx(innerDiv.style.left);

                var mapY = stripPx(innerDiv.style.top);



                var startX = Math.abs(Math.floor(mapX / tileSize)) - 1;

                var startY = Math.abs(Math.floor(mapY / tileSize)) - 1;



                var tilesX = Math.ceil(viewportWidth / tileSize) + 1;

                var tilesY = Math.ceil(viewportHeight / tileSize) + 1;



                var visibleTileArray = [];

                var counter = 0;

                for (x = startX; x < (tilesX + startX); x++) {

                    for (y = startY; y < (tilesY + startY); y++) {

                        visibleTileArray[counter++] = [x, y];

                    }

                }

                return visibleTileArray;

            }





            function stopMove() {

                var innerDiv = document.getElementById("innerDiv");

                innerDiv.style.cursor = "";

                dragging = false;

            }





            function stripPx(value) {

                if (value == "") return 0;

                return parseFloat(value.substring(0, value.length - 2));

            }



            function setInnerDivSize(width, height) {

                var innerDiv = document.getElementById("innerDiv");

                innerDiv.style.width = width;

                innerDiv.style.height = height;

            }

        </script>

        <body onload="init()">

        <p>

            <h1>Ajaxian Maps</h1>

        </p>

        <div id="outerDiv">

            <div id="innerDiv">

                

            </div>

        </div>

    </body>

    </head>

</html>