vue & 百度地图:在地图上绘制多边形
<template> <div class="hello"> <div style="margin-bottom:10px"> <button @click="clickStart('jinting')">设定坐标</button> <button @click="clickEnd">退出设定</button> <button @click="re" style="color:#ff0000">重置</button> <button @click="getBoundary">生成区域</button> <button @click="clickCenter">设定中心点</button> <button @click="boo2 = !boo2">显示点集</button> <input type="text" placeholder="请输入城市名称" width="200" v-model="cityName"></input> </div> <!-- map start --> <div style="" id="dituContent" class="ditu-content"></div> <!-- map end --> <div style="text-align:center" class="ditu-point" v-if="savePointsArray.length > 0" v-show="boo2"> <p v-for="todo in savePointsArray"> <span style="padding-right:20px;">{{ todo.name }}</span><span>{{ todo.point }}</span> </p> </div> </div> </template> <script> export default { name: 'mymap', data () { return { polygons: [], clickCity: '', polyline: null, marker: null, cityName: '', status: 'none', centerPoint: [], savePointsArray: [], savePointsString: '', jinting: '', todos: [ { text: '学习 JavaScript' }, { text: '学习 Vue' }, { text: '整个牛项目' } ], mapObj:null, boo2: false // 当点了显示点集的按钮之后变为true } }, mounted () { this.initMap() }, methods:{ re(){ this.polygons = [] this.clickCity = '' this.polyline = null this.marker = null this.cityName = '' this.status = 'none' this.centerPoint = [] this.savePointsArray = [] this.savePointsString = '' this.jinting = '' this.mapObj = null this.boo2 = false this.initMap() }, initMap () { this.createMap() //创建地图 }, createMap(){ let self = this let m = new BMap.Map("dituContent") let point = new BMap.Point(120.49,31.15) m.centerAndZoom(point,12) m.setCurrentCity("苏州") m.addEventListener("click",function(e){ let ln = e.point.lng let la = e.point.lat self.clickFun(ln,la) }); this.setMapEvent(m) }, setMapEvent(m){ m.enableDragging();//启用地图拖拽事件,默认启用(可不写) m.enableScrollWheelZoom();//启用地图滚轮放大缩小 m.enableDoubleClickZoom();//启用鼠标双击放大,默认启用(可不写) m.enableKeyboard();//启用键盘上下左右键移动地图 this.addMapControl(m);//向地图添加控件 }, addMapControl(m){ //向地图中添加缩放控件 let ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE}); m.addControl(ctrl_nav); //向地图中添加缩略图控件 let ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1}); m.addControl(ctrl_ove); //向地图中添加比例尺控件 let ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT}); m.addControl(ctrl_sca); this.mapObj = m }, clickFun(ln,la){ if (this.status === 'inner') { this.centerPoint[0] = ln this.centerPoint[1] = la this.marker = new BMap.Marker(new BMap.Point(ln, la)); // 创建点 this.mapObj.addOverlay(this.marker); } else if (this.clickCity === '') { console.log('当前没有选择镇'); return } else { switch(this.clickCity) { case 'jinting': this.jinting += (ln + ',' + la + ';') this.pline(this.jinting) // console.log('this.jinting', this.jinting) break; default: return } } }, clickStart(n){ $('#dituContent div').css({ 'cursor':'crosshair' }) this.polygons = [] this.clickCity = n this.status = 'outside' }, clickEnd(){ console.log('======================== CLICK END ======================') this.clickCity = '' this.status = 'none' $('#dituContent div').css({ 'cursor':'url("http://api0.map.bdimg.com/images/openhand.cur") 8 8, default' }) }, clickCenter(){ this.status = 'inner' $('#dituContent div').css({ 'cursor':'crosshair' }) }, pline(city){ this.mapObj.removeOverlay(this.polyline) let pois = city.split(';') let poisarray = [] pois.pop() for (let i = 0; i < pois.length; i++) { poisarray.push(new BMap.Point(parseFloat(pois[i].split(',')[0]),parseFloat(pois[i].split(',')[1]))) } this.polyline = new BMap.Polyline(poisarray, { enableEditing: false,//是否启用线编辑,默认为false enableClicking: false,//是否响应点击事件,默认为true strokeWeight:'5',//折线的宽度,以像素为单位 strokeOpacity: 0.5,//折线的透明度,取值范围0 - 1 strokeColor:"#18a45b" //折线颜色 }); this.mapObj.addOverlay(this.polyline); //增加折线 }, getBoundary(){ this.mapObj.removeOverlay(this.polyline) let areas = [] let contentArray = [] areas.push(this.jinting) let colors = "#fff492" let pointArray = [] for (var i = 0; i < areas.length; i++) { let ply = new BMap.Polygon(areas[i], { strokeWeight: 2, strokeColor: "#ff0000" }); //建立多边形覆盖物 ply.setFillColor(colors) //设置多边形的填充颜色 ply.setFillOpacity(0.35); this.polygons.push(ply); //加入多边形数组,以之后获取多边形边界点集 // ply.enableEditing(); //范围可编辑 【编辑的时候开启】 this.mapObj.addOverlay(ply); //添加覆盖物 pointArray = pointArray.concat(ply.getPath()); } this.addlabel2() this.savePoints() this.reload2() }, reload2(){ this.polygons = [] this.clickCity = '' this.polyline = null this.cityName = '' this.jinting = "" this.status = 'none' this.mapObj.removeOverlay(this.marker) this.centerPoint = [] }, addlabel2(){ let pointArray = [ new BMap.Point(this.centerPoint[0], this.centerPoint[1]), ] let optsArray = [{}] let labelArray = [] this.contentArray = [this.cityName] for (let i = 0; i < pointArray.length; i++) { optsArray[i].position = pointArray[i] labelArray[i] = new BMap.Label(this.contentArray[i], optsArray[i]) labelArray[i].setStyle({ color: "red", fontSize: "12px", height: "20px", lineHeight: "20px", fontFamily: "微软雅黑" }); this.mapObj.addOverlay(labelArray[i]) } }, savePoints(){ console.log('=======================存储点集') console.log(this.cityName) if (this.cityName === ''){ alert('城市名称必填!') return } if (this.savePointsCheck(this.cityName)){ alert('这个点已经存过了!') return } let obj = {} obj.name = this.cityName obj.point = this.jinting.slice(0,-1) obj.centerpoint = this.centerPoint[0] + ',' + this.centerPoint[1] this.savePointsArray.push(obj) console.log(this.savePointsArray) }, savePointsCheck(c) { console.log(c) let f = this.savePointsArray.find((v) => { console.log(c) console.log(v.name + '===' + c) return v.name === c }) return f } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> .ditu-content{ width:70%; height:600px; border:#ccc solid 1px; margin:0 auto 20px; } .pointwords{ word-wrap: break-word; text-align: center; padding: 0 20px; } .button{ height: 100px; } </style>
最后效果如下:
参考:
https://blog.csdn.net/qq_38903950/article/details/78022174?locationNum=7&fps=1
posted on 2018-04-25 10:58 fox_charon 阅读(1631) 评论(0) 编辑 收藏 举报