leaflet点击查询面。

0 投票

请问点击查询面怎么做?需要点击地图查询出地块高亮并显示气泡信息。

写的几何查询做点击查询面代码如下(可粘贴到官网沙箱运行),bug点击太快的时候前面查询出来的地块不会清除,请问正确的代码该怎么写?

<!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 : "http://support.supermap.com.cn:8090";
    var map, resultLayer = L.geoJSON(),
            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
    });
    L.supermap.tiledMapLayer(baseUrl).addTo(map);
    map.on('click', function (e) {
        var lat = e.latlng.lat;
        var lng = e.latlng.lng;
        query(lat, lng);
    });

    function query(lat, lng) {
        map.removeLayer(resultLayer);//清空之前的图层
        var marker1 = L.marker([lat, lng]);
        var geometryParam = new SuperMap.GetFeaturesByGeometryParameters({
            datasetNames: ["World:Countries"],
            geometry: marker1,
            spatialQueryMode: "INTERSECT"
        });
        L.supermap
                .featureService(url)
                .getFeaturesByGeometry(geometryParam, function (serviceResult) {
                    resultLayer = L.geoJSON(serviceResult.result.features, {
                        onEachFeature: function (feature, layer) {
                            layer.bindPopup(resources.text_country + ":" + feature.properties.COUNTRY);//可避免二次点击该点时闪烁
                            L.popup()
                                    .setLatLng([lat, lng])
                                    .setContent(resources.text_country + ":" + feature.properties.COUNTRY)
                                    .openOn(map);
                            console.log(feature);

                        }
                    }).addTo(map);
                });
    }
</script>
</body>
</html>

7月 3 分类:  262次浏览 | 用户: Q行天下 锋芒毕露 (467 分)

1个回答

0 投票
您好,这个是异步加载导致的问题,不属于产品的缺陷。建议您给map的click事件加以限制,每次点击触发后先移除click事件,知道resultlayer返回一个结果后再给map添加click事件
7月 3 用户: 于浩 名扬四海 (4,171 分)

换了哈清除图层的位置,好了。

<!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 : "http://support.supermap.com.cn:8090";
    var map, resultLayer = L.geoJSON(),
            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
    });
    L.supermap.tiledMapLayer(baseUrl).addTo(map);
    map.on('click', function (e) {
        var lat = e.latlng.lat;
        var lng = e.latlng.lng;
        query(lat, lng);
    });

    function query(lat, lng) {
        //map.removeLayer(resultLayer);//清空之前的图层
        var marker1 = L.marker([lat, lng]);
        var geometryParam = new SuperMap.GetFeaturesByGeometryParameters({
            datasetNames: ["World:Countries"],
            geometry: marker1,
            spatialQueryMode: "INTERSECT"
        });
        L.supermap
                .featureService(url)
                .getFeaturesByGeometry(geometryParam, function (serviceResult) {
                    map.removeLayer(resultLayer);//清空之前的图层
                    resultLayer = L.geoJSON(serviceResult.result.features, {
                        onEachFeature: function (feature, layer) {
                            layer.bindPopup(resources.text_country + ":" + feature.properties.COUNTRY);//可避免二次点击该点时闪烁
                            L.popup()
                                    .setLatLng([lat, lng])
                                    .setContent(resources.text_country + ":" + feature.properties.COUNTRY)
                                    .openOn(map);
                            console.log(feature);

                        }
                    }).addTo(map);
                });
    }
</script>
</body>
</html>

我这种写法有弊端,每次点击都要请求后台。当我在已查询出来的一个多边形里点击时,不应该请求后台,请问如何修改?
我这边用您发的代码试了一下,在点击了中国区域之后,再点击中国的时候没有发送请求,只有初始点击的时候会发送一个请求到iserver
map.removeLayer(resultLayer);//清空之前的图层这个地方报错,Uncaught TypeError: Cannot read property '_leaflet_id' of undefined应该怎么处理呢
...