From 4342ccaa6a8dff9f10554867891c3abfbc23f0b1 Mon Sep 17 00:00:00 2001
From: liuyg <liuyg@qq.com>
Date: Thu, 24 Mar 2022 11:59:06 +0800
Subject: [PATCH] Merge branch 'master' of http://192.168.0.105:10010/r/school-java-web
---
src/components/basemap/mainInThere.vue | 352 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 352 insertions(+), 0 deletions(-)
diff --git a/src/components/basemap/mainInThere.vue b/src/components/basemap/mainInThere.vue
new file mode 100644
index 0000000..2c6d150
--- /dev/null
+++ b/src/components/basemap/mainInThere.vue
@@ -0,0 +1,352 @@
+<!--
+ * @Descripttion:
+ * @version:
+ * @Author: song
+ * @Date: 2021-04-08 15:14:57
+ * @LastEditors: song
+ * @LastEditTime: 2021-04-24 11:59:43
+-->
+<template>
+ <div id="map"></div>
+</template>
+<script>
+import OLCesium from "olcs/OLCesium.js";
+import "ol/ol.css";
+import OlView from "ol/View.js";
+import XYZ from "ol/source/XYZ";
+import OlLayerTile from "ol/layer/Tile.js";
+import OlMap from "ol/Map.js";
+import tip from "./tip.vue";
+import {
+ // eslint-disable-next-line no-unused-vars
+ defaults as OlControlDefaults,
+ defaults,
+ // 全屏控件
+ FullScreen,
+ // 比例尺控件
+ ScaleLine,
+ // 缩放滚动条控件
+ // eslint-disable-next-line no-unused-vars
+ ZoomSlider,
+ // 鼠标位置控件
+ // eslint-disable-next-line no-unused-vars
+ MousePosition,
+ // -地图属性控件
+ Attribution,
+ // 鹰眼控件
+ // eslint-disable-next-line no-unused-vars
+ OverviewMap,
+ // 缩放到范围控件
+ // eslint-disable-next-line no-unused-vars
+ ZoomToExtent,
+ Rotate,
+} from "ol/control.js";
+
+import VectorLayer from "ol/layer/Vector";
+import VectorSource from "ol/source/Vector";
+
+import { OSM, TileWMS, Vector } from "ol/source";
+// import Draw from "ol/interaction/Draw";
+import Draw from "./Draw";
+
+import Feature from "ol/Feature.js";
+import Point from "ol/geom/Point.js";
+import LineString from "ol/geom/LineString.js";
+import { Icon, Style, Fill, Stroke } from "ol/style.js";
+
+// import drawFence from "./drawFence";
+
+import OlFeature from "ol/Feature";
+import OlGeomPoint from "ol/geom/Point";
+// import OlLayerVector from "ol/layer/Vector";
+// import OlSourceVector from "ol/source/Vector";
+import OlStyleStyle from "ol/style/Style";
+import OlStyleIcon from "ol/style/Icon";
+// // 用来添加相关文字描述的
+import OlStyleText from "ol/style/Text";
+import OlStyleFill from "ol/style/Fill";
+// import Cesium from "libs/Cesium/Cesium.js";
+
+export default {
+ name: "MapInThere",
+ components: {
+ tip,
+ },
+ data() {
+ return {
+ gunAddlayer: new VectorLayer({
+ // 图标图层
+ zIndex: 22,
+ source: new VectorSource(),
+ }),
+ peopleAddlayer: new VectorLayer({
+ // 图标图层
+ zIndex: 22,
+ source: new VectorSource(),
+ }),
+ carAddlayer: new VectorLayer({
+ // 图标图层
+ zIndex: 22,
+ source: new VectorSource(),
+ }),
+ // peopleLineAddlayer: new VectorLayer({
+ // // 图标图层
+ // zIndex: 22,
+ // source: new VectorSource(),
+ // }),
+ beginsPoint: new VectorLayer({
+ // 图标图层
+ zIndex: 22,
+ source: new VectorSource(),
+ }),
+ DrawLayer: new VectorLayer({
+ // 图标图层
+ // zIndex: 1000,
+ source: new VectorSource(),
+ }),
+ oldService: "",
+ mapService: [
+ // {
+ // id: "",
+ // value: "",
+ // show:''
+ // },
+ ],
+ };
+ },
+ // computed: {
+ // mapServiceSee() {
+ // },
+ // },
+ // watch: {
+ // // openDrawChiose() {
+ // // console.log(this.openDrawChiose, "openDrawChiose");
+ // // },
+ // mapServiceValue: {
+ // handler(val) {
+ // // console.log("深度监听：", val);
+ // // this.checkDom("getMapDataRefs", (dom) => {
+ // // dom.setServiceData(this.mapServiceValue);
+ // // });
+ // },
+ // deep: true,
+ // },
+ // },
+ mounted() {
+ const ol2d = new OlMap({
+ layers: [
+ // new OlLayerTile({
+ // zIndex: 4,
+ // title: "影像",
+ // source: new XYZ({
+ // url: "https://webmap-tile.sf-express.com/MapTileService/rt?fetchtype=static&x={x}&y={y}&z={z}&project=sfmap&pic_size=256&pic_type=png8&data_name=361100&data_format=merged-dat&data_type=normal", // 行政区划
+ // }),
+ // }),
+ // new OlLayerTile({
+ // zIndex: 5,
+ // title: "道路+中文注记",
+ // source: new XYZ({
+ // url: "http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0", // 注记
+ // }),
+ // }),
+ new OlLayerTile({
+ zIndex: 4,
+ title: "矢量",
+ source: new XYZ({
+ url: "http://t3.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0", // 行政区划
+ // url: "/localData/sl/{z}/{x}/{y}.png",
+ tileUrlFunction: function (tileCoord) {
+ var z = tileCoord[0];
+ var x = tileCoord[1];
+ var y = Math.pow(2, z) + tileCoord[2];
+ return "../assets/sl/" + z + "/" + x + "/" + y + ".png";
+ },
+ }),
+ }),
+ new OlLayerTile({
+ zIndex: 5,
+ title: "中文注记",
+ source: new XYZ({
+ url: "http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0", // 注记
+ }),
+ }),
+ ],
+
+ // 注意地图控件的写法
+ controls: defaults().extend([
+ // new FullScreen(),
+ // new ScaleLine(),
+ // new MousePosition(),
+ // new Rotate(),
+ // new Attribution()
+ ]),
+ target: "map",
+ view: new OlView({
+ center: [0, 0],
+ zoom: 2,
+ projection: "EPSG:4326",
+ }),
+ });
+ window.ol2d = ol2d;
+
+ var view = ol2d.getView();
+
+ // let provider = new Cesium.UrlTemplateImageryProvider({
+ // url: "/wp/{z}/{x}/{y}.png",
+ // fileExtension: "png",
+ // });
+ // view.imageryLayers.addImageryProvider(provider);
+
+ // view.setCenter([115.85883507433789, 28.708432053474827])
+ view.setCenter([114.03858862, 27.63088262]);
+
+ //
+ view.setZoom(18);
+ this.view = view;
+ // const ol3d = new OLCesium({ map: window.ol2d });
+ // window.ol3d = ol3d;
+
+ // ol2d.addLayer(this.gunAddlayer);
+ // ol2d.addLayer(this.peopleAddlayer);
+ // ol2d.addLayer(this.carAddlayer);
+ // ol2d.addLayer(this.peopleLineAddlayer);
+ // ol2d.addLayer(this.beginsPoint);
+ },
+ methods: {
+ clearServiceData() {
+ this.mapService = [];
+ },
+ setServiceData(data) {
+ let that = this;
+ // console.log(data);
+ //判断是否是新增
+ if (data.length == that.mapService.length) {
+ // console.log("不是新增判断显影");
+ // 不是新增判断显影
+ for (let k in data) {
+ if (data[k].show != that.mapService[k].show) {
+ //如果有改变
+ that.mapService[k].show = data[k].show; // 同步最新show状态
+ if (data[k].show) {
+ //显示
+ // console.log(window.ol2d);
+ // console.log(that.mapService);
+ window.ol2d.addLayer(that.mapService[k].layer);
+ } else {
+ //隐藏
+ window.ol2d.removeLayer(that.mapService[k].layer);
+ }
+ }
+ }
+ } else if (data.length > that.mapService.length) {
+ // console.log("新增直接push");
+ //新增直接push
+ let layer = new OlLayerTile({
+ // source: new XYZ({
+ // url: "http://mt3.google.cn/vt/lyrs=t&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=Ga",
+ // }),
+ // new OlLayerTile({
+ zIndex: 5,
+ title: data.length - 1,
+ source: new XYZ({
+ url: data[data.length - 1].service, // 注记
+ }),
+ // }),
+ });
+ // console.log(data[data.length - 1].service);
+ // console.log(that.oldService);
+ // let str = "";
+ // for (let k in that.oldService) {
+ // if (that.oldService[k] != data[data.length - 1].service[k]) {
+ // // console.log(that.oldService[k]);
+ // // console.log(data[data.length - 1].service[k]);
+ // str += that.oldService[k];
+ // }
+ // }
+ // console.log("str", str);
+ that.oldService = data[data.length - 1].service;
+ window.ol2d.addLayer(layer);
+ that.mapService.push({
+ ...data[data.length - 1],
+ layer: layer,
+ });
+ } else if (data.length < that.mapService.length) {
+ // console.log("删除的情况", this.$store.state.map.deleteIndex);
+ //删除的情况
+ if (that.$store.state.map.deleteIndex != -1) {
+ window.ol2d.removeLayer(
+ that.mapService[that.$store.state.map.deleteIndex].layer
+ );
+ that.mapService.splice(that.$store.state.map.deleteIndex, 1);
+ }
+ }
+ // console.log(this.mapService);
+ // for()
+ },
+ // addMapService(data) {
+ // let layer = new OlLayerTile({
+ // // source: new XYZ({
+ // // url: "http://mt3.google.cn/vt/lyrs=t&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=Ga",
+ // // }),
+ // // new OlLayerTile({
+ // zIndex: 5,
+ // title: "中文注记",
+ // source: new XYZ({
+ // url: "http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0", // 注记
+ // }),
+ // // }),
+ // });
+ // this.mapService.push({
+ // layer: layer,
+ // });
+ // window.ol2d.addLayer(layer);
+ // setTimeout(() => {
+ // window.ol2d.removeLayer(layer);
+ // }, 2000);
+ // },
+ },
+};
+</script>
+
+<style scoped lang="scss">
+#map {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ .controlMap {
+ position: absolute;
+ top: 10px;
+ // left: calc(50% - 97px);
+ left: 390px;
+ z-index: 2 !important;
+ #openTitle {
+ background-color: #fff;
+ border-radius: 5px;
+ }
+ #openDrawLine,
+ #openDrawPoiton {
+ width: 174px;
+ // position: relative;
+ // top: 43px;
+ // top: 10px;
+ // left: calc(50% - 96px);
+ // left: 20px;
+ }
+ .openDrawsb {
+ background-color: #fff;
+ color: black;
+ }
+ .activeDraw {
+ background-color: #409eff;
+ color: #fff;
+ }
+ }
+ #dataConfirm {
+ position: absolute;
+ top: 43px;
+ // left: calc(50% + 82px);
+ left: 564px;
+ z-index: 3 !important;
+ }
+}
+</style>
--
Gitblit v1.9.3