From e556182b998fdba960ee9fac00e7868dd514033a Mon Sep 17 00:00:00 2001
From: liuyg <liuyg@qq.com>
Date: Fri, 25 Mar 2022 14:01:06 +0800
Subject: [PATCH] +底图加字段
---
vue.config.js | 10 +
src/components/basemap/mainInThere.vue | 85 ++++++++++++++------
src/views/hd/baseMap.vue | 70 ++++++++++++-----
src/views/hd/baseMapMap.vue | 22 +++--
4 files changed, 125 insertions(+), 62 deletions(-)
diff --git a/src/components/basemap/mainInThere.vue b/src/components/basemap/mainInThere.vue
index 2c6d150..b91a577 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";
@@ -74,36 +75,37 @@
},
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({
+ // gunAddlayer: new VectorLayer({
// // 图标图层
// zIndex: 22,
// source: new VectorSource(),
// }),
- beginsPoint: new VectorLayer({
- // 图标图层
- zIndex: 22,
- source: new VectorSource(),
- }),
- DrawLayer: new VectorLayer({
- // 图标图层
- // zIndex: 1000,
- 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: [
// {
@@ -248,8 +250,10 @@
// 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
}),
// }),
});
@@ -264,6 +268,33 @@
// }
// }
// console.log("str", str);
+ // that.view.setCenter(layer);
+ 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({
diff --git a/src/views/hd/baseMap.vue b/src/views/hd/baseMap.vue
index e76c086..7a168e3 100644
--- a/src/views/hd/baseMap.vue
+++ b/src/views/hd/baseMap.vue
@@ -34,17 +34,17 @@
<template slot-scope="{ type, disabled }" slot="haveBaseMapForm">
<div class="inputInline" v-show="!notSet">
<el-input
- v-model="chouseBaseMapTypeOnce"
+ v-model="chouseBaseMapNameOnce"
placeholder="底图名称"
class="inputInlineType"
></el-input>
<el-input
- placeholder="请输入底图地址"
+ placeholder="请输入底图地址，示例：http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0"
v-model="mapServiceValueOnce"
class="input-with-select"
>
<!-- <el-select
- v-model="chouseBaseMapTypeOnce"
+ v-model="chouseBaseMapNameOnce"
slot="prepend"
placeholder="请选择"
>
@@ -91,7 +91,7 @@
data() {
return {
mapServiceValueOnce: "",
- chouseBaseMapTypeOnce: "XYZ",
+ chouseBaseMapNameOnce: "",
form: {},
query: {},
loading: true,
@@ -138,6 +138,29 @@
},
],
},
+ {
+ label: "底图数量",
+ prop: "addressNum",
+ viewDisply: false,
+ addDisplay: false,
+ editDisply: false,
+ },
+ {
+ label: "创建时间",
+ prop: "createtime",
+ viewDisply: false,
+ addDisplay: false,
+ // hide: true,
+ editDisply: false,
+ },
+ {
+ label: "修改时间",
+ prop: "updatetime",
+ viewDisply: false,
+ addDisplay: false,
+ // hide: true,
+ editDisply: false,
+ },
// {
// label: "活动地点",
// viewDisply:false,
@@ -176,6 +199,7 @@
{
label: "专题底图",
hide: true,
+ viewDisply: false,
prop: "haveBaseMap",
component: "AvueUeditor",
// options: {
@@ -266,6 +290,7 @@
addMapServices(val) {
if (val == 1) {
this.mapServiceValueOnce = "";
+ this.chouseBaseMapNameOnce = "";
}
if (this.mapServiceValueOnce == "") {
this.$message({
@@ -274,28 +299,29 @@
});
return;
}
- if (this.chouseBaseMapTypeOnce == "") {
+ if (this.chouseBaseMapNameOnce == "") {
this.$message({
- message: "请输入地图服务类型",
+ message: "请输入地图服务名称",
type: "warning",
});
return;
}
- // console.log(this.mapServiceValue, this.chouseBaseMapType);
+ // console.log(this.mapServiceValue, this.chouseBasemapname);
// this.form["haveBaseMap"] = this.mapServiceValueOnce;
//传入控制地图层 转store
// this.$refs.baseMapMap.addService({
- // type: this.chouseBaseMapType,
+ // type: this.chouseBasemapname,
// service: this.mapServiceValue,
// });
let that = this;
this.$store.commit("setMapServiceValue", {
- type: that.chouseBaseMapTypeOnce,
+ name: that.chouseBaseMapNameOnce,
service: that.mapServiceValueOnce,
show: true,
layer: null,
});
this.mapServiceValueOnce = "";
+ this.chouseBaseMapNameOnce = "";
},
setMapData(val) {
this.LineData = val[0];
@@ -310,20 +336,20 @@
loading();
return;
}
- let types = "",
+ let names = "",
urls = "",
leng = this.mapServiceValue.length - 1;
for (let k in this.mapServiceValue) {
- types += this.mapServiceValue[k].type;
+ names += this.mapServiceValue[k].name;
urls += this.mapServiceValue[k].service;
if (k != leng) {
- types += ",";
+ names += ",";
urls += ",";
}
}
let data = {
hdid: row.hdid,
- maptype: types,
+ mapname: names,
mapurl: urls,
};
// console.log(data);
@@ -382,18 +408,18 @@
loading();
return;
}
- let types = "",
+ let names = "",
urls = "",
leng = this.mapServiceValue.length - 1;
for (let k in this.mapServiceValue) {
- types += this.mapServiceValue[k].type;
+ names += this.mapServiceValue[k].name;
urls += this.mapServiceValue[k].service;
if (k != leng) {
- types += ",";
+ names += ",";
urls += ",";
}
}
- row.maptype = types;
+ row.mapname = names;
row.mapurl = urls;
// console.log(row);
// loading();
@@ -492,15 +518,15 @@
this.form = res.data.data;
console.log(res);
//解析数据
- let types = this.form.maptype.split(","),
+ let names = this.form.mapname.split(","),
urls = this.form.mapurl.split(",");
- console.log(types);
+ console.log(names);
console.log(urls);
- for (let k in types) {
+ for (let k in names) {
setTimeout(() => {
this.$store.commit("setMapServiceValue", {
- type: types[k],
+ name: names[k],
service: urls[k],
show: true,
layer: null,
@@ -574,7 +600,7 @@
this.page.total = data.total;
this.data = data.records;
for (let k in this.data) {
- this.data[k]["haveBaseMap"] = this.data[k].maptype;
+ this.data[k]["addressNum"] = this.data[k].mapname.split(",").length;
}
this.loading = false;
this.selectionClear();
diff --git a/src/views/hd/baseMapMap.vue b/src/views/hd/baseMapMap.vue
index 822f35d..215a20f 100644
--- a/src/views/hd/baseMapMap.vue
+++ b/src/views/hd/baseMapMap.vue
@@ -3,16 +3,18 @@
<MapInThere ref="baseMapMapsMap" />
<div class="controlbaseMapMap">
<div v-for="(item, index) in mapServiceValue" :key="index">
- {{ item.type + " " + index }}
- <el-switch class="around_left" v-model="item.show"> </el-switch>
- <el-button
- class="around_left"
- type="danger"
- icon="el-icon-delete"
- circle
- @click="deleteMapService(index)"
- :disabled="notSet"
- ></el-button>
+ {{ item.name }}
+ <div style="float: right">
+ <el-switch class="around_left" v-model="item.show"> </el-switch>
+ <el-button
+ class="around_left"
+ type="danger"
+ icon="el-icon-delete"
+ circle
+ @click="deleteMapService(index)"
+ :disabled="notSet"
+ ></el-button>
+ </div>
<el-divider v-if="index != mapServiceValue.length - 1"></el-divider>
</div>
</div>
diff --git a/vue.config.js b/vue.config.js
index d895133..54d3e07 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -18,7 +18,9 @@
entry.add("@/mock").end();
},
css: {
- extract: { ignoreOrder: true },
+ extract: {
+ ignoreOrder: true
+ },
},
//开发模式反向代理配置，生产模式请使用Nginx部署并配置反向代理
devServer: {
@@ -27,8 +29,10 @@
"/api": {
//本地服务接口地址
// target: "http://192.168.0.107:80",
- //target: "http://171.34.197.243:790",
- target: 'http://localhost:82',
+ // target: "http://192.168.0.102:82",
+ // target: "http://171.34.197.243:790",
+ target: "http://171.34.197.243:782", //服务器
+ // target: 'http://localhost:82',
//远程演示服务地址,可用于直接启动项目
//target: 'https://saber.bladex.vip/api',
ws: true,
--
Gitblit v1.9.3