Fx构造函数
# new MapvBaseLayer(map, dataSet, options, leafletLayer)
参数:
名称 | 类型 | 描述 |
---|---|---|
map |
Object | 传入的openlayer的地图对象 |
dataSet |
MapvDataSet | 传入的mapv的属性。 |
options |
MapvOption | 可选参数。 |
leafletLayer |
Object | 传入的leaflet的实际渲染图层。 |
Example
options = {
zIndex: 1, // 层级
size: 5, // 大小值
unit: 'px', // 'px': 以像素为单位绘制,默认值。'm': 以米制为单位绘制,会跟随地图比例放大缩小
mixBlendMode: 'normal', // 不同图层之间的叠加模式,参考[https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode)
fillStyle: 'rgba(200, 200, 50, 1)', // 填充颜色
strokeStyle: 'rgba(0, 0, 255, 1)', // 描边颜色
lineWidth: 4, // 描边宽度
globalAlpha: 1, // 透明度
globalCompositeOperation: 'lighter', // 颜色叠加方式
coordType: 'bd09ll', // 可选百度墨卡托坐标类型bd09mc和百度经纬度坐标类型bd09ll(默认)
shadowColor: 'rgba(255, 255, 255, 1)', // 投影颜色
shadowBlur: 35, // 投影模糊级数
updateCallback: function (time) { // 重绘回调函数,如果是时间动画、返回当前帧的时间
},
shadowOffsetX: 0,
shadowOffsetY: 0,
context: '2d', // 可选2d和webgl,webgl目前只支持画simple模式的点和线
lineCap: 'butt',
lineJoin: 'miter',
miterLimit: 10,
methods: { // 一些事件回调函数
click: function (item) { // 点击事件,返回对应点击元素的对象值
console.log(item);
},
mousemove: function(item) { // 鼠标移动事件,对应鼠标经过的元素对象值
console.log(item);
}
},
animation: {
type: 'time', // 按时间展示动画
stepsRange: { // 动画时间范围,time字段中值
start: 0,
end: 100
},
trails: 10, // 时间动画的拖尾大小
duration: 5, // 单个动画的时间,单位秒
}
}
方法
# clickEvent(e)
百度mapv原本的事件只有clickEvent和mousemoveEvent
参数:
名称 | 类型 | 描述 |
---|---|---|
e |
Object | 点击事件对象 {latlng, layerPoint, containerPoint, originalEvent} |
Example
//mapv.map.BaseLayer.clickEvent
clickEvent(pixel, e) {
var dataItem = this.isPointInPath(this.getContext(), pixel);
if (dataItem) {
this.options.methods.click(dataItem, e);
} else {
this.options.methods.click(null, e);
}
}
# initDevicePixelRatio()
window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。 公式表示就是:window.devicePixelRatio = 物理像素 / dips,该函数主要应用与移动设备
# mousemoveEvent(e)
百度mapv原本的事件只有clickEvent和mousemoveEvent
参数:
名称 | 类型 | 描述 |
---|---|---|
e |
Object | 点击事件对象 {latlng, layerPoint, containerPoint, originalEvent} |
Example
//mapv.map.BaseLayer.mousemoveEvent
mousemoveEvent(pixel, e) {
var dataItem = this.isPointInPath(this.getContext(), pixel);
if (dataItem) {
this.options.methods.mousemove(dataItem, e);
} else {
this.options.methods.mousemove(null, e);
}
}