原生JS地图绘制的问题

Question

在网上找了一段地图绘制的代码，由于本人地理不是很好，有一部分不太理解，问题标注在注释里面了。这里是演示地址

效果如下图：

可能由于网络原因这个地址访问会不正常，所以把脚本部分贴出来：

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[0].length == 2) {
                                        drawCanvasFun(chinaChildItem);
                                }
                                if (chinaChildItem.length && chinaChildItem[0].length > 2) {
                                        chinaChildItem.forEach(function(countryItem, countryIndex) {
                                                drawCanvasFun(countryItem);
                                        });
                                }
                        } else {
                                var countryPos = null;
                                if (chinaChildItem.length > 1) {
                                        countryPos = chinaChildItem;
                                } else {
                                        countryPos = chinaChildItem[0];
                                }
                                if (countryPos) {
                                        drawCanvasFun(countryPos);
                                }
                        }
                });
        });
}
// 绘制平面
function drawCanvasFun(itemPosition) {
        ctx.fillStyle = mapColor;
        ctx.strokeStyle = mapLineColor;
        ctx.beginPath();
        ctx.moveTo(width / 2 + (itemPosition[0][0] - averageX) * range, //这里为什么要减去averageX，计算原理是什么
        height / 2 - (itemPosition[0][1] - averageY) * range //问题同上
        );
        itemPosition.forEach(function(item) {
                ctx.lineTo(width / 2 + (item[0] - averageX) * range, //这里为什么要减去averageX，计算原理是什么
                height / 2 - (item[1] - 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();

遇到的问题在注释里标注了，同时还想了解一下，如果脱离框架渲染一个geojson格式的地图，如何让地图在屏幕最中间，即怎么纠偏，使用滚轮放大缩小时，应该怎么处理绘制到屏幕上的地图？请懂行的大佬指导一下，谢谢了~

Answer 1

averageX ,averageY 就是canvas中心点对应的经纬度坐标，改变这个值就可以控制地图在canvas哪里绘制。109,34对应的位置大概是西安左右

range其实可以看作放大倍数,经纬度范围的[-180, 180],而属于中国的范围大概是73-135，你这里width是1140像素，60对于1140来说是非常小的，所以需要放大

再回来看width / 2 + (item[0] - averageX) * range

width / 2就是canvas的中点x值，item[0] - averageX是经纬度上，当前点对于中点经纬度的偏移量，再乘上range，就是放大后的经度偏移量

那么整体width / 2 + (item[0] - averageX) * range就是在canvas宽度为1140像素，中心点对应经度109的情况下，当前经纬度点在canvas上的x位置

下面的height / 2 - (item[1] - averageY) * range，同理就是y值