YY. Map

地图对象，为 WebGIS 开发最重要的对象，也是方法，配置参数等最为多的对象

creation

• constructor(dom||String, [options])

  • options

    • {Array} center：地图中心点坐标。
    • {Number} zoom：地图的初始缩放级别。
    • {Number} minZoom：地图的最小缩放级别
    • {Number} maxZoom：地图的最大缩放级别。
    • {Array[Array]} maxBounds：地图的最大显示范围。
    • {Number} pitch：地图的倾斜角度。
    • {Boolean} centerCross：地图是否标注中心点，true 后会在地图中心点显示一个小红点。
    • {Boolean} zoomAnimation：在地图缩放时是否已动画的方式展示。
    • {Boolean} zoomable :地图是否可以缩放。
    • {Number} maxPitch：地图最大的倾斜角。
    • {Number} bearing：地图的旋转角度。
    • {Boolean} zoomControl：是否默认添加地图 zoom 控制控件。
    • {Boolean} compass是否开启指南针，默认开启。
    • {Boolean} overviewControl：地图是否默认添加鹰眼控件。
    • {Boolean} fullscreen：地图是否默认开启全屏控件。
    • {Boolean} scaleControl：地图是否默认添加比例尺控件。
    • {Boolean} dragPitch：地图是否允许倾斜角调整。
    • {Boolean} touchPitch：地图是否允许倾斜角调整。
    • {Boolean} dragRotate：地图是否允许旋转。
    • {Boolean} touchRotate：地图是否允许旋转。
    • {Boolean} draggable：地图是否允许拖拽。
    • {Boolean} seamlessZoom ：无极缩放，允许小数层级的存在
    • {Number} devicePixelRatio ：地图的设备缩放比例，一般用于大屏中，需要对地图进行缩放的场景

example

const map = new YY.Map(this.$refs.map, {
    centerCross: true,
    // bearing:-90,
    center: [120.34, 31.309622415877158],
    // pitch:40,
    // overviewControl:true,

    zoom: 8,
    // minZoom:4
});

基本地图

events

touchactstart

touchactstart

touchacting

touchacting。

touchactend

touchactend

pitch

地图倾斜角发生变化时触发。

pitchend

地图倾斜角变化结束触发。

mousedown

鼠标 mousedown。

mouseup

鼠标 mouseup。

mouseover

鼠标 mouseover。

mouseout

鼠标 mouseout

mouseenter

鼠标 mouseenter。

mouseleave

鼠标 mouseleave。

mousemove

鼠标 mousemove。

click

鼠标 click。

dblclick

鼠标 dblclick。

contextmenu

地图右击，上下文菜单时触发。

touchstart

触摸 touchstart。

touchmove

触摸 touchmove。

touchend

触摸 touchend。

fullscreenstart

全屏开始时。

fullscreenend

全屏结束。

spatialreferencechange

空间坐标系发生改变时。

baselayerchangestart

瓦片图层放生改变时 start。

baselayerchangeend

瓦片图层放生改变时 end。

setbaselayer

设置瓦片图层时。

addlayer

添加图层时触发。

removelayer

移除图层时触发。

resize

地图大小改变时触发。

movestart

地图移动开始时触发。

moving

地图移动 ing 触发。

moveend

地图移动结束后触发。

dragrotatestart

地图旋转时触发。

dragrotating

地图旋转 ing 触发。

dragrotateend

地图旋转结束时触发。

zoomend

地图缩放结束后触发。

zoomstart

地图缩放开始时触发。

zooming

地图缩放过程中触发。

viewchange

地图视图发生改变时发生

map.on("click", function(e) {
    console.log(e);
});

map.on("click mousemove", function(e) {
    console.log(e);
});

//批量添加
var events = ["click", "moveend", "resize"];
events.forEach((element) => {
    map.on(element, function(e) {
        console.log(e);
    });
});

// 常用的有：pitch,pitchend,mouseenter,mouseleave,mousemove,click,resize,movestart,moving,moveend,dragrotatestart,dragrotating,dragrotateend

methods

getId()

• 获取地图的 id

• 返回值： String/Number

addControl(control)

• 添加控件到地图上，例如比例尺，层级控件，鹰眼控件等
• 返回值： this

const map = new YY.Map(this.$refs.map, {
    centerCross: true,
    // bearing:-90,
    center: [120.34, 31.309622415877158],
    // pitch:40,
    // overviewControl:true,

    zoom: 8,
    // minZoom:4
});

map.addControl(new YY.ZoomControl());

removeControl(control)

• 移除控从地图上，例如比例尺，层级控件，鹰眼控件等
• 返回值： this

animateTo(view, options, callback)

动画飞行

• 地图动画播放，移动中心点，倾斜角，旋转角等
• 返回值： this

