查看“︁茄”︁的源代码

<html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>SVG GeoJSON 示例</title>
<style>
  svg {
    border: 1px solid #ccc;
    width: 600px;
    height: 400px;
  }
  #tooltip {
    position: absolute;
    background: #fff;
    border: 1px solid #aaa;
    padding: 4px 8px;
    border-radius: 4px;
    display: none;
    pointer-events: none;
    font-size: 14px;
  }
  svg path {
    fill: #cce5ff;
    stroke: #333;
    cursor: pointer;
    transition: fill 0.2s;
  }
  svg path:hover {
    fill: orange;
  }
</style>
</head>
<body>

<svg id="map"></svg>
<div id="tooltip"></div>

<script>
// 模拟 GeoJSON 数据（两块行政区）
const geojson = {
  "type": "FeatureCollection",
  "features": [
    { "type": "Feature", "properties": { "Name": "区A" },
      "geometry": { "type": "Polygon", "coordinates": [[[0,0],[0,50],[50,50],[50,0],[0,0]]] }
    },
    { "type": "Feature", "properties": { "Name": "区B" },
      "geometry": { "type": "Polygon", "coordinates": [[[60,10],[60,60],[110,60],[110,10],[60,10]]] }
    }
  ]
};

const svg = document.getElementById('map');
const tooltip = document.getElementById('tooltip');

// 简单投影函数：将 GeoJSON 坐标映射到 SVG 像素
function project(coord) {
  const scale = 5; // 放大倍数
  const xOffset = 50;
  const yOffset = 50;
  const [x, y] = coord;
  return [(x*scale + xOffset), (400 - (y*scale + yOffset))]; // SVG y 轴向下
}

geojson.features.forEach(f => {
  const path = document.createElementNS('http://www.w3.org/2000/svg','path');
  const coords = f.geometry.coordinates[0].map(c => project(c).join(',')).join('L');
  path.setAttribute('d', 'M' + coords + 'Z');
  path.setAttribute('data-name', f.properties.Name);
  svg.appendChild(path);

  // 鼠标事件
  path.addEventListener('mousemove', e => {
    tooltip.style.left = (e.pageX + 10) + 'px';
    tooltip.style.top = (e.pageY + 10) + 'px';
    tooltip.innerHTML = f.properties.Name;
    tooltip.style.display = 'block';
  });
  path.addEventListener('mouseleave', () => {
    tooltip.style.display = 'none';
  });
  path.addEventListener('click', () => {
    alert('你点击了 ' + f.properties.Name);
  });
});
</script>

</body>
</html>