frogcat/20210616.md

## 20210616.md

      
    Raw
  

              20210616.md
            
          
    landform classification with fill-pattern

  
## index.html
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>landform classification with fill-pattern</title>
  <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0" />
  <link rel="stylesheet" href="https://unpkg.com/maplibre-gl@1.14.0/dist/maplibre-gl.css" />
  <script src="https://unpkg.com/maplibre-gl@1.14.0/dist/maplibre-gl.js"></script>
</head>

<body>
  <div id="map" style="position:absolute;top:0;left:0;bottom:0;right:0;"></div>
  <script>
    const createImageData = function(size, color, letter) {
      const canvas = document.createElement("canvas");
      canvas.width = canvas.height = size;
      const context = canvas.getContext("2d");
      context.fillStyle = color;
      context.fillRect(0, 0, size, size);
      context.font = `${size-1}px sans-serif`;
      context.fillStyle = "rgba(0,0,0,0.8)";
      context.fillText(letter, 0, size - 1.0);
      context.fillStyle = "rgba(255,255,255,0.8)";
      context.fillText(letter, 1, size - 0);
      context.fillStyle = color;
      context.fillText(letter, 0.5, size - 0.5);
      return context.getImageData(0, 0, size, size);
    };

    const definition = {
      "山地": "#d9cbae",
      "崖・段丘崖": "#9466ab",
      "地すべり地形": "#cc99ff",
      "台地・段丘": "#ffaa00",
      "山麓堆積地形": "#99804d",
      "扇状地": "#cacc60",
      "堤:自然堤防": "#ffff33",
      "天井川": "#fbe09d",
      "砂州・砂丘": "#ffff99",
      "凹地・浅い谷": "#a3cc7e",
      "氾濫平野": "#bbff99",
      "後背低地・湿地": "#00d1a4",
      "旧河道": "#6699ff",
      "落堀": "#1f9999",
      "河川敷・浜": "#9f9fc4",
      "水部": "#e5ffff",
      "旧水部": "#779999"
    };


    fetch("https://gsi-cyberjapan.github.io/gsivectortile-mapbox-gl-js/std.json").then(res => res.json()).then(style => {

      style.sources.v = {
        "type": "vector",
        "tiles": [
          "https://optgeo.github.io/unite-one/zxy/{z}/{x}/{y}.pbf"
        ],
        "attribution": "国土地理院ベクトルタイル提供実験",
        "minzoom": 10,
        "maxzoom": 12
      };

      style.layers = style.layers.filter(a => a["source-layer"] !== "building");

      const map = new maplibregl.Map({
        "container": "map",
        "center": [139.766168,35.704822],
        "zoom": 16.5,
        "pitch": 60,
        "bearing": -30,
        "hash": true,
        "style": style
      });

      map.on("load", function() {
        Object.keys(definition).map((key, i) => {
          const letter = key.substring(0, 1);
          map.addImage(key, createImageData(16, definition[key], letter));
          map.addLayer({
            "id": `one${i}`,
            "source": "v",
            "source-layer": "one",
            "type": "fill",
            "filter": ["==", key, ["get", "code"]],
            "paint": {
              "fill-pattern": key
            }
          }, style.layers[0].id);
        })
      });
    });
  </script>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="UTF-8">
	<title>landform classification with fill-pattern</title>
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0" />
	<link rel="stylesheet" href="https://unpkg.com/maplibre-gl@1.14.0/dist/maplibre-gl.css" />
	<script src="https://unpkg.com/maplibre-gl@1.14.0/dist/maplibre-gl.js"></script>
	</head>

	<body>
	<div id="map" style="position:absolute;top:0;left:0;bottom:0;right:0;"></div>
	<script>
	const createImageData = function(size, color, letter) {
	const canvas = document.createElement("canvas");
	canvas.width = canvas.height = size;
	const context = canvas.getContext("2d");
	context.fillStyle = color;
	context.fillRect(0, 0, size, size);
	context.font = `${size-1}px sans-serif`;
	context.fillStyle = "rgba(0,0,0,0.8)";
	context.fillText(letter, 0, size - 1.0);
	context.fillStyle = "rgba(255,255,255,0.8)";
	context.fillText(letter, 1, size - 0);
	context.fillStyle = color;
	context.fillText(letter, 0.5, size - 0.5);
	return context.getImageData(0, 0, size, size);
	};

	const definition = {
	"山地": "#d9cbae",
	"崖・段丘崖": "#9466ab",
	"地すべり地形": "#cc99ff",
	"台地・段丘": "#ffaa00",
	"山麓堆積地形": "#99804d",
	"扇状地": "#cacc60",
	"堤:自然堤防": "#ffff33",
	"天井川": "#fbe09d",
	"砂州・砂丘": "#ffff99",
	"凹地・浅い谷": "#a3cc7e",
	"氾濫平野": "#bbff99",
	"後背低地・湿地": "#00d1a4",
	"旧河道": "#6699ff",
	"落堀": "#1f9999",
	"河川敷・浜": "#9f9fc4",
	"水部": "#e5ffff",
	"旧水部": "#779999"
	};


	fetch("https://gsi-cyberjapan.github.io/gsivectortile-mapbox-gl-js/std.json").then(res => res.json()).then(style => {

	style.sources.v = {
	"type": "vector",
	"tiles": [
	"https://optgeo.github.io/unite-one/zxy/{z}/{x}/{y}.pbf"
	],
	"attribution": "国土地理院ベクトルタイル提供実験",
	"minzoom": 10,
	"maxzoom": 12
	};

	style.layers = style.layers.filter(a => a["source-layer"] !== "building");

	const map = new maplibregl.Map({
	"container": "map",
	"center": [139.766168,35.704822],
	"zoom": 16.5,
	"pitch": 60,
	"bearing": -30,
	"hash": true,
	"style": style
	});

	map.on("load", function() {
	Object.keys(definition).map((key, i) => {
	const letter = key.substring(0, 1);
	map.addImage(key, createImageData(16, definition[key], letter));
	map.addLayer({
	"id": `one${i}`,
	"source": "v",
	"source-layer": "one",
	"type": "fill",
	"filter": ["==", key, ["get", "code"]],
	"paint": {
	"fill-pattern": key
	}
	}, style.layers[0].id);
	})
	});
	});
	</script>
	</body>

	</html>