高德开放平台实现区域地图+云图标记
在项目中需要使用类似GIS效果的地图，考虑到高德开放平台关于云图的便利性，便利用官网和网上的例子，进行了初步实现。
1.带3D效果：
2.代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>编辑多边形</title>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=760d16c25fa8ee3c547b693a6c414821&plugin=Map3D,AMap.DistrictSearch"></script>
<style>
html,
body,
#container {
margin: 0;
height: 100%;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
var mask = [];
var map = new AMap.Map(\'container\', {
mask: mask,
resizeEnable: true,
zoom: 12,
viewMode: \'3D\',
center: [121.124178, 31.150681],
mapStyle: \'amap://styles/5a2dbb143362de08809a8aebe25ca455\',
//layers: [
// new AMap.TileLayer.RoadNet({
// zIndex: 20
// })]//,
// new AMap.TileLayer({
// zIndex: 6,
// opacity: 1,
//getTileUrl: \'https://t{1,2,3,4}.tianditu.gov.cn/DataServer?T=ter_w&x=[x]&y=[y]&l=[z]\'
//getTileUrl: \'https://t{s}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=5ecfe4e0cecdafec9a858e37c261084c\'
//})]
});
map.plugin(\'AMap.CloudDataLayer\', function () {
var layerOptions = {
query: { keywords: \'\' },
clickable: true
};
var cloudDataLayer = new AMap.CloudDataLayer(\'5cbec0902376c10e3dec70d6\', layerOptions); //实例化云图层类
cloudDataLayer.setMap(map); //叠加云图层到地图
});
new AMap.DistrictSearch({
extensions: \'all\',
subdistrict: 0
}).search(\'青浦区\', function (status, result) {
// 外多边形坐标数组和内多边形坐标数组
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 holes = result.districtList[0].boundaries
var pathArray = [
outer
];
for (var i = 0; i < holes.length; i += 1) {
mask.push([holes[i]])
}
pathArray.push.apply(pathArray, holes)
var polygon = new AMap.Polygon({
pathL: pathArray,
strokeColor: \'#00eeff\',
strokeWeight: 1,
fillColor: \'#71B3ff\',
fillOpacity: 0.5
});
polygon.setPath(pathArray);
map.add(polygon);
var bounds = map.getBounds(); // 获取显示范围
map.setLimitBounds(bounds); // 限制地图显示范围
var object3Dlayer = new AMap.Object3DLayer({ zIndex: 1 });
map.add(object3Dlayer)
var height = -8000;
var color = \'#0088ffcc\';//rgba
var wall = new AMap.Object3D.Wall({
path: holes,
height: height,
color: color
});
wall.transparent = true
object3Dlayer.add(wall)
});
</script>
</body>
</html>
3.不带3D效果。带弹窗
4.代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>编辑多边形</title>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=760d16c25fa8ee3c547b693a6c414821&plugin=AMap.DistrictSearch,Map3D"></script>
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
<style>
html,
body,
#container {
margin: 0;
height: 100%;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
var map = new AMap.Map(\'container\', {
resizeEnable: true,
zoom: 12,
viewMode: \'3D\',
center: [121.124178, 31.150681],
mapStyle: \'amap://styles/5a2dbb143362de08809a8aebe25ca455\',
//layers: [
// new AMap.TileLayer.RoadNet({
// zIndex: 20
// })]//,
// new AMap.TileLayer({
// zIndex: 6,
// opacity: 1,
//getTileUrl: \'https://t{1,2,3,4}.tianditu.gov.cn/DataServer?T=ter_w&x=[x]&y=[y]&l=[z]\'
//getTileUrl: \'https://t{s}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=5ecfe4e0cecdafec9a858e37c261084c\'
//})]
});
new AMap.DistrictSearch({
extensions: \'all\',
subdistrict: 0
}).search(\'青浦区\', function (status, result) {
// 外多边形坐标数组和内多边形坐标数组
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 holes = result.districtList[0].boundaries
var pathArray = [
outer
];
pathArray.push.apply(pathArray, holes)
var polygon = new AMap.Polygon({
pathL: pathArray,
strokeColor: \'#00eeff\',
strokeWeight: 1,
fillColor: \'#71B3ff\',
fillOpacity: 0.5
});
polygon.setPath(pathArray);
map.add(polygon);
var bounds = map.getBounds(); // 获取显示范围
map.setLimitBounds(bounds); // 限制地图显示范围
});
map.plugin(\'AMap.CloudDataLayer\', function () {
var layerOptions = {
query: { keywords: \'\' },
clickable: true
};
var cloudDataLayer = new AMap.CloudDataLayer(\'5cbec0902376c10e3dec70d6\', layerOptions); //实例化云图层类
cloudDataLayer.setMap(map); //叠加云图层到地图
AMap.event.addListener(cloudDataLayer, \'click\', function (result) {
var clouddata = result.data;
var photo = [];
if (clouddata._image[0]) {//如果有上传的图片
photo = [\'<img width=240 height=100 src="\' + clouddata._image[0]._preurl + \'"><br>\'];
}
var infoWindow = new AMap.InfoWindow({
content: "<font class=\'title\'>" + clouddata._name + "</font><hr/>" + photo.join("") + "地址：" + clouddata._address + "<br />" + "联系电话：" + clouddata.telephone + "<br />" + "经纬度：" + clouddata._location,
size: new AMap.Size(0, 0),
autoMove: true,
offset: new AMap.Pixel(0, -25)
});
infoWindow.open(map, clouddata._location);
console.log(clouddata._name);
});
});
</script>
</body>
</html>
不足：无法实现在云图中添加文本标签，无法标记这些点的名称，而是需要设置弹窗点击事件。要是有完成这部分的烦请留言，不胜感激。
版权声明：本文为cache-yuan原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。