分享 高德地图的使用
地图产品有: 谷歌 百度 高德 腾讯 ArcGis 超图 天地图 OSM Mapbox mapnik maptalks cesium deckgl G7
1.准备页面
2.创建一个最简单地图
3.覆盖物和显示内容
4.地图的交互
5.地图事件
6.自定义地图风格
7.海量点标记和点聚合
8.坐标系转换
9.几何计算
10.升级指南
一.准备页面
1.引入高德地图api
2.html>>>
3.css>>>
#container {width:300px; height: 180px; }
二.创建一个最简单地图
var map = new AMap.Map('container');
//或者
var map = new AMap.Map('container', {
zoom:11,//级别
zooms:[3,18]
center: [116.397428, 39.90923],//中心点坐标
viewMode:'3D'//使用3D视图
});
三.覆盖物和显示内容
显示内容: (bg区域面,point兴趣点,road道路及道路标注,building建筑物)
1.点
var map = new AMap.Map('container', {
zoom:11,//级别
zooms:[3,18]
center: [116.397428, 39.90923],//中心点坐标
viewMode:'3D'//使用3D视图
});
// 创建一个 Marker 实例：
var marker = new AMap.Marker({
position: new AMap.LngLat(116.39, 39.9), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
title: '北京'
});
// 将创建的点标记添加到已有的地图实例：
map.add(marker);
// 移除已创建的 marker
map.remove(marker);
2.自定义图标标记
//创建点
var marker = new AMap.Marker({
position: new AMap.LngLat(116.39,39.9),
offset: new AMap.Pixel(-10, -10),
icon: '//vdata.amap.com/icons/b18/1/2.png', // 添加 Icon 图标 URL
title: '北京'
});
//自定义icon
// 创建 AMap.Icon 实例：
var icon = new AMap.Icon({
size: new AMap.Size(40, 50), // 图标尺寸
image: '//webapi.amap.com/theme/v1.3/images/newpc/way_btn2.png', // Icon的图像
imageOffset: new AMap.Pixel(0, -60), // 图像相对展示区域的偏移量，适于雪碧图等
imageSize: new AMap.Size(40, 50) // 根据所设置的大小拉伸或压缩图片
});
var marker = new AMap.Marker({
position: new AMap.LngLat(116.39,39.9),
offset: new AMap.Pixel(-10, -10),
icon:icon , // 添加 Icon 实例
title: '北京'
});
//也可以用js:
marker.setIcon(icon);
map.add(marker);
3.面
var circleMarker = new AMap.CircleMarker({
center: [116.396923,39.918203],
radius:10+Math.random()*10,//3D视图下，CircleMarker半径不要超过64px
strokeColor:'white',
strokeWeight:2,
strokeOpacity:0.5,
fillColor:'rgba(0,0,255,1)',
fillOpacity:0.5,
zIndex:10,
bubble:true,
cursor:'pointer',
clickable: true
})
circleMarker.setMap(map)
4.文本标记 Text
// 创建纯文本标记
var text = new AMap.Text({
text:'纯文本标记',
anchor:'center', // 设置文本标记锚点
draggable:true,
cursor:'pointer',
angle:10,
style:{
'padding': '.75rem 1.25rem',
'margin-bottom': '1rem',
'border-radius': '.25rem',
'background-color': 'white',
'width': '15rem',
'border-width': 0,
'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
'text-align': 'center',
'font-size': '20px',
'color': 'blue'
},
position: [116.396923,39.918203]
});
text.setMap(map);
5.行政区划(国家,省,市,区县)背景,边框
省市简易行政区图层
//世界简易行政区图层
var disWorld = new AMap.DistrictLayer.World({
zIndex:10,
styles:{
'nation-stroke':function(props){
if(props.type=='Nation_Border_China'){
return 'red'
}else{
return 'white'
}
},
'coastline-stroke': [0.8, 0.63, 1, 1],
'fill':function(props){
return getColorBySOC(props.SOC)
}
}
})
//国家简易行政区图层
var disCountry = new AMap.DistrictLayer.Country({
zIndex:10,
SOC:'CHN',
depth:2,
styles:{
'nation-stroke':'#22ffff',
'coastline-stroke':[0.8, 0.63, 0.94, 1],
'province-stroke':'white',
'city-stroke': 'rgba(255,255,255,0.5)',//中国特有字段
'fill':function(props){//中国特有字段
return getColorByDGP(props.adcode_pro)
}
}
})
//省市简易行政区图层
var disProvince = new AMap.DistrictLayer.Province({
zIndex:12,
adcode:['130000'],
depth:2,
styles:{
'fill':function(properties){
var adcode = properties.adcode;
return getColorByAdcode(adcode);
},
'province-stroke':'cornflowerblue',
'city-stroke': 'white',//中国地级市边界
'county-stroke': 'rgba(255,255,255,0.5)'//中国区县边界
}
})
四.地图的交互和事件
事件
覆盖物事件
var clickHandler = function(e) {
alert('您在[ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ]的位置点击了地图！');
};
// 绑定事件
map.on('click', clickHandler);
// 解绑事件
map.off('click', clickHandler);
五.自定义地图风格
六.海量点标记和点聚合
七.坐标系转换
其他坐标转高德坐标
地球上同一个地理位置的经纬度，在不同的坐标系中，会有少许偏移，国内目前常见的坐标系主要分为三种：
地球坐标系——WGS84：常见于 GPS 设备，Google 地图等国际标准的坐标体系。
火星坐标系——GCJ-02：中国国内使用的被强制加密后的坐标体系，高德坐标就属于该种坐标体系。
百度坐标系——BD-09：百度地图所使用的坐标体系，是在火星坐标系的基础上又进行了一次加密处理。
因此在使用不同坐标系前，我们需要使用 AMap.convertFrom() 方法将这些非高德坐标系进行转换。
var gps = [116.3, 39.9];
AMap.convertFrom(gps, 'gps', function (status, result) {
if (result.info === 'ok') {
var lnglats = result.locations; // Array.
}
});
1.地图容器坐标 ,2.经纬度 , 3.平面地图像素坐标
地图容器坐标与经纬度的互换
经纬度与平面地图像素坐标的互换
经纬度与三维坐标的互换
image.png
- 容器坐标转经纬度坐标 map.containerToLnglat
// 容器坐标，原点为左上角
var px = 600;
var py = 300;
// 构造成 Pixel 对象后传入
var pixel = new AMap.Pixel(px, py);
var lnglat = map.containerToLngLat(pixel); // 获得 LngLat 对象
- 经纬度坐标转容器坐标 map.lngLatToContainer
// 地理经纬度坐标
var lon = 116.4;
var lat = 39.9;
// 构造成 LngLat 对象后传入
var lnglat = new AMap.LngLat(lon, lat);
var pixel = map.lngLatToContainer(lnglat); // 获得 Pixel 对象
image.png
- 经纬度转换平面地图像素坐标 map.lnglatToPixel
var lon = 116.4;
var lat = 39.9;
// 数组格式传入，第二个参数指定缩放等级
var pixel = mapObj.lnglatToPixel([lon, lat], 3); // 返回 Pixel 对象
// 构造成 LngLat 对象后传入，第二个参数指定缩放等级
var pixel = mapObj.lnglatToPixel(new AMap.LngLat(lon, lat), 3); // 返回 Pixel 对象
- 平面地图像素坐标转换经纬度 map.pixelToLngLat
var x = 420;
var y = 195;
// 构造成 Pixel 对象传入，第二个参数指定缩放等级
var lnglat = mapObj.pixelToLngLat(new AMap.Pixel(x, y), 3); // 返回 LngLat 对象
image.png
- 经纬度转换为三维坐标系下的 XY 坐标 map3D.lngLatToGeodeticCoord
var lnglat = [116.4, 39.9];
// 返回 3D 坐标系下的 Pixel
var coord = map.lngLatToGeodeticCoord(lnglat);
- 三维坐标系下的 XY 坐标转换为经纬度 map3D.geodeticCoordToLngLat
// 返回 3D 坐标系下的 LngLat
var lnglat = map.geodeticCoordToLngLat(new AMap.Pixel(5571367.773333311, -5023481.09450531));
八.几何计算
1.计算两点间的实际距离
2.计算点到线段的最短距离
3.计算点到路径的最短距离
4.计算路径的实际长度
5.计算封闭区域的面积
6.判断点是否在面内
7.判断点是否在线段上
8.计算两个面的交叉区域