要实现保持像素正方形并能够使用Plotly.js进行任意矩形形状的缩放，以包含两个图层的绘图，可以按照以下步骤进行操作：

步骤1：在HTML文件中添加必要的依赖库

步骤2：在JavaScript文件中编写代码

// 创建一个初始的正方形图形
var layout = {
    width: 500, // 设置初始宽度
    height: 500, // 设置初始高度
    xaxis: {range: [0, 500]}, // 设置x轴范围
    yaxis: {range: [0, 500]}, // 设置y轴范围
    showlegend: false // 不显示图例
};

// 创建两个图层的数据
var trace1 = {
    x: [100, 300, 300, 100, 100], // x轴坐标
    y: [100, 100, 300, 300, 100], // y轴坐标
    mode: 'lines', // 绘制线段模式
    line: {color: 'blue'}, // 设置线段颜色
};

var trace2 = {
    x: [200, 400, 400, 200, 200], // x轴坐标
    y: [200, 200, 400, 400, 200], // y轴坐标
    mode: 'lines', // 绘制线段模式
    line: {color: 'red'}, // 设置线段颜色
};

// 绘制图形
Plotly.newPlot('plot', [trace1, trace2], layout);

// 添加缩放功能
document.getElementById('plot').onwheel = function(e) {
    e.preventDefault();
    var zoom = e.deltaY > 0 ? 1.2 : 0.8; // 根据鼠标滚动方向确定缩放倍数
    var xaxis = {range: [0, layout.width]}; // 获取x轴范围
    var yaxis = {range: [0, layout.height]}; // 获取y轴范围

    // 更新x轴范围和y轴范围
    xaxis.range[1] = xaxis.range[0] + (xaxis.range[1] - xaxis.range[0]) * zoom;
    yaxis.range[1] = yaxis.range[0] + (yaxis.range[1] - yaxis.range[0]) * zoom;

    // 更新布局
    Plotly.relayout('plot', {xaxis: xaxis, yaxis: yaxis});
};

以上代码实现了一个初始的正方形图形，其中包含两个图层，分别用蓝色和红色线段表示。通过鼠标滚轮可以进行缩放操作，缩放中心为图形的中心点，缩放倍数为1.2或0.8，根据滚轮的滚动方向而定。