正文

esri-leaflet使用发布服务的符号集

譬如朝露 V管理员/ / 0 评论/ 2096阅读
03 04 
<!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="https://unpkg.com/esri-leaflet-renderers@2.0.6"></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>电子</li>
        <li>午夜蓝</li>
        <li>影像</li>
    </ul>
    <script>




        var map = L.map('map', {
            zoomControl: false
        }).setView([31.477758116050047, 120.47843970422669], 15);
        let toggleObj = {
            dz: 'http://172.16.9.114:6080/arcgis/rest/services/BaseMap/szdzdt2019_2000/MapServer',
            wy: 'http://172.16.9.114:6080/arcgis/rest/services/BaseMap/BlueMap2019_2000/MapServer',
            yx: 'http://172.16.9.114:6080/arcgis/rest/services/BaseMap/SZDOM2017_2000/MapServer',
            layer: null,
            handle: (str) => {
                if (this.layer) {
                    map.removeLayer(this.layer)
                }

                this.layer = layer = L.esri.dynamicMapLayer({
                    // url: 'http://172.16.9.114:6080/arcgis/rest/services/BaseMap/CSRaster2019_2000/MapServer',
                    url: toggleObj[str],

                }).addTo(map);
            }
        }
        toggleObj.handle('dz')

        L.esri.featureLayer({
            url: 'http://172.16.9.114:6080/arcgis/rest/services/CSZHNY/CSZHNY_ZT/FeatureServer/1',
            simplifyFactor: 1
        }).addTo(map).on('click', (event, data) => {
            console.log(event, data)
        })

        let mapDom = document.getElementsByClassName('toggle')[0].getElementsByTagName('li');
        mapDom[0].onclick = (e) => {
            toggleObj.handle('dz')
        }
        mapDom[1].onclick = (e) => {
            toggleObj.handle('wy')
        }
        mapDom[2].onclick = (e) => {
            toggleObj.handle('yx')
        }

    </script>

</body>

</html>


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