Fork: 0
haya4 / www-root
Transfer to URL with SHA Find file
Newer
Older
www-root / coverage / fuel3.js
@hayashi hayashi on 2 Jun 2018 3 KB タイルの表示順序を未入力を強調する順序に変更した
Raw Blame History 
  1. // ===================================================================
  2. var center_lon = 140.241;   // 中心の経度（霞ヶ浦）
  3. var center_lat = 36.131;    // 中心の緯度（霞ヶ浦）
  4.  
  5. var initZoom = 11; // ズームの初期値
  6. var MinZoom  = 6;   // ズームの最小値（最も広い範囲）
  7. var MaxZoom  = 17;  // ズームの最大値（最も狭い範囲）
  8.  
  9. var initPrecision = 8; // 座標表示の小数点以下の桁数の初期値
  10. // *******************************************************************
  11.  
  12. // 表示用の view 変数の定義。
  13. const view = new ol.View({
  14.     center: ol.proj.fromLonLat([center_lon, center_lat]),
  15.     zoom: initZoom,
  16.     maxZoom: MaxZoom,
  17.     minZoom: MinZoom
  18. });
  19.  
  20. const ort = new ol.layer.Tile({
  21.     source: new ol.source.OSM(),
  22.     title: "OpenStreetMap",
  23.     visible: true
  24. });
  25. /*
  26. grayOsmLayer.on('postcompose', function(event) {
  27.     grayscale(event.context);
  28. });
  29. */
  30.  
  31. const fuel0 = new ol.layer.VectorTile({
  32.     source: new ol.source.VectorTile({
  33.         format: new ol.format.MVT(),
  34.         url: "./tiles/tileFuel0/{z}/{x}/{y}.pbf"
  35.     }),
  36.     title: "Fuel 0: 未入力",
  37.     visible: true,
  38.     opacity: 1,
  39.     style: function(feature){
  40.         return [
  41.             new ol.style.Style({
  42.                 image: new ol.style.Circle({
  43.                     radius: 8,
  44.                     fill: new ol.style.Fill({color: "#ff0000"})
  45.                 })
  46.             })
  47.         ];
  48.     }
  49. });
  50.  
  51. const fuel1 = new ol.layer.VectorTile({
  52.     source: new ol.source.VectorTile({
  53.         format: new ol.format.MVT(),
  54.         url: "./tiles/tileFuel1/{z}/{x}/{y}.pbf"
  55.     }),
  56.     title: "Fuel 1: 入力済",
  57.     visible: true,
  58.     opacity: 1,
  59.     style: function(feature){
  60.         return [
  61.             new ol.style.Style({
  62.                 image: new ol.style.Circle({
  63.                     radius: 8,
  64.                     fill: new ol.style.Fill({color: "#ffc800"})
  65.                 })
  66.             })
  67.         ];
  68.     }
  69. });
  70.  
  71. const fuel2 = new ol.layer.VectorTile({
  72.     source: new ol.source.VectorTile({
  73.         format: new ol.format.MVT(),
  74.         url: "./tiles/tileFuel2/{z}/{x}/{y}.pbf"
  75.     }),
  76.     title: "Fuel 2: 完了",
  77.     visible: true,
  78.     opacity: 1,
  79.     style: function(feature){
  80.         return [
  81.             new ol.style.Style({
  82.                 image: new ol.style.Circle({
  83.                     radius: 8,
  84.                     fill: new ol.style.Fill({color: "#00ff00"})
  85.                 })
  86.             })
  87.         ];
  88.     }
  89. });
  90.  
  91. var strokestyle = new ol.style.Style({
  92.     stroke: new ol.style.Stroke({
  93.         color: 'rgba(53, 175, 109, 0.7)',
  94.         width:  4
  95.     })
  96. });
  97.  
  98. const mapillary = new ol.layer.VectorTile({
  99.     source: new ol.source.VectorTile({
  100.         attributions: '© Mapillary',
  101.         format: new ol.format.MVT(),
  102.         tileGrid: ol.tilegrid.createXYZ({maxZoom: 22}),
  103.         tilePixelRatio: 16,
  104.         opacity: 0.7,
  105.         url: 'https://d25uarhxywzl1j.cloudfront.net/v0.1/{z}/{x}/{y}.mvt'
  106.     }),
  107.     title: "Mapillary",
  108.     visible: true,
  109.     style: strokestyle
  110. });
  111.  
  112. const map = new ol.Map({
  113.     target: "map",
  114.     controls: ol.control.defaults().extend([new ol.control.ScaleLine()]),
  115.     view: view,
  116.     layers: [ort, fuel2, fuel1, fuel0, mapillary]
  117. });