前言
在上海部分高校都有一个或者多个布控的监控摄像头，然后通过地图，来统一展示我们的设备，可以通过地址搜索，在地图上显示，并且点击可以查看到摄像头的具体信息。这里设备获取，使用的是萤石的开发者中心获取的。
具体效果
高德地图
这里使用了AMap.DistrictSearch和AMap.PlaceSearch这两个API
AMap.DistrictSearch
行政区查询服务（AMap.DistrictSearch）提供行政区信息的查询，使用该服务可以获取到行政区域的区号、城市编码、中心点、边界、下辖区域等详细信息，为基于行政区域的地图功能提供支持。
AMap.PlaceSearch
地点搜索服务，提供某一特定地区的位置查询服务。PlaceSearch构造函数的参数为可选，表达为参数对象PlaceSearchOptions。PlaceSearchOptions允许设置搜索城市、搜索数据类别、搜索结果详略、搜索结果排序规则等。
具体实现
1、渲染地图
2、标注设备位置
3、标注添加点击事件
4、弹框信息
5、监听搜索框，重新渲染地图
引入高德地图import AMap from 'AMap'
这里需要在vue.config.js中配置以下
configureWebpack: {
externals: {
'AMap': 'AMap', // 高德地图配置
'EZUIKit':'EZUIKit'
}
}开始渲染高德地图
<div class="skyeye-map">
<el-select v-model="value"
filterable
remote
reserve-keyword
placeholder="请输入关键词"
:remote-method="Search"
@change="select"
size="small"
:loading="loding">
<el-option
v-for="(item,index) in options"
:key="index"
:label="item.name"
:value="JSON.stringify(item.location)">
</el-option>
</el-select>
<div id="container" style="width:100%;height:100%;"></div>
<el-dialog
:title="videoData.Name"
:visible.sync="dialogVisible"
width="30%"
@close="closeDialog"
destroy-on-close
>
<div class="video-list" v-if="dialogVisible == 'video'">
<video id="myPlayer" autoplay :src="videoData.URL" v-if="videoData.URL" playsInline webkit-playsinline controls></video>
<span v-else >
该点还未设置乐天眼
</span>
</div>
<div class="video-list" v-if="dialogVisible == 'text'" v-html="videoData.Info.replace(/\n|\r\n/g, '<br>')">
</div>
</el-dialog>
</div>export default {
data(){
return {
videoData:'',
dialogVisible:false,
options: [],
loding: false,
value: '',
player:false,
}
},
mounted(){
this._initMap()
},
methods:{
_initMap(lat){
// 获取人员列表
this.loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
target: document.getElementById('container'),
background: 'rgba(255, 255, 255, 0.7)'
});
//GetSkyeye 是封装了一个获取所有位置的列表信息，这里可以改写成自己的请求数据
GetSkyeye({pageSize:99999}).then((e)=>{
this.loading.close()
if(e.data.code == 1){
var _this = this
var opts = {
subdistrict: 0,
extensions: 'all',
level: 'city'
};
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
target: document.getElementById('container'),
background: 'rgba(255, 255, 255, 0.7)'
});
//利用行政区查询获取边界构建mask路径
//也可以直接通过经纬度构建mask路径
var district = new AMap.DistrictSearch(opts);
district.search('上海', function(status, result) {
var bounds = result.districtList[0].boundaries
var mask = [
]
for(var i=0;i<bounds.length;i+=1){
mask.push([bounds[i]])
}
var map = new AMap.Map('container', {
mapStyle: "amap://styles/90289c6fa259e41ac055a6455979370b",
mask:mask,
center:lat ? lat : [121.541313,31.244013],
disableSocket:true,
viewMode:'3D',
zoom:lat ? 15 : 10
})
// 同时引入工具条插件，比例尺插件和鹰眼插件
AMap.plugin([
'AMap.MapType',
], function(){
// 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
map.addControl(new AMap.MapType());
});
if (bounds) {
for (let i = 0, l = bounds.length; i < l; i++) {
//生成行政区划polygon
new AMap.Polygon({
map: map, // 指定地图对象
strokeWeight: 1, // 轮廓线宽度
path: bounds[i], //轮廓线的节点坐标数组
fillOpacity:0, //透明度
strokeColor: '#999', //线条颜色
})
}
}
loading.close()
console.log( e.data.data)
var lnglats = e.data.data.data;
var icon = new AMap.Icon({
size: new AMap.Size(24,32), // 图标尺寸
image:'https://sl-app.oss-cn-shanghai.aliyuncs.com/lpt/map-icon.png', // Icon的图像
imageSize: new AMap.Size(24,32) // 根据所设置的大小拉伸或压缩图片
});
var icon2 = new AMap.Icon({
size: new AMap.Size(32,32), // 图标尺寸
image:'https://sl-app.oss-cn-shanghai.aliyuncs.com/lpt/sllogo.png', // Icon的图像
imageSize: new AMap.Size(32,32) // 根据所设置的大小拉伸或压缩图片
});
var noicon = new AMap.Icon({
size: new AMap.Size(24,32), // 图标尺寸
image:'none', // Icon的图像
imageSize: new AMap.Size(24,32) // 根据所设置的大小拉伸或压缩图片
});
for (var j = 0; j < lnglats.length; j++) {
var lnglat = lnglats[j];
var maskerIn2 = new AMap.Marker({
position: new AMap.LngLat(lnglat.Longitude, lnglat.Latitude),
icon:noicon,
extData: lnglat,
map:map
})
var maskerIn = new AMap.Marker({
position: new AMap.LngLat(lnglat.Longitude, lnglat.Latitude),
icon:lnglat.Name == '上海生乐物业管理有限公司' ? icon2 : icon,
extData: lnglat,
map:map
})
maskerIn2.setLabel({
offset: new AMap.Pixel(0 ,25), //设置文本标注偏移量
content: "<div class='info'>"+lnglats[j].Name+"</div>", //设置文本标注内容
direction: 'center', //设置文本标注方位
});
maskerIn.on('click', showInfoM)
maskerIn2.on('click', showInfoM2)
}
//标注点击弹出设备信息事件
function showInfoM(e){
_this.videoData = e.target.getExtData()
_this.dialogVisible = 'video'
if(e.target.getExtData().URL){
_this.$nextTick(()=>{
this.player = new EZUIKit.EZUIPlayer('myPlayer');
this.player.on('error', function(){
console.log('error');
});
this.player.on('play', function(){
console.log('play');
});
this.player.on('pause', function(){
console.log('pause');
});
})
}
}
function showInfoM2(e){
console.log(e.target.getExtData())
_this.videoData = e.target.getExtData()
_this.dialogVisible = 'text'
}
})
}
}).catch((err)=>{
this.loading.close()
this.$message({
message: err,
type: 'error'
})
})
},
Search(e){
var _this = this
AMap.service(["AMap.PlaceSearch"], function() {
//构造地点查询类
var placeSearch = new AMap.PlaceSearch({
// city 指定搜索所在城市，支持传入格式有：城市名、citycode和adcode
city: '上海'
})
placeSearch.search(e, function (status, result) {
// 查询成功时，result即对应匹配的POI信息
console.log(status, result)
if(result.info){
_this.options = result.poiList.pois
}else{
_this.options=[]
}
})
});
},
select(e){
console.log(e)
var lat = [JSON.parse(e).lng,JSON.parse(e).lat]
this._initMap(lat)
},
closeDialog(){
if(this.player){
this.player.on('pause', function(){
console.log('pause');
});
}
}
}
}总结
熟悉高德地图API，最终实现划区域的地图显示。关闭视频弹框的同时，需要销毁Video，不然只是单纯的关闭了弹框，视频还在后台播放着。