6.1-高德地图开发

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),
        ]
    }