From 0bb459c121f04f573230fa98de5ffc75b53f9960 Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期五, 29 十月 2021 14:22:11 +0800
Subject: [PATCH] map
---
src/pages/internetEquipment/module/mapIndex.vue | 394 ++++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 384 insertions(+), 10 deletions(-)
diff --git a/src/pages/internetEquipment/module/mapIndex.vue b/src/pages/internetEquipment/module/mapIndex.vue
index c00944a..5716128 100644
--- a/src/pages/internetEquipment/module/mapIndex.vue
+++ b/src/pages/internetEquipment/module/mapIndex.vue
@@ -1,21 +1,395 @@
<template>
- <div class="map-index">
-
+ <div id="map-index">
+ <div class="control">
+ <div class="location icon iconfont" @click="location"></div>
+ <div class="zoom-in icon iconfont" @click="zoomIn"></div>
+ <div class="zoom-out icon iconfont" @click="zoomOut"></div>
+ </div>
+ <div class="range icon iconfont" @click="drawPolygon"></div>
+ <el-input v-model="nodeId" placeholder="璇疯緭鍏ュ唴瀹�"></el-input>
+ <div class="save" v-if="showBtn" @click="savePoly">淇濆瓨</div>
+ <div class="cancel" v-if="showBtn" @click="resetMap">鍙栨秷</div>
</div>
</template>
<script>
-export default {
+import "ol/ol.css";
+import Feature from "ol/Feature";
+import Point from "ol/geom/Point";
+import VectorSource from "ol/source/Vector";
+import { Icon, Style, Fill, Stroke } from "ol/style";
+import { transform } from "ol/proj";
+import { Map, View } from "ol";
+import TileLayer from "ol/layer/Tile";
+import { Vector as VectorLayer } from "ol/layer";
+import OSM from "ol/source/OSM";
+import Draw from "ol/interaction/Draw";
+import { Modify, Snap } from "ol/interaction";
+import Polygon from "ol/geom/Polygon";
-}
+let myMap = {};
+let myVectorSource = {};
+let baseLayer = new TileLayer({
+ source: new OSM({
+ // url:'http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=8',
+ url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7",
+ crossOrigin: "anonymous",
+ // url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
+ }),
+});
+let myDraw = {};
+let myModify = {};
+
+export default {
+ data() {
+ return {
+ showBtn: false,
+ nodeArr: [
+ { data: [116.06157, 39.66157], id: 1, color: "缁�" },
+ { data: [116.06247, 39.66247], id: 2, color: "缁�" },
+ { data: [116.06337, 39.66337], id: 3, color: "缁�" },
+ { data: [116.06467, 39.66437], id: 4, color: "缁�" },
+ { data: [116.06517, 39.66517], id: 5, color: "绾�" },
+ { data: [116.06627, 39.66627], id: 6, color: "绾�" },
+ { data: [116.06787, 39.66787], id: 7, color: "绾�" },
+ { data: [116.06897, 39.66897], id: 8, color: "绾�" },
+ ],
+ nodeId: "",
+ iconArr: [],
+ rangeArr: [],
+ zoom: 15,
+ center: [116.06667, 39.66667],
+ polygonArr: [
+ {
+ data: [
+ [12919660.904416857, 4817401.4907109635],
+ [12921041.54824026, 4817277.28054],
+ [12920195.963614853, 4816775.662541878],
+ [12919493.698417485, 4816785.2171704145],
+ ],
+ id: "1",
+ },
+ ],
+ polyFeature: [],
+ drawStore: [],
+ modifyStore: [],
+ };
+ },
+ mounted() {
+ this.initMap();
+ },
+ methods: {
+ initMap() {
+ this.initPolygonArr();
+ const vectorSource = new VectorSource({
+ features: this.polyFeature,
+ });
+ /* if(this.polygonArr.length>0){
+ this.initPolygonArr()
+ console.log(this.polyFeature);
+ vectorSource.addFeature(this.polyFeature[0])
+ } */
+ myVectorSource = vectorSource;
+ this.initAllNode();
+
+ const vectorLayer = this.initLayer(vectorSource);
+
+ const map = this.initBottomMap(vectorLayer);
+
+ myMap = map;
+ /* map.getView().on('change:resolution', ()=> {
+ this.iconArr.forEach(item=>{
+ let style = item.getStyle()
+ console.log(this.zoom);
+ style.getImage().setScale(this.zoom/15)
+ item.setStyle(style)
+ console.log(item);
+ })
+ }) */
+ },
+ initNode([x, y], color) {
+ const iconFeature = new Feature({
+ geometry: new Point(transform([x, y], "EPSG:4326", "EPSG:3857")),
+ });
+
+ const iconStyle = new Style({
+ image: new Icon({
+ size: [32, 32],
+ src: `/images/map/瀹夊叏甯�-${color}.png`,
+ }),
+ zIndex: 1,
+ });
+
+ iconFeature.setStyle(iconStyle);
+ this.iconArr.push(iconFeature);
+ return iconFeature;
+ },
+ initAllNode() {
+ this.nodeArr.forEach((item) => {
+ const node = this.initNode(item.data, item.color);
+ node.set("id", item.id);
+ myVectorSource.addFeature(node);
+ });
+ },
+ initPolygonArr() {
+ this.polyFeature = [];
+ this.polygonArr.forEach((item) => {
+ const feature = new Feature({ geometry: new Polygon([item.data]) });
+ feature.id = item.id;
+ this.polyFeature.push(feature);
+ });
+ },
+ initLayer(source) {
+ return new VectorLayer({
+ source: source,
+ style: new Style({
+ fill: new Fill({
+ color: "rgba(255, 255, 255, 0.4)",
+ }),
+ stroke: new Stroke({
+ color: "#F54336",
+ width: 2,
+ }),
+ }),
+ });
+ },
+ initBottomMap(vectorLayer) {
+ return new Map({
+ target: "map-index",
+ layers: [baseLayer, vectorLayer],
+ view: new View({
+ center: transform(this.center, "EPSG:4326", "EPSG:3857"),
+ zoom: this.zoom,
+ }),
+ });
+ },
+ zoomIn() {
+ const view = myMap.getView();
+ this.zoom++;
+ view.setZoom(this.zoom);
+ },
+ zoomOut() {
+ const view = myMap.getView();
+ this.zoom--;
+ view.setZoom(this.zoom);
+ },
+ location() {
+ const view = myMap.getView();
+ view.setZoom(this.zoom);
+ view.setCenter(
+ transform([116.06667, 39.66667], "EPSG:4326", "EPSG:3857")
+ );
+ },
+ drawPolygon() {
+ this.showBtn = true;
+ const draw = new Draw({
+ source: myVectorSource,
+ type: "Polygon",
+ });
+ myDraw = draw;
+ draw.on("drawend", (event) => {
+ let id =
+ this.drawStore.length > 0
+ ? +this.drawStore[this.drawStore.length - 1].id + 1
+ : +this.polygonArr[this.polygonArr.length - 1].id + 1;
+ event.feature.id = id;
+ this.drawStore.push({
+ id,
+ data: event.feature.getGeometry().getCoordinates()[0],
+ });
+ });
+
+ const modify = new Modify({ source: myVectorSource });
+ modify.addEventListener("modifyend", (event) => {
+ console.log(event.features);
+ const id = event.features.array_[0].id;
+ const data = event.features.array_[0].getGeometry().getCoordinates()[0];
+ this.modifyStore.push({ id, data });
+ });
+ myModify = modify;
+ myMap.addInteraction(modify);
+ myMap.addInteraction(draw);
+ },
+ resetMap() {
+ this.initPolygonArr();
+ console.log(this.polyFeature);
+ const vectorSource = new VectorSource({
+ features: this.polyFeature,
+ });
+ /* if(this.polygonArr.length>0){
+ this.initPolygonArr()
+ console.log(this.polyFeature);
+ vectorSource.addFeature(this.polyFeature[0])
+ } */
+ myVectorSource = vectorSource;
+ this.initAllNode();
+
+ const vectorLayer = this.initLayer(vectorSource);
+ myMap.setLayers([baseLayer, vectorLayer]);
+ myMap.removeInteraction(myDraw);
+ myMap.removeInteraction(myModify);
+ this.showBtn = false;
+ this.drawStore = [];
+ this.modifyStore = [];
+ },
+ savePoly() {
+ myMap.removeInteraction(myDraw);
+ myMap.removeInteraction(myModify);
+ this.showBtn = false;
+ if (this.drawStore.length) {
+ this.polygonArr = [...this.polygonArr, ...this.drawStore];
+ this.drawStore = [];
+ }
+ if (this.modifyStore.length) {
+ this.modifyStore.forEach((item) => {
+ this.polygonArr.forEach((item2) => {
+ if (item.id == item2.id) {
+ item2.data = item.data;
+ }
+ });
+ });
+ this.modifyStore = [];
+ }
+ },
+ },
+ watch: {
+ nodeId: {
+ handler(val) {
+ const arr = this.nodeArr.filter((item) => item.id == val);
+ if (this.rangeArr.length > 0) {
+ this.rangeArr.forEach((item) => {
+ myVectorSource.removeFeature(item);
+ });
+ this.rangeArr = [];
+ }
+
+ if (arr.length > 0) {
+ arr.forEach((item) => {
+ const rangeFeature = new Feature({
+ geometry: new Point(
+ transform(item.data, "EPSG:4326", "EPSG:3857")
+ ),
+ name: "Null Island",
+ population: 4000,
+ rainfall: 500,
+ });
+
+ const iconStyle = new Style({
+ image: new Icon({
+ size: [64, 64],
+ src: `/images/map/鑼冨洿-${item.color}.png`,
+ }),
+ });
+
+ rangeFeature.setStyle(iconStyle);
+ myVectorSource.addFeature(rangeFeature);
+ this.rangeArr.push(rangeFeature);
+ });
+ }
+ },
+ },
+ },
+};
</script>
<style scoped lang="scss">
-.map-index {
- width: 1170px;
- height: 396px;
- border-radius: 15px;
- background-color: skyblue
-}
+#map-index {
+ position: relative;
+ margin: 20px 0;
+ width: 1170px;
+ height: 396px;
+ border-radius: 15px;
+ .control {
+ position: absolute;
+ display: flex;
+ flex-direction: column;
+ z-index: 1;
+ left: 25px;
+ bottom: 25px;
+ width: 30px;
+ height: 91px;
+ background: #ffffff;
+ box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
+ border-radius: 8px;
+ .location,
+ .zoom-in,
+ .zoom-out {
+ line-height: 30px;
+ font-size: 18px;
+ flex: 1;
+ cursor: pointer;
+ }
+ .location {
+ background: #11aa66;
+ border-radius: 8px 8px 0 0;
+ color: #fff;
+ }
+ }
+ .el-input {
+ position: absolute;
+ z-index: 1;
+ top: 15px;
+ left: 15px;
+ width: 205px;
+ height: 35px;
+ ::v-deep input {
+ width: 100%;
+ height: 100%;
+ &:focus {
+ border-color: #11aa66 !important;
+ }
+ }
+ }
+ .range {
+ position: absolute;
+ left: 25px;
+ bottom: 126px;
+ width: 30px;
+ height: 30px;
+ background: #11aa66;
+ color: #fff;
+ border-radius: 8px;
+ cursor: pointer;
+ z-index: 1;
+ line-height: 30px;
+ }
+ .save {
+ position: absolute;
+ z-index: 3;
+ top: 15px;
+ right: 113px;
+ width: 87px;
+ height: 35px;
+ background: #11aa66;
+ border: 1px solid #11aa66;
+ border-radius: 8px;
+ color: #fff;
+ font-size: 12px;
+ line-height: 36px;
+ cursor: pointer;
+ }
+
+ .cancel {
+ position: absolute;
+ z-index: 3;
+ top: 15px;
+ right: 20px;
+ width: 87px;
+ height: 35px;
+ background: #fff;
+ border: 1px solid #11aa66;
+ border-radius: 8px;
+ color: #4f4f4f;
+ font-size: 12px;
+ line-height: 36px;
+ cursor: pointer;
+ }
+}
+</style>
+
+<style>
+.ol-zoom {
+ display: none !important;
+}
</style>
\ No newline at end of file
--
Gitblit v1.8.0