我想制作一个简单的画布图层(不是平铺的画布,而是一个大画布),但是我找不到如何将图层放在{
"MyID":"@{body('Get_rows')['value'][0]['Id']}"
}
{
"MyID":"@{body('Get_rows')['value'][1]['Id']}"
}
之外,以便以文档化的方式使其不可拖动。
我应该使用'非文档'方法还是应该使用'反向转换'黑客攻击?
答案 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: '© <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;