在不使用 WebGL 的情况下创建具有倾斜视图的地图？

Question

我想创建一个地图查看器，它可以从某个角度查看地图。如果角度为 90 度（如 google 地图），如何创建它是显而易见的。但是，我想要一个小于 90 和 的角度而不使用 WebGL。像这样：

也许有一些解决方案、技巧和技巧可以使用 CSS 或 canvas 来做到这一点？谢谢！

Answer 1

仅用于 JavaScript 按钮和 window 边缘导航。需要对您的屏幕显示进行一些配置：只需找到以 Adjust

开头的推荐

var mapWidth = -4500 + 900, // #Adjust: the same as #second width
    mapHeight = -2234 + 600, // #Adjust: the same as #second height
    $map;

function moveScreen(dx, dy) {
  var positionX = $map.css("backgroundPositionX"),
      positionY = $map.css("backgroundPositionY");

  positionX = parseInt(positionX.substring(0, positionX.length - 2)) + dx;
  positionY = parseInt(positionY.substring(0, positionY.length - 2)) + dy;

  if (positionX < mapWidth) {
    positionX = mapWidth;
  }
  if (positionX > 0) {
    positionX = 0;
  }
  if (positionY < mapHeight) {
    positionY = mapHeight;
  }
  if (positionY > 0) {
    positionY = 0;
  }

  $map.css("backgroundPositionX", positionX + "px");
  $map.css("backgroundPositionY", positionY + "px");
}

$(document).ready(function(){
  $map = $("#second");

  var moverLeft = null, moverUp = null, moverRight = null, moverDown = null;
  var clearMover = function(code) {
    if (code == 37) {
      clearInterval(moverLeft);
      moverLeft = null;
    }
    if (code == 38) {
      clearInterval(moverUp);
      moverUp = null;
    }
    if (code == 39) {
      clearInterval(moverRight);
      moverRight = null;
    }
    if (code == 40) {
      clearInterval(moverDown);
      moverDown = null;
    }
  }
  var moveScreenTop = function(){
    if (moverUp == null) {
      moverUp = setInterval(function(){ moveScreen(0, 10)}, 10);
    }
  };
  var moveScreenBottom = function(){
    if (moverDown == null) {
      moverDown = setInterval(function(){ moveScreen(0, -10) }, 10);
    }
  };
  var moveScreenLeft = function(){
    if (moverLeft == null) {
      moverLeft = setInterval(function(){ moveScreen(10, 0) }, 10);
    }
  };
  var moveScreenRight = function(){
    if (moverRight == null) {
      moverRight = setInterval(function(){ moveScreen(-10, 0) }, 10);
    }
  };
  $("#button_top").hover(moveScreenTop, function(){clearMover(38);});
  $("#button_bottom").hover(moveScreenBottom, function(){clearMover(40);});
  $("#button_left").hover(moveScreenLeft, function(){clearMover(37);});
  $("#button_right").hover(moveScreenRight, function(){clearMover(39);});
  $("#button_left_top").hover(function(){moveScreenLeft(); moveScreenTop();}, function(){clearMover(37);clearMover(38)});
  $("#button_right_top").hover(function(){moveScreenRight(); moveScreenTop();}, function(){clearMover(39);clearMover(38)});
  $("#button_right_bottom").hover(function(){moveScreenRight(); moveScreenBottom();}, function(){clearMover(39);clearMover(40)});
  $("#button_left_bottom").hover(function(){moveScreenLeft(); moveScreenBottom();}, function(){clearMover(37);clearMover(40)});
  $(document).keyup(function(e){
    clearMover(e.which);
  });
  $(document).keydown(function(e){
    if (e.which == 37) {
      moveScreenLeft();
    }
    if (e.which == 38) {
      moveScreenTop();
    }
    if (e.which == 39) {
      moveScreenRight();
    }
    if (e.which == 40) {
      moveScreenBottom();
    }
  });
});

body {
  margin: 0;
  overflow: hidden;
}

#first {
        /* Adjust perspective for your screen */
        -moz-perspective: 600px;
        -moz-perspective-origin: 50%;
        -webkit-perspective: 600px;
        -webkit-perspective-origin: 50%;
        perspective: 600px;
        perspective-origin: 50%;
        width: 100%;
        height: 100%;
    }

    #second {
        margin: 0 auto;
        /* Adjust width and height for your screen */
        width: 900px;
        height: 600px;
        background: url("http://img2.wikia.nocookie.net/__cb20131223222429/althistory/images/archive/b/bb/20140706210315!World_Map_(Ranjit_Singh_Lives).png") 0px 0px;

        /* Adjust translateZ for your screen */
        -moz-transform-style: preserve-3d;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-transform: translateZ(260px) rotateX( 20deg );
        -moz-transform: translateZ(260px) rotateX( 20deg );
        transform: translateZ(260px) rotateX( 20deg );
    }

.button_edge, .button_corner {
  opacity: 0.1;
  background-color: #999999;
  position: fixed;
}

#button_top {
  height: 30px;
  left: 30px;
  right: 30px;
  top: 0px;
}

#button_bottom {
  height: 30px;
  left: 30px;
  right: 30px;
  bottom: 0px;
}

#button_left {
  width: 30px;
  left: 0px;
  top: 30px;
  bottom: 30px;
}

#button_right {
  width: 30px;
  right: 0px;
  top: 30px;
  bottom: 30px;
}


.button_corner {
  width: 30px;
  height: 30px;
}

#button_left_top {
  left: 0px;
  top: 0px;
}

#button_right_top {
  right: 0px;
  top: 0px;
}

#button_right_bottom {
  right: 0px;
  bottom: 0px;
}

#button_left_bottom {
  left: 0px;
  bottom: 0px;
}
.tip {
  opacity: 0.9;
  color: white;
  background-color: #666666;
  padding: 10px;
  font-size: 14px;
  width: 200px;
  position: fixed;
  left: 45%;
  bottom: 50px;
}
.tip:hover {opacity: 0.2;}

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

<div id="first">
  <div id="second"></div>
</div>
<div class="button_edge" id="button_top"></div>
<div class="button_edge" id="button_bottom"></div>
<div class="button_edge" id="button_left"></div>
<div class="button_edge" id="button_right"></div>
<div class="button_corner" id="button_left_top"></div>
<div class="button_corner" id="button_right_top"></div>
<div class="button_corner" id="button_right_bottom"></div>
<div class="button_corner" id="button_left_bottom"></div>
<div class="tip">Use arrow buttons or mouse for navigation</div>

P.S.:当然这不是最终版本：它需要自动调整用户的屏幕，但我喜欢现在的版本）。

在不使用 WebGL 的情况下创建具有倾斜视图的地图？

Creating a map with inclined view without using WebGL?

html

javascript

css

plugins

canvas