传单-板卡和热带带

Question

对于地图设计，我需要找出是否可能。

是否有任何支持等距/板Carree投影的平铺服务器？另外，我需要在热带地带加一个图层。

地图示例是用一个小GeoJson文件构建的，并将热带地区作为图像追加。但是在详细的GeoJson上，我认为页面数量和性能并不理想。所以我倾向于用瓷砖。

我已经创建了一个基本代码，它显示了所需的边界。

<div id="map" style="width:512px; height: 340px;"></div>

<script>
jQuery(document).ready(function($){
    var $mapContainer = $('#map'), 
        widthToHeightRatio = 0.664;

    var map = L.map($mapContainer[0], {
        attributionControl: false,
        zoomControl: false,
        doubleClickZoom: false,
        scrollWheelZoom: false,
        boxZoom: false,
        dragging: false,
        center: [0, 0],
        zoom: 1
    });

    L.tileLayer(
        'https://stamen-tiles-{s}.a.ssl.fastly.net/toner-background/{z}/{x}/{y}.png'
    ).addTo(map);

    map.setMaxBounds([
        [75.5, -158],
        [-20, 180]
    ]);
});
</script>

JsFiddle与地图示例：https://jsfiddle.net/hieblmedia/rmd5x827/

这些目标是：

• 必须在包括IE8 (更好的IE7)在内的现代浏览器中工作。
• 等长线/板角投影，
• 热带带层，
• 颜色:在灰色和热带地带的地图
• 没有南极洲的边界(已经在摇摆不定中完成)，
• 响应性(宽度: 100%，高度:自动)，并且总是适合于调整大小的边界。

我已经搜索了很多，但我很难得到任何结果来执行所有的目标。也许唯一的办法是自己的瓷砖服务器？或者，LeafletJs只是在没有自定义映射服务的情况下执行目标的库的错误选择吗？

欢迎任何建议。提前谢谢。

Answer 1

要做到这一点，有很多方法。你提出了一个非常笼统的问题，但细节很少，所以很难提供细节。

例如，你可以：

• 创建自己的瓷砖

- Get some country boundaries or coastline definition like e.g. from [NaturalEarth data](http://www.naturalearthdata.com/downloads/)
- Create a polygon for the tropical area, and calculate the intersection of the landmass
- Use e.g. geoserver/mapserver/mapproxy/tilemill to render and serve the tiles

​

• 覆盖一些半透明多边形在热带地区。

- Use the intersection described above, or
- Hack the rendering so a custom compositing method is used between the vector data and raster tiles

​

• 在飞行中操纵瓷砖的颜色。例如，在Leaflet.TileLayer.GL中这样做如下所示： var vertexShader = attribute vec2 aVertexCoords; attribute highp vec2 aCRSCoords; attribute vec2 aTextureCoords; varying vec2 vTextureCoords; varying highp vec2 vCRSCoords; void main(void) { gl\_Position = vec4(aVertexCoords , 1.0, 1.0); vTextureCoords = aTextureCoords; vCRSCoords = aCRSCoords; } var fragmentShader = precision highp float; uniform sampler2D uTexture0; varying vec2 vTextureCoords; varying highp vec2 vCRSCoords; void main(void) { vec4 texelColour = texture2D(uTexture0, vec2(vTextureCoords.s, vTextureCoords.t)); vec4 stop; // Color stops. The alpha value represents the latitude minimum for that RGB colour stop. // Latitudes are expressed in EPSG:3875 units, not in degrees of latitude. vec4 stops[5]; stops[0] = vec4(0.444, 0.691, 1.0, -20037508); // Blue-ish north of -90 stops[1] = vec4(0.333, 0.666, 0.333, -10015051); // Green-ish north of -66.5 stops[2] = vec4(0.9, 0.75, 0.35, -2571663); // Orange-ish north of -22.5 stops[3] = vec4(0.333, 0.666, 0.333, 2571663); // Green-ish north of 22.5 stops[4] = vec4(0.444, 0.691, 1.0, 10015051); // Blue-ish north of 66.5 // Find which colour stop we want to use for (int i=0; i < 5; i++) { if (vCRSCoords.y > stops[i].a) { stop = stops[i]; } } // Multiply the black in the texel by the stop colour gl\_FragColor = vec4( vec3(1.0) - (texelColour.rgb) \* (vec3(1.0) - stop.rgb) , 1.0); } var tileSize = 256；var map = L.map('map').fitWorld()；var antitoner = L.tileLayer.gl({ vertexShader: vertexShader，fragmentShader: fragmentShader，tileUrls: fragmentShader }).addTo(map)；

您可以在http://ivansanchez.gitlab.io/Leaflet.TileLayer.GL/demo/demo-tropical.html上看到最后一个方法的工作演示。