Question

我正在尝试使用该地点的平面图像制作配送中心的地图。我需要能够放大和缩小以保持良好的图像质量。到目前为止，我一直在使用Leaflet绘制Map和MapTiler来创建一个瓦片架构，使得可以在没有任何质量损失和良好性能的情况下进行缩放。

我已经完成了所有设置和工作，但我需要我的Tile Layer中心与地图中心相匹配。无论我做什么，Tile Layer的左上角总是从Map的（0,0）坐标开始。

例如，在缩放级别3，我的图像是1536x1280px，所以当谈到绝对像素坐标时，左上角应该是地图的坐标（-768,640）。

这是我的主要脚本：

var map = L.map('map',{
    crs: L.CRS.Simple,  
    center:[0,0]
}).setView([0,0],3);

//mapHeight and mapWidth are the pixel dimensions of the flat image at max zoom level.
//In this case it's 6144x4608px. By default the tiles size is 256x256px.

var southWest = map.unproject([ 0, mapHeight], getMaxZoom());
var northEast = map.unproject([ mapWidth, 0 ], getMaxZoom());
var mapBounds = new L.LatLngBounds(southWest, northEast);

L.tileLayer('tile/{z}/{x}/{y}.png',{
    minZoom: 2,
    maxZoom: 5,
    noWrap:true,        
    bounds:mapBounds
}).addTo(map);

我搞乱了中心，setView和bounds，但没有成功地让Tile Layer移动。

Leaflet的文档可以在http://leafletjs.com/reference.html

找到

如果可以，请帮助我。谢谢。

Answer 1

在Leaflet中，tile坐标与内部机制紧密绑定 - 像素坐标。

对于每个缩放级别，LatLng中的坐标被投影到CRS坐标（EPSG：4326→EPSG：地球地图为3857，L.CRS.Simple地图为垂直翻转），然后是CRS坐标通过取决于缩放级别的因子来缩放以给出像素坐标。使用这些像素坐标绘制图层（图块，标记等）。

对于“普通”图块（GridLayer和TileLayer），图块模板网址上的{x}和{y}字段只是像素坐标除以瓷砖尺寸。像素[0, 0]处的256像素图块将具有图块[0, 0]，像素[512, 256]处的图块将具有[2, 1]等等。

但是，如果您阅读L.TileLayer.WMS的代码，则会注意到图块网址不一定取决于图块坐标。

回到你的问题。您可以使用L.TileLayer.WMS的相同策略来克服它：覆盖getTileUrl方法，例如：

var t = L.tileLayer(…);

t.getTileUrl = function(coords) {
   var myZ = coords.z;
   var myX = coords.x + (8 * Math.pow(2, myZ - 3)); 
   var myY = coords.y + (6 * Math.pow(2, myZ - 3)); 

   return '/tile/' + myZ + '/' + myX + '/' + myY + '.png';
}

代码很简单（我没有费心去做数学，以便适合他们应该的地方），但这应该会让你走上正轨。

实现相同目标的另一种方法是根据L.CRS创建自定义L.CRS.Simple，该LatLng应用翻译转换以在src/geo/crs/CRS.Simple.js和CRS坐标。如果传单回购中的src/geometry/Transformation.js和public class StormTopology { public static void main(String[] args) throws Exception { //Topo test /zkroot test if (args.length == 4) { System.out.println("started"); BrokerHosts hosts = new ZkHosts("localhost:2181"); SpoutConfig kafkaConf1 = new SpoutConfig(hosts, args[1], args[2], args[3]); kafkaConf1.zkRoot = args[2]; kafkaConf1.useStartOffsetTimeIfOffsetOutOfRange = true; kafkaConf1.startOffsetTime = kafka.api.OffsetRequest.LatestTime(); kafkaConf1.scheme = new SchemeAsMultiScheme(new KryoScheme()); KafkaSpout kafkaSpout1 = new KafkaSpout(kafkaConf1); System.out.println("started"); ShuffleBolt shuffleBolt = new ShuffleBolt(args[1]); AnalysisBolt analysisBolt = new AnalysisBolt(args[1]); TopologyBuilder topologyBuilder = new TopologyBuilder(); topologyBuilder.setSpout("kafkaspout", kafkaSpout1, 1); //builder.setBolt("counterbolt2", countbolt2, 3).shuffleGrouping("kafkaspout"); //This is for field grouping in bolt we need two bolt for field grouping or it wont work topologyBuilder.setBolt("shuffleBolt", shuffleBolt, 3).shuffleGrouping("kafkaspout"); topologyBuilder.setBolt("analysisBolt", analysisBolt, 5).fieldsGrouping("shuffleBolt", new Fields("trip")); Config config = new Config(); config.registerSerialization(VehicleTrip.class, VehicleTripKyroSerializer.class); config.setDebug(true); config.setNumWorkers(1); LocalCluster cluster = new LocalCluster(); cluster.submitTopology(args[0], config, topologyBuilder.createTopology()); // StormSubmitter.submitTopology(args[0], config, // builder.createTopology()); } else { System.out .println("Insufficent Arguements - topologyName kafkaTopic ZKRoot ID"); } }中的代码对您有意义，我建议您尝试这种方法。

将图块层的中心与Leaflet上的Map的中心匹配

1 个答案: