master

分支 (1)

管理

管理

master

map
/
gaodemap.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>浏览器定位</title>
    <!--[if lte IE 8]><link rel="stylesheet" href="AMD/libs/mapapi/newmap.ie.css" /><![endif]-->
    <link href="js/mapapi/newmap.css" rel="stylesheet" />
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css" />
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=715df321d5c3705775b73405aff8afcb"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
    <script type="text/javascript" src="js/mapapi/NewMap.js"></script>
    <script type="text/javascript" src="js/convert.js"></script>

    <body>
        <div style="position:absolute;height:100%;width:50%;">
            <div id='container'></div>
            <div id="tip"></div>
        </div>
        <div style="position:absolute;width:50%;left:50%;height:100%;">
            <div id='map' style="height: 100%; width: 100%;"></div>
        </div>
        <script type="text/javascript">
            /*由于Chrome、IOS10等已不再支持非安全域的浏览器定位请求，为保证定位成功率和精度，请尽快升级您的站点到HTTPS。*/
            var map, geolocation;
            //加载地图，调用浏览器定位服务
            map = new AMap.Map('container', {
                resizeEnable: true
            });
            map.plugin('AMap.Geolocation', function() {
                geolocation = new AMap.Geolocation({
                    enableHighAccuracy: true, //是否使用高精度定位，默认:true
                    timeout: 10000, //超过10秒后停止定位，默认：无穷大
                    buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                    zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
                    buttonPosition: 'RB'
                });
                map.addControl(geolocation);
                geolocation.getCurrentPosition();
                AMap.event.addListener(geolocation, 'complete', onComplete); //返回定位信息
                AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息
            });
            AMap.event.addListener(map, 'zoomend', function() {
                var zoom = map.getZoom();
                nmap.moveTo(nmap.getCenter(), zoom - 2);
            });
            AMap.event.addListener(map, 'dragend', function() {
                var point = map.getCenter();
                nmapChange(point.lng, point.lat);
            });
            //解析定位结果
            function onComplete(data) {
                var str = ['定位成功'];
                str.push('经度：' + data.position.getLng());
                str.push('纬度：' + data.position.getLat());
                if (data.accuracy) {
                    str.push('精度：' + data.accuracy + ' 米');
                } //如为IP精确定位结果则没有精度信息
                str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
                document.getElementById('tip').innerHTML = str.join('<br>');
                setTimeout(function() {
                    nmapShow(data.position.getLng(), data.position.getLat());
                }, 2000);

            }
            //解析定位错误信息
            function onError(data) {
                document.getElementById('tip').innerHTML = '定位失败';
            }

            var nmap, layer1, layer2;

            var layer = [{
                "Id": "0",
                "Label": "矢量地图",
                "layerType": "vector",
                "layerClass": "1",
                "OnlineResource": "http://t0.tianditu.com/vec_c/wmts",
                "Name": "vec",
                "Sort": "0",
                "Type": "wmtslayer",
                "Resolutions": "0.3515625,0.17578125,0.087890625,0.0439453125,0.02197265625,0.010986328125,0.0054931640625,0.00274658203125,0.001373291015625,0.0006866455078125,0.00034332275390625,0.000171661376953125,0.0000858306884765625,0.00004291534423828125,0.00002145767211914062,0.00001072883605957031,0.000005364418029785155",
                "ResolutionIndexs": "2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18",
                "IsBasicLayer": "true",
                "IsShowInList": "false",
                "InitVisible": "true",
                "BoundingBox": "-180,-90,180,90",
                "Projection": "EPSG:4490",
                "TileOrigin": "-180,90",
                "TileSize": "256,256",
                "Format": "tiles",
                "CenterPoint": "",
                "Unit": "dd",
                "Transparent": "true",
                "Version": "1.3.0",
                "TileMatrixSet": "c",
                "StyleIdentifier": "default",
                "ServiceMode": "KVP"
            }, {
                "Id": "1",
                "Label": "矢量地图注记",
                "layerType": "vector",
                "layerClass": "1",
                "OnlineResource": "http://t0.tianditu.com/cva_c/wmts",
                "Name": "cva",
                "Sort": "0",
                "Type": "wmtslayer",
                "Resolutions": "0.3515625,0.17578125,0.087890625,0.0439453125,0.02197265625,0.010986328125,0.0054931640625,0.00274658203125,0.001373291015625,0.0006866455078125,0.00034332275390625,0.000171661376953125,0.0000858306884765625,0.00004291534423828125,0.00002145767211914062,0.00001072883605957031,0.000005364418029785155",
                "ResolutionIndexs": "2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18",
                "IsBasicLayer": "false",
                "IsShowInList": "false",
                "InitVisible": "true",
                "BoundingBox": "-180,-90,180,90",
                "Projection": "EPSG:4490",
                "TileOrigin": "-180,90",
                "TileSize": "256,256",
                "Format": "tiles",
                "CenterPoint": "",
                "Unit": "dd",
                "Transparent": "true",
                "Version": "1.3.0",
                "TileMatrixSet": "c",
                "StyleIdentifier": "default",
                "ServiceMode": "KVP"
            }];

            function createWMTSLayer(_layerInfo) {
                var _resolutions, _resolutionIndexs, _invisiblelevels, wmtsLayer;
                _layerInfo.Resolutions && (_resolutions = _layerInfo.Resolutions.split(','));
                _layerInfo.ResolutionIndexs && (_resolutionIndexs = _layerInfo.ResolutionIndexs.split(','));
                for (var i = 0; i < _resolutions.length; i++) {
                    _resolutions[i] = parseFloat(_resolutions[i]);
                }
                var aExt = _layerInfo.BoundingBox.split(',');
                var tileOrigin = _layerInfo.TileOrigin.split(',');

                var lyrOptions3 = {
                    layer: _layerInfo.Name,
                    tileSize: new NXY(256, 256),
                    tileOrigin: new NXY(parseInt(tileOrigin[0]), parseInt(tileOrigin[1])),
                    resolutions: _resolutions,
                    format: _layerInfo.Format || "image/png",
                    units: _layerInfo.Unit || "dd",
                    serviceMode: _layerInfo.ServiceMode,
                    style: _layerInfo.StyleIdentifier || "default",
                    tileMatrixSet: _layerInfo.TileMatrixSet,
                    projection: _layerInfo.Projection,
                    maxExtent: new NBounds(parseFloat(aExt[0]), parseFloat(aExt[1]), parseFloat(aExt[2]), parseFloat(aExt[3]))
                };
                wmtsLayer = new NWMTSLayer(_layerInfo.Name, _layerInfo.OnlineResource, lyrOptions3);
                if (_resolutionIndexs) {
                    wmtsLayer.serverResolutions = {};
                    for (var idx = 0, _count = _resolutionIndexs.length; idx < _count; idx++) {
                        wmtsLayer.serverResolutions[_resolutionIndexs[idx]] = parseFloat(_resolutions[idx]);
                    }
                } else {
                    wmtsLayer.serverResolutions = _resolutions;
                }
                wmtsLayer.isBasicLayer = (_layerInfo.IsBasicLayer == "true") ? true : false;
                wmtsLayer.visible = (_layerInfo.InitVisible == "true") ? true : false;
                return wmtsLayer;
            }

            function mapInit() {
                nmap = new NMap("map", {
                    zoom: 1,
                    center: new NXY(116.3911, 39.9067)
                });
                for (var i = 0; i < layer.length; i++) {
                    var nlay = createWMTSLayer(layer[i]);
                    nmap.addLayer(nlay);
                }

                //移动到中心点和缩放级别
                nmap.moveTo(new NXY(116.3911, 39.9067), 15);

                //添加鱼骨条到地图
                nmap.addControl(new NPanZoomBarControl());
                //添加比例尺到地图
                nmap.addControl(new NScaleControl());
                //添加地图坐标到地图
                nmap.addControl(new NPositionControl());
                //缩放平移
                nmap.setMode("dragzoom");
            }

            function nmapShow(lng, lat) {
                var xx = lng,
                    yy = lat;
                var gcj02towgs84 = coordtransform.gcj02towgs84(xx, yy); //坐标转换GCJ-02到WGS84
                var x = gcj02towgs84[0],
                    y = gcj02towgs84[1];
                nmap.clearOverlays();
                var markeroption = {
                    imgUrl: 'img/loc.png',
                    shadowUrl: "",
                    markerSize: new NXY(26, 26),
                    imgOffset: new NXY(0, 0),
                    markerAnchor: new NXY(13, 13)
                };
                var marker = new NSpriteMarker(new NXY(x, y), markeroption);
                nmap.addOverlays(marker);
                nmap.moveTo(new NXY(x, y), 15);
            }

            function nmapChange(lng, lat) {
                var xx = lng,
                    yy = lat;
                var gcj02towgs84 = coordtransform.gcj02towgs84(xx, yy); //坐标转换GCJ-02到WGS84
                var x = gcj02towgs84[0],
                    y = gcj02towgs84[1];
                nmap.moveTo(new NXY(x, y));
            }
            mapInit();
        </script>
    </body>

</html>