请教一个JS地图绘制的问题
本帖最后由 bhbhxy 于 2021-3-30 16:19 编辑在网上找了一段地图绘制的代码，由于本人地理不是很好，有一部分不太理解，问题标注在注释里面了：
测试代码不知道为什么发不了文字链接 https://codepen.io/TroyBug/pen/mdRrYLj
代码效果在最后
可能由于网络原因这个地址访问会不正常，所以把脚本部分贴出来：
var width = 1140;
var height = 640;
var range = 15; //这个变量的作用？
var chinaGeometry = null;
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var averageX = 109.0139239130436; //这个数值是怎么来的？
var averageY = 34.44264656750581; //同上
var mapColor = "#040809";
var mapLineColor = "#5890D5";
var requestAnimationFrameName = null;
var centerColor = "rgba(236,210,32,1)";
canvas.width = width;
canvas.height = height;
$("#canvas").css({
marginTop: "-" + (height / 2 - 20) + "px",
marginLeft: "-" + width / 2 + "px"
});
getChinaGeometry();
// 绘制地图
function drawShapeOptionFun() {
chinaGeometry.features.forEach(function(chinaItem, chinaIndex) {
var length = chinaItem.geometry.coordinates.length;
var multipleBool = length > 1 ? true: false;
chinaItem.geometry.coordinates.forEach(function(chinaChildItem, wordItemIndex) {
if (multipleBool) {
if (chinaChildItem.length && chinaChildItem.length == 2) {
drawCanvasFun(chinaChildItem);
}
if (chinaChildItem.length && chinaChildItem.length > 2) {
chinaChildItem.forEach(function(countryItem, countryIndex) {
drawCanvasFun(countryItem);
});
}
} else {
var countryPos = null;
if (chinaChildItem.length > 1) {
countryPos = chinaChildItem;
} else {
countryPos = chinaChildItem;
}
if (countryPos) {
drawCanvasFun(countryPos);
}
}
});
});
}
// 绘制平面
function drawCanvasFun(itemPosition) {
ctx.fillStyle = mapColor;
ctx.strokeStyle = mapLineColor;
ctx.beginPath();
ctx.moveTo(width / 2 + (itemPosition - averageX) * range, //这里为什么要减去averageX，计算原理是什么
height / 2 - (itemPosition - averageY) * range //问题同上
);
itemPosition.forEach(function(item) {
ctx.lineTo(width / 2 + (item - averageX) * range, //这里为什么要减去averageX，计算原理是什么
height / 2 - (item - averageY) * range //问题同上
);
});
ctx.fill();
ctx.stroke();
ctx.closePath();
}
// 获取地理信息
function getChinaGeometry() {
$.ajax({
type: "GET",
url: "https://cdn.huanggefan.cn/geojson/china.json",
async: false,
success: function(response) {
chinaGeometry = response;
}
});
}
function run() {
cancelAnimationFrame(requestAnimationFrameName);
ctx.clearRect(0, 0, width, height);
drawShapeOptionFun();
requestAnimationFrameName = requestAnimationFrame(run);
}
run();
我猜测上面标注的代码是处理地图偏移的，但是为什么这么写就不清楚了，求大神指导一下，感谢~ 本帖最后由 king1299 于 2021-3-30 16:28 编辑
var averageX = 109.0139239130436; //这个数值是怎么来的？var averageY = 34.44264656750581; //同上
这两个应该经纬度吧 king1299 发表于 2021-3-30 16:27
var averageX = 109.0139239130436; //这个数值是怎么来的？var averageY = 34.44264656750581; //同上
...
感觉上是经纬度，但是这两个数怎么来的呢，而且这个变量名是平均的意思 var range = 15
这个应该是控制图片大小的吧。。我觉得 caballarri 发表于 2021-3-30 16:55
var range = 15
这个应该是控制图片大小的吧。。我觉得
是的，这个应该是地图缩放系数
页:
[1]