75 lines
2.7 KiB
Plaintext
75 lines
2.7 KiB
Plaintext
|
<!DOCTYPE html>
|
||
|
|
<html lang="zh-CN">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>地面图片叠加层</title>
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||
|
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
|
||
|
|
<style>
|
||
|
|
body,
|
||
|
|
html,
|
||
|
|
#container {
|
||
|
|
overflow: hidden;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
margin: 0;
|
||
|
|
font-family: "微软雅黑";
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="container"></div>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
<script>
|
||
|
|
var map = new BMapGL.Map('container');
|
||
|
|
map.centerAndZoom(new BMapGL.Point(117.200, 36.2437), 18);
|
||
|
|
map.enableScrollWheelZoom(true);
|
||
|
|
map.setTilt(45);
|
||
|
|
map.setDisplayOptions({
|
||
|
|
poiText: false, // 隐藏poi标注
|
||
|
|
poiIcon: false, // 隐藏poi图标
|
||
|
|
building: false // 隐藏楼块
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
map.clearOverlays();//清除地图覆盖物
|
||
|
|
//思路：利用行政区划点的集合与外围自定义东南西北形成一个环形遮罩层
|
||
|
|
//1.获取选中行政区划边框点的集合rs.boundaries[0]
|
||
|
|
var strs = new Array();
|
||
|
|
|
||
|
|
var ENWS = "";
|
||
|
|
for (var i=0;i<strs.length;i++) {
|
||
|
|
ENWS += strs[i] + ";"
|
||
|
|
}
|
||
|
|
//2.自定义外围边框点的集合
|
||
|
|
var E_JW = "170.672126, 39.623555;"; //东
|
||
|
|
var EN_JW = "170.672126, 81.291804;"; //东北角
|
||
|
|
var N_JW = "105.913641, 81.291804;"; //北
|
||
|
|
var NW_JW = "-169.604276, 81.291804;"; //西北角
|
||
|
|
var W_JW = "-169.604276, 38.244136;"; //西
|
||
|
|
var WS_JW = "-169.604276, -68.045308;"; //西南角
|
||
|
|
var S_JW = "114.15563, -68.045308;"; //南
|
||
|
|
var SE_JW = "170.672126, -68.045308 ;"; //东南角
|
||
|
|
//3.添加环形遮罩层
|
||
|
|
var ply1 = new BMapGL.Polygon(ENWS + E_JW + SE_JW + S_JW + WS_JW + W_JW + NW_JW + N_JW + EN_JW + E_JW, {strokeColor:"#000",strokeOpacity:0.1,fillColor:"#000",fillOpacity:"0.9"}); //建立多边形覆盖物
|
||
|
|
map.addOverlay(ply1);//遮罩物是半透明的，如果需要纯色可以多添加几层
|
||
|
|
map.addOverlay(ply1);//遮罩物是半透
|
||
|
|
map.addOverlay(ply1);//遮罩物是半透
|
||
|
|
|
||
|
|
var pStart = new BMapGL.Point(117.19635, 36.24093);
|
||
|
|
var pEnd = new BMapGL.Point(117.20350, 36.24764);
|
||
|
|
var bounds = new BMapGL.Bounds(new BMapGL.Point(pStart.lng, pEnd.lat), new BMapGL.Point(pEnd.lng, pStart.lat));
|
||
|
|
var imgOverlay = new BMapGL.GroundOverlay(bounds, {
|
||
|
|
type: 'image',
|
||
|
|
url: '/jsdemo/img/shouhuimap.png',
|
||
|
|
opacity: 1
|
||
|
|
});
|
||
|
|
map.addOverlay(imgOverlay);
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|