茄：修订间差异

←上一编辑

可视化wikitext

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

SVG GeoJSON 示例

@@ 第1行： / 第1行： @@
 <html>
-<div id="map" style="width:100%; height:500px;"></div>
+<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>