リーフレット - プレートキャリーとトロピカルベルト

Question

マップデザインについては、可能かどうかを調べる必要があります。

Equirectangular/Plate 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/

標的である：

• は（良好IE7）
• 正距円筒/プレートカレ投影IE8まで含むALLE現代のブラウザで動作する必要があり、
• 熱帯ベルト層
• 色：グレーの地図熱帯のベルトは
• 南極のない境界（すでに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