更新记录

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();

平台兼容性

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