重庆一张图 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <title>一张图测试思极底图Democreat4   </title>
    <link href="http://25.64.40.150:32101/pms-amap-portal/webgissdk/libs/mapbox/src/mapbox-gl.css" rel="stylesheet"/>
    <link href="http://25.64.40.150:32101/pms-amap-portal/webgissdk/libs/webgis/css/narimap.css" rel="stylesheet"/>
    <!--    <script src="http://map-cq.sgcc.com.cn/maps?v=3.1.0"></script>-->
    <script src="http://25.64.40.150:32101/pms-amap-portal/webgissdk/libs/mapbox/src/mapbox-gl.js"></script>
    <script src="http://25.64.40.150:32101/pms-amap-portal/webgissdk/libs/sgauth/md5.js"></script>
    <script src="http://25.64.40.150:32101/pms-amap-portal/webgissdk/libs/sgauth/sm3.js"></script>
    <script src="http://25.64.40.150:32101/pms-amap-portal/webgissdk/libs/webgis/narimap.min.js"></script>

    <style>
        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
<div id="map" style="width: 100%; height: 100%"></div>
<script>
    var map;

    Require(['PSRMap'], () => {
        // 电网GIS地图服务登录
        NARIMap.SGAuth.login()
            .then(function (result) {
                if (result.success) {
                    console.log('登录成功');
                } else {
                    console.log('登录失败', result);
                }
                console.log("默认打开暗色系地图 --------------- NARIMap.SGAuth.login().then -------- ")
                //默认打开暗色系地图
                // initMap(NARIMap.Config.styles.dark);
                initMap(NARIMap.Config.styles.sjDark);
            })
            .catch((err) => {
                console.log('错误', err);
            });

        ///// --------------------------------

        // if (NARIMap.Config.examples.notlogin) {
        //     console.log("默认打开暗色系地图 --------------- 未登录 -------- ")
        //     //默认打开暗色系地图
        //     initMap(NARIMap.Config.styles.dark);
        // } else {
        //     //电网GIS地图服务登录
        //     NARIMap.SGAuth.login()
        //         .then(function (result) {
        //             if (result.success) {
        //                 console.log('登录成功');
        //             } else {
        //                 console.log('登录失败', result);
        //             }
        //             console.log("默认打开暗色系地图 --------------- NARIMap.SGAuth.login().then -------- ")
        //             //默认打开暗色系地图
        //             initMap(NARIMap.Config.styles.dark);
        //         })
        //         .catch((err) => {
        //             console.log('错误', err);
        //         });
        // }
    });

    /**
     * @param styleurl 地图样式文件路径
     */
    function initMap(styleurl) {
        map = new NARIMap.Map({
            // 地图绑定的DOM元素ID
            container: 'map',
            // 地图样式
            style: styleurl,
            // 默认缩放层级
            zoom: 7,
            // 地图中心点
            center: [119.45259089995932, 32.93433342834534],
            // 地图默认字体
            localIdeographFontFamily: 'Microsoft YoHei'
        });
        map.on('load', () => {
            map.on('load', () => {
                console.log('------------------地图加载完成==============')
            })
            map.on('click', function (e) {
                console.log("经纬度坐标：" + [e.lngLat.lng, e.lngLat.lat])
            })
            map.on('wheel', () => {
                console.log(map.getZoom())
            })
            //添加电网图层
            // var psrmap = new NARIMap.PSRMap(map);
            // psrmap.addPSR();
            // //添加电网要素点击事件
            // psrmap.on('click', (features) => {
            //     console.log(features);
            // });
        });
    }


    function inits() {
        let num = 0;
        let inter = setInterval(() => {
            if (typeof Require == 'undefined') {
                num += 1;
            }
            if (typeof Require == 'undefined' && num > 800) {
                console.log("amap API Require timeout ")
                clearInterval(inter)
            }
            if (typeof Require === 'function') {
                mapInitsx()
                clearInterval(inter)
            }
        }, 200)
    }

    function mapInitsx() {
        Require('http://25.64.40.150:32101/pms-amap-portal/webgissdk/', ['PSRMap', 'ResourceQuery'], () => {
            if (NARIGIS.Config.examples.notlogin) {
                console.log("------------------- notlogin    sjBase  ------------------");
                initMaps(NARIGIS.Config.styles.sjBase);//raster  base dark sjBase
            } else {
                console.log('------------------- mapInit login -----------------------')
            }
        });
    }

    function initMaps(styleurl) {
        mapboxgl.accessToken = 'pk.eyJ1IjoieXVhbnNodXhpbiIsImEiOiJja3dldDVzYXUwN3pyMnRxcWZ4YTVnYm8xIn0.9kP6r2ju-PIGy_ivmW_ZEg'
        map = new NARIGIS.Map({
            container: 'map',
            style: styleurl,
            zoom: 8,
            center: [119.45259089995932, 32.93433342834534],
            controls: ['gmolesate', 'scale'],
            localIdeographFontFamily: 'Microsoft YoHei',
            attributionControl: false,
        })
        map.on('load', () => {
            console.log('------------------地图加载完成==============')
        })
        map.on('click', function (e) {
            console.log("经纬度坐标：" + [e.lngLat.lng, e.lngLat.lat])
        })
        map.on('wheel', () => {
            console.log(map.getZoom())
        })
    }

</script>
</body>
</html>
posted @ 2022-10-10 12:48  A影子放風箏  阅读(73)  评论(0)    收藏  举报
// 侧边栏目录 // https://blog-static.cnblogs.com/files/douzujun/marvin.nav.my1502.css