mapbox_icon

 

 

 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <title> icon </title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
    <link href="../lib/mapboxgl/mapbox-gl.css" rel="stylesheet"/>
    <script src="../lib/mapboxgl/mapbox-gl.js"></script>
    <script src="../lib/mapboxgl/turf.min.js"></script>
    <style>
        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }

        .input-card {
            position: relative;
            top: 20px;

        }

    </style>
</head>

<body>
<div id="map" style="width: 100%; height: 100%"></div>
<div id='text'></div>
<div class="input-card" style="width: 24rem">
    <div class="input-item">
        <button class="btn" style="margin-right: 1rem" onclick="addIcom()">添加icon图层</button>
        <button class="btn" onclick="upIconData()">更改数据</button>
        <button class="btn" onclick="delIcon()">删除图层</button>

        <button class="btn" style="margin-right: 1rem" onclick="hideIcom()">icon隐藏</button>
        <button class="btn" onclick="showIcon()">icon展示</button>
    </div>

</div>
<script>

    var map, popupDOM;
    mapboxgl.accessToken =
        'pk.eyJ1IjoiZXRlcm5pdHkteHlmIiwiYSI6ImNqaDFsdXIxdTA1ODgycXJ5czdjNmF0ZTkifQ.zN7e588TqZOQMWfws-K0Yw';

    initMap();

    function initMap() {
        map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/streets-v11',
            zoom: 11,
            // 地图中心点
            center: [106.337428, 38.3390923],
            // 地图默认字体
            localIdeographFontFamily: "Microsoft YoHei",
        });
        map.on("click", (e) => {
            popupDOM.remove();
            console.log(`${e.lngLat.lng},${e.lngLat.lat}`);
        });

        map.on('load', () => {
            // Insert the layer beneath any symbol layer.
            const layers = map.getStyle().layers;
            const labelLayerId = layers.find(
                (layer) => layer.type === 'symbol' && layer.layout['text-field']
            ).id;

            popupDOM = new mapboxgl.Popup({
                // closeButton: false,
                closeOnClick: false,
                offset: {
                    bottom: [0, -40]
                }
            });
        });

        map.on('mouseenter', 'iconDemo', (e) => {
            console.log(e.features[0].geometry);
            let features = e.features[0].properties;
            document.getElementById('text').innerHTML = "";
            for (let key in features) {
                let div = document.createElement('div');
                div.innerHTML = key + " :  " + features[key];
                document.getElementById('text').appendChild(div);
            }
            popupDOM.setLngLat(e.features[0].geometry.coordinates)
                .setHTML(document.getElementById('text').innerHTML)
                .setMaxWidth('400px')
                .addTo(map)
        });


    }


    //    添加icon
    function addIcom(/*iconParam*/) {
        let iconParam = [{
            type: 'Feature',
            geometry: {
                type: 'Point',
                coordinates: [106. + Math.random(), 38. + Math.random()]
            },
            properties: {
                name: '测试点1',
                info1: 'info1',
                info2: 'info2',
                info3: 'info3',
                info4: 'info4',
                info5: 'info5',
            }
        }, {
            type: 'Feature',
            geometry: {
                type: 'Point',
                coordinates: [106. + Math.random(), 38. + Math.random()]
            },
            properties: {
                name: '测试点1',
                info1: 'info1',
                info2: 'info2',
                info3: 'info3',
            }
        }];
        //画小圆点
        if (map.getLayer("iconDemo") == null) {
            map.addLayer({
                id: 'iconDemo',
                type: 'circle',
                source: {
                    type: 'geojson',
                    data: {
                        type: 'FeatureCollection',
                        features: iconParam
                    }
                }, layout: {
                    visibility: 'visible'
                },
                paint: {
                    'circle-radius': 8,
                    'circle-color': '#1d18ff',
                    'circle-stroke-color': '#4c55f7',
                    'circle-stroke-width': 6
                }
            })
        } else {
            upIconData(/*iconParam*/);
        }
    }

    function upIconData(/*iconParam*/) {
        let iconParam = [{
            type: 'Feature',
            geometry: {
                type: 'Point',
                coordinates: [106. + Math.random(), 38. + Math.random()]
            },
            properties: {
                name: '测试点1',
                info1: 'info1',
                info2: 'info2',
                info3: 'info3',
                info4: 'info4',
                info5: 'info5',
            }
        }, {
            type: 'Feature',
            geometry: {
                type: 'Point',
                coordinates: [106. + Math.random(), 38. + Math.random()]
            },
            properties: {
                name: '测试点1',
                info1: 'info1',
                info2: 'info2',
                info3: 'info3',
            }
        }];
        map.getSource('iconDemo').setData({
            type: 'FeatureCollection',
            features: iconParam
        })
    }

    //    移除icon
    function delIcon(/*id*/) {
        if (map.getLayer("iconDemo")) {
            map.removeLayer("iconDemo");
            map.removeSource("iconDemo");
        }
    }

    function hideIcom(/*id*/) {
        var visibility = map.getLayoutProperty("iconDemo", 'visibility');
        if (visibility === 'visible') {
            map.setLayoutProperty("iconDemo", 'visibility', 'none')
        }
    }

    function showIcon(/*id*/) {
        var visibility = map.getLayoutProperty("iconDemo", 'visibility');
        if (visibility === 'none') {
            map.setLayoutProperty("iconDemo", 'visibility', 'visible')
        }
    }


</script>

</body>

</html>
posted @ 2022-10-10 20:50  A影子放風箏  阅读(150)  评论(0)    收藏  举报
// 侧边栏目录 // https://blog-static.cnblogs.com/files/douzujun/marvin.nav.my1502.css