使用SVG繪制世界地圖
使用SVG繪制世界地圖有多種方法，我將介紹最實用的兩種方式，并提供完整的實現(xiàn)代碼。 這是最簡單的方法，直接使用現(xiàn)有的世界地圖SVG路徑數(shù)據(jù)。 對于更復(fù)雜的地圖，可以使用專門的JavaScript庫（如D3.js）來處理GeoJSON數(shù)據(jù)： 要創(chuàng)建真實的世界地圖，您需要獲取高質(zhì)量的地理數(shù)據(jù)： Natural Earth Data (https://www.naturalearthdata.com/) - 提供免費的矢量地圖數(shù)據(jù) OpenStreetMap (https://www.openstreetmap.org/) - 開放地理數(shù)據(jù) GeoNames (http://www.geonames.org/) - 地理數(shù)據(jù)庫 方法一適合簡單應(yīng)用和演示，使用預(yù)定義的SVG路徑 方法二適合需要精確地理數(shù)據(jù)的專業(yè)應(yīng)用，使用D3.js和GeoJSON/TopoJSON數(shù)據(jù) 您可以根據(jù)自己的需求選擇合適的方法。對于學(xué)習(xí)目的，方法一更容易實現(xiàn)；對于專業(yè)應(yīng)用，方法二更為合適。 您可以直接將上述代碼復(fù)制到HTML文件中運行，查看效果。對于方法二，如果需要完整功能，需要設(shè)置本地服務(wù)器并提供真實的地圖數(shù)據(jù)文件。方法一：使用預(yù)生成的SVG路徑數(shù)據(jù)
<!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路徑數(shù)據(jù)繪制的世界地圖示例。鼠標(biāo)懸停在不同國家上可以查看效果。</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" /> <!-- 國家路徑（簡化的世界地圖） --> <!-- 注意：這是一個簡化的示例，實際地圖需要更詳細的數(shù)據(jù) --> <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>方法二：使用JavaScript和GeoJSON數(shù)據(jù)動態(tài)生成
<!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數(shù)據(jù)創(chuàng)建更詳細的世界地圖。</p> <div id="map"></div> <div id="tooltip"></div> <div style="margin-top: 20px;"> <p><strong>說明：</strong>這個示例需要從服務(wù)器加載TopoJSON數(shù)據(jù)。在實際應(yīng)用中，您需要提供真實的地圖數(shù)據(jù)文件。</p> <p>要查看完整功能，請使用本地服務(wù)器運行此文件并提供世界地圖的TopoJSON數(shù)據(jù)。</p> </div> </div> <script> // 設(shè)置SVG尺寸 const width = 900; const height = 500; // 創(chuàng)建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); // 創(chuàng)建提示框 const tooltip = d3.select("#tooltip"); // 在實際應(yīng)用中，這里應(yīng)該加載真實的TopoJSON數(shù)據(jù) // 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"); // }); // }); // 由于無法加載外部數(shù)據(jù)，這里繪制一個簡單的地圖輪廓作為演示 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("在實際應(yīng)用中，這里將顯示從TopoJSON數(shù)據(jù)加載的世界地圖"); </script> </body> </html>如何獲取真實的地圖數(shù)據(jù)
總結(jié)
冀公網(wǎng)安備