使用SVG绘制世界地图
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SVG世界地图</title> <style> body { font-family: 'Arial', sans-serif; display: flex; flex-direction: column; align-items: center; background-color: #f0f8ff; padding: 20px; } h1 { color: #2c3e50; margin-bottom: 10px; } .container { max-width: 900px; background: white; padding: 20px; border-radius: 10px; box-shadow: 0 0 15px rgba(0,0,0,0.1); } svg { width: 100%; height: auto; border: 1px solid #ddd; background-color: #e6f7ff; } .country { fill: #6cbf84; stroke: #fff; stroke-width: 0.5; transition: fill 0.3s; } .country:hover { fill: #3d8b5f; cursor: pointer; } .ocean { fill: #a1d2e7; } .controls { margin: 15px 0; display: flex; gap: 10px; } button { padding: 8px 15px; background: #3498db; color: white; border: none; border-radius: 4px; cursor: pointer; } button:hover { background: #2980b9; } </style> </head> <body> <div> <h1>SVG世界地图</h1> <p>这是一个使用SVG路径数据绘制的世界地图示例。鼠标悬停在不同国家上可以查看效果。</p> <div> <button onclick="changeColor('green')">绿色主题</button> <button onclick="changeColor('blue')">蓝色主题</button> <button onclick="changeColor('red')">红色主题</button> </div> <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg"> <!-- 海洋背景 --> <rect x="0" y="0" width="1000" height="500" /> <!-- 国家路径（简化的世界地图） --> <!-- 注意：这是一个简化的示例，实际地图需要更详细的数据 --> <path d="M150,200 Q200,180 250,200 T350,200 Q400,220 450,200 T550,200 Q600,180 650,200 T750,200 Q800,220 850,200 L850,300 Q800,280 750,300 T650,300 Q600,320 550,300 T450,300 Q400,280 350,300 T250,300 Q200,320 150,300 Z" data-name="North America" /> <path d="M200,350 Q250,330 300,350 T400,350 Q450,370 500,350 T600,350 Q650,330 700,350 L700,400 Q650,380 600,400 T500,400 Q450,420 400,400 T300,400 Q250,380 200,400 Z" data-name="South America" /> <path d="M500,150 Q550,130 600,150 T700,150 Q750,170 800,150 L800,250 Q750,230 700,250 T600,250 Q550,270 500,250 T400,250 Q350,230 300,250 T200,250 Q150,270 100,250 L100,150 Q150,130 200,150 T300,150 Q350,170 400,150 T500,150" data-name="Eurasia" /> <path d="M750,350 Q800,330 850,350 L850,400 Q800,380 750,400 Z" data-name="Australia" /> <path d="M300,100 Q350,80 400,100 T500,100 Q550,120 600,100 T700,100 Q750,80 800,100 L800,120 Q750,100 700,120 T600,120 Q550,140 500,120 T400,120 Q350,100 300,120 Z" data-name="Africa" /> </svg> <div id="country-info" style="margin-top: 15px; padding: 10px; background: #f9f9f9; border-radius: 5px;"> 悬停或点击国家查看信息 </div> </div> <script> // 添加国家交互功能 document.querySelectorAll('.country').forEach(country => { country.addEventListener('mouseover', function() { document.getElementById('country-info').textContent = `您正在查看: ${this.getAttribute('data-name')}`; }); country.addEventListener('click', function() { alert(`您点击了: ${this.getAttribute('data-name')}`); }); }); // 更改地图颜色主题 function changeColor(theme) { let color; switch(theme) { case 'green': color = '#6cbf84'; break; case 'blue': color = '#5d9cec'; break; case 'red': color = '#e74c3c'; break; default: color = '#6cbf84'; } document.querySelectorAll('.country').forEach(country => { country.style.fill = color; }); } </script> </body> </html><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>使用D3.js的SVG世界地图</title> <script src="https://d3js.org/d3.v7.min.js"></script> <script src="https://unpkg.com/topojson@3.0.2/dist/topojson.min.js"></script> <style> body { font-family: 'Arial', sans-serif; display: flex; justify-content: center; align-items: center; flex-direction: column; background-color: #f5f5f5; padding: 20px; } .container { max-width: 900px; background: white; padding: 20px; border-radius: 10px; box-shadow: 0 0 15px rgba(0,0,0,0.1); } h1 { color: #2c3e50; } svg { width: 100%; height: auto; border: 1px solid #ddd; background-color: #e6f7ff; } .country { fill: #6cbf84; stroke: #fff; stroke-width: 0.5; transition: fill 0.3s; } .country:hover { fill: #3d8b5f; cursor: pointer; } .tooltip { position: absolute; padding: 10px; background: rgba(0, 0, 0, 0.8); color: white; border-radius: 5px; pointer-events: none; display: none; } </style> </head> <body> <div> <h1>使用D3.js的SVG世界地图</h1> <p>这个示例展示了如何使用D3.js和TopoJSON数据创建更详细的世界地图。</p> <div id="map"></div> <div id="tooltip"></div> <div style="margin-top: 20px;"> <p><strong>说明：</strong>这个示例需要从服务器加载TopoJSON数据。在实际应用中，您需要提供真实的地图数据文件。</p> <p>要查看完整功能，请使用本地服务器运行此文件并提供世界地图的TopoJSON数据。</p> </div> </div> <script> // 设置SVG尺寸 const width = 900; const height = 500; // 创建SVG元素 const svg = d3.select("#map") .append("svg") .attr("width", width) .attr("height", height); // 添加投影 const projection = d3.geoNaturalEarth1() .scale(width / 6.5) .translate([width / 2, height / 2]); // 添加路径生成器 const path = d3.geoPath().projection(projection); // 创建提示框 const tooltip = d3.select("#tooltip"); // 在实际应用中，这里应该加载真实的TopoJSON数据 // d3.json("world-110m.json").then(function(worldData) { // const countries = topojson.feature(worldData, worldData.objects.countries); // // svg.selectAll(".country") // .data(countries.features) // .enter().append("path") // .attr("class", "country") // .attr("d", path) // .on("mouseover", function(event, d) { // tooltip.style("display", "block") // .html(`<strong>${d.properties.name}</strong>`) // .style("left", (event.pageX + 10) + "px") // .style("top", (event.pageY - 25) + "px"); // }) // .on("mouseout", function() { // tooltip.style("display", "none"); // }); // }); // 由于无法加载外部数据，这里绘制一个简单的地图轮廓作为演示 const graticule = d3.geoGraticule(); svg.append("path") .datum(graticule) .attr("class", "graticule") .attr("d", path) .style("fill", "none") .style("stroke", "#ccc") .style("stroke-width", 0.5); // 添加示例文本说明 svg.append("text") .attr("x", width/2) .attr("y", height/2) .attr("text-anchor", "middle") .style("font-size", "16px") .text("在实际应用中，这里将显示从TopoJSON数据加载的世界地图"); </script> </body> </html>
冀公网安备