当前位置：首页 > article >正文

天地图入门|标注|移动飞行|缩放，商用地图替换

article 2024/11/14 11:49:18

“天地图”是国家测绘地理信息局建设的地理信息综合服务网站。集成了来自国家、省、市（县）各级测绘地理信息部门，以及相关政府部门、企事业单位、社会团体、公众的地理信息公共服务资源，如果做的项目是政府部门、企事业单位尽量选择天地图，因为相比其他几家服务商更加权威。

第一步：登录/注册国家地理信息公共服务平台
第二步：点击我点击控制台会提示注册为开发者

第三步：注册开发者后创建新应用选择浏览器端（可以不填白名单）里面有您的密钥

第四步：复制下面的html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>HELLO WORLD</title>
    <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=您的密钥"></script>
    <script>
        var map;
        var zoom = 5;//默认级别（19级：20米18级：50米 17级：100米,15级：500米，14级：1公里，13级：2公里， 12级：5公里，11级：10公里，10级：20公里,5级 中国）
        function onLoad() {
            //找到DIV初始化
            //参数 projection: 'EPSG:4326' 倾斜 900913
            map = new T.Map('mapDiv', {
                projection: 'EPSG:3785'
            })
            // 中心点和初始化级别
            map.centerAndZoom(new T.LngLat(116.40769, 39.89945), zoom);
            //改变底色
            //map.setStyle('indigo')
            //创建一个点
            var lng1 = new T.LngLat(116.411794, 39.9068);
            // 创建标注对象
            var marker = new T.Marker(lng1);
            // 点击标注点
            marker.addEventListener("click", (e) => {
                console.log(e)
            })
            // 创建文本对象
            var label = new T.Label({
                text: "用户1",
                position: lng1,
                offset: new T.Point(-9, 0)
            });
            //向地图上添加标注
            map.addOverLay(marker);
            //向地图上添加文本
            map.addOverLay(label);


            //2秒后级别为19 且移动到 创建的点
            setTimeout(function () {
                map.setZoom(19);

                map.panTo(lng1);
            }, 2000);
        }
    </script>
</head>
<body onLoad="onLoad()">
    <div id="mapDiv" style="position:absolute;width:1500px; height:900px"></div>
 开发文档  http://lbs.tianditu.gov.cn/api/js4.0/examples.html
</body>
</html>

到此初始化，创建标注点，标注点加文字，放大地图，移动到标注点都已实现

查看全文

http://www.kler.cn/a/390942.html