Feature Edit

<!--
  示例：要素编辑
  要点：draggable 标记改位置、侧栏表单改属性、FeatureGroup 导出 GeoJSON
  依赖：Leaflet 1.9.4 · 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/leaflet@1.9.4/dist/leaflet.css">
<style>
  html,body{height:100%;margin:0}
  body{font:13px/1.6 -apple-system,"Segoe UI","PingFang SC",sans-serif;overflow:hidden}
  #map{position:absolute;inset:0}
  .panel{position:absolute;top:12px;right:12px;width:236px;z-index:600;
    background:#fff;border-radius:6px;box-shadow:0 4px 16px rgba(0,0,0,.18);
    padding:12px;font-size:12px;color:#58606e}
  .panel h3{margin:0 0 8px;font-size:13px;color:#16181d}
  .panel label{display:block;margin-bottom:8px}
  .panel input,.panel select{width:100%;box-sizing:border-box;margin-top:3px;padding:4px 6px;
    font:inherit;border:1px solid #ccd1d9;border-radius:4px;background:#fff;color:#16181d}
  .panel .row{display:flex;gap:6px;margin-top:6px}
  .panel button{flex:1;font:inherit;font-size:11px;padding:4px 6px;border-radius:4px;cursor:pointer;
    border:1px solid #ccd1d9;background:#fff;color:#16181d}
  .panel button:hover{background:#eef0f3}
  .panel button.primary{background:#1f5fd0;border-color:#1f5fd0;color:#fff}
  .panel button.primary:hover{background:#1a4fb0}
  .panel pre{margin:8px 0 0;max-height:120px;overflow:auto;background:#f6f7f9;border-radius:4px;
    padding:6px;font:11px/1.5 Consolas,monospace;color:#3b4350;white-space:pre-wrap}
  .pin{width:15px;height:15px;border-radius:50%;border:2px solid #fff;
    box-shadow:0 0 0 1px rgba(0,0,0,.25)}
  .pin.sel{box-shadow:0 0 0 3px rgba(31,95,208,.45)}
</style>
</head>
<body>
<div id="map"></div>
<div class="panel">
  <h3>要素属性</h3>
  <label>名称<input id="name" value=""></label>
  <label>类别
    <select id="cat">
      <option value="station">站点</option>
      <option value="shop">商铺</option>
      <option value="risk">隐患点</option>
    </select>
  </label>
  <div class="row">
    <button class="primary" id="apply">保存</button>
    <button id="del">删除</button>
  </div>
  <div class="row">
    <button id="add">新增要素</button>
    <button id="dump">导出 GeoJSON</button>
  </div>
  <pre id="json">未选择要素</pre>
</div>
<script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
(function () {
  'use strict';

  var map = L.map('map', { center: [39.907359, 116.391263], zoom: 12 });

  L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', {
    maxZoom: 19,
    attribution: 'Tiles © Esri'
  }).addTo(map);

  var COLORS = { station: '#1f5fd0', shop: '#c2410c', risk: '#a16207' };
  var NAMES = { station: '站点', shop: '商铺', risk: '隐患点' };

  var group = L.featureGroup().addTo(map);
  var selected = null;
  var adding = false;

  function icon(color, isSel) {
    return L.divIcon({
      className: '',
      html: '<div class="pin' + (isSel ? ' sel' : '') + '" style="background:' + color + '"></div>',
      iconSize: [15, 15],
      iconAnchor: [7.5, 7.5]
    });
  }

  function makeMarker(lat, lng, props) {
    props = props || { name: '新要素', kind: 'station' };
    var marker = L.marker([lat, lng], {
      draggable: true,
      icon: icon(COLORS[props.kind], false)
    }).addTo(group);

    marker.properties = props;
    marker.bindTooltip(props.name, { direction: 'top', offset: [0, -10] });

    marker.on('click', function () { select(marker); });
    marker.on('dragstart', function () { select(marker); });
    marker.on('dragend', function () {
      var ll = marker.getLatLng();
      marker.properties.moved = true;
      refreshJson();
      console.log('新位置', ll.lat.toFixed(5), ll.lng.toFixed(5));
    });

    return marker;
  }

  function select(marker) {
    if (selected === marker) return;
    if (selected) selected.setIcon(icon(COLORS[selected.properties.kind], false));

    selected = marker;
    marker.setIcon(icon(COLORS[marker.properties.kind], true));
    document.getElementById('name').value = marker.properties.name;
    document.getElementById('cat').value = marker.properties.kind;
    refreshJson();
  }

  function refreshJson() {
    var out = document.getElementById('json');
    if (!selected) {
      out.textContent = '未选择要素';
      return;
    }
    var ll = selected.getLatLng();
    out.textContent = JSON.stringify({
      type: 'Feature',
      properties: selected.properties,
      geometry: { type: 'Point', coordinates: [Number(ll.lng.toFixed(6)), Number(ll.lat.toFixed(6))] }
    }, null, 2);
  }

  /* 初始三个要素 */
  makeMarker(39.9147, 116.4106, { name: '王府井站', kind: 'station' });
  makeMarker(39.8994, 116.3975, { name: '前门商铺', kind: 'shop' });
  makeMarker(39.9097, 116.3742, { name: '西单隐患点', kind: 'risk' });

  document.getElementById('apply').addEventListener('click', function () {
    if (!selected) return;
    selected.properties.name = document.getElementById('name').value.trim() || '未命名';
    selected.properties.kind = document.getElementById('cat').value;
    selected.setIcon(icon(COLORS[selected.properties.kind], true));
    selected.setTooltipContent(selected.properties.name);
    refreshJson();
  });

  document.getElementById('del').addEventListener('click', function () {
    if (!selected) return;
    group.removeLayer(selected);
    selected = null;
    document.getElementById('name').value = '';
    refreshJson();
    console.log('剩余要素', group.getLayers().length);
  });

  document.getElementById('add').addEventListener('click', function () {
    adding = !adding;
    this.textContent = adding ? '点击地图落点…' : '新增要素';
    map.getContainer().style.cursor = adding ? 'crosshair' : '';
  });

  map.on('click', function (e) {
    if (!adding) return;
    adding = false;
    document.getElementById('add').textContent = '新增要素';
    map.getContainer().style.cursor = '';
    select(makeMarker(e.latlng.lat, e.latlng.lng));
  });

  document.getElementById('dump').addEventListener('click', function () {
    var fc = group.toGeoJSON(6);
    var layers = group.getLayers();
    /* 标记的自定义属性不会自动进入 GeoJSON，按图层顺序补回 */
    fc.features.forEach(function (f, i) {
      if (layers[i] && layers[i].properties) f.properties = L.extend({}, layers[i].properties);
    });
    document.getElementById('json').textContent = JSON.stringify(fc, null, 2);
    console.log('要素总数', fc.features.length);
    selected = null;
  });
})();
</script>
</body>
</html>