Newer
Older
AegisforEcosystem / Map / birder / atlas / js / pointmapset.js
@KAOKA Daisuke KAOKA Daisuke on 12 May 2022 4 KB js wo henkou
function myInit() {
    var gsi = L.tileLayer('//cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="https://maps.gsi.go.jp">国土地理院地図</a> contributors'
      });
    var osm = L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
       attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      });
    var Bing = new L.BingLayer("AvRR1iCvcIBp2R9fSTjK7FSHYDT0zpGCWT9PoyO7gHt9nEFBOcROZuuTnXjhWOig",
      {type: "Road", culture: "ja"});
    var BingAir = new L.BingLayer("AvRR1iCvcIBp2R9fSTjK7FSHYDT0zpGCWT9PoyO7gHt9nEFBOcROZuuTnXjhWOig",
      {type: "Aerial", culture: "ja"});
    var WithLabels = new L.BingLayer("AvRR1iCvcIBp2R9fSTjK7FSHYDT0zpGCWT9PoyO7gHt9nEFBOcROZuuTnXjhWOig",
      {type: "AerialWithLabels", culture: "ja"});
    var LabelsOnDe = new L.BingLayer("AvRR1iCvcIBp2R9fSTjK7FSHYDT0zpGCWT9PoyO7gHt9nEFBOcROZuuTnXjhWOig",
      {type: "AerialWithLabelsOnDemand", culture: "ja"});
  
    var map = L.map('mapset', {zoomControl: false });
    gsi.addTo(map);
    map.setView([38.8675, 139.8190], 12);
  
    var baseMaps = {
      "地理院地図" : gsi,
      "オープンストリートマップ"  : osm,
      "BingMap" : Bing,
      "BingMap衛星写真" : BingAir,
      "BingMap地名あり" : WithLabels,
      "BingMap地名+" : LabelsOnDe
    };
  
    var preserve = L.geoJSON(areawild, {
      color: 'green',
      weight: 3,
      fill: true,
      fillcolor: '#32cd32',
      opacity: 0.5
    });
  
    var vcon = L.icon({
      iconUrl: '../material/vcon.png',
      iconSize: [28,31],
      iconAnchor: [14,31],
    })
  
    var vrmarker = L.geoJSON(vrpoint, { 
      pointToLayer: function (feature, latlng) {
      return L.marker(latlng, {
        icon: vcon
        });
      },
      onEachFeature: function(feature, layer) {
        if(feature.properties && feature.properties.popupContent){
                layer.bindPopup(feature.properties.popupContent);
            }
        }
      }).addTo(map);
    
    preserve.addTo(map);
    vrmarker.addTo(map);
    
    var overlay = {
      "WildlifePreserveArea": preserve,
      "VirtualRealityPoint": vrmarker
    };
    
    var layctrl = L.control.layers(baseMaps, overlay).addTo(map);
    L.control.zoom({ position: 'topleft' }).addTo(map);
    L.control.scale({ position: 'bottomright' }).addTo(map);
    
    map.on('mousemove', onMapMousemove)
    var laloinfo = L.control({ position: "bottomleft" });
    laloinfo.onAdd = function (map) {
      this.ele = L.DomUtil.create('div', "infostyle");
      this.ele.id = "latlondiv";
      this.ele.style.visibility = "hidden";
      this.ele.onmousemove = function (e) { e.stopPropagation() };
      return this.ele;
    };
    laloinfo.addTo(map);
  
    var lg = L.featureGroup();
    lg.addTo(map);
  
    let urlbase = "https://www.yatex.org/gitbucket/SKIP/bird-2021/raw/master/geo-material"
  
    function addPoly(pat) {
      var reg = new RegExp(pat);
      console.log("SEARCH: "+pat);
      for (let l of lg.getLayers()) lg.removeLayer(l);
      layctrl.removeLayer(lg, pat);
      layctrl.addOverlay(lg, pat);
      lg.name = 'habitat';
      
      var areafiles = ["mori", "kawa", "city", "park", "yoshi", "tanbo", "hatake", "kaigan", "minato"];
      
      for (let m of areafiles) {
        fetch(urlbase + "/" + m + ".geojson").then((resp) => { //Bpart
          console.log("Loading "+m+", "+resp.ok);
          if (resp.ok) return resp.text();
          throw new Error();
        }).then((txt) => {
          if (!txt) return;
          let j = JSON.parse(txt);
          let name = j.features[0].properties.name;
          if (name && name.match(reg))
          lg.addLayer(L.geoJSON(j, {
              style: function (feature) {
                  return {
                    color: feature.properties['color'],
                    weight: feature.properties['weight'],
                    opacity: feature.properties['opacity'],
                    fillColor: feature.properties['fillColor'],
                    fillOpacity: feature.properties['fillOpacity']
                  }
                },
              onEachFeature: function onEachFeature(
              feature,layer
              ){
                console.log('attention!!')
                if(feature.properties && feature.properties.popupContent){
                  layer.bindPopup(feature.properties.popupContent);
                }
              }
            }).addTo(map));
        })
      }
    }
    document.getElementById("seeker").addEventListener("click",(e)=>{
      addPoly(document.getElementById("keyword").value);
    });
  }
  
  function onMapMousemove(e) {
    var box = document.getElementById("latlondiv");
    var llnum = "緯度:" + e.latlng.lat.toFixed(6) + "<br>" +
                "経度:" + e.latlng.lng.toFixed(6);
                box.innerHTML = llnum;
                box.style.visibility = "visible";
  };
  
  document.addEventListener("DOMContentLoaded", myInit, false);