首页 / 浏览问题 / Web / 问题详情
iclent-leaflet 加载(点图层)点矢量数据点击报错
11月18日, 2021
示例代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>LeaFlet加载矢量切片</title>
    
 <!--   <link href="https://cdn.bootcdn.net/ajax/libs/leaflet/1.7.1/leaflet.css" rel="stylesheet" />
    <script src="https://cdn.bootcdn.net/ajax/libs/leaflet/1.7.1/leaflet.js"></script> -->
<!--     <link rel="stylesheet" href="https://iclient.supermap.io/dist/leaflet/iclient-leaflet.min.css"/> -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css" />
    <link rel="stylesheet" href="https://iclient.supermap.io/dist/leaflet/iclient-leaflet.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.js"></script>
    <script type="text/javascript" src="https://iclient.supermap.io/dist/leaflet/iclient-leaflet.js"></script>
    <script src="https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.bundled.js"></script>
    <script src="https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.js"></script>
</head>
<body>
    <div id="map" style="width: 100%; height: 1000px"></div>
     <script script type="text/javascript">

         var latlng = L.latLng(39.92, 116.46);
         var map = L.map('map', {
             center: latlng,
             zoom: 3,
             maxZoom: 22,
             crs: L.CRS.EPSG4326
         });
           L.supermap.tiledMapLayer("https://iserver.supermap.io/iserver/services/map-world/rest/maps/World").addTo(map);
         // L.tileLayer('http://t1.tianditu.com/vec_c/wmts?layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}', {
         //     maxZoom: 20,
         //     tileSize: 256,
         //     zoomOffset: 1
         // }).addTo(map);
         // var normalMapa = L.tileLayer('http://t0.tianditu.gov.cn/cva_c/wmts?layer=cva&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}', {
         //     maxZoom: 20,
         //     tileSize: 256,
         //     zoomOffset: 1
         // }).addTo(map);
         var url1 = "http://192.168.112.29:9090/geoserver/gwc/service/tms/1.0.0/cite%3Ast_water_intake@EPSG%3A4326@pbf/{z}/{x}/{y}.pbf";
         // var url="https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China";
         // //创建一个矢量瓦片图层
         // var vectorLayer = L.supermap.tiledVectorLayer(url1, {
         //     cacheEnabled: true,
         //     returnAttributes: true,
         //     attribution: "Tile Data©SuperMap iServer with©SuperMap iClient"
         // }).addTo(map);
         // //矢量瓦片图层添加点击事件,设置默认风格
         // vectorLayer.on('click', function (evt) {
         //     // 点击矢量瓦片图层获取id & layerName
         //     var selectId = evt.layer.properties.id;
         //     var selectLayerName = evt.layer.layerName;
         //     // 设置矢量瓦片图层样式
         //     var selectStyle = {
         //         fillColor: '#800026',
         //         fillOpacity: 0.5,
         //         stroke: true, fill: true, color: 'red', opacity: 1, weight: 2
         //     };
         //     vectorLayer.setFeaturvectorLayer.setFeatureStyle(selectId, selectLayerName, selectStyle);
         // });
         var vectorTileOptions = {
             // layerURL: url,
             rendererFactory: L.canvas.tile,           
             tms: true,         
             vectorTileLayerStyles: {
                 'university': function (properties, zoom) {                    
                     var level = properties.school_lev;
                     if (level=="本科") {
                         return {
                             weight: 2,
                             color: 'red',
                             opacity: 1,
                             fillColor: 'yellow',
                             fill: true,
                             radius: 6,
                             fillOpacity: 0.7
                         }
                     } else {
                         return {
                             weight: 2,
                             color: 'red',
                             opacity: 1,
                             fillColor: 'green',
                             fill: true,
                             radius: 6,
                             fillOpacity: 0.7
                         }
                     }
                 },
             },
             interactive: true,    //开启VectorGrid触发mouse/pointer事件
             getFeatureId: function (f) {
                 return f.properties.osm_id;
             }
         };      
         var vectorTile = new L.vectorGrid.protobuf(url1, vectorTileOptions).addTo(map);
         //为每个点注册一个mouseover事件
         vectorTile.on('mouseover', function (e) {
             var properties = e.layer.properties;
             L.popup()
                 .setContent(properties.name || properties.type)
                 .setLatLng(e.latlng)
                 .openOn(map);
         });
         // //注册map的缩放事件
         // map.on("zoom", function () {
         //     map.closePopup();
         // });
    </script>
</body>
</html>

1个回答

您好,具体是报什么错呢,矢量瓦片的点击可以参考这个demo,是能够正常点击的https://iclient.supermap.io/examples/leaflet/editor.html#vectorTileLayerNormal

y_98  (995分)  才高八斗
11月18日, 2021
面数据和线数据都是正常,只有点数据会报错,报错的原因好像是leaflet的源码中点击无法获取坐标值
怀疑是不是没有点击到点数据上,由于是点数据不会像线,面数据这儿好操作,可能鼠标没点击中点数据
...