地图组件

更新记录

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

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