<!DOCTYPE html>
<html lang="ru">
<head>
<title>#prototype.map</title>
<meta charset="UTF-8">
<link rel="shortcut icon" href="public/images/favicon.png" type="image/png">
<link rel='stylesheet' href="public/stylesheets/style.css" />
<link rel="stylesheet" href="public/stylesheets/leaflet.css" />
</head>
<body>
<main>
<div id="map" style="width: 100%;height: 100vh;"></div>
</main>
<script src="/socket.io/socket.io.js"></script>
<script src="public/javascripts/libs/leaflet-src.js"></script>
<script src="public/javascripts/libs/path.js"></script>
<script src="public/javascripts/libs/Leaflet.Editable.js"></script>
<script src="public/javascripts/main.js" type="module"></script>
</body>
</html>const path = require('path');
const http = require('http');
const express = require('express');
const minify = require('express-minify-html');
const config = require('./config.json');
const router = require('./router');
const app = express();
app.use(minify({
override: true,
exception_url: false,
htmlMinifier: {
removeComments: true,
collapseWhitespace: true,
collapseBooleanAttributes: true,
removeAttributeQuotes: true,
removeEmptyAttributes: true,
}
}));
app.set('views', path.join(__dirname, 'templates'));
app.set('view engine', 'ejs');
app.use(router);
app.use((req, res, next) => {
next(404);
});
app.use((err, req, res, next) => {
res.status(err.status || 404);
res.render('error');
});
const server = http.createServer(app);
server.listen(config.port, config.host, () => {
console.log(`Server listen ${config.host}:${config.port}...`);
});
require('./controllers/sockets')(server, config);а вот что касается этого
И так до тех пор, пока не кончатся точки.
Но вот в чем проблема, картинка то квадратная! Соответственно я удалю точки, которые не нужно удалять. Примерно так.
то или я просто глупая мартышка, или вы плохо объясняете
let cvs = document.getElementById('canvas');
let button = document.getElementById('button');
let ctx = cvs.getContext('2d');
let colors = [[255,255,0],[228,60,30],[53,198,29]];
let colorLength = colors.length;
let flag = false;
let images = [];
let options = {
width: 400,
height: 400
};
let urls = [
'images/test/1.png',
'images/test/2.png',
'images/test/3.png'
];
cvs.width = document.documentElement.clientWidth;
cvs.height = document.documentElement.clientHeight;
function addImage(e) {
if (images.length === colorLength) {
console.log('больше нельзя добавлять картинок');
return;
}
console.log('Добавили новую картинку');
let img = new Image();
img.src = urls[images.length];
let color = colors.pop();
images.push(img);
img.addEventListener('load', () => {
let x = 0;
switch (images.length) {
case 2:
x = 400;
break;
case 3:
x = 800;
break;
default:
x = 0;
}
ctx.drawImage(img, x, 0, options.width, options.height);
let imageData = ctx.getImageData(x, 0, img.width, img.height);
let data = imageData.data;
for (let i = 0, n = data.length; i < n; i += 4) {
// if (data[i] !== 0 && data[i + 1] !== 0) {
data[i] = color[0];
data[i + 1] = color[1];
data[i + 2] = color[2];
// }
}
ctx.putImageData(imageData, x, 0);
});
}
// события click
button.addEventListener('click', addImage);
cvs.addEventListener('click', (e) => {
if (!images.length) return;
let imageData = ctx.getImageData(e.offsetX, e.offsetY, 1, 1);
let data = imageData.data;
console.log(data);
}, false);var map = L.map('map');
var myRenderer = L.canvas({ padding: 0.5 });
var line = L.polyline( coordinates, { renderer: myRenderer } );
var circle = L.circle( center, { renderer: myRenderer } );
let cvs = document.getElementById('canvas');
let button = document.getElementById('button');
let ctx = cvs.getContext('2d');
let colors = [[255,255,0],[228,60,30],[53,198,29]];
let colorLength = colors.length;
let flag = false;
let images = [];
let options = {
width: 400,
height: 400
};
let urls = [
'images/test/1.png',
'images/test/2.png',
'images/test/3.png'
];
cvs.width = document.documentElement.clientWidth;
cvs.height = document.documentElement.clientHeight;
function addImage(e) {
if (images.length === colorLength) {
console.log('больше нельзя добавлять картинок');
return;
}
console.log('Добавили новую картинку');
let img = new Image();
img.src = urls[images.length];
let color = colors.pop();
images.push(img);
img.addEventListener('load', () => {
let x = 0;
switch (images.length) {
case 2:
x = 400;
break;
case 3:
x = 800;
break;
default:
x = 0;
}
ctx.drawImage(img, x, 0, options.width, options.height);
let imageData = ctx.getImageData(x, 0, img.width, img.height);
let data = imageData.data;
for (let i = 0, n = data.length; i < n; i += 4) {
// if (data[i] !== 0 && data[i + 1] !== 0) {
data[i] = color[0];
data[i + 1] = color[1];
data[i + 2] = color[2];
// }
}
ctx.putImageData(imageData, x, 0);
});
}
// события click
button.addEventListener('click', addImage);
cvs.addEventListener('click', (e) => {
if (!images.length) return;
let imageData = ctx.getImageData(e.offsetX, e.offsetY, 1, 1);
let data = imageData.data;
console.log(data);
}, false);
Как добавить слой (ту самую желтую картинку) на карту leaflet не через img, а через canvas, при этом иметь доступ к canvas для проверки прозрачных пикселей. При этом карту можно тащить. Соответственно изменять положение должны все слои.