javascript - 如何在传单中显示/隐藏带有标记的折线

Question

使用传单 1.6.0，我列出了按国家/地区分组的位置（标记和折线），当单击国家/地区按钮时，我需要按国家/地区进行过滤。我使用 layerGroup 并设法使用以下方法显示标记和折线：

    drawGroupedAdLocationsMarkers() {
        let polylinePoints = []  // I get all info about all Polylines
        let loop_index = 0

        this.groupedAdLocations.forEach(nextGroupedAdLocations => { // draw all groupedAdLocations
            this.groupedCountriesList[this.groupedCountriesList.length] = {
                key: nextGroupedAdLocations.country,
                label: this.countriesList[nextGroupedAdLocations.country],
            }
            let markersList = []
            let polylinesList = []
            nextGroupedAdLocations.adLocations.forEach(nextAddLocation => { // draw all nextAddLocation
                let priorPoint = null // eslint-disable-line
                let priorMarker = null // eslint-disable-line
                if (loop_index > 0) {
                    priorPoint = this.groupedAdLocations[loop_index - 1]
                    priorMarker= nextMarker
                }
                polylinePoints[polylinePoints.length] = [nextAddLocation.lat, nextAddLocation.lng]
                let nextMarker= this.showLocationMarker(nextAddLocation)
                markersList[markersList.length] = nextMarker
                polylinesList[polylinesList.length] = this.showLocationDirections(polylinePoints, nextGroupedAdLocations.country)
                loop_index++
            }) // nextGroupedAdLocations.adLocations.forEach(nextAddLocation => { // draw all nextAddLocation

            polylinesList.map((nextPolyline) => {
                markersList.push(nextPolyline);
            });

            let newMarkersLayerGroup = this.leaflet.layerGroup(markersList).addTo(this.locationsMap);
            this.layerGroupsMarkersArray[this.layerGroupsMarkersArray.length] = {
                country: nextGroupedAdLocations.country,
                layersObj: newMarkersLayerGroup
            }
        }) // this.groupedAdLocations.forEach(nextGroupedAdLocations => { // draw all groupedAdLocations


        let radius = 10;
        let polyline = new this.leaflet.Polyline(polylinePoints, {
            color: 'green',
            opacity: 1,
            weight: 2,
            customData: {
                type:'polyline'
                // point_id: point.id,
                // prior_point_id: priorPoint ? priorPoint.id : null,
            },
            offset: radius
        });
        polyline.on('click', function (event) {
            event.stopPropagation();
            window.event.cancelBubble = true;
            // showModal(event)
            // alert('Polyline clicked!');
        });
        // Add polyline to featuregroup
        polyline.addTo(this.locationsMap);
    }, // drawGroupedAdLocationsMarkers() {

