故宫手绘地图展示—炫码科技

本示例使用腾讯Javascript API GL

        Javascript API GL是基于WebGL技术打造的3D版地图API，3D化的视野更为自由，交互更加流畅。

        提供丰富的功能接口，包括点、线、面绘制，自定义图层、个性化样式及绘图、测距工具等，使开发者更加容易的实现产品构思。
        充分发挥GPU的并行计算能力，同时结合WebWorker多线程技术，大幅度提升了大数据量的渲染性能。最高支持百万级点、线、面绘制，同时可以保持高帧率运行。

源码说明（关键部分）

第一步：引用腾讯地图API

• <script charset=”utf-8″ src=”https://map.qq.com/api/gljs?v=1.exp&key=填入你自己的key值”></script>

第二步：设置中心点坐标

var center = new TMap.LatLng(39.918019,116.397024);//设置中心点坐标

//初始化地图
var map = new TMap.Map(‘mapContainer’, {
center: center,
zoom: 16,
maxZoom:20,
baseMap: { // 设置卫星地图
type: ‘satellite’
}
});

第三步：拼接瓦片图URL

var imageTileLayer = new TMap.ImageTileLayer({
getTileUrl: function (x, y, z) {
//拼接瓦片URL
// var url=’https://3gimg.qq.com/visual/lbs_gl_demo/image_tiles_layers/’ + z + ‘/’ + x + ‘_’ + y +’.png’ ;
var url=’https://myxmkj.com/mapshouhui/gugong/tiles/’ + z + ‘/ppp’ + x + ‘_’ + y + ‘.png’;
return url;
},
tileSize: 256, //瓦片像素尺寸
minZoom: 15, //显示自定义瓦片的最小级别
maxZoom: 20, //显示自定义瓦片的最大级别
visible: true, //是否可见
zIndex: 5000, //层级高度（z轴）
opacity: 0.95, //图层透明度：1不透明，0为全透明
map: map, //设置图层显示到哪个地图实例中
});