<template>
<div id="gismap">
<div class="seachMap" v-show="showMap == '1'">
<!-- <Input v-model="searthValue" placeholder="搜索地点" style="width: 250px;" /> -->
<Button type="info" @click="handelOk()">保存</Button>
<Button type="info" @click="addPolygon()">绘制</Button>
<Button type="info" @click="handelEdit()">编辑</Button>
<Button type="info" @click="handelDelete()">删除</Button>
<Button type="info" @click="handelcore()">添加中心点</Button>
<el-color-picker v-model="color" color-format="hex"></el-color-picker>
</div>
<div id="map"></div>
</div>
</template>
<script>
export default {
props: ['showMap'], // showMap 参数1 是区域编辑按钮 展示
data() {
return {
iconurl1: require('../assets/images/screen/marker1.png'), // 逾期
iconurl2: require('../assets/images/screen/marker2.png'), // 紧急
iconurl3: require('../assets/images/screen/marker3.png'), // 正常
iconurl4: require('../assets/images/screen/markPeo.png'), // 人
bigMap: null,
draw: null, //设置一个变量来保存当前的绘制对象
drawnItems: null, //创建一个图形覆盖物的集合来保存点线面
searthValue: '',
ArrMarkerPT:[],// 普通事件
ArrMarkerJJ:[],// 紧急事件
layer: null, // 面数据
color: '#1C26D6',
latlng: null ,// 经纬度
arrLayer:[],// 所有区域
ArrMarkerWGY:[],// 网格员
ArrMarkerZC:[],// 正常事件
ArrMarkerYQ:[],// 逾期事件
};
},
mounted() {
this.init();
},
methods: {
init() {
let that = this;
// BM.Config.HTTP_URL = ' http://192.168.11.46:9000';
BM.Config.HTTP_URL = 'http://106.8.152.2:55556';
// 在ID为map的元素中实例化一个地图，不要设置地图ID，ID号程序自动生成，无需手动配置，设置中心点，默认的级别和显示级别控件
var map = BM.map('map', null, { crs: BM.CRS.Baidu, center: [40.730171, 114.885675], zoom: 10, zoomControl: true, attributionControl: false, maxZoom: 15 });
// 在ID为map的元素中实例化一个地图，并设置地图的ID号为 bigemap.baidu-map，ID号程序自动生成，无需手动配置，并设置地图的投影为百度地图 ，中心点，默认的级别和显示级别控件
//河北的数据下载到了 13级，张家口的数据下载了 17级
// var layer1 = BM.tileLayer('bigemap.d5t2jr8t')
// .addTo(map)
// .on('load', function(argument) {
// layer1.options.maxNativeZoom = 13;
// layer1.options.maxZoom = 15;
// map.setMaxZoom(15);
// });
// bigemap.5v7t9nd2
// bigemap.arlcbhau
var layer2 = BM.tileLayer('bigemap.arlcbhau')
.addTo(map)
.on('load', function(argument) {
map.setMaxZoom(15);
});
that.bigMap = map;
// var arcgis_satellite = BM.tileLayer('bigemap.56me4vj7');
// arcgis_satellite.addTo(map);
//创建一个图形覆盖物的集合来保存点线面
that.drawnItems = new BM.FeatureGroup();
//添加在地图上
that.bigMap.addLayer(that.drawnItems);
},
//监听绘画完成事件
ceeatedDraw() {
let that = this;
that.bigMap.on(BM.Draw.Event.CREATED, function(e) {
if(that.layer){
that.layer.remove()
}
that.layer = e.layer;
that.drawnItems.addLayer(that.layer);
});
},
// 循环加载区域
forPolygon() {
let that = this;
var latlngs = [[40.7167295, 114.87690484], [40.81924185, 114.87879372], [40.61467295, 114.98690484]];
that.layer = BM.polygon(latlngs, { color: that.color }).addTo(that.bigMap);
// that.drawnItems.removeLayer(that.layer);
// 让地图适配当前的线段
// that.bigMap.fitBounds(polygon.getBounds());
},
// 添加点位
handelcore() {
let that = this;
that.bigMap.addEventListener('click', that.ShowInfo);
},
ShowInfo(e) {
if (this.latlng) {
this.latlng.remove();
}
this.latlng = e.latlng;
this.latlng = BM.marker(e.latlng).addTo(this.bigMap);
},
// 添加区域边界
addPolygon() {
let that = this;
that.bigMap.removeEventListener('click', that.ShowInfo);
that.draw = new BM.Draw.Polygon(that.bigMap, {
showArea: false,
allowIntersection: false,
drawError: {
color: '#b00b00',
message: '不能绘制交叉的多边形!'
},
shapeOptions: {
color: that.color
}
});
that.draw.enable();
that.ceeatedDraw();
},
// 编辑图层
handelEdit() {
let that = this;
that.layer.once('click', () => {
that.layer.editing.enable();
that.bigMap.once('contextmenu', () => {
that.layer.editing.disable();
});
});
this.bigMap.removeEventListener('click', this.ShowInfo);
},
// 删除图层
handelDelete() {
let that = this;
that.layer.on('click', e => {
that.layer.remove()
that.layer=null
});
},
// 加载热力
getRandom(data) {
let arr=[]
data.diagramList.forEach(res=>{
if(res.area_center){
let lanlat=res.area_center.split(',')
arr.push([parseFloat(lanlat[0]) ,parseFloat(lanlat[1]),res.peopleCount])
}
})
var heat = BM.heatLayer(arr, { radius: 20, minOpacity: 0.5, gradient: { 0.4: 'blue', 0.65: 'lime', 1: 'red' } }).addTo(this.bigMap);
heat.on('mousemove',function(e){
console.log(e)
})
this.bigMap.setView([40.730171, 114.885675],9);
},
// 不同页面等级
setViewMap(level){
this.bigMap.setView([40.730171, 114.885675],level);
},
// 保存区域编辑
handelOk() {
this.$emit('handelOkmap', this.layer, this.latlng, this.color); // 范围 中心点 颜色
},
// 画区域回显
forPolygonOne(data){
let that=this
if(that.latlng){
that.latlng.remove()
}
if(that.layer){
that.layer.remove()
}
// 加载区域 和定位点
if(data.areaCenter&&data.areaRange){
let arr=JSON.parse(data.areaRange)
let str={
lat:data.areaCenter.split(',')[0],
lng:data.areaCenter.split(',')[1]
}
that.layer = BM.polygon(arr, { color: data.reserve1 }).addTo(that.bigMap);
that.color=data.reserve1
that.bigMap.fitBounds(that.layer.getBounds());
that.latlng = BM.marker(str).addTo(this.bigMap);
}else if(data.areaCenter){
let str={
lat:data.areaCenter.split(',')[0],
lng:data.areaCenter.split(',')[1]
}
that.latlng = BM.marker(str).addTo(this.bigMap);
that.bigMap.setView([str.lat,str.lng],9);
}
},
// gis管理 区域面
forPolygonOneGIS(data){
let that=this
let arr=JSON.parse(data.areaRange)
that.layer = BM.polygon(arr, { color: data.reserve1 }).addTo(that.bigMap);
that.layer.bindTooltip(`<div style=background-color:${data.reserve1}>${data.areaName}</div>`,{permanent:true,className:'myLayer_tooltip'});
that.layer['name']=data.areaName
that.layer['id']=data.id
that.layer['areaId']=data.areaId
that.layer['areaLevel']=data.areaLevel
that.arrLayer.push(that.layer)
that.layer.on('click',function(e){
console.log(e.target.areaLevel)
if(e.target.areaLevel>=3){ // 社区 村 一下
that.$emit('gisAreaPeo',e.target.areaId)
}
})
},
// 定位当前位置
markerLocation(data,n){
let level=n?n:11
let that=this
let str={
lat:data.areaCenter.split(',')[0],
lng:data.areaCenter.split(',')[1]
}
that.bigMap.setView([str.lat,str.lng],level);
},
// 网格员 事件
formarkerLocation(data,title){
let that = this;
let small_icon =null;
if(title=='网格员'){
small_icon= BM.icon({
iconUrl: that.iconurl4,
iconSize: [44, 71],
iconAnchor: [10, 20]
});
//设置图标
let mark = BM.marker([data.latitude,data.longitude], {
icon: small_icon
}).bindTooltip(data.name,{direction:'top',className:'my_tooltip'}).addTo(that.bigMap).openTooltip();
mark['name']=data.areaName
mark['id']=data.areaerId
that.ArrMarkerWGY.push(mark)
mark.on('click',function(e){
console.log(e)
that.$emit('headelPeoDetail',e.target.id)
})
}else if(title=='逾期事件'){ // 逾期事件
small_icon= BM.icon({
iconUrl: that.iconurl1,
iconSize: [44, 71],
iconAnchor: [10, 20]
});
//设置图标
let mark = BM.marker([data.latitude,data.longitude], {
icon: small_icon
}).bindTooltip(data.event_name,{direction:'top',className:'my_tooltip'}).addTo(that.bigMap).openTooltip();
mark['name']=data.event_name
mark['id']=data.id
that.ArrMarkerYQ.push(mark)
}else if(title=='正常事件'){ // 正常事件
small_icon= BM.icon({
iconUrl: that.iconurl3,
iconSize: [44, 71],
iconAnchor: [10, 20]
});
//设置图标
let mark = BM.marker([data.latitude,data.longitude], {
icon: small_icon
}).bindTooltip(data.event_name,{direction:'top',className:'my_tooltip'}).addTo(that.bigMap).openTooltip();
mark['name']=data.event_name
mark['id']=data.id
that.ArrMarkerZC.push(mark)
}else if(title=='紧急事件'){ // 紧急事件
}else if(title=='普通事件'){ // 普通事件
small_icon= BM.icon({
iconUrl: that.iconurl3,
iconSize: [44, 71],
iconAnchor: [10, 20]
});
//设置图标
let mark = BM.marker([data.latitude,data.longitude], {
icon: small_icon
}).bindTooltip(data.event_name,{direction:'top',className:'my_tooltip'}).addTo(that.bigMap).openTooltip();
mark['name']=data.event_name
mark['id']=data.report_id
that.ArrMarkerPT.push(mark)
mark.on('click',function(e){
console.log(e)
that.$emit('headelEventDetail',e.target.id,'普通事件')
})
}
// $('.bigemap-tooltip-pane').html('')
},
// 删除所有标注区域
ForRemovePoly(){
let that=this
if(that.arrLayer.length){
that.arrLayer.forEach(res=>{
res.remove()
})
}
},
// 删除所有标注
ForRemoveMarker(title,arr){
let that=this
if(that[arr].length){
that[arr].forEach(res=>{
res.remove()
})
}
}
}
};
</script>
<style lang="less">
.myLayer_tooltip{
background: none;
border: none;
&:before{
border: none;
}
div{
padding: 3px 5px;
border-radius: 3px;
color: #fff;
}
}
.my_tooltip{
left: 12px;
top: -17px;
}
.bigemap-control-container {
display: none;
}
</style>
<style scoped lang="less">
.seachMap {
position: fixed;
z-index: 100;
padding: 10px;
button {
margin: 0 10px;
}
.el-color-picker {
position: absolute;
top: 5px;
}
}
#gismap {
width: 100%;
height: 100%;
#map {
width: 100%;
height: 100%;
background: url('../assets/images/screen/bg.png') no-repeat;
}
}
</style>
bigmap 面 点 线 删除 编辑 颜色 热力图 点击
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
推荐阅读更多精彩内容
- 1、创建空白项目，在屏幕中间添加一个UILabel 2、command + N打开文件选择页面，选择Object-...
- 废话不多，先上效果 上图所示，颜色渐变深蓝色到浅蓝色，鼠标悬浮之后，颜色会不变 而不是指定的一个颜色，ps:(gi...
- 澜妈想问下魅宝们，是否有过这样的疑惑，为什么同样的饭，闰蜜吃了没反应，自己却在疯狂的长肉？为什么！为什么！！为什么...
