既然是通过canvas来绘制地图，那肯定是需要地图的数据信息的。接下来跟着我的脚步去实现这些细节。
地图数据
地图数据怎么来呢？当然是怎么简单怎么来
npm i @surbowl/world-geo-json-zh这个第三方包是简体中文 Geo JSON 世界地图，带有国家（地区）的 ISO 3166 代码、中文简称与全称。含中国南海海域十段线。
绘制地图
// 初始化地图样式var that = {bg: '#000080',// 背景颜色borderColor: '#1E90FF',// 边框颜色blurColor: '#1E90FF',// 边框模糊颜色borderWidth: 1,// 边框宽度blurWidth: 5,// 边框模糊宽度fillColor: 'rgb(30 ,144 ,255,0.3)'// 填充颜色};// 创建画布let canvas = document.createElement('canvas');canvas.width = 3600;canvas.height = 1800;let ctx = canvas.getContext('2d');//背景颜色ctx.fillStyle = that.bg;ctx.rect(0, 0, canvas.width, canvas.height);ctx.fill();//设置地图样式ctx.strokeStyle = that.borderColor;ctx.lineWidth = that.borderWidth;ctx.fillStyle = that.fillColor;if (that.blurWidth) {ctx.shadowBlur = that.blurWidth;ctx.shadowColor = that.blurColor;}// 绘制地图区域function drawRegion(ctx, c, geoInfo) {ctx.beginPath();c.forEach((item, i) => {let pos = [(item[0] + 180) * 10, (-item[1] + 90) * 10];if (i == 0) {ctx.moveTo(pos[0], pos[1]);} else {ctx.lineTo(pos[0], pos[1]);}});ctx.closePath();ctx.fill();ctx.stroke();}// 读取地图数据fetch('../node_modules/@surbowl/world-geo-json-zh/world.zh.json').then((res) => res.json()).then((geojson) => {console.log(geojson);geojson.features.forEach((a) => {if (a.geometry.type == 'MultiPolygon') {a.geometry.coordinates.forEach((b) => {b.forEach((c) => {drawRegion(ctx, c);});});} else {a.geometry.coordinates.forEach((c) => {drawRegion(ctx, c);});}});document.body.appendChild(canvas);});这样就能得到一个地图了。
