1.0.5 • Published 2 years ago
jcmap v1.0.5
JCMap
基于 vite + openlayers6 二次封装的项目，不需要深入接触 openlayers 库就可以方便使用，提高地图开发效率。
使用
# 安装
npm install jcmap详情
1、Map (地图类)
const map = new JC.Map(target, options)
// 参数详解
target：'map', // 默认绑定dom
options：{
center: [0, 0], //地图中心
zoom: 6, //地图缩放层级
minZoom: 0, // 最小可缩放层级
maxZoom: 18, // 最大可缩放层级
doubleClickZoom: false, // 是否双击放大
zoomShow: false, // 是否显示缩放控件
zoomSlider: false, // 是否显示滑块缩放控件
fullScreen: false, // 是否显示全屏控件
maxExtent: false, // 是否限制地图可拖动范围
mouseMoveExtent: boundingExtent([ // 默认展示的范围
[55.923433618652325, 3.359091468750009],
[171.31664592155698, 81.65358702968221]
])
}
// 方法详解
map.center() // 获取地图的中心位置
map.getMaxZoom() // 获取地图设置的最大缩放
map.getMinZoom() // 获取地图设置的最小缩放
map.updateSize() // 强制更新地图视口大小
map.getCoordinateFromPixel() // 获取当前点击坐标点
map.getPixelFromCoordinate() // 获取当前经纬度坐标像素点
map.getZoom() // 获取当前层级
map.setZoom(zoom: number) // 设置当前层级
map.setCenter(coord: Array[number], zoom: number = 0) // 设置地图中心
map.panTo(coord: Array[number]) // 定位到目标位置
map.setBaseLayer(layerName: string = standard) // satellite 卫星地图图层, standard 标准地图图层
map.add(markers: Array[Marker] | Marker | INFOWINDOW | ContextMenu | POLYLINE) // 添加 单个或者多个覆盖物(包括但不限于覆盖物，信息框，右键菜单，轨迹线)
map.remove(markers: Array[Marker] | Marker | INFOWINDOW | ContextMenu | POLYLINE) // 移除 单个或者多个覆盖物(包括但不限于覆盖物，信息框，右键菜单，轨迹线)
map.setFitView() // 地图自动适应所有覆盖物或矢量图形
map.setZoomOut(zoomNum: number = 1) // 地图缩小
map.setZoomIn(zoomNum: number = 1) // 地图放大
map.removeGraph(draw: VectorGraph) // 移除交互图形
map.addGraph(draw: VectorGraph) // 添加交互图形
map.getInteractions() // 获取所有交互图形
// 支持事件
['complete', 'moveend', 'click', 'dblclick', 'contextmenu', 'moving', 'pointermove']
map.on('click', function (e) {
// e 为地图对象
// e.coordinate 当前点击坐标点
})2、Marker（覆盖物类）
const marker = new JC.Marker(options)
// 参数详解:
options: {
// 通用参数
map?: null, // 是否直接渲染到地图上, 加上此参数，就不用map.add(marker)
id: null, // 覆盖物id
position: [0, 0], // 坐标经纬度
angle: 0, //角度
offset: [0, 0], //偏移量
zIndex: 3, // 矢量图形层级
extData: {}, // 自定义数据
// 自定义配置下参数
content: '', // 自定义html内容
// 常规配置下参数
icon: '', // 显示图片，有默认
rotateWithView: true, // 是否跟随视图旋转
angle: 0, // 图片旋转角度
font: 'normal 12px sans-serif',
label: '',
fontSize: '12px',
fontFamily: 'sans-serif',
fontWeight: 'normal',
fontColor: '#000',
placement: 'point', // 默认为point
labelBgColor: '#fff',
borderColor: '#000', // 边框颜色
borderWidth: '1', // 边框宽度
textBaseline: 'bottom', // t 似乎无效
textAlign: 'centrer', //文本对齐方式 ,似乎无效，设置会让文本消失
labelXOffset: 0, // 水平文本偏移量
labelYOffset: -30, // 垂直文本偏移量
padding: [5, 5, 5, 5]
}
// 注： Marker分为两种模式，传了content就是自定义配置，不传就是默认的常规配置，
区别就是前者继承将继承于Overlay基类, 后者继承于Feature基类
// 方法详解:
marker.getId() // 获取id
marker.getExtentData() // 获取自定义信息
marker.getPosition() // 获取 Marker 坐标
marker.getOffset() // 获取Marker 偏移
//常规模式
marker.setExtentData(extData: Object) // 设置自定义信息
marker.setAngle(angle: number = 0) // 设置 Marker 角度
marker.setPosition(position: Array[number]) // 设置 Marker 坐标
marker.setId(id: number) // 设置id
// 自定义模式
marker.setTop() // 置顶
marker.setElement() // 设置 content / html
marker.getContent() // 获取 content str
marker.setPosition(position: Array[number]) // 设置 Marker 坐标
marker.setAnimation(animationName: any) // 设置 Marker 弹跳动画
marker.setOpacity(opacity: number = 1) 设置样式 透明度
marker.setAngle(angle:number = 0) // 设置 Marker 角度
// 支持事件
marker.on('click', e => {
// e.type 事件类型
// e.target dom对象
})3、MarkerCluster（聚合类）
const markerClusterer = new JC.MarkerCluster(map, markers)
// 参数详解:
map: Map, // 地图实例对象
markers: Array[Marker] // 覆盖物群体
针对聚合类中的Marker配置
options: {
zIndex: 3, // 覆盖物的叠加顺序
noClusterZoom: 18, // 在zoom及以上不聚合
distance: 40, // 要素将聚集在一起的距离（以像素为单位）
minDistance: 30, // 簇之间的最小距离（以像素为单位）
showViewExtent: true, // 只展示可视区域 Marker
zoomOnClick: true, // 是否点击展开 Cluster
icon: '' // 聚合里一级marker src, 有默认
}
// 方法详解:
markerClusterer.getMaxZoom() // 获取地图设置的最大放大
markerClusterer.getDistance() // 获取聚合的距离
markerClusterer.setDistance(distance: number) // 设置聚合物距离
markerClusterer.getMinDistance() // 获取聚合物的最小间距
markerClusterer.setMinDistance(distance: number) // 设置聚合物的最小间距
markerClusterer.getMarkers() // 获取聚合类的所有基础Marker集合
markerClusterer.setMarkers(markers: Array[Marker]) // 将Marker集合添加到聚合(覆盖性添加Marker)
markerClusterer.add(Marker) // 添加Marker
markerClusterer.remove(Marker) // 删除Marker
markerClusterer.clearMarkers() // 清空 Markers
// 支持事件
['click', 'dblclick', 'contextmenu']4、VectorGraph (主动绘制图形类)
const graph = new JC.VectorGraph(map, options = {})
// 参数详解:
map: 地图实例对象
options: { // 样式参数 会影响整个矢量图层(className为'VectorLayer'图层)
fillColor: 'rgba(37,241,239,0.2)', // 填充颜色
strokeColor: '#264df6', // 笔触颜色
strokeWidth: 2, // 笔触宽度
lineCap: 'round', // 线帽样式 butt、round、 或square
lineJoin: 'round', // 线连接样式 bevel、round、 或miter
imageRadius: 7, // 点样式半径大小
imageFill: '#264df6', // 点样式填充颜色
}
// 方法详解:
graph.activate(graphName: string) // 激活矢量图绘制(graphName共五种, 分别为Point, Line, Circle, Polygon, Rectangle, 对应画哪种图形)
graph.deactivate() // 失活矢量图绘制(终止绘图)
// option 为专属于该图形的样式, 不会影响到整个图层, extData 为自定义数据
graph.getExtData() // 获取 自定义数据
graph.clearVector() // 清除图层上的数据源（矢量图形）
// 支持事件:
['done']5、 Point （图形 点类）
let point = new JC.Point({
center: new JC.LngLat(116.479662,39.996956),
extData: {'name': '点'}
})
map.add(point)
point.on('click', e => {
console.log(e.target.getExtData())
})
point.show()
point.hide()6、 Line （图形 线类）
let line = new JC.Line({
map: map,
path: [new JC.LngLat(116.477648,39.997149),new JC.LngLat(116.480078, 39.996506)],
extData:{'name': '线'}
})
line.on('click', e => {
console.log(e.target.getExtData())
})
line.show()
line.hide()7、 Circle （图形 圆形类）
let circle = new JC.Circle({
center: new JC.LngLat(116.47614550262452, 39.99763225396728),
radius: 81.7,
extData:{'name': '圆'}
})
map.add(circle)
circle.on('click', e => {
console.log(e.target.getExtData())
})
circle.show()
circle.hide()8、 Polygon （图形 多边形类）
let polygon = new JC.Polygon({
map: map,
path: [new JC.LngLat(116.47699844509125, 39.9982652552948), new JC.LngLat(116.47721838623048, 39.997278202377316), new JC.LngLat(116.47869360118867, 39.99738549073791), new JC.LngLat(116.47857558399201, 39.9979058392868), new JC.LngLat(116.47837710052491, 39.99842618783569)],
extData: {'name': '多边形'}
})
polygon.on('click', e => {
console.log(e.target.getExtData())
})
polygon.on('contextmenu', e => {
console.log(e.target.getExtData())
})
polygon.show()
polygon.hide()9、 Rectangle （图形 矩形类）
let rectangle = new JC.Rectangle({
path: [new JC.LngLat(116.48053896099091,39.99640916665649), new JC.LngLat(116.48225557476044, 39.99715482076263)],
extData: {'name': '矩形'}
})
map.add(rectangle)
rectangle.on('click', e => {
console.log(e.target.getExtData())
})
rectangle.show()
rectangle.hide()10、 GraphEdit （图形编辑类）
edit = new JC.GraphEdit(map)
edit.open()
edit.close()
edit.on('modifyend', e => {
console.log(e)
})11、InfoWindow（信息框类）
// 实例化信息框类有多种方式
// 方式1 常规模式
let Single1 = new JC.InfoWindow({
title: '标记点',
content: '这是一个标记点喔',
offset: [0, 0],
width: 200,
height: 100
})
// 方式2 自定义模式之传入DOM
let Single2 = new JC.InfoWindow({
content: document.querySelector('#single'),
offset: [0, 0],
width: 200,
height: 100
})
// 方式3 自定义模式之传入html字符串
let Single = new JC.InfoWindow({
content: `<div>123</div>`,
offset: [0, 0],
width: 200,
height: 100
})
// 参数详解: (我是根据传入的content来判断是那种方式的)
content: (string | HTMLDivElement | HtmlString)
title: string = 'JCMap 信息框' // 常规模式下默认标题
offset: Array[number] = [0, 0] // 第二偏移
position: string = 'bottom-center' // 第一偏移
width = 200 // 默认信息框总宽度 box-sizing: border-box
height = 100 // 默认信息框总高度 box-sizing: border-box
// 支持事件
['click', 'dblclick', 'contextmenu']12、Polyline（轨迹类）
// 轨迹类不同于以往的其他地图，我们是分作小车Marker类实例和轨迹线PolyLine类实例
// 小车实例
const marker = new JC.Marker({
map: map,
position: [116.478935, 39.997761],
// icon: 'https://webapi.amap.com/images/car.png',
angle: -90,
offset: [-26, -13],
content: `<div><img src="https://webapi.amap.com/images/car.png" alt="" style="vertical-align:middle;"></div>`
})
// 轨迹线实例
const lineArr = [
[116.478935, 39.997761],
[116.478939, 39.997825],
[116.478912, 39.998549],
[116.478912, 39.998549],
[116.478998, 39.998555],
[116.478998, 39.998555],
[116.479282, 39.99856],
[116.479658, 39.998528],
[116.480151, 39.998453],
[116.480784, 39.998302],
[116.480784, 39.998302],
[116.481149, 39.998184],
[116.481573, 39.997997],
[116.481863, 39.997846],
[116.482072, 39.997718],
[116.482362, 39.997718],
[116.483633, 39.998935],
[116.48367, 39.998968],
[116.484648, 39.999861],
[116.4889679286499, 40.003822062536884],
[116.49177741676331, 40.00160192330932],
[116.48720693260194, 39.9987695105896]
]
let polyline = new JC.Polyline({
map,
path: lineArr,
map: map,
showDir: true, //
strokeColor: '#28F', //线颜色
strokeWeight: 6, //线宽
extData: null // 自定义信息
})
// 参数详解:
path:Array[lng: number, lon: number] = [], // 点坐标数组
zIndex: number = 2, // 覆盖物的叠加顺序
showDir: boolean = true, // 是否显示白色方向箭头
strokeColor: string = '#006600', // 线条颜色
strokeOpacity: number = 0.9, // 线条透明度
strokeWeight: number = 10, // 线条宽度
strokeStyle: string = 'solid', // 轮廓线样式，实线: solid 虚线:dashed
strokeDasharray: Array[number] = [], // 轮廓线间隙
lineCap: string = 'butt', // 折线两端线帽的绘制样式，默认值为'butt'无头，其他可选值：'round'圆头、'square'方头
lineJoin: string = 'round', // 折线拐点的绘制样式，默认值为'round'圆角，其他可选值：'round'圆角、'bevel'斜角
isOutline: boolean = false, // 线条是否带描边，默认false
borderWeight: number = 10, // 描边的宽度，默认为1
outlineColor: string = '#000000', // 线条描边颜色，此项仅在isOutline为true时有效，默认：#000000
extData: null // 自定义信息
// 方法详解:
marker.moveAlong(lineArr： Array[lng: number, lon: number], speedInput: number = 100) // 开始动画(lineArr为点坐标数组, speedInput为当前速度)
marker.pauseMove() // 暂停动画
marker.resumeMove(lineArr： Array[lng: number, lon: number], speedInput: number = 100) // 恢复动画(lineArr为点坐标数组, speedInput为当前速度)
marker.stopMove() // 停止动画13、 ContextMenu（右键菜单类）
// 右键菜单类实例
const contextMenu = new JC.ContextMenu()
// 默认属性
this.defaultMenuList = [ // 默认菜单栏
{
title: '放大一级',
callBack: () => {
this.map.setZoomIn()
}
},
{
title: '缩小一级',
callBack: () => {
this.map.setZoomOut()
}
}
]
// 方法详解:
// 添加子菜单
contextMenu.addMenu({
title: string // 新增子菜单标题
callBack: Function // 点击子菜单后回调函数
})
// 移除子菜单
contextMenu.removeMenu(title: string) // 移除子菜单标题
// 显示右键菜单栏
contextMenu.open(map: Map, coordinate: Array[lng: number, lat: number]) // map为地图实例对象, coordinate为坐标点在线技术文档
(https://blog.csdn.net/qq_39404437/article/details/121330284?spm=1001.2014.3001.5501)