LeafletJS:如何使图层不可移动?

时间:2018-03-09 00:00:34

标签: leaflet

我想制作一个简单的画布图层(不是平铺的画布,而是一个大画布),但是我找不到如何将图层放在{ "MyID":"@{body('Get_rows')['value'][0]['Id']}" } { "MyID":"@{body('Get_rows')['value'][1]['Id']}" } 之外,以便以文档化的方式使其不可拖动。

我应该使用'非文档'方法还是应该使用'反向转换'黑客攻击?

1 个答案:

答案 0 :(得分:2)

如果我理解正确,你想将自己的画布叠加到Leaflet地图上,但是它不会像平铺图层或标记那样平移(被拖动)地图的其余部分。

因此它就像一个控件(如缩放,图层切换和属性控件)保持在相对于地图容器的相同位置,除了它将覆盖整个地图视图端口。

正如您似乎已经想到的那样,只要您将元素插入map pane,它就会随着用户拖动/平移而与其余的地图元素一起移动。

因此,您只需将其作为地图窗格的 sibling 附加到地图容器中即可:

// http://leafletjs.com/reference-1.3.0.html#map-getcontainer
map.getContainer().appendChild(myCanvasElement);

然后你需要调整canvas元素的CSS:

  • 绝对定位
  • 在其他兄弟姐妹之上(地图窗格中有z-index of 400,但您可能希望保持在其他控件之下,这些控件有z-index of 1000
  • 让鼠标事件通过(这样用户仍然可以使用地图对象,例如点击标记等)。
#myCanvasElement {
  position: absolute;
  /* Let mouse events go through to reach the map underneath */
  pointer-events: none;
  /* Make sure to be above the map pane (.leaflet-pane) */
  z-index: 450;
}

一个有效的代码段示例:



var map = L.map('map').setView([48.86, 2.35], 11);

var myCanvasElement = document.getElementById('myCanvasElement');

// Adjust the canvas size, assuming we want to cover the entire map.
var mapSize = map.getSize(); // http://leafletjs.com/reference-1.3.0.html#map-getsize
myCanvasElement.width = mapSize.x;
myCanvasElement.height = mapSize.y;

// Move the canvas inside the map container.
var mapContainer = map.getContainer(); // http://leafletjs.com/reference-1.3.0.html#map-getcontainer
mapContainer.appendChild(myCanvasElement);

// Draw on the canvas...
var context = myCanvasElement.getContext('2d');
context.strokeStyle = 'rgb(0, 0, 200)';
var w = 200;
var h = 100;
var x = (mapSize.x - w) / 2;
var y = (mapSize.y - h) / 2;
context.strokeRect(x, y, w, h);

L.marker([48.86, 2.35]).bindPopup('Paris').addTo(map);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
&#13;
#myCanvasElement {
  position: absolute;
  /* Let mouse events go through to reach the map underneath */
  pointer-events: none;
  /* Make sure to be above the map pane (.leaflet-pane) */
  z-index: 450;
}
&#13;
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>

<div id="map" style="height: 180px"></div>

<canvas id="myCanvasElement"></canvas>
&#13;
&#13;
&#13;