首页 / 浏览问题 / 组件GIS / 问题详情
leaflet怎么同时引用多个控件?
zd
1EXP 2023年04月20日
<script type="text/javascript" include="leaflet.draw" src="libs/dist/include-leaflet.js"></script>

<script type="text/javascript" include="miniMap" src="libs/dist/include-leaflet.js"></script>

这两个控件(draw miniMap)怎么合并呀? 就是一个功能实现了,另一个不行了

1个回答

您好,Leaflet引用多个控件,可以写在一条引用中,用逗号隔开,例如:

<script type="text/javascript" include="leaflet.draw, miniMap" src="libs/dist/include-leaflet.js"></script>

可以参考这个示例中的引用:https://iclient.supermap.io/examples/leaflet/editor.html#turf_measurement

446EXP 2023年04月20日
你好 我这样试过了  还是不行的

 <script type="text/javascript" include="leaflet.draw,miniMap" src="dist/leaflet/include-leaflet.js"></script>

// 2.鹰眼

        var osm = L.supermap.tiledMapLayer(url,{minZoom:5,maxZoom:18,noWrap:true});

        map.addLayer(osm);

        var osm2 = L.supermap.tiledMapLayer(url,{minZoom:0,maxZoom:13,noWrap:true});

        L.control.minimap(osm2,{mapOptions:{logControl:false},toggleDisplay:true,position:'bottomright'}).addTo(map);

        // 3.图形绘制

        var editableLayers = new L.FeatureGroup();

        map.addLayer(editableLayers);

        var options = {

            position: 'topleft',

            draw: {

                polyline: {},

                polygon: {},

                circle: {},

                rectangle: {},

                marker: {},

                remove: {}

            },

            edit: {

                featureGroup: editableLayers,

                remove: true

            }

        };

        var drawControl = new L.Control.Draw(options);

        map.addControl(drawControl);

        handleMapEvent(drawControl._container, map);

        map.on(L.Draw.Event.CREATED, function (e) {

                var type = e.layerType,

                layer = e.layer;

            if (type === 'marker') {

                layer.bindPopup('A popup!');

            }

            editableLayers.addLayer(layer);

        });

        function handleMapEvent(div, map) {

            if (!div || !map) {

                return;

            }

            div.addEventListener('mouseover', function () {

                map.scrollWheelZoom.disable();

                map.doubleClickZoom.disable();

            });

            div.addEventListener('mouseout', function () {

                map.scrollWheelZoom.enable();

                map.doubleClickZoom.enable();

            });

        }

不好意思,我上面写的引用不对,应该是:<script type="text/javascript" include="leaflet.draw,leaflet.miniMap" src="../../dist/leaflet/include-leaflet.js"></script>

...