和标记/折线创建方法：

    showLocationMarker(nextAddLocation) {
        let icon_size = 32
        if (nextAddLocation.featured) {
            icon_size = 48
        }
        var markerIcon = this.leaflet.icon({
            iconUrl: (!nextAddLocation.featured ? '/images/location.png' : '/images/location_featured.png'),
            iconSize: [icon_size, icon_size], // size of the icon
            // shadowSize:   [50, 64], // size of the shadow
            iconAnchor: [icon_size, icon_size], // point of the icon which will correspond to marker's location
            // shadowAnchor: [4, 62],  // the same for the shadow
            popupAnchor: [0, 0] // point from which the popup should open relative to the iconAnchor
        });

        let nextMarker = this.leaflet.marker(
            [nextAddLocation.lat, nextAddLocation.lng],
                {
                    icon: markerIcon,
                    customData:{add_location_id: nextAddLocation.id,type:'marker'}
                })
            .addTo(this.locationsMap)
            .bindPopup(nextAddLocation.content)
            .on('mouseover', this.locationMarkerOnMouseOver)
            .on('click', this.locationMarkerOnClick)
            .on('popupopen', this.locationMarkerOnPopupOpen)

        // circleMarker

        if (nextAddLocation.featured) {
            nextMarker.bindTooltip("Featured Location").openTooltip();
        }

        let self = this
        this.locationsMap.on('zoomend', function (/*e*/) {

            self.current_zoom = self.locationsMap.getZoom()
        });

        if (nextAddLocation.opened) {
            nextMarker.openPopup()
        }
        return nextMarker
    }, // showLocationMarker(nextAddLocation) {

    showLocationDirections(polylinePoints, country) {
        let radius = 10;
        let polyline = new this.leaflet.Polyline(polylinePoints, {
            color: 'green',
            opacity: 1,
            weight: 2,
            customData: {
                type:'polyline'
                // point_id: point.id,
                // prior_point_id: priorPoint ? priorPoint.id : null,
            },
            offset: radius
        });
        // Add click listener
        polyline.on('click', function (event) {
            event.stopPropagation();
            window.event.cancelBubble = true;
        });
        // Add polyline to featuregroup
        polyline.addTo(this.locationsMap);
        let decorator = this.leaflet.polylineDecorator(polyline, { // eslint-disable-line
            patterns: [
                // defines a pattern of 10px-wide dashes, repeated every 20px on the line
                {
                    offset: 0,
                    repeat: 50,
                    symbol: this.leaflet.Symbol.arrowHead({
                        pixelSize: 10,
                        polygon: false,
                        pathOptions: {stroke: true}
                    })
                }
            ]
        }).addTo(this.locationsMap)

        this.locationsMap.fitBounds(polyline.getBounds());
        return polyline;
    },  // showLocationDirections(polylinePoints) {

结果我看到带有标记/折线的地图： https ://prnt.sc/t1751f

单击过滤器标记的方法被隐藏/显示，但折线总是可见的方法：

