Openlayers加载天地图魔卡托投影瓦片示例

最新推荐文章于 2025-07-09 14:52:46 发布

原创

最新推荐文章于 2025-07-09 14:52:46 发布 · 2.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#天地图 #地图api #openlayers #地图叠加 #天地图服务

本文详细介绍了如何使用OpenLayers加载天地图的魔卡托投影瓦片，包括影像地图和影像注记两个层级。通过实例代码展示了如何创建地图、设置图层、转换坐标以及添加点、线、面等操作，为开发者提供了清晰的参考。

天地图是国家队，各个政府部门都在改用天地图，本文主要介绍如何使用Openlayers加载天地图魔卡托投影瓦片，直接上代码，有问题留言

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 
        <title>openlayers 加载天地图地图</title>
        <script type="text/javascript" src="OpenLayers.js"></script>
    </head>
 
    <body>
    <input type="button" value="标点" onclick="addMarker()">
        <input type="button" value="标线" onclick="addLine()">
        <input type="button" value="标面" onclick="addPolygon()">
        <input type="button" value="清除" onclick="clearFeature()">点击地图可获取鼠标点击位置屏幕坐标及经纬度
        <div id="map" style="width:1024px;height:600px;"></div>
 
        <script type="text/javascript">
            get_my_url = function(bounds) {
                var res = this.map.getResolution();
                var x = Math.round ((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
                var y = Math.round ((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
                var z = this.map.getZoom();
                var path = "DataServer?T="+this.type+"&x="+x+"&y="+y+"&l="+z;
                var url = this.url;
                if (url instanceof Array) {
                    url = this.selectUrl(path, url);
                }
                return url + path;
            }
 
            var resolutions =  [
            156543.034,
            78271.517,
            39135.7585,
            19567.87925,
            9783.939625,
            4891.9698125,
            2445.98490625,
            1222.992453125,
            611.4962265625,
            305.74811328125,
            152.874056640625,
            76.4370283203125,
            38.21851416015625,
            19.10925708007813,
            9.554628540039063,