Uncaught TypeError: wmsLayers.getSource is not a function

Question

wms appears but when clicked an error appears like this and the popup does not appear

I want to use WMS GetFeatureInfo (Tile Layer) whose info is taken from WMS Geoserver to display popup information

import { Map, View } from "ol";
import TileLayer from "ol/layer/Tile";
import OSM from "ol/source/OSM";
import { fromLonLat } from "ol/proj";
import Overlay from "ol/Overlay";
import TileWMS from 'ol/source/TileWMS';
import scorKabBgr from "./layer/kabBogorScoring";
import scorKotBgr from "./layer/kotBogorScoring";
import admKabBgr from "./layer/admKabBgr";
import admKotBgr from "./layer/admKotBogor";
import poiDamkar from "./layer/poiDamkar";
import sungaiKabupaten from "./layer/sungaiKabupaten";
import sungaiKota from "./layer/sungaiKota";
import $ from "jquery";

const container = document.getElementById("popup-2");
const conten = document.getElementById("popup-content");
const closer = document.getElementById("popup-closer");

export const overlay = new Overlay({
    element: container,
    autoPan: {
        animation: {
            duration: 250,
        },
    },
});



const wmsLayers = [
    { layer: poiDamkar, checkboxId: "customPoiDamkar" },
    { layer: scorKabBgr, checkboxId: "customCheckBoxScoreKabBgr" },
    { layer: scorKotBgr, checkboxId: "customCheckBoxScoreKotBgr" },
    { layer: admKabBgr, checkboxId: "customCheckBoxAdmKabBgr" },
    { layer: admKotBgr, checkboxId: "customCheckBoxAdmKotBgr" },
    { layer: sungaiKabupaten, checkboxId: "customCheckBoxsungaiKabupaten" },
    { layer: sungaiKota, checkboxId: "customCheckBoxsungaiKota" },
    // Tambahkan informasi untuk lapisan WMS lainnya di sini
];

// Fungsi untuk menambah atau menghapus lapisan WMS dari peta
function toggleWMSLayer(layer, checked) {
    if (checked) {
        map.addLayer(layer);
    } else {
        map.removeLayer(layer);
    }
}

wmsLayers.forEach(({ layer, checkboxId }) => {
    const checkbox = document.getElementById(checkboxId);
    checkbox.addEventListener("change", function () {
        toggleWMSLayer(layer, this.checked);
    });
});

const osmLayer = new TileLayer({
    source: new OSM(),
});

const view = new View({
    center: fromLonLat([106.71667, -6.58333]),
    zoom: 10.5,
});
const map = new Map({
    overlays: [overlay],
    target: "map",
    layers: [osmLayer],
    view: view,
    // view: new View({
    //     center: fromLonLat([106.71667, -6.58333]),
    //     zoom: 10.5,
    // }),
});

map.on('singleclick', function (evt) {
    document.getElementById('info').innerHTML = '';
    const viewResolution = /** @type {number} */ (view.getResolution());
    const url = wmsLayers.getSource().getFeatureInfoUrl(
        evt.coordinate,
        viewResolution,
        // 'EPSG:4326',
        'EPSG:3857',
        { 'INFO_FORMAT': 'text/html' },
    );
    if (url) {
        fetch(url)
            .then((response) => response.text())
            .then((html) => {
                document.getElementById('info').innerHTML = html;
            });
    }
});

map.on('pointermove', function (evt) {
    if (evt.dragging) {
        return;
    }
    const data = osmLayer.getData(evt.pixel);
    const hit = data && data[3] > 0; // transparent pixels have zero for data[3]
    map.getTargetElement().style.cursor = hit ? 'pointer' : '';
});

export default map;

Answer 1

wmsLayers is defined in your code as:

const wmsLayers = [
    {...},
    {...},
    {...},
]

It is an array (of dictionaries) and it does not have any functions. Therefore the code const url = wmsLayers.getSource().getFeatureInfoUrl(... makes no sense. there is no getSource() function on wmsLayers.

In fact, even the elements within the wmsLayers list are not layers themselves.

It's difficult to be certain (due to the import statements hiding the actual code), but it appears as though the layer property of each dictionary item in your wmsLayers list is probably a layer. If this is the case, then you could use the following to access that layer and its source:

wmsLayers[i].getSource().getFeatureInfoUrl(...

... where i is the index of the layer item in the wmsLayers array.

But I think you'd be better of simply getting the layer information from the map object at that point. Something like:

map.getAllLayers().forEach((layer) => {
    const url = this.getSource().getFeatureInfoUrl(...
});

Of course, you may also want to avoid running that for the OSM layer, which would require a little extra code.