Question

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

是否有支持Equirectangular / Plate Carree投影的平铺服务器？另外，我需要在热带上添加一层。

使用一个小的GeoJson文件构建Map示例，并将热带附加为图像。但在详细的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 with map example：https://jsfiddle.net/hieblmedia/rmd5x827/

目标是：

必须在现代浏览器中工作，包括IE8（更好的IE7）
Equirectangular / Plate Carree投影，
热带带层，
颜色：
没有南极洲的边界（已经在jsfiddle中完成），
响应性（宽度：100％，高度：自动）并始终适合调整大小的边界。

我已经搜索了很多，但我很难获得任何结果来执行所有目标。也许唯一的方法是自己的瓷砖服务器？或者LeafletJs只是错误的库选择，无需自定义地图服务即可执行目标？

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

Answer 1

有很多方法可以实现这一目标。你提出一个非常笼统的问题，但是很难提供具体细节。

您可以，例如：

创建自己的图块
- 获取某些国家/地区边界或海岸线定义，例如来自NaturalEarth data
- 为热带区域创建一个多边形，并计算大陆的交点
- 使用例如geoserver / mapserver / mapproxy / tilemill渲染和提供瓷砖
在热带地区覆盖一些半透明多边形。
- 使用上述交集或
- 破解渲染，以便在矢量数据和栅格图块之间使用自定义合成方法

动态操作瓷砖的颜色。例如，在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: ['http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png']
        }).addTo(map);

您可以在http://ivansanchez.gitlab.io/Leaflet.TileLayer.GL/demo/demo-tropical.html

查看最后一种方法的工作演示

传单 - 板式Carree和热带

1 个答案: