原生JS地图绘制的问题

troybug
  • 1.2k

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

效果如下图:
image.png

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

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格式的地图,如何让地图在屏幕最中间,即怎么纠偏,使用滚轮放大缩小时,应该怎么处理绘制到屏幕上的地图?请懂行的大佬指导一下,谢谢了~

回复
阅读 1.3k
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值

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