LeafletJS:如何使图层不可移动? [英] LeafletJS: How to make layer not movable?

问题描述

我想制作一个简单的画布层(不是平铺的画布，而是一个大画布)，但是我找不到如何将层放置在 mapPane 之外以使其不可拖动有据可查的方式.

I'd like to make a simple canvas layer (not tiled canvases, but one big canvas), but I can not find how can I put layer outside mapPane to make it non-draggable in a documented way.

我应该使用未记录"的方法还是应该使用逆向转换"黑客?

Should I use 'non-documented' methods or should I use 'reverse-tranform' hack ?

推荐答案

如果我正确理解，您希望将自己的画布覆盖在Leaflet地图上，但不要与其他画布平移(被拖动)地图的图层，例如图块图层"或标记".

If I understand correctly, you would like to overlay your own canvas onto a Leaflet map, but so that it does not pan (is being dragged) with the rest of the map like the Tile Layers or Markers.

因此，它就像一个控件(如缩放"，图层"切换和归因控件)相对于地图容器保持在同一位置，只是它将覆盖整个地图视图端口.

Therefore it would be like a Control (like the Zoom, Layers switching and attribution Controls) that remains at the same position relative to the map container, except that it would cover the entire map view port.

您似乎已经发现，只要将元素插入

As you seem to have figured out, as soon as you insert your element into the map pane, it will move with the rest of the map elements as user drags / pans around.

因此，您可以将其简单地附加到地图容器中，作为地图窗格的兄弟:

Therefore you could simply append it into the map container, as a sibling of the map pane:

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

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

Then you need to adjust the CSS of your canvas element:

• 绝对放置
• 在其他兄弟姐妹之上(地图窗格中有一个 z-index 等于400 ，但是您可能希望保留在其他控件之下，这些控件的

• position it absolutely
• above the other siblings (the map pane has a z-index of 400, but you probably want to remain below other controls, which have a z-index of 1000)
• let mouse events go through (so that user can still use map objects like clicking on Markers, etc.)

#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);

#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;
}

<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>

这篇关于LeafletJS:如何使图层不可移动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！