Leaflet加载山东省天地图（第二版）实现4490坐标、坐标值转换、加载arcgis服务示例

原创于 2025-11-18 16:11:21 发布 · 852 阅读
13 ·
CC 4.0 BY-SA版权
文章标签：
#前端 #javascript
Leaflet 专栏收录该内容
3 篇文章
订阅专栏
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>map</title>
    <link rel="stylesheet" href="./lib/css/common.css">

    <!-- map -->

    <link rel="stylesheet" href="./lib/leaflet/leaflet.css" />
    <script src="./lib/leaflet/leaflet.js"></script>
    <script src="./lib/esri-leaflet/esri-leaflet.js"></script>
    <script src="./lib/proj4/proj4-src.js"></script>
    <script src="./lib/proj4/proj4leaflet.js"></script>

    <script src="./lib/leaflet.wmts/dist/leaflet.wmts.browser.js"></script>


    <style>
        #map {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div id="root">
        <div id="map"></div>
    </div>

    <script>

        var token_province_tdt_map = "";

        function init() {

            var CRS_4490 = new L.Proj.CRS(
                'EPSG:4490',
                '+proj=longlat +ellps=GRS80 +no_defs', {
                resolutions: [
                    1.40625,
                    0.703125,
                    0.3515625,
                    0.17578125,
                    0.087890625,
                    0.0439453125,
                    0.02197265625,
                    0.010986328125,
                    0.0054931640625,
                    0.00274658203125,
                    0.001373291015625,
                    6.866455078125e-4,
                    3.4332275390625e-4,
                    1.71661376953125e-4,
                    8.58306884765625e-5,
                    4.291534423828125e-5,
                    2.1457672119140625e-5,
                    1.0728836059570312e-5,
                    5.364418029785156e-6,
                    2.682209064925356e-6,
                    1.3411045324626732e-6,
                    6.705522662313365e-7,
                ],
                origin: [-180, 90],
            }
            );

            //电子地图
            const tdtVecLayerURL = "https://service.sdmap.gov.cn/tileservice/sdpubmap" +
                "?layer=sdpubmap&style=default&tilematrixset=default028mm&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=" + token_province_tdt_map;

            tdtVecLayer = L.tileLayer(tdtVecLayerURL, {
                // maxZoom: 17,
                tileSize: 256,
                // zoomOffset: 1,
            });


            //
            var map = L.map("map", {
                crs: CRS_4490,
            }).setView([36.663349439471915, 116.9742519218228], 17);
            map.addLayer(tdtVecLayer);



            /**
             * 加载arcgis 图层示例
              var zdUrl = "http://------------";
              var zdLayer = new L.esri.dynamicMapLayer({
                    url: zdUrl,
                    f: "image",
                    transparent: true
                });
                zdLayer.id = "rest_zd";
                zdLayer.xname = "宗地";
                map.addLayer(zdLayer);
             * */



        }


        window.jwd2Prj = function (jwdObj) {
            proj4.defs("EPSG:4490", "+proj=longlat +ellps=GRS80 +no_defs +type=crs");
            proj4.defs("EPSG:4548", "+proj=tmerc +lat_0=0 +lon_0=117 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs +type=crs");
            var result = proj4("EPSG:4490", "EPSG:4548", [jwdObj.lng, jwdObj.lat]);
            return { x: result[0], y: result[1] };
        }

        window.prj2JWD = function (xyObj) {
            proj4.defs("EPSG:4490", "+proj=longlat +ellps=GRS80 +no_defs +type=crs");
            proj4.defs("EPSG:4548", "+proj=tmerc +lat_0=0 +lon_0=117 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs +type=crs");
            var result = proj4("EPSG:4548", "EPSG:4490", [xyObj.x, xyObj.y]);
            console.log("prj2JWD result", result);
            return { lng: result[0], lat: result[1] };
        }


        init();


    </script>
</body>

</html>