master

分支 (1)

管理

管理

master

map
/
tianditumap.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" />
    <script type="text/javascript" src="js/mapapi/NewMap.js"></script>
    <script type="text/javascript" src="js/jquery-1.10.2.js"></script>

    <body>
        <div style="position: absolute;left: 0;right: 0;top: 0;bottom: 0;">
            <div id='map' style="height: 100%; width: 100%;"></div>
        </div>
        <script type="text/javascript">
            /*由于Chrome、IOS10等已不再支持非安全域的浏览器定位请求，为保证定位成功率和精度，请尽快升级您的站点到HTTPS。*/
            var map, 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(119.4918, 35.3998)
                });
                for (var i = 0; i < layer.length; i++) {
                    var nlay = createWMTSLayer(layer[i]);
                    nmap.addLayer(nlay);
                }

                //移动到中心点和缩放级别
                nmap.moveTo(new NXY(119.4918, 35.3998), 8);

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

                //showLine();
                showLineT("五莲县");
            }

            function showLine(name) {
                $.get("json/xian.json", function(data, status) {
                    var sta = status;
                    var res = data;
                    var feas = res.content.features.features;
                    var markeroption = {
                        strokeColor: 'red',
                        strokeWidth: 5,
                        strokeStyle: 'solid'
                    };
                    for (var i = 0; i < feas.length; i++) {
                        var a = feas[i].geometry.coordinates;
                        var type = feas[i].geometry.type;
                        var pointArr = new Array();
                        if (type == "LineString") {
                            for (var j = 0, len = a.length; j < len; j++) {
                                var singlePoint = new NXY(a[j][0], a[j][1]);
                                pointArr.push(singlePoint);
                            }
                            var marker = new NPolyline(pointArr, markeroption);
                        } else if (type == "MultiLineString") {
                            for (var k = 0, len; k < a.length; k++) {
                                var aa = a[k];
                                for (var kk = 0; kk < aa.length; kk++) {
                                    var singlePoint = new NXY(aa[kk][0], aa[kk][1]);
                                    pointArr.push(singlePoint);
                                }
                            }
                            var marker = new NPolyline(pointArr, markeroption);
                        }
                        nmap.addOverlays(marker);
                    }
                });
            };

            function showLineT(name) {
                $.get("json/main.json", function(data, status) {
                    var sta = status;
                    var res = data;
                    var feas = res.content.features.features;
                    var markeroption = {
                        strokeColor: 'red',
                        strokeWidth: 5,
                        strokeStyle: 'solid'
                    };
                    for (var i = 0; i < feas.length; i++) {
                        if (feas[i].properties.NAME == name) {
                            var a = feas[i].geometry.coordinates;

                            for (var k = 0, len; k < a.length; k++) {
                                var aa = a[k];
                                var pointArr = new Array();
                                for (var kk = 0; kk < aa.length; kk++) {
                                    var singlePoint = new NXY(aa[kk][0], aa[kk][1]);
                                    pointArr.push(singlePoint);
                                }
                                var marker = new NPolyline(pointArr, markeroption);
                                nmap.addOverlays(marker);
                            }
                        }

                    }
                });
            };

            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>