map.animateTo({
    center: [120, 40.636167734187026],
    zoom: 8,
    pitch: 50,
    bearing: -90,
}, {
    duration: 5000,
});

isAnimating()

• 地图是否在动画过程中
• 返回值： Boolean

getBearing()

• 获取地图的旋转角值
• 返回值： Float

setBearing(bearing)

旋转角设置

• 设置地图的旋转角值

• 参数

  • {Float} bearing：数值

• 返回值： this

getPitch()

• 获取地图的倾斜角
• 返回值： Float

setPitch(pitch)

倾斜角设置

• 设置地图的倾斜角

• 参数

  • {Float} pitch：数值

• 返回值： this

getContainer()

• 获取地图的容器
• 返回值： dom/HTML

getCenter()

• 获取地图的中心点
• 返回值： YY. LngLat

setCenter(center)

设置地图的中心点

• 设置地图的中心点
• 参数
  • {Array||YY. LngLat} center
• 返回值： this

lookAt(overlay)

• 定位到某个覆盖物
• 参数
  • {YY. Overlay} overlay
• 返回值： this

var ellipse = new YY.Ellipse([120, 31], 20000, 10000);
map.lookAt(ellipse);

getSize()

• 获取地图的大小, 获取地图容器 Container 的大小
• 返回值： YY. Size

getContainerBounds()

• 获取地图容器的地图的可见范围，地图的有效范围
• 返回值： YY. PixelEnvelope

getBounds()

• 获取地图的经纬度范围
• 返回值： YY. Envelope

getZoom()

• 获取地图的当前的层级
• 返回值： Number

setZoom(zoom, [options])

设置地图层级

• 设置地图的当前的层级

  • 参数
  • {Number} zoom
  • {Object} options

• 返回值： this

map.setZoom(10, {
    animation: fasle
});

zoomIn()

• 地图放大
• 返回值： this

zoomOut()

• 地图缩小
• 返回值： this

setCenterAndZoom(center, zoom)

同时设置中心点和层级

• 设置地图的当前的层级和中心点

  • 参数
  • {YY. LngLat} center
  • {Number} zoom

• 返回值： this

getMaxZoom()

• 获取地图最大的层级，即地图可以放大的最大等级
• 返回值： Number

setMaxZoom(maxZoom)

• 设置地图最大的层级，即地图可以放大的最大等级

• 参数

  • {Number} maxZoom

• 返回值： this

getMinZoom()

• 获取地图最最小的层级，即地图可以缩小的最小等级
• 返回值： Number

setMinZoom(minZoom)

• 设置地图最最小的层级，即地图可以缩小的最小等级

• 参数

  • {Number} minZoom

• 返回值： this

isZooming()

• 地图是否在缩放的过程中
• 返回值： Boolean

setView(view)

demo

• 设置地图视图

• 参数

  • {Object} view

• 返回值： this

map.setView({
    center: [120, 44],
    zoom: 5,
    pitch: 59,
    bearing: -89,
});

getView()

• 获取地图当前视图
• 返回值： Object

let view = map.getView();
console.table(view);

getMaxBounds()

• 获取地图的边界范围
• 返回值： YY. Envelopse

setMaxBounds(bounds)

• 设置地图的边界范围

• 参数

  • {Array[Array]||YY. Envelope} bounds

• 返回值： this

toPixel(lnglat)

demo

• 经纬度坐标转像素坐标，地图不同状态下，相同的经纬度对应地图的像素坐标是不一样的
• 参数
  • {YY. LngLat} lnglat
• 返回值： YY. Pixel

toLngLat(pixel)

demo

• 像素坐标转经纬度坐标，地图不同状态下，相同的像素坐标对应地图的经纬度坐标是不一样的
• 参数
  • {YY. Pixel} pixel
• 返回值： YY. LngLat

saveImage([options])

demo

• 将地图导出为图片
• 参数
  • {Object} options
• 返回值： String/File

map.saveImage(); //返回值为base64

map.saveImage({
    save: true,
    mimeType: "image/png"
}); //返回值为浏览器会自动下载一个image 文件

locate(lnglat, [dx], [dy])

• 将地图对经纬度坐标进行米制计算
• 参数
  • {YY. LngLat} lnglat
  • {Number} dx 横向增减的米
  • {Number} dy 纵向增减的米
• 返回值： YY. LngLat

locateByPoint(lnglat, [dx], [dy])

• 将地图对经纬度坐标进行像素制计算
• 参数
  • {YY. LngLat} lnglat
  • {Number} dx 横向增减的像素
  • {Number} dy 纵向增减的像素
• 返回值： YY. LngLat

distance(latlng1, latlng2)

• 两点间距离计算
• 参数
  • {YY. LngLat} latlng1
  • {YY. LngLat} latlng2
• 返回值： Float

computeDistance(overlay)

• 计算覆盖物的长度，一般用于道路等计算
• 参数
  • {YY. Overlay} overlay
