Vector Tile Info

<!--
  示例：OpenLayers 矢量瓦片属性查询
  要点：自定义 format 在页面内生成矢量瓦片，getFeaturesAtPixel 读取要素属性
  依赖：OpenLayers 10.3.1 · jsDelivr CDN
-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta name="robots" content="noindex,follow">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>矢量瓦片属性查询</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@10.3.1/ol.css">
<style>
  html,body{height:100%;margin:0}
  body{display:flex;flex-direction:column;overflow:hidden;
       font:13px/1.6 -apple-system,"Segoe UI","PingFang SC",sans-serif}
  .bar{flex:0 0 auto;padding:8px 12px;background:#f6f7f9;border-bottom:1px solid #e3e6ea;
       display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:12px;color:#58606e}
  .bar label{display:flex;gap:5px;align-items:center;cursor:pointer}
  .bar select,.bar input[type=range]{font-size:12px}
  .bar .val{font-family:ui-monospace,Consolas,monospace;color:#1f5fd0;min-width:44px}
  .bar .sep{width:1px;height:16px;background:#d8dce2}
  #map{flex:1 1 auto;min-height:0;background:#eef0f3}
  #map{position:relative}
  .vtinfo{position:absolute;right:12px;top:12px;margin:0;padding:8px 10px;max-width:280px;max-height:70%;
          overflow:auto;background:rgba(22,24,29,.88);color:#e8edf3;font:11px/1.5 ui-monospace,Consolas,monospace;
          border-radius:4px;display:none;white-space:pre-wrap;pointer-events:none}
</style>
</head>
<body>
<div class="bar">
  <span>页面内矢量瓦片</span>
  <span class="sep"></span>
  <span>悬停色块查看属性</span>
</div>
<div id="map">
  <pre id="info" class="vtinfo"></pre>
</div>
<script src="https://cdn.jsdelivr.net/npm/ol@10.3.1/dist/ol.js"></script>
<script>
(function () {
  'use strict';

  if (typeof ol === 'undefined') {
    document.getElementById('map').textContent = 'OpenLayers 加载失败，请检查能否访问 cdn.jsdelivr.net';
    return;
  }


  function tileUrl(tileCoord) {
    return 'data:application/json;charset=utf-8,' + encodeURIComponent(
      JSON.stringify({z: tileCoord[0], x: tileCoord[1], y: tileCoord[2]})
    );
  }

  function buildFeatures(info, extent) {
    var width = extent[2] - extent[0];
    var height = extent[3] - extent[1];

    function box(x1, y1, x2, y2) {
      return [
        [extent[0] + x1 * width, extent[1] + y1 * height],
        [extent[0] + x2 * width, extent[1] + y1 * height],
        [extent[0] + x2 * width, extent[1] + y2 * height],
        [extent[0] + x1 * width, extent[1] + y2 * height],
        [extent[0] + x1 * width, extent[1] + y1 * height]
      ];
    }

    var tileLabel = info.z + '/' + info.x + '/' + info.y;
    return [
      new ol.Feature({
        geometry: new ol.geom.Polygon([box(0.08, 0.16, 0.44, 0.72)]),
        name: '区块 A',
        layer: 'demo',
        tile: tileLabel,
        height: 20 + (info.x + info.y) % 40
      }),
      new ol.Feature({
        geometry: new ol.geom.Polygon([box(0.54, 0.30, 0.92, 0.84)]),
        name: '区块 B',
        layer: 'demo',
        tile: tileLabel,
        height: 40 + (info.x * 2 + info.y) % 50
      })
    ];
  }

  var tileFormat = {
    getType: function () {
      return 'arraybuffer';
    },
    readProjection: function () {
      return 'EPSG:3857';
    },
    readFeatures: function (buffer, options) {
      var info = JSON.parse(new TextDecoder().decode(buffer));
      return buildFeatures(info, options.extent);
    }
  };

  var source = new ol.source.VectorTile({
    format: tileFormat,
    tileUrlFunction: tileUrl,
    maxZoom: 14,
    transition: 0
  });

  var vectorTileLayer = new ol.layer.VectorTile({
    source: source,
    style: function (feature) {
      var height = feature.get('height');
      return new ol.style.Style({
        fill: new ol.style.Fill({
          color: height > 50 ? 'rgba(224, 106, 0, 0.55)' : 'rgba(31, 95, 208, 0.45)'
        }),
        stroke: new ol.style.Stroke({color: 'rgba(255, 255, 255, 0.8)', width: 1})
      });
    }
  });

  var map = new ol.Map({
    target: 'map',
    layers: [
      new ol.layer.Tile({source: new ol.source.XYZ({url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', attributions: 'Tiles © Esri'}), opacity: 0.4}),
      vectorTileLayer
    ],
    view: new ol.View({
      center: ol.proj.fromLonLat([116.391, 39.907]),
      zoom: 11
    })
  });

  var info = document.getElementById('info');

  map.on('pointermove', function (evt) {
    if (evt.dragging) {
      info.style.display = 'none';
      return;
    }
    var features = map.getFeaturesAtPixel(evt.pixel);
    if (!features.length) {
      info.style.display = 'none';
      return;
    }
    info.textContent = JSON.stringify(features[0].getProperties(), null, 2);
    info.style.display = 'block';
  });

  map.getTargetElement().addEventListener('pointerleave', function () {
    info.style.display = 'none';
  });

})();
</script>
</body>
</html>