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

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
            }
        ]
    });
}

相关阅读:
Anaconda使用命令
 排序算法3--插入排序--希尔排序(缩小增量排序)
排序算法2--插入排序--折半插入排序
 排序算法1--插入排序--直接插入排序
 排序总结---常用的排序算法总结，java和js实现
 前端兼容性问题
 js对象的几种创建方式和js实现继承的方式[转]
js原型和原型链[转]
性能优化的方法
 Http状态码
原文地址：https://www.cnblogs.com/luguojun/p/16132713.html

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

1. 准备

2. 创建地图

3. 添加标记和文本

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

5. 绘制建筑模型

6. 绘制路线

7. 规划路径

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