• 返回值： Float

var polyline = new YY.Polyline([
    [120, 31],
    [123, 33],
    [111, 22],
]);
console.log(map.computeDistance(polyline));

computeArea(overlay)

• 计算覆盖物的面积，一般用于区域等计算，适用于YY. Polygon, YY. Rectangle, YY. Circle, YY. Sector, YY. Ellipse等
• 参数
  • {YY. Overlay} overlay
• 返回值： Float

var polygon = new YY.Polyline([
    [
        [120, 31],
        [123, 33],
        [111, 22],
    ],
]);
console.log(map.computeArea(polygon));

addBaseLayer(baseLayer)

• 添加瓦片图层

• 参数

  • {YY. TileLayer} baseLayer

• 返回值： this

var tdtTileLayer = YY.LayerLookup.lookup("tdt"); //创建默认的天地图瓦片图层
map.addBaseLayer(tdtTileLayer);

getBaseLayerById(id)

• 根据 id 查找瓦片图层
• 参数
  • {Number||String} id
• 返回值： YY. TileLayer

getCurrentBaseLayer()

• 获取当前的瓦片图层
• 返回值： YY. TileLayer

getBaseLayers()

• 查找所有瓦片图层
• 返回值： Array[YY. TileLayer]

removeBaseLayer(baseLayer)

• 从地图上移除瓦片图层

• 参数

  • {YY. TileLayer} baseLayer

• 返回值： this

switchBaseLayer(baseLayer)

• 切换瓦片图层 demo

• 参数

  • {YY. TileLayer} baseLayer

• 返回值： this

getLayers()

• 获取所有的矢量图层
• 返回值： Array[YY. VectorLayer]

getLayerById(id)

• 根据 id 获取矢量图层
• 参数
  • {Number||String} id
• 返回值： YY. VectorLayer

addLayer(layer)

• 添加矢量图层

• 参数

  • {YY. VectorLayer} layer

• 返回值： this

addLayers(layers)

• 添加矢量图层

• 参数

  • {Array[ YY. VectorLayer]} layers

• 返回值： this

removeLayer(layer)

• 移除矢量图层

• 参数

  • {YY. VectorLayer} layer

• 返回值： this

hasLayer(layer)

• 判断地图上是否包含该矢量图层
• 参数
  • {YY. VectorLayer} layer
• 返回值： Boolean

config(conf)

• 动态设置的配置

• 参数

  • {Object} conf

• 返回值： this

//禁用地图倾斜
map.config({
    dragPitch: false
});

fullScreen()

demo

• 全屏显示
• 返回值： this

cancelFullScreen()

• 退出全屏
• 返回值： this

setMenu(options)

• 设置右键菜单，上下文菜单

• 参数

  • {Object} options

• 返回值： this

var options = {
    custom: true,
    items: '<ul class="custom_menu">' +
        '<li onclick="clickItem(this);">Locate</li>' +
        '<li onclick="clickItem(this);">Mark</li>' +
        '<li onclick="clickItem(this);">Identify</li>' +
        '<li onclick="clickItem(this);">About</li>' +
        "</ul>",
};
map.setMenu(options);

removeMenu()

• 移除右键菜单，上下文菜单
• 返回值： this

openMenu(lnglat)

• 打开右键菜单，上下文菜单

• 参数

  • {YY. LngLat} lnglat

• 返回值： this

closeMenu()

• 关闭右键菜单，上下文菜单
• 返回值： this

hit(lnglat, callback, layers)

• 命中图形覆盖物，通过经纬度去看是否有覆盖物被选中

• 参数

  • {YY. LngLat} lnglat

  • {function} callback

  • {Array[YY. VectorLayer]} layers

• 返回值： this

let lnglat = new YY.LngLat(130, 31);
map.hit(
    lnglat,
    function(geos) {
        // console.log(geos);
        if (geos && geos.length > 0) {
            geos.forEach((geo) => {
                geo.updateStyle(YY.Style.formatFill({
                    polygonFill: "red"
                }));
            });
        }
    },
    map.getLayers()
);

on(events, handler, [context])

• 事件监听
• 参数
  • {String} events :click, moving resize ......
  • {function} handler : 处理函数
  • {context} context : 上下文, 默认 this
• 返回值： this

once(events, handler, [context])

• 事件监听只有一次
• 参数
  • {String} events :click, moving resize ......
  • {function} handler : 处理函数
  • {context} context : 上下文, 默认 this
• 返回值： this

off(events, handler, [context])

• 移除事件监听
• 参数
  • {String} events :click, moving resize ......
  • {function} handler : 处理函数
  • {context} context : 上下文, 默认 this
• 返回值： this

fire(eventType, param)

• 派发事件
• 参数
  • {String} eventType :click, moving resize ......
  • {Object} param : 传递的参数
• 返回值： this