From 764cb58899b8ca0e9632a5e83c6950569442c41c Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Wed, 02 Nov 2022 14:28:12 +0800
Subject: [PATCH] 图片更改
---
src/components/basemap/mainInThere.vue | 173 +++++++++++----------------------------------------------
1 files changed, 35 insertions(+), 138 deletions(-)
diff --git a/src/components/basemap/mainInThere.vue b/src/components/basemap/mainInThere.vue
index 2c6d150..d0715ff 100644
--- a/src/components/basemap/mainInThere.vue
+++ b/src/components/basemap/mainInThere.vue
@@ -14,6 +14,7 @@
import "ol/ol.css";
import OlView from "ol/View.js";
import XYZ from "ol/source/XYZ";
+import TileArcGISRest from "ol/source/TileArcGISRest";
import OlLayerTile from "ol/layer/Tile.js";
import OlMap from "ol/Map.js";
import tip from "./tip.vue";
@@ -42,31 +43,6 @@
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: {
@@ -74,81 +50,14 @@
},
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(),
- }),
+ toMoveTime: null,
oldService: "",
- mapService: [
- // {
- // id: "",
- // value: "",
- // show:''
- // },
- ],
+ mapService: [],
};
},
- // 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: "矢量",
@@ -190,17 +99,10 @@
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 });
@@ -214,6 +116,7 @@
},
methods: {
clearServiceData() {
+ //清空
this.mapService = [];
},
setServiceData(data) {
@@ -248,22 +151,39 @@
// new OlLayerTile({
zIndex: 5,
title: data.length - 1,
- source: new XYZ({
+ source: new TileArcGISRest({
url: data[data.length - 1].service, // 注记
+ // '水系图', http://59.55.128.156:6080/arcgis/rest/services/fuzhoupcsdhl/MapServer
+ // '行政区', http://59.55.128.156:6080/arcgis/rest/services/fzxzq/MapServer
}),
// }),
});
- // 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);
+ let doit = () => {
+ this.toMoveTime = setTimeout(() => {
+ console.log(window.ol2d);
+
+ // console.log(layer.getData());
+ // // let position = layer.values_.source.tmpExtent_;
+ // let position = layer.renderer_.renderedExtent_;
+ // let lonlat = [
+ // [position[0], position[1]],
+ // [position[2], position[3]],
+ // ];
+ // let pot = layer.getFeatures()[0];
+ // console.log(pot);
+ // // let zoomto = new ZoomToExtent({ extent: lonlat });
+ // // console.log(window.ol2d);
+ // // window.ol2d.zoomToExtent(position);
+ // this.view.setCenter(lonlat[0]);
+ }, 500);
+ };
+ if (this.toMoveTime) {
+ clearTimeout(this.toMoveTime);
+ doit();
+ } else {
+ doit();
+ }
+
that.oldService = data[data.length - 1].service;
window.ol2d.addLayer(layer);
that.mapService.push({
@@ -280,30 +200,7 @@
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>
--
Gitblit v1.9.3