正文

esri-leaflet加载arcgis地图，以及实现地图缩放切换

譬如朝露 V管理员/ / 0 评论/ 1573阅读
04 16 
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Esri Leaflet 加载arcgis地图</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />

    <!-- Load Leaflet from CDN -->
    <link rel="stylesheet" href="./esri-leaflet-v2.5.3/leaflet.css" />
    <script src="./esri-leaflet-v2.5.3/leaflet.js"></script>

    <!-- Load Esri Leaflet from CDN -->
    <script src="./esri-leaflet-v2.5.3/esri-leaflet.js"></script>
    <script src="./esri-leaflet-v2.5.3/esri-leaflet-renderers-debug.js"></script>
    <script src="./mapv/build/mapv.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
        }

        .toggle {
            position: absolute;
            right: 50px;
            bottom: 50px;
            width: 200px;
            z-index: 500;
            background-color: #fff;
        }

        .toggle li {
            display: inline-block;
            color: #333;
            cursor: pointer;
            margin-right: 10px;
        }
    </style>
</head>

<body>

    <div id="map"></div>
    <ul class="toggle">
        <li onclick="toggle('电子地图')">电子地图</li>
        <li onclick="toggle('午夜蓝地图')">午夜蓝地图</li>
        <li onclick="toggle('影像地图')">影像地图</li>
    </ul>
    <script>
        var map = L.map('map', {
            zoomControl: false
        }).setView([31.477758116050047, 120.47843970422669], 10);


        let baseMapArr = [
            {
                name: '电子地图',
                url: 'http://172.16.9.114:6080/arcgis/rest/services/BaseMap/szdzdt2019_2000/MapServer'
            },
            {
                name: '午夜蓝地图',
                url: 'http://172.16.9.114:6080/arcgis/rest/services/BaseMap/BlueMap2019_2000/MapServer'
            },
            {
                name: '影像地图',
                url: 'http://172.16.9.114:6080/arcgis/rest/services/BaseMap/SZDOM2017_2000/MapServer'
            },
        ];

        class MapToggle {
            /**
             * @description: 地图切换类
             * @param {map}  地图实例 
             * @param {watch}  是否监听地图缩放，根据缩放级别加载不同的底图 
             * @param {defaultMapName}  默认加载的地图名字
             * @param {baseMap}  所有地图的数组对象
             * @return {*}
             */
            constructor(options) {
                this.map = options.map;
                this.watch = options.watch ? options.watch : false;
                this.defaultMapName = options.defaultMapName ? options.defaultMapName : '';
                this.baseMap = options.baseMap ? options.baseMap : [];
                this.layerGroup = L.layerGroup();
                this.addBaseMap();
                this.init(this.defaultMapName)
                if (this.watch) {
                    this.watchZoom()
                }
            }
            //把需要加载的底图放到layerGroun中几种管理
            addBaseMap() {
                if (this.baseMap && this.baseMap.length > 0) {
                    this.baseMap.forEach(layer => {
                        let layerMap = L.esri.dynamicMapLayer({
                            name: layer.name,
                            url: layer.url,

                        })
                        this.layerGroup.addLayer(layerMap)
                    })
                } else {
                    console.log('请传入需要初始化的底图')
                }
            };
            //初始化加载地图，根据传入的名字加载对应的底图
            init(name) {
                if (!name) {
                    console.log('请输入初始化名称的底图')
                    return false;
                }
                console.log(this.layerGroup)
                this.layerGroup.eachLayer(layer => {
                    layer.setOpacity(0)

                    if (layer.options.name === name) {
                        layer.setOpacity(1)
                    }
                })
                this.layerGroup.addTo(this.map)
            }
            //监听缩放级别，根据缩放级别加载地图
            watchZoom() {
                let { map } = this;
                let _self = this;

                this.map.on('zoomend', e => {
                    let zoom = this.map.getZoom();
                    console.log(zoom)
                    if (zoom <= 11) {
                        this.init(this.baseMap[0].name)
                    } else if (zoom >= 12 && zoom <= 15) {
                        this.init(this.baseMap[1].name)
                    } else {
                        this.init(this.baseMap[2].name)
                    }
                })
            }
        }

        let mapToggles = new MapToggle({
            map,
            watch: true,
            defaultMapName: baseMapArr[0].name,
            baseMap: baseMapArr
        });

        function toggle(name) {
            mapToggles.init(name)
        }
    </script>

</body>

</html>


文章版权声明：除非注明，否则均为 譬如朝露_策温技术开发工作室博客原创文章，转载或复制请以超链接形式并注明出处。