iclient for leaflet实现鼠标移动要素高亮

supermapsupport

1283人浏览 · 2022-11-25 15:53:04

supermapsupport · 2022-11-25 15:53:04 发布

作者：yangjunlin

前言

最近有小伙伴问我对iclient for leaflet矢量图层鼠标移动hover高亮的具体实现方式，下面我带着大家实现下

前期准备

1.在线数据服服务： https://iserver.supermap.io/iserver/services/data-world/rest/data

成果展示

在这里插入图片描述

代码实现过程

初始化地图

     map = L.map('map', {
            preferCanvas: true,
            crs: L.CRS.EPSG4326,
            center: {
                lon: 0,
                lat: 0
            },
            maxZoom: 18,
            zoom: 2
        });
    
    new L.supermap.TiledMapLayer(baseUrl).addTo(map);

利用数据服务中的几何查询方式，查询自定义下正方形范围的下的数据


           var polygon = L.polygon([
                [0, 0],
                [-30, 0],
                [-10, 30],
                [0, 0]
            ], {
                color: 'red'
            });

            var geometryParam = new SuperMap.GetFeaturesByGeometryParameters({
                datasetNames: ["World:Countries"],
                geometry: polygon,
                spatialQueryMode: "INTERSECT"
            });
            // 对json中的每个feature对应的layer注册mouseover的事件
            L.supermap
                .featureService(url)
                .getFeaturesByGeometry(geometryParam, function (serviceResult) {})

将查询出的要素集合，添加搭到矢量的图层L.geoJSON，利用其类的回调函数向里面注册onEachFeature方法，拿到每个要素，然后对每个要素进行事件注册包括‘移入和移出’事件。在移入事件中对回调出的要素设置颜色和绑定弹窗，在移除事件中，对移除的要素还原颜色和清除弹窗

            resultLayer = L.geoJSON(serviceResult.result.features, {
                        onEachFeature: function (feature, layer) {
                            layer.on({
                                mouseover: (e) => {

                                    var layer = e.target;
                                    layer.setStyle({
                                        weight: 5,
                                        color: 'red',
                                        dashArray: '',
                                        fillOpacity: 0.7
                                    });
                                    layer.bindPopup(resources.text_country + "：" + feature
                                        .properties.COUNTRY).openPopup();
                                },
                                mouseout: (e) => {

                                    resultLayer.resetStyle(e.target);
                                    e.target.closePopup()
                                },
                                click: (e) => {}
                            })
                        }
                    }).addTo(map);

完整代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title data-i18n="resources.title_getFeatureByGeometry"></title>
    <script type="text/javascript" src="../js/include-web.js"></script>
</head>

<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
    <div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
    <script type="text/javascript" src="../../dist/leaflet/include-leaflet.js"></script>
    <script type="text/javascript">
        var host = window.isLocal ? window.server : "https://iserver.supermap.io";
        var map, resultLayer,
            baseUrl = host + "/iserver/services/map-world/rest/maps/World",
            url = host + "/iserver/services/data-world/rest/data";
        map = L.map('map', {
            preferCanvas: true,
            crs: L.CRS.EPSG4326,
            center: {
                lon: 0,
                lat: 0
            },
            maxZoom: 18,
            zoom: 2
        });

        query();


        function query() {
            var polygon = L.polygon([
                [0, 0],
                [-30, 0],
                [-10, 30],
                [0, 0]
            ], {
                color: 'red'
            });

            var geometryParam = new SuperMap.GetFeaturesByGeometryParameters({
                datasetNames: ["World:Countries"],
                geometry: polygon,
                spatialQueryMode: "INTERSECT"
            });
            // 对json中的每个feature对应的layer注册mouseover的事件
            L.supermap
                .featureService(url)
                .getFeaturesByGeometry(geometryParam, function (serviceResult) {
                    resultLayer = L.geoJSON(serviceResult.result.features, {
                        onEachFeature: function (feature, layer) {
                            layer.on({
                                mouseover: (e) => {

                                    var layer = e.target;
                                    layer.setStyle({
                                        weight: 5,
                                        color: 'red',
                                        dashArray: '',
                                        fillOpacity: 0.7
                                    });
                                    layer.bindPopup(resources.text_country + "：" + feature
                                        .properties.COUNTRY).openPopup();
                                },
                                mouseout: (e) => {

                                    resultLayer.resetStyle(e.target);
                                    e.target.closePopup()
                                },
                                click: (e) => {}
                            })
                        }
                    }).addTo(map);
                });
        }
    </script>
</body>

</html>