茄：修订间差异

可视化wikitext

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

SVG GeoJSON 示例

@@ 第1行： / 第1行： @@
-<!DOCTYPE html>
+<html>
-<html lang="zh-CN">
+<html lang="zh">
 <head>
-  <meta charset="UTF-8">
+<meta charset="UTF-8">
-  <title>饶平方言地图</title>
+<title>SVG GeoJSON 示例</title>
-  <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
+<style>
-   <style>
+   svg {
-     html, body {
+    border: 1px solid #ccc;
-      height: 100%;
+    width: 600px;
-      margin: 0;
+     height: 400px;
-     }
+  }
-     #map {
+  #tooltip {
-      width: 100%;
+    position: absolute;
-      height: 600px;
+    background: #fff;
-     }
+    border: 1px solid #aaa;
-   </style>
+    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>
-  <div id="map"></div>
-  <script>
+<svg id="map"></svg>
-    // 用 fetch 加载你上传的 JSON 文件
+<div id="tooltip"></div>
-     fetch('https://lyuri.top/index.php/文件:饶平方言图.json')
-      .then(res => res.json())
+<script>
-      .then(geoJson => {
+// 模拟 GeoJSON 数据（两块行政区）
-        // 注册地图
+const geojson = {
-        echarts.registerMap('饶平', 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 轴向下
+}
-        var chart = echarts.init(document.getElementById('map'));
+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);
-        var option = {
+  // 鼠标事件
-          tooltip: {
+  path.addEventListener('mousemove', e => {
-            trigger: 'item',
+    tooltip.style.left = (e.pageX + 10) + 'px';
-            formatter: '{b}<br/>词汇数: {c}'
+    tooltip.style.top = (e.pageY + 10) + 'px';
-          },
+    tooltip.innerHTML = f.properties.Name;
-          visualMap: {
+    tooltip.style.display = 'block';
-            min: 0,
+  });
-            max: 100,
+  path.addEventListener('mouseleave', () => {
-            left: 'right',
+    tooltip.style.display = 'none';
-            top: 'bottom',
+  });
-            text: ['高','低'],
+  path.addEventListener('click', () => {
-            inRange: { color: ['#e0f3f8', '#0868ac'] },
+    alert('你点击了 ' + f.properties.Name);
-            calculable: true
+  });
-          },
+});
-          series: [{
+</script>
-            type: 'map',
-            map: '饶平',
-            roam: true,
-            label: { show: true },
-            data: [
-              {name: '汤溪镇', value: 30},
-              {name: '东山镇', value: 20},
-              {name: '平安镇', value: 50},
-              {name: '其他镇', value: 10}
-            ]
-          }]
-        };
-        chart.setOption(option);
-      })
-      .catch(err => console.error('加载 GeoJSON 出错:', err));
-  </script>
 </body>
 </html>