how to use leaflet-contour plugin with this module?
I would like to use the leaflet-contour plugin from https://github.com/JamesRunnalls/leaflet-contour/tree/master with this module, but don't know how. I know that other plugins like leaflet.heat have Nuxt composables created for them. Any tips, suggestions for how to get a plugin like leaflet-contour to work with either this module, or just get it to work with Nuxt without this module?
This is some code I have that was taken from the link above, but I cannot get it to work because I get a 500 Nuxt error "Map container not found.
Any help is greatly appreciated!
```
<template>
<div name="mapid" id="mapid" style="width: 80vw; height: 80vh"></div>
</template>
<script setup>
const data = {
x: [
[8.475, 8.5, 8.525, 8.55, 8.575, 8.6, 8.625],
[8.475, 8.5, 8.525, 8.55, 8.575, 8.6, 8.625],
[8.475, 8.5, 8.525, 8.55, 8.575, 8.6, 8.625],
[8.475, 8.5, 8.525, 8.55, 8.575, 8.6, 8.625],
[8.475, 8.5, 8.525, 8.55, 8.575, 8.6, 8.625],
[8.475, 8.5, 8.525, 8.55, 8.575, 8.6, 8.625],
[8.475, 8.5, 8.525, 8.55, 8.575, 8.6, 8.625],
],
y: [
[47.42, 47.42, 47.42, 47.42, 47.42, 47.42, 47.42],
[47.4, 47.4, 47.4, 47.4, 47.4, 47.4, 47.4],
[47.38, 47.38, 47.38, 47.38, 47.38, 47.38, 47.38],
[47.36, 47.36, 47.36, 47.36, 47.36, 47.36, 47.36],
[47.34, 47.34, 47.34, 47.34, 47.34, 47.34, 47.34],
[47.32, 47.32, 47.32, 47.32, 47.32, 47.32, 47.32],
[47.3, 47.3, 47.3, 47.3, 47.3, 47.3, 47.3],
],
z: [
[null, null, null, null, null, null, null],
[null, null, null, 2, null, null, null],
[null, null, 2, 5, 2, null, null],
[null, 2, 5, 10, 5, 2, null],
[null, null, 2, 5, 2, null, null],
[null, null, null, 2, null, null, null],
[null, null, null, null, null, null, null],
],
};
const colors = [
{
color: "#053061",
point: 0,
},
{
color: "#09386d",
point: 0.032258064516129,
},
{
color: "#134c87",
point: 0.0645161290322581,
},
{
color: "#1d5fa2",
point: 0.0967741935483871,
},
{
color: "#276eb0",
point: 0.129032258064516,
},
{
color: "#337eb8",
point: 0.161290322580645,
},
{
color: "#3f8ec0",
point: 0.193548387096774,
},
{
color: "#569fc9",
point: 0.225806451612903,
},
{
color: "#71b0d3",
point: 0.258064516129032,
},
{
color: "#8dc2dc",
point: 0.290322580645161,
},
{
color: "#a2cde3",
point: 0.32258064516129,
},
{
color: "#b8d8e9",
point: 0.354838709677419,
},
{
color: "#cfe4ef",
point: 0.387096774193548,
},
{
color: "#ddebf2",
point: 0.419354838709677,
},
{
color: "#eaf1f5",
point: 0.451612903225806,
},
{
color: "#f7f6f6",
point: 0.483870967741936,
},
{
color: "#f9eee7",
point: 0.516129032258065,
},
{
color: "#fbe4d6",
point: 0.548387096774194,
},
{
color: "#fdd9c4",
point: 0.580645161290323,
},
{
color: "#f9c6ac",
point: 0.612903225806452,
},
{
color: "#f6b394",
point: 0.645161290322581,
},
{
color: "#f2a17f",
point: 0.67741935483871,
},
{
color: "#e8896c",
point: 0.709677419354839,
},
{
color: "#dd7059",
point: 0.741935483870968,
},
{
color: "#d25849",
point: 0.774193548387097,
},
{
color: "#c53e3d",
point: 0.806451612903226,
},
{
color: "#b82531",
point: 0.838709677419355,
},
{
color: "#a81529",
point: 0.870967741935484,
},
{
color: "#8d0c25",
point: 0.903225806451613,
},
{
color: "#730421",
point: 0.935483870967742,
},
{
color: "#67001f",
point: 1,
},
];
function getColor(value, min, max, colors) {
function hex(c) {
var s = "0123456789abcdef";
var i = parseInt(c, 10);
if (i === 0 || isNaN(c)) return "00";
i = Math.round(Math.min(Math.max(0, i), 255));
return s.charAt((i - (i % 16)) / 16) + s.charAt(i % 16);
}
function trim(s) {
return s.charAt(0) === "#" ? s.substring(1, 7) : s;
}
function convertToRGB(hex) {
var color = [];
color[0] = parseInt(trim(hex).substring(0, 2), 16);
color[1] = parseInt(trim(hex).substring(2, 4), 16);
color[2] = parseInt(trim(hex).substring(4, 6), 16);
return color;
}
function convertToHex(rgb) {
return hex(rgb[0]) + hex(rgb[1]) + hex(rgb[2]);
}
if (value === null || isNaN(value)) {
return "#ffffff";
}
if (value > max) {
return colors[colors.length - 1].color;
}
if (value < min) {
return colors[0].color;
}
var loc = (value - min) / (max - min);
if (loc < 0 || loc > 1) {
return "#fff";
} else {
var index = 0;
for (var i = 0; i < colors.length - 1; i++) {
if (loc >= colors[i].point && loc <= colors[i + 1].point) {
index = i;
}
}
var color1 = convertToRGB(colors[index].color);
var color2 = convertToRGB(colors[index + 1].color);
var f =
(loc - colors[index].point) /
(colors[index + 1].point - colors[index].point);
var rgb = [
color1[0] + (color2[0] - color1[0]) * f,
color1[1] + (color2[1] - color1[1]) * f,
color1[2] + (color2[2] - color1[2]) * f,
];
return `#${convertToHex(rgb)}`;
}
}
import L from 'leaflet';
import { ref } from 'vue';
var map = L.map("mapid").setView([46.402, 6.521], 11);
L.tileLayer(
"https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw",
{
maxZoom: 18,
attribution:
'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: "mapbox/streets-v11",
tileSize: 512,
zoomOffset: -1,
}).addTo(map);
L.contour(data, {
thresholds: 50,
style: (feature) => {
return {
color: getColor(feature.geometry.value, 10.5, 13.6, colors),
opacity: 0,
fillOpacity: 1,
};
},
onEachFeature: onEachContour(),
}).addTo(map);
function onEachContour() {
return function onEachFeature(feature, layer) {
layer.bindPopup(
`<table><tbody><tr><td>${feature.value}°C</td></tr></tbody></table>`
);
};
}
</script>
```
关闭于 2025-09-30 3 条评论