腾讯位置服务入门使用JavaScript API GL自定义3D地图

路过君

发布于 2020-12-25 11:28:53

2.5K00

代码可运行

文章被收录于专栏：路过君BLOG from CSDN路过君BLOG from CSDN

运行总次数：0

代码可运行

1. 准备

使用腾讯位置服务需要申请服务密钥注意：此案例中需使用webservice，建议使用IP/域名授权方便测试，生产环境如需使用签名校验方式授权参考此处
JavaScript API GL官方文档

2. 创建地图

效果

源码

<!-- 引入API -->
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=此处填入腾讯位置服务密钥"></script>
<body onload="initMap()">
<div id="container"></div>
<script type="text/javascript">
    function initMap() {    	
        var center = new TMap.LatLng(24.594221617, 117.9752365);//中心坐标
        var ne = new TMap.LatLng(24.599587,117.980751);//东北角坐标
        var sw = new TMap.LatLng(24.588856,117.969722);//西南角坐标
        var latLngBounds = new TMap.LatLngBounds(sw, ne);//地图显示范围
        //初始化地图
        var map = new TMap.Map("container", {
            rotation: 0,//设置地图旋转角度
            pitch: 45, //设置俯仰角度（0~45）
            zoom: 14,//设置地图缩放级别
            center: center,//设置地图中心点坐标
            boundary: latLngBounds,//设置地图显示范围
            showControl: false,//是否显示地图控件
            baseMap: {
                type: 'vector',// 矢量地图底图模式
                features: [
                    'base', // 路面
                    'building3d', //三维建筑
                    // 'point', // 隐藏POI文字
                    'label' // 道路文字
                ]
            }
        });
    }
</script>
</body>

坐标可以通过腾讯地图坐标拾取器查询

设置了边界范围后，拖拽、缩放等操作无法将地图移动至边界外，默认为null

3. 添加标记和文本

效果

源码

var position1 = new TMap.LatLng(39.916527, 116.397128);
//初始化标记
var marker = new TMap.MultiMarker({
    id: "marker-layer", //图层id
    map: map,
    styles: { //点标注的相关样式
        "marker": new TMap.MarkerStyle({
            "width": 25,
            "height": 35,
            // "anchor": { x: 12, y: 35 }, // 锚点，默认为{ x: width/2, y: height }
            "src": "https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png"
        })
    },
    geometries: [{ //点标注数据数组
        "id": "demo",
        "styleId": "marker",
        "position": position1,
        "properties": {
            "title": "marker"
        }
    }]
});
//初始化文本
var label = new TMap.MultiLabel({
    id: 'label-layer',
    map: map,
    styles: {
        'label': new TMap.LabelStyle({
            'color': '#3777FF', //颜色属性
            'size': 20, //文字大小属性
            'offset': {x: 0, y: 10}, //文字偏移属性单位为像素
            'angle': 0, //文字旋转属性
            'alignment': 'center', //文字锚点水平对齐属性
            'verticalAlignment': 'top' //文字锚点垂直对齐属性
        })
    },
    geometries: [{
        'id': 'label', //点图形数据的标志信息
        'styleId': 'label', //样式id
        'position': position1, //标注点位置
        'content': '总部', //标注文本
        'properties': { //标注点的属性数据
            'title': 'label'
        }
    }]
});

4. 点击标记，弹出信息窗口

效果

源码

