中小企业网站建设调研报告,哪个素材网站做美工最好,腾讯企点怎么删除好友,品牌关键词优化哪家便宜vue2 结合iview和百度地图API实现电子围栏
实现在地图上绘制电子围栏并自定义电子围栏样式#xff0c;还可以标记中心点
1.百度地图API相关JS引用 script src//api.map.baidu.com/api?typewebglv1.0ak百度地图官网申请的ak/script//…vue2 结合iview和百度地图API实现电子围栏
实现在地图上绘制电子围栏并自定义电子围栏样式还可以标记中心点
1.百度地图API相关JS引用 script src//api.map.baidu.com/api?typewebglv1.0ak百度地图官网申请的ak/script//电子围栏相关的apilink href//mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.css relstylesheet
script typetext/javascriptsrc//mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.js/script2.页面代码
templatediv styleposition: relative;height:100%!--地图--div idmap classmap styleheight:100% /div classdraw-btn clickdrawMap()开始绘制/div!--工具栏--div classcolor-list v-ifshowDrawButton :typeisCenter?info:primarysizesmallstylemargin-right: 10px;clicksetCenter 中心点/Buttoninput typecoloridstrokeColorv-modelstrokeColorSelect v-modelstrokeWeightstylewidth:50px;margin:0 5pxOption v-foritem in 9:valueitem:keyitem{{ item }}/Option/Selectinput typecoloridfillColorv-modelfillColorSelect v-modelfillOpacitystylewidth:60px;margin:0 5pxOption v-foritem in fillOpacityList:valueitem:keyitem{{ item }}/Option/Select/div/div
/template
script
export default {name: map,data() {return {strokeColor: #DA4863,strokeWeight: 6,fillColor: #DA4863,fillOpacity: 0.6,fillOpacityList: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1],polyLinePoints: [],markerPoints: [],polyLines: null,isCenter: false,showDraw:false}},computed:{changeData() {const { strokeColor, strokeWeight, fillColor, fillOpacity } thisreturn {strokeColor,strokeWeight,fillColor,fillOpacity}}},watch: {changeData: function (newV) {this.initSetMap()}},methods:{//开始绘制drawMap(){this.showDraw truethis.isCenter falsethis.strokeColor #DA4863this.strokeWeight 6this.fillColor #DA4863this.fillOpacity 0.6this.initSetMap()},//获取坐标初始化地图init() {let data{blat: 29.516071,blng: 106.525681}this.initMap(data.blng, data.blat)},//清除坐标点clearMarkerOverlay() {const allOverlays this.map.getOverlays()for (let i 0; i allOverlays.length; i) {if (allOverlays[i].id allOverlays[i].id this.selectData.id) {this.map.removeOverlay(allOverlays[i])}}},//修改围栏样式时触发initSetMap() {this.polyLinePoints []this.markerPoints []var that thisconst { strokeColor, strokeWeight, fillColor, fillOpacity } thisvar overlaycomplete function (e) {var mlnglat []var path e.overlay.getPath() // ArrayPoint 返回多边型的点数组for (var i 0; i path.length; i) {mlnglat.push({lng: path[i].lng,lat: path[i].lat})}console.log(mlnglat)}var styleOptions {strokeColor: this.strokeColor, // 边线颜色。fillColor: this.fillColor, // 填充颜色。当参数为空时圆形将没有填充效果。strokeWeight: this.strokeWeight, // 边线的宽度以像素为单位。strokeOpacity: 1, // 边线透明度取值范围0 - 1。fillOpacity: this.fillOpacity, // 填充的透明度取值范围0 - 1。strokeStyle: solid // 边线的样式solid或dashed。}this.drawingManager new BMapGLLib.DrawingManager(this.map, {isOpen: false, // 是否开启绘制模式enableDrawingTool: true, // 是否显示工具栏drawingToolOptions: {anchor: BMAP_ANCHOR_TOP_RIGHT, // 位置offset: new BMapGL.Size(5, 5) // 偏离值},polygonOptions: styleOptions // 多边形的样式})this.drawingManager.addEventListener(overlaycomplete, overlaycomplete)},//初始化地图initMap(lng, lat) {let that thisif (this.map) {this.map.clearOverlays()}this.map new BMapGL.Map(map)var poi new BMapGL.Point(lng, lat)this.map.centerAndZoom(poi, 18) // 设置中心点坐标和地图级别this.map.enableScrollWheelZoom() // 启用鼠标滚动对地图放大缩小this.map.addControl(new BMapGL.NavigationControl())if (this.polyLinePoints this.polyLinePoints.length) {this.polyLinePoints.forEach((item) {if (item.points item.points.length) {let data []item.points.forEach((col) {var po new BMapGL.Point(col.lng, col.lat)data.push(po)})this.polyLines new BMapGL.Polygon(data, {strokeColor: item.strokeColor, // 边线颜色。fillColor: item.fillColor, // 填充颜色。当参数为空时圆形将没有填充效果。strokeWeight: item.strokeWeight, // 边线的宽度以像素为单位。strokeOpacity: 1, // 边线透明度取值范围0 - 1。fillOpacity: item.fillOpacity // 填充的透明度取值范围0 - 1。})this.map.addOverlay(this.polyLines)}})}if (this.markerPoints this.markerPoints.length) {this.markerPoints.forEach((item) {if (item.points item.points.length) {let data []item.points.forEach((col) {var marker new BMapGL.Marker(new BMapGL.Point(col.lng, col.lat))marker.id item.idthis.map.addOverlay(marker)const label new BMapGL.Label(, {offset: new BMapGL.Size(0, 0)})label.setStyle({textAlign: center,// 设置label的样式color: white,fontSize: 14px,border: none,color: black,fontFamily: 黑体// opacity: 0.5,})label.setContent(div stylebackground: rgba(255,255,255,1);border-radius: 12px;padding:3px 5px${item.name}/div)marker.setLabel(label)})}})}//地图展示样式this.map.setMapStyleV2({styleJson: [// {// featureType: poilabel,// elementType: all,// stylers: {// visibility: off// }// },// {// featureType: manmade,// elementType: all,// stylers: {// visibility: off// }// },{featureType: building,elementType: all,stylers: {visibility: off}}]})this.map.addEventListener(click, function (e) {//点击地图设置中心点if (that.isCenter) {that.clearMarkerOverlay()var marker new BMapGL.Marker(new BMapGL.Point(e.latlng.lng, e.latlng.lat))marker.id that.selectData.idthat.map.addOverlay(marker)const label new BMapGL.Label(, {offset: new BMapGL.Size(0, 0)})label.setStyle({textAlign: center,// 设置label的样式color: white,fontSize: 14px,border: none,color: black,fontFamily: 黑体// opacity: 0.5,})label.setContent(div stylebackground: rgba(255,255,255,1);border-radius: 12px;padding:3px 5px${that.selectData.name}/div)marker.setLabel(label)}})},setCenter() {this.isCenter true},},mounted() {this.init()}}
/script
style scoped langless
/deep/.BMapGLLib_Drawing {position: inherit !important;
}
/deep/ .BMapGLLib_Drawing .BMapGLLib_polyline {display: none !important;
}/deep/ .BMapGLLib_Drawing_panel {position: absolute;right: 380px;top: 1%;
}
//隐藏除了多边形之外的按钮
/deep/ .BMapGLLib_Drawing .BMapGLLib_marker {display: none !important;
}
/deep/ .BMapGLLib_Drawing .BMapGLLib_circle {display: none !important;
}
/deep/ .BMapGLLib_Drawing .BMapGLLib_rectangle {display: none !important;
}
/deep/.BMap_stdMpZoom {width: 0 !important;height: 0 !important;
}
.draw-btn{position: absolute;left: 10px;top: 2%;z-index: 999;
}
.color-list {position: absolute;right: 10px;top: 2%;z-index: 999;margin: auto;display: flex;align-items: center;justify-content: center;
}
/style效果图
