添加优化后的地图页面，完全一处百度地图相关的api
This commit is contained in:
648540858
@@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<div id="DeviceTree" style="width: 100%;height: 100%; background-color: #FFFFFF">
|
||||
<div id="DeviceTree" style="width: 100%;height: 100%; background-color: #FFFFFF; overflow: auto">
|
||||
<el-container>
|
||||
<el-header>设备列表</el-header>
|
||||
<el-main style="background-color: #ffffff;">
|
||||
<div class="device-tree-main-box">
|
||||
<el-tree :props="defaultProps" :load="loadNode" lazy @node-click="handleNodeClick"@node-contextmenu="handleContextMenu">
|
||||
<el-tree :props="defaultProps" :load="loadNode" lazy @node-click="handleNodeClick"@node-contextmenu="handleContextMenu" style="min-width: 100%; display:inline-block !important;">
|
||||
<span class="custom-tree-node" slot-scope="{ node, data }" style="width: 100%">
|
||||
<span v-if="node.data.type === 0 && node.data.online" title="在线设备" class="device-online iconfont icon-jiedianleizhukongzhongxin2"></span>
|
||||
<span v-if="node.data.type === 0 && !node.data.online " title="离线设备" class="device-offline iconfont icon-jiedianleizhukongzhongxin2"></span>
|
||||
@@ -49,16 +49,17 @@ export default {
|
||||
},
|
||||
props: ['clickEvent', 'contextMenuEvent'],
|
||||
methods: {
|
||||
handleNodeClick(data) {
|
||||
handleNodeClick(data,node,element) {
|
||||
console.log("点击事件")
|
||||
console.log(data)
|
||||
if(typeof (this.clickEvent) == "function") {
|
||||
this.clickEvent(data.userData)
|
||||
}
|
||||
},
|
||||
handleContextMenu(data) {
|
||||
handleContextMenu(event,data,node,element) {
|
||||
console.log("右键点击事件")
|
||||
if(typeof (this.contextMenuEvent) == "function") {
|
||||
this.contextMenuEvent(data.userData)
|
||||
this.contextMenuEvent(event, data.userData)
|
||||
}
|
||||
},
|
||||
loadNode: function(node, resolve){
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div id="mapContainer" style="width: 100%;height: 100%;"></div>
|
||||
<div id="mapContainer" ref="mapContainer" style="width: 100%;height: 100%;"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -7,10 +7,20 @@ import 'ol/ol.css';
|
||||
import Map from 'ol/Map';
|
||||
import OSM from 'ol/source/OSM';
|
||||
import XYZ from 'ol/source/XYZ';
|
||||
import TileLayer from 'ol/layer/Tile';
|
||||
import VectorSource from 'ol/source/Vector';
|
||||
import Tile from 'ol/layer/Tile';
|
||||
import VectorLayer from 'ol/layer/Vector';
|
||||
import Style from 'ol/style/Style';
|
||||
import Icon from 'ol/style/Icon';
|
||||
import View from 'ol/View';
|
||||
import Feature from 'ol/Feature';
|
||||
import Overlay from 'ol/Overlay';
|
||||
import {Point, LineString} from 'ol/geom';
|
||||
import {get as getProj, fromLonLat} from 'ol/proj';
|
||||
import {ZoomSlider, Zoom} from 'ol/control';
|
||||
import {containsCoordinate} from 'ol/extent';
|
||||
|
||||
import {v4} from 'uuid'
|
||||
|
||||
let olMap = null;
|
||||
|
||||
@@ -24,7 +34,9 @@ export default {
|
||||
},
|
||||
created(){
|
||||
this.$nextTick(() => {
|
||||
this.init();
|
||||
setTimeout(()=>{
|
||||
this.init()
|
||||
}, 100)
|
||||
})
|
||||
|
||||
},
|
||||
@@ -48,7 +60,7 @@ export default {
|
||||
});
|
||||
let tileLayer = null;
|
||||
if (mapParam.tilesUrl) {
|
||||
tileLayer = new TileLayer({
|
||||
tileLayer = new Tile({
|
||||
source: new XYZ({
|
||||
projection: getProj("EPSG:3857"),
|
||||
wrapX: false,
|
||||
@@ -57,13 +69,13 @@ export default {
|
||||
})
|
||||
})
|
||||
}else {
|
||||
tileLayer = new TileLayer({
|
||||
tileLayer = new Tile({
|
||||
preload: 4,
|
||||
source: new OSM(),
|
||||
})
|
||||
}
|
||||
olMap = new Map({
|
||||
target: "mapContainer", // 容器ID
|
||||
target: this.$refs.mapContainer, // 容器ID
|
||||
layers: [tileLayer], // 默认图层
|
||||
view: view, // 视图
|
||||
controls:[ // 控件
|
||||
@@ -71,6 +83,7 @@ export default {
|
||||
new Zoom(),
|
||||
] ,
|
||||
})
|
||||
console.log(3222)
|
||||
},
|
||||
setCenter(point){
|
||||
|
||||
@@ -82,26 +95,151 @@ export default {
|
||||
|
||||
},
|
||||
centerAndZoom(point,zoom,callback){
|
||||
var zoom_ = olMap.getView().getZoom();
|
||||
zoom = zoom|| zoom_;
|
||||
var duration = 600;
|
||||
olMap.getView().setCenter(fromLonLat(point))
|
||||
olMap.getView().animate({
|
||||
zoom: zoom ,
|
||||
duration: duration
|
||||
});
|
||||
},
|
||||
panTo(point, zoom){
|
||||
let duration = 800;
|
||||
|
||||
olMap.getView().cancelAnimations()
|
||||
olMap.getView().animate({
|
||||
center: fromLonLat(point),
|
||||
duration: duration
|
||||
});
|
||||
if (!containsCoordinate(olMap.getView().calculateExtent(), fromLonLat(point))) {
|
||||
olMap.getView().animate({
|
||||
zoom: olMap.getView().getZoom() - 1,
|
||||
duration: duration / 2
|
||||
}, {
|
||||
zoom: zoom || olMap.getView().getZoom(),
|
||||
duration: duration / 2
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
panTo(point){
|
||||
fit(layer){
|
||||
let extent = layer.getSource().getExtent();
|
||||
if (extent) {
|
||||
olMap.getView().fit(extent,{
|
||||
duration : 600,
|
||||
padding: [100, 100, 100, 100]
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
openInfoBox(){
|
||||
|
||||
openInfoBox(position, content, offset){
|
||||
let id = v4()
|
||||
// let infoBox = document.createElement("div");
|
||||
// infoBox.innerHTML = content ;
|
||||
// infoBox.setAttribute("infoBoxId", id)
|
||||
let overlay = new Overlay({
|
||||
id:id,
|
||||
autoPan:true,
|
||||
autoPanAnimation:{
|
||||
duration: 250
|
||||
},
|
||||
element: content,
|
||||
positioning:"bottom-center",
|
||||
offset:offset,
|
||||
// className:overlayStyle.className
|
||||
});
|
||||
olMap.addOverlay(overlay);
|
||||
overlay.setPosition(fromLonLat(position));
|
||||
return id;
|
||||
},
|
||||
closeInfoBox(){
|
||||
|
||||
closeInfoBox(id){
|
||||
olMap.getOverlayById(id).setPosition(undefined)
|
||||
// olMap.removeOverlay(olMap.getOverlayById(id))
|
||||
},
|
||||
addLayer(){
|
||||
/**
|
||||
* 添加图层
|
||||
* @param data
|
||||
* [
|
||||
* {
|
||||
*
|
||||
* position: [119.1212,45,122],
|
||||
* image: {
|
||||
* src:"/images/123.png",
|
||||
* anchor: [0.5, 0.5]
|
||||
*
|
||||
* }
|
||||
* }
|
||||
*
|
||||
* ]
|
||||
*/
|
||||
addLayer(data, clickEvent){
|
||||
let style = new Style();
|
||||
if (data.length > 0) {
|
||||
let features = [];
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
let feature = new Feature(new Point(fromLonLat(data[i].position)));
|
||||
feature.customData = data[i].data;
|
||||
let cloneStyle = style.clone()
|
||||
cloneStyle.setImage(new Icon({
|
||||
anchor: data[i].image.anchor,
|
||||
crossOrigin: 'Anonymous',
|
||||
src: data[i].image.src,
|
||||
}))
|
||||
feature.setStyle(cloneStyle)
|
||||
features.push(feature);
|
||||
}
|
||||
let source = new VectorSource();
|
||||
source.addFeatures(features);
|
||||
let vectorLayer = new VectorLayer({
|
||||
source:source,
|
||||
style:style,
|
||||
renderMode:"image",
|
||||
declutter: false
|
||||
})
|
||||
olMap.addLayer(vectorLayer)
|
||||
if (typeof clickEvent == "function") {
|
||||
olMap.on("click", (event)=>{
|
||||
vectorLayer.getFeatures(event.pixel).then((features)=>{
|
||||
if (features.length > 0) {
|
||||
let items = []
|
||||
for (let i = 0; i < features.length; i++) {
|
||||
items.push(features[i].customData)
|
||||
}
|
||||
clickEvent(items)
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
return vectorLayer;
|
||||
}
|
||||
},
|
||||
removeLayer(layer){
|
||||
olMap.removeLayer(layer)
|
||||
},
|
||||
removeLayer(){
|
||||
|
||||
addLineLayer(positions) {
|
||||
if (positions.length > 0) {
|
||||
let points = [];
|
||||
for (let i = 0; i < positions.length; i++) {
|
||||
points.push(fromLonLat(positions[i]));
|
||||
}
|
||||
let line = new LineString(points)
|
||||
let lineFeature = new Feature(line);
|
||||
|
||||
let source = new VectorSource();
|
||||
source.addFeature(lineFeature);
|
||||
let vectorLayer = new VectorLayer({
|
||||
source: source,
|
||||
})
|
||||
olMap.addLayer(vectorLayer)
|
||||
return vectorLayer;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
},
|
||||
destroyed() {
|
||||
// if (this.jessibuca) {
|
||||
|
||||
Reference in New Issue
Block a user