From 1e2d207aea24b5956d5ece95ed4a9db0f59f34d7 Mon Sep 17 00:00:00 2001
From: 648540858 <456panlinlin>
Date: 星期五, 22 四月 2022 16:21:05 +0800
Subject: [PATCH] 添加优化后的地图页面，完全一处百度地图相关的api
---
web_src/src/components/common/MapComponent.vue | 170 +++++++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 154 insertions(+), 16 deletions(-)
diff --git a/web_src/src/components/common/MapComponent.vue b/web_src/src/components/common/MapComponent.vue
index b9317d7..2d8600d 100644
--- a/web_src/src/components/common/MapComponent.vue
+++ b/web_src/src/components/common/MapComponent.vue
@@ -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 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 @@
},
created(){
this.$nextTick(() => {
- this.init();
+ setTimeout(()=>{
+ this.init()
+ }, 100)
})
},
@@ -48,7 +60,7 @@
});
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 @@
})
})
}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 @@
new Zoom(),
] ,
})
+ console.log(3222)
},
setCenter(point){
@@ -82,26 +95,151 @@
},
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(){
+ removeLayer(layer){
+ olMap.removeLayer(layer)
+ },
+ 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) {
--
Gitblit v1.8.0