filterByGroupedCountry(country_key, country_label) {
    let self = this
    this.layerGroupsMarkersArray.forEach(nextLayerMarkerGroup => { // draw all layerGroupsMarkersArray
        if (nextLayerMarkerGroup.country === country_key) {
            let layersObj = nextLayerMarkerGroup.layersObj

            if (self.locationsMap.hasLayer(layersObj)) {
                self.locationsMap.removeLayer(layersObj);
            } else {
                self.locationsMap.addLayer(layersObj);
            }
            return
        }
    }) // this.layerGroupsMarkersArray.forEach(nextLayerMarkerGroup => { // draw all layerGroupsMarkersArray

正如我上面写的那样，将所有折线推送到标记数组是否不正确：

...
polylinesList.map((nextPolyline) => {
    markersList.push(nextPolyline);
});

let newMarkersLayerGroup = this.leaflet.layerGroup(markersList).addTo(this.locationsMap);
...

哪种方式是正确的？

块＃2：

我重新制作了，如果我只有 1 组数据，它可以正常工作。但是如果我有更多的 1 组，它会以错误的方式工作。假设我有 2 个国家组，其中打开了页面上的任何国家/地区的一组位置（在运行 drawGroupedAdLocationsMarkers 之后），我看到带有折线的标记显示正常。当我单击隐藏第一个国家组（方法 filterByGroupedCountry）时，只有标记被隐藏，但折线和装饰器仍然可见。当我单击隐藏第二个（最后一个）国家组时，所有标记折线和装饰器都被隐藏。我想这是用一个数组创建 LayerGroup 的错误方法

       let newMarkersLayerGroup = this.leaflet.layerGroup(markersList); 

如果我将所有折线和装饰器添加到markersList，但哪种方法是有效的？

        drawGroupedAdLocationsMarkers() {
            let polylinePoints = []  // I get all info about all Polylines
            let loop_index = 0

            this.groupedCountriesList= []
            this.groupedAdLocations.forEach(nextGroupedAdLocations => { // draw all groupedAdLocations
                this.groupedCountriesList[this.groupedCountriesList.length] = {   // keep list of countries for filtering countries list
                    key: nextGroupedAdLocations.country,
                    label: this.countriesList[nextGroupedAdLocations.country],
                }
                let markersList = []
                let polylinesList = []
                let decoratorsList = []  // init markers, polylines, decorators Lists withing one country group
                nextGroupedAdLocations.adLocations.forEach(nextAdLocation => { // draw all adLocations inside of one country group
                    let priorPoint = null // eslint-disable-line
                    let priorMarker = null // eslint-disable-line
                    if (loop_index > 0) {
                        priorPoint = this.groupedAdLocations[loop_index - 1]
                        priorMarker= nextMarker
                    }
                    polylinePoints[polylinePoints.length] = [nextAdLocation.lat, nextAdLocation.lng]

                    // add new marker and add it to markersList
                    let nextMarker= this.showLocationMarker(nextAdLocation, nextGroupedAdLocations.country)
                    markersList[markersList.length] = nextMarker

                    let radius = 10; // Add new polyline based on point of nextAdLocation
                    let polyline = new this.leaflet.Polyline(polylinePoints, {
                        color: 'green',
                        opacity: 1,
                        weight: 2,
                        customData: {
                            add_location_id: nextAdLocation.id,
                            type:'polyline',
                            country:nextGroupedAdLocations.country
                        },
                        offset: radius
                    });
                    polyline.on('click', function (event) {
                        event.stopPropagation();
                        window.event.cancelBubble = true;
                    });
                    // polyline.addTo(this.locationsMap);

                    // add new decorator for polyline created above
                    let decorator = this.leaflet.polylineDecorator(polyline, { // eslint-disable-line
                        patterns: [
                            // defines a pattern of 10px-wide dashes, repeated every 20px on the line
                            {
                                offset: 0,
                                repeat: 50,
                                symbol: this.leaflet.Symbol.arrowHead({
                                    pixelSize: 10,
                                    polygon: false,
                                    pathOptions: {stroke: true},
                                    customData: {
                                        add_location_id: nextAdLocation.id,
                                        type:'polyline',
                                        country:nextGroupedAdLocations.country
                                    },
                                })
                            }
                        ]
                    })
                    // decorator.addTo(this.locationsMap)

                    this.locationsMap.fitBounds(polyline.getBounds());
                    // add created polyline to polylinesList
                    polylinesList[polylinesList.length] = polyline

                    // add created decorator to decoratorsList
                    decoratorsList[decoratorsList.length] = decorator
                    loop_index++
                }) // nextGroupedAdLocations.adLocations.forEach(nextAdLocation => { // draw all adLocations inside of one country group

                polylinesList.map((nextPolyline) => {
                    markersList.push(nextPolyline);
                });
                decoratorsList.map((nextDecorator) => {
                    markersList.push(nextDecorator);
                });

                // create layer Group with polylinesList, markersList and decoratorsList
                let newMarkersLayerGroup = this.leaflet.layerGroup(markersList); 
                this.locationsMap.addLayer(newMarkersLayerGroup);
                this.layerGroupsMarkersArray[this.layerGroupsMarkersArray.length] = {
                    country: nextGroupedAdLocations.country,
                    layersObj: newMarkersLayerGroup
                }

            }) // this.groupedAdLocations.forEach(nextGroupedAdLocations => { // draw all groupedAdLocations

        }, // drawGroupedAdLocationsMarkers() {

        showLocationMarker(nextAdLocation, country) {
            let icon_size = 32
            if (nextAdLocation.featured) {
                icon_size = 48
            }
            var markerIcon = this.leaflet.icon({
                iconUrl: (!nextAdLocation.featured ? '/images/location.png' : '/images/location_featured.png'),
                iconSize: [icon_size, icon_size], // size of the icon
                // shadowSize:   [50, 64], // size of the shadow
                iconAnchor: [icon_size, icon_size], // point of the icon which will correspond to marker's location
                // shadowAnchor: [4, 62],  // the same for the shadow
                popupAnchor: [0, 0] // point from which the popup should open relative to the iconAnchor
            });

            let nextMarker = this.leaflet.marker(
                [nextAdLocation.lat, nextAdLocation.lng],
                    {
                        icon: markerIcon,
                        customData:{
                            add_location_id: nextAdLocation.id,
                            type:'marker',
                            country:country
                        }
                    })
                .addTo(this.locationsMap)
                .bindPopup(nextAdLocation.content)
                .on('mouseover', this.locationMarkerOnMouseOver)
                .on('click', this.locationMarkerOnClick)
                .on('popupopen', this.locationMarkerOnPopupOpen)

            if (nextAdLocation.featured) {
                nextMarker.bindTooltip("Featured Location").openTooltip();
            }

            let self = this
            this.locationsMap.on('zoomend', function (/*e*/) {
                self.current_zoom = self.locationsMap.getZoom()
            });

            if (nextAdLocation.opened) {
                nextMarker.openPopup()
            }
            return nextMarker
        }, // showLocationMarker(nextAdLocation) {


        filterByGroupedCountry(country_key, country_label) {
            let self = this
            this.layerGroupsMarkersArray.forEach(nextLayerMarkerGroup => { // draw all layerGroupsMarkersArray
                if (nextLayerMarkerGroup.country === country_key) {
                    console.log('FOUND country_key::')
                    console.log(country_key)
                    let layersObj = nextLayerMarkerGroup.layersObj
                    console.log(0)
                    if (self.locationsMap.hasLayer(layersObj)) {
                        console.log(-1)
                        self.locationsMap.removeLayer(layersObj);
                    } else {
                        console.log(-2)
                        self.locationsMap.addLayer(layersObj);
                    }
                    return
                }
            }) // this.layerGroupsMarkersArray.forEach(nextLayerMarkerGroup => { // draw all layerGroupsMarkersArray

        }

第 3 块： 我做了在线演示 请打开http://ads.my-demo-apps.tk/login 凭据已经在输入中。只需单击“登录”，然后重定向到http://ads.my-demo-apps.tk/test2 您必须看到带有一些点/折线的地图，并在下面列出了 4 个国家/地区尝试一一单击国家/地区。您将看到相关标记被隐藏（如果再次单击国家链接，则再次显示）：https ://prnt.sc/t8dsxb 但折线没有像我预期的那样隐藏

点击所有国家 - 然后全部隐藏。我在 BLOCK # 2 中给出了代码描述：

谢谢！

标签： javascriptleaflet

Answer 1

您的代码中存在逻辑错误，这实际上很容易修复。
查看您的jsfiddle示例可以看到多次添加相同的折线，实际上每次创建另一个国家的标记。
需要做的是为每个外循环执行使用一个空数组重新初始化 polylinePoints 变量。你可以在这个 jsfiddle中签出它。

this.groupedAdLocations.forEach(nextGroupedAdLocations => { 
    let markersList = []
    let polylinesList = []
    polylinePoints = [] // THIS was missing
    nextGroupedAdLocations.adLocations.forEach(nextAdLocation => {
        ...

如果您希望来自不同国家的城市也被连接，那么您需要调整此解决方案并确保您不会添加相同的多段线多次。

BUT还有一个非常重要的but。正如@IvanSanchez 在他的评论中已经提到的那样，这段代码非常非常非常复杂。它很难阅读，充满了错误，而且非常容易出错。
如果你不是一个人工作，并且有经验更丰富的软件工程师，那么请向他寻求帮助。他们可以而且应该帮助您重构此代码。

我只举几个例子：

• Array.forEach与自定义 loop_index++ 逻辑一起使用。而不是简单地使用 forEach 回调函数的第二个参数。
• polylinesList.map((nextPolyline) => { markersList.push(nextPolyline);});
  调用 map，没有映射发生，forEach 或简单循环更合适。
• polylinesList[polylinesList.length] = polyline.也许在 JS 中这只是一个品味问题，但我会在这里简单地使用推送功能。
• 数据结构的设计非常低效且令人困惑。在多个地方拥有相同的数据，使得这种冗余容易出错。最好有单一的事实来源。
• 最后但并非最不重要的一点 - 这段代码真的很复杂。

保重并继续学习:)