更新记录

V1.0.8(2021-11-11) 下载此版本

openlayer手机端使用方法

  1. 引入 npm install ol
  2. 参考地址:https://openlayers.org/download/
  3. 将封装好的openlayerMap导入到项目中
  4. 类构造方法constructor(id, center, callback, isWms), id map容器ID ,center 中心点 ,callback 点击事件回调 isWms 是否为wms
  5. 初始化绘制编辑 initModify(callback) callback 编辑事件回调
  6. 手动绘制 点 线 面addDrawInteractions(type, endCallback) type的值有 point line Polygon Circle , endCallback 绘制完成回调
  7. 撤销点 removeLastPoint()
  8. 删除要素 drawDelete()
  9. 绘制完成 drawComplete()
  10. geoJson加载点线面 drawPolygonGeoJson(geoJson)
  11. 绘制点 drawPointGeoJson(geoJson, icon)
  12. 设置中心点 setMapCenter(center)
  13. 定位中心点绘制 drawMark(ponit, icon)
  14. 绘制点drawPoint(ponit, icon)
  15. 绘制多边形 drawPolygon(polyCoords) //polyCoords为数组
  16. 绘制线 drawLine(coordinates) //coordinates为数组
  17. 隐藏地图默认按钮 hideOption()
  18. 行政图与影像图层切换 changeLayer(isShow)
  19. 缩小zoomSmall()
  20. 放大zoomBig()
  21. 获取可视区域 setViewPortChange(callback)

使用示例

  • 初始化map对象 this.mapObject = new mapObject('mymap', this.center, feature => { console.log("点击的feature为", feature); },true);
  • 定位 this.mapObject.drawMark([116.445493, 39.987137]);
  • 初始化手绘功能 this.mapObject.initModify(e => { console.log("修改", e.features); });
  • 视口发生改变监听 this.mapObject.setViewPortChange(e => { console.log("视口发生改变", e); });
  • 隐藏地图默认按钮 this.$nextTick(() => { this.mapObject.hideOption(); });
  • 以geoJson形式进行绘制 this.mapObject.drawPolygonGeoJson(duobianx); this.mapObject.drawPointGeoJson(point); this.mapObject.drawPolygonGeoJson(line);
  • 以坐标点形式进行绘制 this.mapObject.drawPoint([116.397451, 39.909187]); this.mapObject.drawPolygon([ [ [116.38959947366399, 39.88038662712821], [116.4039010341015, 39.85233357529546], [116.42113624480564, 39.87690291551312], [116.38959947366399, 39.88038662712821] ] ]); this.mapObject.drawLine([[115.337247,40.161579],[117.707548,40.201449]]);
  • 放大 this.mapObject.zoomBig();
  • 缩小 this.mapObject.zoomSmall();
  • 开始手绘 this.mapObject.addDrawInteractions("Polygon", e => { console.log("绘制完成", e) });
  • 取消手绘
    this.mapObject.removeLastPoint();
  • 手绘完成 this.mapObject.drawComplete();
  • 删除手绘 this.mapObject.drawDelete();

平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

openlayer手机端使用方法

  1. 引入 npm install ol
  2. 参考地址:https://openlayers.org/download/
  3. 将封装好的openlayerMap导入到项目中
  4. 类构造方法constructor(id, center, callback, isWms), id map容器ID ,center 中心点 ,callback 点击事件回调 isWms 是否为wms
  5. 初始化绘制编辑 initModify(callback) callback 编辑事件回调
  6. 手动绘制 点 线 面addDrawInteractions(type, endCallback) type的值有 point line Polygon Circle , endCallback 绘制完成回调
  7. 撤销点 removeLastPoint()
  8. 删除要素 drawDelete()
  9. 绘制完成 drawComplete()
  10. geoJson加载点线面 drawPolygonGeoJson(geoJson)
  11. 绘制点 drawPointGeoJson(geoJson, icon)
  12. 设置中心点 setMapCenter(center)
  13. 定位中心点绘制 drawMark(ponit, icon)
  14. 绘制点drawPoint(ponit, icon)
  15. 绘制多边形 drawPolygon(polyCoords) //polyCoords为数组
  16. 绘制线 drawLine(coordinates) //coordinates为数组
  17. 隐藏地图默认按钮 hideOption()
  18. 行政图与影像图层切换 changeLayer(isShow)
  19. 缩小zoomSmall()
  20. 放大zoomBig()
  21. 获取可视区域 setViewPortChange(callback)

使用示例

  • 初始化map对象 this.mapObject = new mapObject('mymap', this.center, feature => { console.log("点击的feature为", feature); },true);
  • 定位 this.mapObject.drawMark([116.445493, 39.987137]);
  • 初始化手绘功能 this.mapObject.initModify(e => { console.log("修改", e.features); });
  • 视口发生改变监听 this.mapObject.setViewPortChange(e => { console.log("视口发生改变", e); });
  • 隐藏地图默认按钮 this.$nextTick(() => { this.mapObject.hideOption(); });
  • 以geoJson形式进行绘制 this.mapObject.drawPolygonGeoJson(duobianx); this.mapObject.drawPointGeoJson(point); this.mapObject.drawPolygonGeoJson(line);
  • 以坐标点形式进行绘制 this.mapObject.drawPoint([116.397451, 39.909187]); this.mapObject.drawPolygon([ [ [116.38959947366399, 39.88038662712821], [116.4039010341015, 39.85233357529546], [116.42113624480564, 39.87690291551312], [116.38959947366399, 39.88038662712821] ] ]); this.mapObject.drawLine([[115.337247,40.161579],[117.707548,40.201449]]);
  • 放大 this.mapObject.zoomBig();
  • 缩小 this.mapObject.zoomSmall();
  • 开始手绘 this.mapObject.addDrawInteractions("Polygon", e => { console.log("绘制完成", e) });
  • 取消手绘
    this.mapObject.removeLastPoint();
  • 手绘完成 this.mapObject.drawComplete();
  • 删除手绘 this.mapObject.drawDelete();
  • 联系方式 QQ:2223553887

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问