茄：修订间差异

←上一编辑

可视化wikitext

2025年8月13日 (三) 19:29的最新版本

SVG GeoJSON 示例

@@ 第3行： / 第3行： @@
 <head>
 <meta charset="UTF-8">
-<title>交互 SVG 示例</title>
+<title>SVG GeoJSON 示例</title>
 <style>
+  svg {
+    border: 1px solid #ccc;
+    width: 600px;
+    height: 400px;
+  }
    #tooltip {
      position: absolute;
@@ 第15行： / 第20行： @@
      font-size: 14px;
    }
-   svg circle {
+   svg path {
+    fill: #cce5ff;
+    stroke: #333;
      cursor: pointer;
      transition: fill 0.2s;
    }
-   svg circle:hover {
+   svg path:hover {
      fill: orange;
    }
@@ 第26行： / 第33行： @@
 <body>
-<svg width="400" height="300" style="border:1px solid #ccc;">
+<svg id="map"></svg>
-  <!-- 圆形标记 -->
-  <circle cx="100" cy="150" r="30" fill="blue" data-info="这里是圆形 🐱"></circle>
-  <circle cx="250" cy="100" r="40" fill="green" data-info="这里是大圆 🌸"></circle>
-  <circle cx="300" cy="200" r="25" fill="red" data-info="这里是小圆 🌟"></circle>
-</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');
-const circles = document.querySelectorAll('svg circle');
-circles.forEach(circle => {
+// 简单投影函数：将 GeoJSON 坐标映射到 SVG 像素
-   circle.addEventListener('mousemove', e => {
+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 = circle.getAttribute('data-info');
+     tooltip.innerHTML = f.properties.Name;
      tooltip.style.display = 'block';
    });
-   circle.addEventListener('mouseleave', () => {
+   path.addEventListener('mouseleave', () => {
      tooltip.style.display = 'none';
+  });
+  path.addEventListener('click', () => {
+    alert('你点击了 ' + f.properties.Name);
    });
 });