底图切换
下一期项目有一项优化叫做底图切换,客户可以自己选择看不看见街道图这个东西,研究了一下,简单基本实现demo。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>切换</title>
<style>
html,
body {
height: 100%;
margin: 0;
}
</style>
</head>
<body>
<button class="btn" onclick="handleChange()">切换</button>
<div id="map" style="width: 100%; height: 100%;"></div>
<script src="https://api.map.baidu.com/api?v=3.0&ak=你的key"></script>
<script>
const tileLayer1 = new BMap.TileLayer();
tileLayer1.getTilesUrl = function (tileCoord, zoom) {
const x = tileCoord.x;
const y = tileCoord.y;
return "***.png"; //你的底图 本人截了一张百度的底图做demo
};
var mapType1 = new BMap.MapType('自定义地图', tileLayer1, { minZoom: 10, maxZoom: 25 });
var map = new BMap.Map('map', { mapType: mapType1 });
map.centerAndZoom(new BMap.Point(116.404, 39.915), 21);
map.enableScrollWheelZoom(true);
var point = new BMap.Point(116.404, 39.915);
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker);
var flag = 1
function handleChange() {
if (flag == 1) {
console.log('111');
map.setMapType(BMAP_NORMAL_MAP);
flag = 2
} else {
flag = 1
map.setMapType(mapType1);
}
}
</script>
</body>
</html>
对百度地图的使用还是不那么灵活,导致做出的地图功能优化点太多。如果有大神有较好的海量点打点(业务方向是铁路)的优化方案,希望可以带带小弟。现在的海量点渲染出的地图人员点太卡顿了。