image.png
基础api一览
- new AMap.Map() 创建
zoom层级、center中心坐标、pitch高度、rotate角度
showIndoorMap: false, // 是否在有矢量底图的时候自动展示室内地图，PC默认true,移动端默认false
resizeEnable: true, //是否监控地图容器尺寸变化，默认值为false
dragEnable: false, // 地图是否可通过鼠标拖拽平移，默认为true
keyboardEnable: false, //地图是否可通过键盘控制，默认为true
doubleClickZoom: false, // 地图是否可通过双击鼠标放大地图，默认为true
zoomEnable: false, //地图是否可缩放，默认值为true
rotateEnable: false, // 地图是否可旋转，3D视图默认为true，2D视图默认false
- 加载完成
map.on("complete", function(){log.success("地图加载完成！"); });
- 销毁
map && map.destroy();
- 获取设置
map.setZoom(zoom); //设置地图层级
map.setCenter([lng, lat]); //设置地图中心点
map.getCity; //获取当前行政区
- 事件 地图map.on，其它marker.on,circle.on
map.on('click', function(e) {
e.lnglat.getLng()
}
map.on('movestart', mapMovestart);
map.on('mapmove', mapMove);
map.on('moveend', mapMoveend);
map.on('zoomstart', mapZoomstart);
map.on('zoomchange', mapZoom);
map.on('zoomend', mapZoomend);
map.on('click', showInfoClick);
map.on('dblclick', showInfoDbClick);
map.on('mousemove', showInfoMove);
map.on('dragstart', showInfoDragstart);
map.on('dragging', showInfoDragging);
map.on('dragend', showInfoDragend);
- 添加覆盖层和图形
new AMap.TileLayer.Satellite(); // 卫星
new AMap.TileLayer.RoadNet(); //路网
new AMap.Circle // 圆
new AMap.Marker // 标记
map.add(xxx)
- 工具，比例尺、工具条、鹰眼等
- 自定义样式
var styleName = "amap://styles/" + this.value;
map.setMapStyle(styleName);
- 要素
features: ['bg', 'road', 'building', 'point']
showLabel: false //不显示地图文字标记
- 图层（添加移除修改透明度）
图片，视频，canvas - 标记
点标记，圆点，文本
// 自定义图片标记
marker = new AMap.Marker({
map: map,
position: [116.478935,39.997761],
icon: "https://webapi.amap.com/images/car.png",
offset: new AMap.Pixel(-26, -13),
autoRotation: true,
angle:-90,
});
- 右键菜单
var contextMenu = new AMap.ContextMenu();
//右键添加Marker标记
contextMenu.addItem("添加标记", function (e) {
var marker = new AMap.Marker({
map: map,
position: contextMenuPositon //基点位置
});
}, 3);
- 矢量图形，折线、弧线、多边形、矩形、圆、椭圆
- 检索，天气，地图画点画矩形，测距，计算面积，关系判断
用到的一些方法
1、坐标转换
gps地图和高德地图有一些误差
AMap.convertFrom(lnglats, type, function (status, result) {
if (result.info === 'ok') {
var resLnglat = result.locations; //批量转化
console.log(resLnglat)
}
});
2、绘制标记，点，线，立方体
// 标记
m2 = new AMap.Marker({
position: resLnglat,
});
map.add(m2);
// 线
polyline2 = new AMap.Polyline({
path: path2,
strokeWeight:20,
strokeOpacity:0.3,
strokeColor:'#0091ea',
showDir:true
});
map.add(polyline2);
// 3d立方体，单独开图层
// 添加 Object3DLayer 图层，用于添加 3DObject 对象
var object3Dlayer = new AMap.Object3DLayer();
map.add(object3Dlayer);
function addObj(lnglat) {
// 以不规则棱柱体 Prism 为例，添加至 3DObjectLayer 图层中
var size = 0.00005;
var paths = [
lnglat,
[lnglat[0]+size, lnglat[1]],
[lnglat[0]+size, lnglat[1]+size],
[lnglat[0], lnglat[1]+size]
];
var bounds = paths.map(function(path) {
return new AMap.LngLat(path[0], path[1]);
});
// 创建 Object3D 对象
prism = new AMap.Object3D.Prism({
path: bounds,
height: 40,
color: 'rgba(100, 150, 230, 0.9)' // 支持 #RRGGBB、rgb()、rgba() 格式数据
});
// 开启透明度支持
prism.transparent = true;
// 添加至 3D 图层
object3Dlayer.add(prism);
}
// addObj([113.950762, 22.538468])
3、设置3d地图
var map= new AMap.Map('container', {
resizeEnable: true,
rotateEnable:true,
pitchEnable:true,
zoom: 19,
pitch:80,
rotation:-15,
viewMode:'3D',//开启3D视图,默认为关闭
// buildingAnimation:true,//楼块出现是否带动画
expandZoomRange:true,
zooms:[3,20],
center:[ 113.950762, 22.538468],
features: ['bg', 'road', 'point'],
mapStyle:'amap://styles/light',
layers: [
// 高德默认标准图层
new AMap.TileLayer.Satellite(),
// 楼块图层
new AMap.Buildings({
zooms: [16, 22],
zIndex: 10,
heightFactor: 2//2倍于默认高度，3D下有效
})
],
});
4、设置转向方程需要转化gps坐标到三维坐标再转化到gps坐标
// 经纬度坐标转成三维坐标
function lnglat2pixel(lng,lat) {
var lnglat = new AMap.LngLat(lng, lat);
var pixel = map.lngLatToGeodeticCoord(lnglat);
pixel.x = parseInt(pixel.x);
pixel.y = parseInt(pixel.y);
return [pixel.x, pixel.y]
}
// 三维坐标转成经纬度坐标
function pixel2lnglat(x,y) {
var pixel = new AMap.Pixel(x,y);
var lnglat = map.geodeticCoordToLngLat(pixel);
return [lnglat.lng,lnglat.lat]
}
function cubePath([[xx,yy],[xx1,yy1]],l,w){
let [x,y] = lnglat2pixel(xx,yy)
let [x1,y1] = lnglat2pixel(xx1,yy1)
let angle
if((x-x1)=== 0){angle = 0} else {
angle = Math.atan(((y-y1)/(x-x1)))
}
console.log(angle)
console.log(x,y)
let xl = l*Math.cos(angle)
let yl = l*Math.sin(angle)
let xw = w*Math.sin(angle)
let yw = w*Math.cos(angle)
return [
pixel2lnglat(x+xl+xw,y+yl-yw),
pixel2lnglat(x+xl-xw,y+yl+yw),
pixel2lnglat(x-xl-xw,y-yl+yw),
pixel2lnglat(x-xl+xw,y-yl-yw),
]
}