如何制作基于高德地图的特定范围区域遮掩与蒙版遮罩效果？
- 内容介绍
- 文章标签
- 相关推荐
本文共计1470个文字，预计阅读时间需要6分钟。
参考：高德地图-2D地图下区域遮挡（只显示固定区域的内容）+ 其中：地图范围绘制：工具+实现代码：
参考：
高德地图-2D地图下区域遮掩(只显示固定区域里的内容)
其中：地图范围绘制：工具
实现代码：
<!DOCTYPE html>
<html>
<head>
<meta cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
<link rel="stylesheet" href="a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<script language="javascript" src="webapi.amap.com/maps?v=1.4.15&key=你的高德key&plugin=Map3D,AMap.Scale,AMap.ControlBar,AMap.PolyEditor"></script>
<script src="a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<link rel="stylesheet" href="a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<style>
html, body, #container {
height: 100%;
width: 100%;
}
.content-window-card {
position: relative;
box-shadow: none;
bottom: 0;
left: 0;
width: auto;
padding: 0;
}
.content-window-card p {
height: 2rem;
}
.custom-info {
border: solid 1px silver;
}
div.info-top {
position: relative;
background: none repeat scroll 0 0 #F9F9F9;
border-bottom: 1px solid #CCC;
border-radius: 5px 5px 0 0;
}
div.info-top div {
display: inline-block;
color: #333333;
font-size: 14px;
font-weight: bold;
line-height: 31px;
padding: 0 10px;
}
div.info-top img {
position: absolute;
top: 10px;
right: 10px;
transition-duration: 0.25s;
}
div.info-top img:hover {
box-shadow: 0px 0px 5px #000;
}
div.info-middle {
font-size: 12px;
padding: 10px 6px;
line-height: 20px;
}
div.info-bottom {
height: 0px;
width: 100%;
clear: both;
text-align: center;
}
div.info-bottom img {
position: relative;
z-index: 104;
}
span {
margin-left: 5px;
font-size: 11px;
}
.info-middle img {
float: left;
margin-right: 6px;
}
</style>
<script language="javascript">
function mapInit() {
var options =
{
areas:[{ //围栏1
//visible:false,//是否可见
rejectTexture:true,//是否屏蔽自定义地图的纹理
path: [[[116.316092,39.992203],
[116.314933,39.999798],
[116.31519,40.004598],
[116.31562,40.005255],
[116.316414,40.00583],
[116.318216,40.006258],
[116.318967,40.006652],
[116.318946,40.008214],
[116.3185,40.012725],
[116.326804,40.013267],
[116.328349,40.013251],
[116.328972,40.013152],
[116.330903,40.013218],
[116.331632,40.012955],
[116.335688,40.009356],
[116.336675,40.007729],
[116.336932,40.00689],
[116.336954,40.006841],
[116.337126,40.001368],
[116.337705,39.992869],
[116.325367,39.992409]]]
}]
};
var areapath1 = [
[116.326348,40.013238],
[116.326182,40.012671],
[116.325538,40.011849],
[116.32483,40.01111],
[116.324246,40.011258],
[116.323833,40.011295],
[116.323607,40.011278],
[116.323141,40.011221],
[116.322508,40.011056],
[116.322384,40.011122],
[116.322298,40.010929],
[116.3224,40.010358],
[116.322567,40.010222],
[116.322899,40.010321],
[116.323478,40.010386],
[116.323849,40.010411],
[116.323838,40.009215],
[116.323865,40.007753],
[116.323951,40.005982],
[116.324814,40.006035],
[116.32637,40.006117],
[116.327539,40.006195],
[116.327641,40.005086],
[116.327668,40.004634],
[116.330506,40.004757],
[116.330393,40.006643],
[116.330345,40.007995],
[116.330318,40.009084],
[116.333784,40.009228],
[116.335125,40.009289],
[116.33543,40.009355],
[116.335607,40.009396]
];
var areapath2 = [
[116.315051,39.99988],
[116.316022,39.999925],
[116.316049,39.99983],
[116.316226,39.999748],
[116.318302,39.999863],
[116.321858,40.000032],
[116.324052,40.000825],
[116.3249,40.000899],
[116.325898,40.000997],
[116.327958,40.001014],
[116.328151,39.999575],
[116.328473,39.997381],
[116.328623,39.996255],
[116.328956,39.99268]
];
var outer = [
new AMap.LngLat(-360,90,true),
new AMap.LngLat(-360,-90,true),
new AMap.LngLat(360,-90,true),
new AMap.LngLat(360,90,true),
];
var pathArray = [
outer
];
pathArray.push.apply(pathArray,options.areas[0].path)
var map = new AMap.Map("container", {
resizeEnable: true, //是否监控地图容器尺寸变化
rotateEnable:true,//地图是否可以旋转
//pitchEnable:true,//是否3D地图
zoom:15,
zooms:[14,20],
//pitch:80,//倾斜角度
showIndoorMap: false, // 隐藏地图自带的室内地图图层
buildingAnimation:true,//楼块出现是否带动画
expandZoomRange:true,
//viewMode:'3D',//开启3D视图,默认为关闭
buildingAnimation:true,//楼块出现是否带动画
mapStyle:'amap://styles/normal',
center: [116.327164, 40.003479], //初始地图中心点
features:['bg','point','road'],
layers:[
new AMap.TileLayer({})
]
});
map.addControl(new AMap.ControlBar({
showZoomBar:true,
showControlButton:true,
position:{
right:'10px',
top:'10px'
}
}))
new AMap.Polygon({
bubble:true,
fillOpacity:0.6,
strokeWeight:2,
strokeColor: '#00eeff',
fillColor: '#71B3ff',
path:pathArray,
map:map
})
var polyline = new AMap.Polyline({
path: areapath1,
isOutline: true,
outlineColor: '#ffeeff',
borderWeight: 3,
strokeColor: "#3366FF",
strokeOpacity: 1,
strokeWeight: 2,
// 折线样式还支持 'dashed'
strokeStyle: "solid",
// strokeStyle是dashed时有效
strokeDasharray: [10, 5],
lineJoin: 'round',
lineCap: 'round',
zIndex: 50,
})
var polyline2 = new AMap.Polyline({
path: areapath2,
isOutline: true,
outlineColor: '#ffeeff',
borderWeight: 3,
strokeColor: "#3366FF",
strokeOpacity: 1,
strokeWeight: 2,
// 折线样式还支持 'dashed'
strokeStyle: "solid",
// strokeStyle是dashed时有效
strokeDasharray: [10, 5],
lineJoin: 'round',
lineCap: 'round',
zIndex: 50,
})
polyline.setMap(map)
polyline2.setMap(map)
//实例化信息窗体
var title = 'xxx<span style="font-size:11px;color:#F00;">停车场</span>',
content = [];
content.push("停放车辆:300/320");
content.push("临时停车:100/120");
content.push("月卡停车:200/200");
content.push("<a rel="nofollow" href='ditu.amap.com/detail/B000A8URXB?citycode=110105'>详细信息</a>");
var infoWindow = new AMap.InfoWindow({
isCustom: true, //使用自定义窗体
content: createInfoWindow(title, content.join("<br/>")),
offset: new AMap.Pixel(16, -45)
});
//构建自定义信息窗体
function createInfoWindow(title, content) {
var info = document.createElement("div");
info.className = "custom-info input-card content-window-card";
//可以通过下面的方式修改自定义窗体的宽高
//info.style.width = "400px";
// 定义顶部标题
var top = document.createElement("div");
var titleD = document.createElement("div");
var closeX = document.createElement("img");
top.className = "info-top";
titleD.innerHTML = title;
closeX.src = "img.558idc.com/uploadfile/allimg/20230825/close2.jpg";
closeX.onclick = closeInfoWindow;
top.appendChild(titleD);
top.appendChild(closeX);
info.appendChild(top);
// 定义中部内容
var middle = document.createElement("div");
middle.className = "info-middle";
middle.style.backgroundColor = 'white';
middle.innerHTML = content;
info.appendChild(middle);
// 定义底部内容
var bottom = document.createElement("div");
bottom.className = "info-bottom";
bottom.style.position = 'relative';
bottom.style.top = '0px';
bottom.style.margin = '0 auto';
var sharp = document.createElement("img");
sharp.src = "img.558idc.com/uploadfile/allimg/20230825/sharp.jpg";
bottom.appendChild(sharp);
info.appendChild(bottom);
return info;
}
//关闭信息窗体
function closeInfoWindow() {
map.clearInfoWindow();
}
addMarker();
//添加marker标记
function addMarker() {
var carparkIcon = new AMap.Icon({
// 图标尺寸
size: new AMap.Size(35, 35),
// 图标的取图地址
image: '停车场.png',
// 图标所用图片大小
imageSize: new AMap.Size(35, 35),
});
var CameraIcon = new AMap.Icon({
// 图标尺寸
size: new AMap.Size(35, 35),
// 图标的取图地址
image: '摄像头.png',
// 图标所用图片大小
imageSize: new AMap.Size(40, 40),
});
var marker = new AMap.Marker({
map: map,
position: [116.3246,40.01113],
icon: carparkIcon
});
var marker2 = new AMap.Marker({
map: map,
position: [116.333515,39.99886],
icon: carparkIcon
});
var CameraMark = new AMap.Marker({
map: map,
position: [116.327968,40.001001],
icon: CameraIcon
});
//鼠标点击marker弹出自定义的信息窗体
AMap.event.addListener(marker, 'click', function () {
infoWindow.open(map, marker.getPosition());
});
AMap.event.addListener(marker2, 'click', function () {
infoWindow.open(map, marker2.getPosition());
});
}
}
</script>
</head>
<body onload="mapInit();">
<div id="container"></div>
</body>
</html>
本文共计1470个文字，预计阅读时间需要6分钟。
参考：高德地图-2D地图下区域遮挡（只显示固定区域的内容）+ 其中：地图范围绘制：工具+实现代码：
参考：
高德地图-2D地图下区域遮掩(只显示固定区域里的内容)
其中：地图范围绘制：工具
实现代码：
<!DOCTYPE html>
<html>
<head>
<meta cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
<link rel="stylesheet" href="a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<script language="javascript" src="webapi.amap.com/maps?v=1.4.15&key=你的高德key&plugin=Map3D,AMap.Scale,AMap.ControlBar,AMap.PolyEditor"></script>
<script src="a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<link rel="stylesheet" href="a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<style>
html, body, #container {
height: 100%;
width: 100%;
}
.content-window-card {
position: relative;
box-shadow: none;
bottom: 0;
left: 0;
width: auto;
padding: 0;
}
.content-window-card p {
height: 2rem;
}
.custom-info {
border: solid 1px silver;
}
div.info-top {
position: relative;
background: none repeat scroll 0 0 #F9F9F9;
border-bottom: 1px solid #CCC;
border-radius: 5px 5px 0 0;
}
div.info-top div {
display: inline-block;
color: #333333;
font-size: 14px;
font-weight: bold;
line-height: 31px;
padding: 0 10px;
}
div.info-top img {
position: absolute;
top: 10px;
right: 10px;
transition-duration: 0.25s;
}
div.info-top img:hover {
box-shadow: 0px 0px 5px #000;
}
div.info-middle {
font-size: 12px;
padding: 10px 6px;
line-height: 20px;
}
div.info-bottom {
height: 0px;
width: 100%;
clear: both;
text-align: center;
}
div.info-bottom img {
position: relative;
z-index: 104;
}
span {
margin-left: 5px;
font-size: 11px;
}
.info-middle img {
float: left;
margin-right: 6px;
}
</style>
<script language="javascript">
function mapInit() {
var options =
{
areas:[{ //围栏1
//visible:false,//是否可见
rejectTexture:true,//是否屏蔽自定义地图的纹理
path: [[[116.316092,39.992203],
[116.314933,39.999798],
[116.31519,40.004598],
[116.31562,40.005255],
[116.316414,40.00583],
[116.318216,40.006258],
[116.318967,40.006652],
[116.318946,40.008214],
[116.3185,40.012725],
[116.326804,40.013267],
[116.328349,40.013251],
[116.328972,40.013152],
[116.330903,40.013218],
[116.331632,40.012955],
[116.335688,40.009356],
[116.336675,40.007729],
[116.336932,40.00689],
[116.336954,40.006841],
[116.337126,40.001368],
[116.337705,39.992869],
[116.325367,39.992409]]]
}]
};
var areapath1 = [
[116.326348,40.013238],
[116.326182,40.012671],
[116.325538,40.011849],
[116.32483,40.01111],
[116.324246,40.011258],
[116.323833,40.011295],
[116.323607,40.011278],
[116.323141,40.011221],
[116.322508,40.011056],
[116.322384,40.011122],
[116.322298,40.010929],
[116.3224,40.010358],
[116.322567,40.010222],
[116.322899,40.010321],
[116.323478,40.010386],
[116.323849,40.010411],
[116.323838,40.009215],
[116.323865,40.007753],
[116.323951,40.005982],
[116.324814,40.006035],
[116.32637,40.006117],
[116.327539,40.006195],
[116.327641,40.005086],
[116.327668,40.004634],
[116.330506,40.004757],
[116.330393,40.006643],
[116.330345,40.007995],
[116.330318,40.009084],
[116.333784,40.009228],
[116.335125,40.009289],
[116.33543,40.009355],
[116.335607,40.009396]
];
var areapath2 = [
[116.315051,39.99988],
[116.316022,39.999925],
[116.316049,39.99983],
[116.316226,39.999748],
[116.318302,39.999863],
[116.321858,40.000032],
[116.324052,40.000825],
[116.3249,40.000899],
[116.325898,40.000997],
[116.327958,40.001014],
[116.328151,39.999575],
[116.328473,39.997381],
[116.328623,39.996255],
[116.328956,39.99268]
];
var outer = [
new AMap.LngLat(-360,90,true),
new AMap.LngLat(-360,-90,true),
new AMap.LngLat(360,-90,true),
new AMap.LngLat(360,90,true),
];
var pathArray = [
outer
];
pathArray.push.apply(pathArray,options.areas[0].path)
var map = new AMap.Map("container", {
resizeEnable: true, //是否监控地图容器尺寸变化
rotateEnable:true,//地图是否可以旋转
//pitchEnable:true,//是否3D地图
zoom:15,
zooms:[14,20],
//pitch:80,//倾斜角度
showIndoorMap: false, // 隐藏地图自带的室内地图图层
buildingAnimation:true,//楼块出现是否带动画
expandZoomRange:true,
//viewMode:'3D',//开启3D视图,默认为关闭
buildingAnimation:true,//楼块出现是否带动画
mapStyle:'amap://styles/normal',
center: [116.327164, 40.003479], //初始地图中心点
features:['bg','point','road'],
layers:[
new AMap.TileLayer({})
]
});
map.addControl(new AMap.ControlBar({
showZoomBar:true,
showControlButton:true,
position:{
right:'10px',
top:'10px'
}
}))
new AMap.Polygon({
bubble:true,
fillOpacity:0.6,
strokeWeight:2,
strokeColor: '#00eeff',
fillColor: '#71B3ff',
path:pathArray,
map:map
})
var polyline = new AMap.Polyline({
path: areapath1,
isOutline: true,
outlineColor: '#ffeeff',
borderWeight: 3,
strokeColor: "#3366FF",
strokeOpacity: 1,
strokeWeight: 2,
// 折线样式还支持 'dashed'
strokeStyle: "solid",
// strokeStyle是dashed时有效
strokeDasharray: [10, 5],
lineJoin: 'round',
lineCap: 'round',
zIndex: 50,
})
var polyline2 = new AMap.Polyline({
path: areapath2,
isOutline: true,
outlineColor: '#ffeeff',
borderWeight: 3,
strokeColor: "#3366FF",
strokeOpacity: 1,
strokeWeight: 2,
// 折线样式还支持 'dashed'
strokeStyle: "solid",
// strokeStyle是dashed时有效
strokeDasharray: [10, 5],
lineJoin: 'round',
lineCap: 'round',
zIndex: 50,
})
polyline.setMap(map)
polyline2.setMap(map)
//实例化信息窗体
var title = 'xxx<span style="font-size:11px;color:#F00;">停车场</span>',
content = [];
content.push("停放车辆:300/320");
content.push("临时停车:100/120");
content.push("月卡停车:200/200");
content.push("<a rel="nofollow" href='ditu.amap.com/detail/B000A8URXB?citycode=110105'>详细信息</a>");
var infoWindow = new AMap.InfoWindow({
isCustom: true, //使用自定义窗体
content: createInfoWindow(title, content.join("<br/>")),
offset: new AMap.Pixel(16, -45)
});
//构建自定义信息窗体
function createInfoWindow(title, content) {
var info = document.createElement("div");
info.className = "custom-info input-card content-window-card";
//可以通过下面的方式修改自定义窗体的宽高
//info.style.width = "400px";
// 定义顶部标题
var top = document.createElement("div");
var titleD = document.createElement("div");
var closeX = document.createElement("img");
top.className = "info-top";
titleD.innerHTML = title;
closeX.src = "img.558idc.com/uploadfile/allimg/20230825/close2.jpg";
closeX.onclick = closeInfoWindow;
top.appendChild(titleD);
top.appendChild(closeX);
info.appendChild(top);
// 定义中部内容
var middle = document.createElement("div");
middle.className = "info-middle";
middle.style.backgroundColor = 'white';
middle.innerHTML = content;
info.appendChild(middle);
// 定义底部内容
var bottom = document.createElement("div");
bottom.className = "info-bottom";
bottom.style.position = 'relative';
bottom.style.top = '0px';
bottom.style.margin = '0 auto';
var sharp = document.createElement("img");
sharp.src = "img.558idc.com/uploadfile/allimg/20230825/sharp.jpg";
bottom.appendChild(sharp);
info.appendChild(bottom);
return info;
}
//关闭信息窗体
function closeInfoWindow() {
map.clearInfoWindow();
}
addMarker();
//添加marker标记
function addMarker() {
var carparkIcon = new AMap.Icon({
// 图标尺寸
size: new AMap.Size(35, 35),
// 图标的取图地址
image: '停车场.png',
// 图标所用图片大小
imageSize: new AMap.Size(35, 35),
});
var CameraIcon = new AMap.Icon({
// 图标尺寸
size: new AMap.Size(35, 35),
// 图标的取图地址
image: '摄像头.png',
// 图标所用图片大小
imageSize: new AMap.Size(40, 40),
});
var marker = new AMap.Marker({
map: map,
position: [116.3246,40.01113],
icon: carparkIcon
});
var marker2 = new AMap.Marker({
map: map,
position: [116.333515,39.99886],
icon: carparkIcon
});
var CameraMark = new AMap.Marker({
map: map,
position: [116.327968,40.001001],
icon: CameraIcon
});
//鼠标点击marker弹出自定义的信息窗体
AMap.event.addListener(marker, 'click', function () {
infoWindow.open(map, marker.getPosition());
});
AMap.event.addListener(marker2, 'click', function () {
infoWindow.open(map, marker2.getPosition());
});
}
}
</script>
</head>
<body onload="mapInit();">
<div id="container"></div>
</body>
</html>