//初始化infoWindow
var infoWindow = new TMap.InfoWindow({
    map: map,
    position: center, // 初始位置，必须设置
    offset: { x: 0, y: -32 } //设置信息窗相对position偏移像素
});
infoWindow.close();//初始关闭信息窗关闭
//监听标注点击事件
marker.on("click", function (evt) {
    //设置infoWindow
    infoWindow.open(); //打开信息窗
    infoWindow.setPosition(evt.geometry.position);//设置信息窗位置
    infoWindow.setContent(evt.geometry.properties.title);//设置信息窗内容

5. 绘制建筑模型

效果

源码

var path = [[ //多边形的位置信息
    new TMap.LatLng(24.590890, 117.974330),
    new TMap.LatLng(24.592573, 117.972388),
    new TMap.LatLng(24.595549, 117.975520),
    new TMap.LatLng(24.593895, 117.977430),
]]
//初始化polygon
var polygon = new TMap.MultiPolygon({
    id: 'polygon-layer', //图层id
    map: map, //设置多边形图层显示到哪个地图实例中
    //多边形样式
    styles: {
        'polygon': new TMap.ExtrudablePolygonStyle({
            'color': 'rgba(0,125,255,0.2)', //面填充色
            'showBorder': true, //是否显示拔起面的边线
            'extrudeHeight': 30, //多边形拔起高度
            'borderColor': 'rgba(0,125,255,1)' //边线颜色
        })
    },
    //多边形数据
    geometries: [
        {
            'id': 'p1', //该多边形在图层中的唯一标识（删除、更新数据时需要）
            'styleId': 'polygon', //绑定样式名
            'paths': path, //多边形轮廓
        }
    ]
});

6. 绘制路线

效果

源码

var paths = [
    new TMap.LatLng(24.590885, 117.974335),
    new TMap.LatLng(24.591480, 117.973638),
    new TMap.LatLng(24.592251, 117.972747),
    new TMap.LatLng(24.592573, 117.972382),
    new TMap.LatLng(24.593188, 117.972972),
    new TMap.LatLng(24.595266, 117.975204),
    new TMap.LatLng(24.595568, 117.975537),
    new TMap.LatLng(24.595188, 117.975987),
];
var green = 'rgba(0, 180, 0, 1)',
    red = 'rgba(255, 0, 0, 1)',
    yellow ='rgba(204,153, 0, 1)';
var polylineLayer = new TMap.MultiPolyline({
    map: map, // 绘制到目标地图
    // 折线样式定义
    styles: {
        'style_blue': new TMap.PolylineStyle({
            color: '#3777FF', //线填充色
            width: 10, //折线宽度
            borderWidth: 0, //边线宽度
            showArrow: true,
            arrowOptions: {
                space: 70
            },
            lineCap: 'round',
        }),
    },
    geometries: [{
        styleId: 'style_blue',
        rainbowPaths: [ // 彩虹线数组
            {
                path: [paths[0], paths[1]],
                color: yellow,
            },
            {
                path: [paths[1], paths[2]],
                color: green,
            },
            {
                path: [paths[2], paths[3]],
                color: red,
            },
            {
                path: [paths[3], paths[4]],
                color: yellow,
            },
            {
                path: [paths[4], paths[5]],
                color: green,
            },
            {
                path: [paths[5], paths[6]],
                color: red,
            },
            {
                path: [paths[6], paths[7]],
                color: yellow,
            }
        ],
    }],
});

7. 规划路径

效果

源码

window.map = map;
window.drivingFrom = [24.590129, 117.971079];
window.drivingTo = [24.593636, 117.972951];
var url = "https://apis.map.qq.com/ws/direction/v1/driving/"; //请求路径
url += "?from=" + drivingFrom[0] + "," + drivingFrom[1];  //起点坐标
url += "&to=" + drivingTo[0] + "," + drivingTo[1];  //终点坐标
url += "&output=jsonp&callback=cb";	//指定JSONP回调函数名，本例为cb
url += "&key=此处填入腾讯位置服务密钥"; //开发key，可在控制台自助创建
//发起JSONP请求，获取路线规划结果
jsonp_request(url);
//浏览器调用WebServiceAPI需要通过Jsonp的方式，此处定义了发送JOSNP请求的函数
function jsonp_request(url) {
    var script = document.createElement('script');
    script.src = url;
    document.body.appendChild(script);
}
//定义请求回调函数，在此拿到计算得到的路线，并进行绘制
function cb(ret) {
	// 如果调用失败可在ret中获取到错误消息
    var coords = ret.result.routes[0].polyline, pl = [];
    //坐标解压（返回的点串坐标，通过前向差分进行压缩）
    var kr = 1000000;
    for (var i = 2; i < coords.length; i++) {
        coords[i] = Number(coords[i - 2]) + Number(coords[i]) / kr;
    }
    //将解压后的坐标放入点串数组pl中
    for (var i = 0; i < coords.length; i += 2) {
        pl.push(new TMap.LatLng(coords[i], coords[i + 1]));
    }
    display_polyline(pl)//显示路线
    //标记起终点marker
    var marker = new TMap.MultiMarker({
        id: 'marker-layer-driving',
        map: map,
        styles: {
            "start": new TMap.MarkerStyle({
                "width": 25,
                "height": 35,
                "anchor": {x: 16, y: 32},
                "src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/start.png'
            }),
            "end": new TMap.MarkerStyle({
                "width": 25,
                "height": 35,
                "anchor": {x: 16, y: 32},
                "src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/end.png'
            })
        },
        geometries: [{
            "id": 'start',
            "styleId": 'start',
            "position": new TMap.LatLng(drivingFrom[0], drivingFrom[1])
        }, {
            "id": 'end',
            "styleId": 'end',
            "position": new TMap.LatLng(drivingTo[0], drivingTo[1])
        }]
    });
}
function display_polyline(pl) {
    //创建 MultiPolyline显示折线
    var polylineLayer = new TMap.MultiPolyline({
        id: 'polyline-layer', //图层唯一标识
        map: map,//绘制到目标地图
        //折线样式定义
        styles: {
            'style_blue': new TMap.PolylineStyle({
                'color': '#3777FF', //线填充色
                'width': 8, //折线宽度
                'borderWidth': 5, //边线宽度
                'borderColor': '#FFF', //边线颜色
                'lineCap': 'round', //线端头方式
            })
        },
        //折线数据定义
        geometries: [
            {
                'id': 'pl_1',//折线唯一标识，删除时使用
                'styleId': 'style_blue',//绑定样式名
                'paths': pl
            }
        ]
    });
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020/12/23 ，如有侵权请联系 cloudcommunity@tencent.com 删除

tcp/ip

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

tcp/ip

登录后参与评论

0 条评论

热度

腾讯位置服务入门使用JavaScript API GL自定义3D地图

腾讯位置服务入门使用JavaScript API GL自定义3D地图

1. 准备

2. 创建地图

3. 添加标记和文本

4. 点击标记，弹出信息窗口

5. 绘制建筑模型

6. 绘制路线

7. 规划路径

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

腾讯位置服务入门 使用JavaScript API GL自定义3D地图

腾讯位置服务入门 使用JavaScript API GL自定义3D地图

1. 准备

2. 创建地图

3. 添加标记和文本

4. 点击标记，弹出信息窗口

5. 绘制建筑模型

6. 绘制路线

7. 规划路径

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

腾讯位置服务入门使用JavaScript API GL自定义3D地图

腾讯位置服务入门使用JavaScript API GL自定义3D地图