From 7976e60dfd49be4d2f68d2b371353df6637aee91 Mon Sep 17 00:00:00 2001
From: TreeWish <1131093754@qq.com>
Date: 星期二, 07 二月 2023 14:48:58 +0800
Subject: [PATCH] 二维地图比例尺&指北针
---
src/views/exportMap/index.vue | 516 +++++++++++++++++++++++++--------------------------------
1 files changed, 227 insertions(+), 289 deletions(-)
diff --git a/src/views/exportMap/index.vue b/src/views/exportMap/index.vue
index 5074b30..990da9b 100644
--- a/src/views/exportMap/index.vue
+++ b/src/views/exportMap/index.vue
@@ -6,24 +6,18 @@
element-loading-background="rgba(0, 0, 0, 0.8)"
>
<div class="topMenu">
- <el-form
- :inline="true"
- :model="formInline"
- class="demo-form-inline"
- >
+ <el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item>
<el-link
style="color: white"
@click="showLeftMenu(1)"
:underline="false"
title="鍥惧眰鍒楄〃"
- ><i class="el-icon-s-operation"></i></el-link>
+ ><i class="el-icon-s-operation"></i
+ ></el-link>
</el-form-item>
<el-form-item>
- <el-select
- v-model="value"
- placeholder="璇烽�夋嫨"
- >
+ <el-select v-model="value" placeholder="璇烽�夋嫨">
<el-option
v-for="item in options"
:key="item.value"
@@ -39,7 +33,8 @@
style="color: white"
@click="setMapAddDraw()"
:underline="false"
- ><i class="el-icon-edit-outline"></i>缁樺埗</el-link>
+ ><i class="el-icon-edit-outline"></i>缁樺埗</el-link
+ >
</el-form-item>
<el-form-item>
<el-link
@@ -48,7 +43,8 @@
@click="setMapRemoveDraw()"
:underline="false"
title="鍥惧眰鍒楄〃"
- ><i class="el-icon-delete"></i>娓呴櫎</el-link>
+ ><i class="el-icon-delete"></i>娓呴櫎</el-link
+ >
</el-form-item>
<el-form-item>
@@ -57,7 +53,7 @@
@click="showMapApply = true"
:underline="false"
:disabled="layerExtent == null"
- >鍑哄浘鐢宠
+ >鍑哄浘鐢宠
</el-link>
</el-form-item>
<el-form-item>
@@ -65,7 +61,8 @@
style="color: white"
@click="getShowMapList"
:underline="false"
- >鍑哄浘鍒楄〃</el-link>
+ >鍑哄浘鍒楄〃</el-link
+ >
</el-form-item>
<el-form-item>
<el-link
@@ -73,13 +70,15 @@
@click="changeMenulayer"
:underline="false"
v-show="isActive"
- >褰卞儚</el-link>
+ >褰卞儚</el-link
+ >
<el-link
style="color: white"
v-show="!isActive"
@click="changeMenulayer"
:underline="false"
- >鐭㈤噺</el-link>
+ >鐭㈤噺</el-link
+ >
</el-form-item>
<el-form-item label="鏃嬭浆瑙掑害">
<el-input
@@ -96,19 +95,13 @@
:class="{ left_main_show: !leftMenuOpen }"
>
<div class="menu_content">
- <div
- class="topHeader"
- v-show="lefMenuContent"
- >
+ <div class="topHeader" v-show="lefMenuContent">
<div>鍥惧眰鍒楄〃</div>
<div @click="showLeftMenu(2)"><i class="el-icon-s-fold"></i></div>
</div>
<el-divider></el-divider>
<div class="bottomContent">
- <div
- style="width: 100%"
- v-show="lefMenuContent"
- >
+ <div style="width: 100%" v-show="lefMenuContent">
<el-tree
:data="treeData"
show-checkbox
@@ -124,67 +117,43 @@
</div>
</div>
- <div
- class="mapApplay"
- v-if="showMapApply"
- >
+ <div class="mapApplay" v-if="showMapApply">
<label>鍑哄浘鐢宠</label>
<el-divider />
- <el-form
- ref="form"
- :model="form"
- label-width="80px"
- >
+ <el-form ref="form" :model="form" label-width="80px">
<el-form-item label="鍑哄浘鍚嶇О">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item>
- <div style="padding:1%;border:1px solid white">
+ <div style="padding: 1%; border: 1px solid white">
<el-table
ref="singleTable"
:data="tableData"
style="width: 100%"
height="200"
>
- <el-table-column
- type="index"
- label="搴忓彿"
- width="50"
- >
+ <el-table-column type="index" label="搴忓彿" width="50">
</el-table-column>
- <el-table-column
- property="name"
- label="鍥惧眰鍚嶇О"
- >
+ <el-table-column property="name" label="鍥惧眰鍚嶇О">
</el-table-column>
</el-table>
</div>
</el-form-item>
<el-form-item>
- <el-button
- type="primary"
- @click="setMapApply"
- >绔嬪嵆鍒涘缓</el-button>
+ <el-button type="primary" @click="setMapApply">绔嬪嵆鍒涘缓</el-button>
<el-button @click="showMapApply = false">鍙栨秷</el-button>
</el-form-item>
</el-form>
</div>
- <div
- class="mapApplay"
- v-if="showMapList"
- >
+ <div class="mapApplay" v-if="showMapList">
<div>
<label>鍑哄浘鍒楄〃</label>
<div style="float: right">
- <el-link
- @click="showMapList = false"
- :underline="false"
- ><i
- style="color: white"
- class="el-icon-close"
- ></i></el-link>
+ <el-link @click="showMapList = false" :underline="false"
+ ><i style="color: white" class="el-icon-close"></i
+ ></el-link>
</div>
</div>
<el-divider />
@@ -195,24 +164,12 @@
height="200"
@selection-change="handleSelectionChange"
>
- <el-table-column
- type="index"
- width="50"
- label="搴忓彿"
- >
+ <el-table-column type="index" width="50" label="搴忓彿">
</el-table-column>
- <el-table-column
- property="descr"
- label="鏍囬"
- > </el-table-column>
- <el-table-column
- property="name"
- label="鏂囦欢鍚嶇О"
- > </el-table-column>
- <el-table-column
- property="createName"
- label="鍑哄浘浜�"
- > </el-table-column>
+ <el-table-column property="descr" label="鏍囬"> </el-table-column>
+ <el-table-column property="name" label="鏂囦欢鍚嶇О"> </el-table-column>
+ <el-table-column property="createName" label="鍑哄浘浜�">
+ </el-table-column>
<el-table-column
property="createTime"
:formatter="formatTime"
@@ -220,16 +177,14 @@
>
</el-table-column>
- <el-table-column
- label="鎿嶄綔"
- width="120"
- >
+ <el-table-column label="鎿嶄綔" width="120">
<template slot-scope="scope">
<el-link
style="color: white"
@click.native.prevent="downloadMap(scope.$index, scope.row)"
:underline="false"
- >涓嬭浇</el-link>
+ >涓嬭浇</el-link
+ >
</template>
</el-table-column>
</el-table>
@@ -253,11 +208,7 @@
width="30%"
:before-close="handleClose"
>
- <el-form
- ref="layerform"
- :model="layerform"
- label-width="80px"
- >
+ <el-form ref="layerform" :model="layerform" label-width="80px">
<el-form-item label="鏈嶅姟鍚嶇О">
<el-input v-model="layerform.name"></el-input>
</el-form-item>
@@ -267,48 +218,40 @@
</el-radio-group>
</el-form-item>
<el-form-item label="鏈嶅姟鍦板潃">
- <el-input
- type="textarea"
- v-model="layerform.resource"
- ></el-input>
+ <el-input type="textarea" v-model="layerform.resource"></el-input>
</el-form-item>
</el-form>
- <span
- slot="footer"
- class="dialog-footer"
- >
+ <span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">鍙� 娑�</el-button>
- <el-button
- type="primary"
- @click="setAddMapLayer"
- >纭� 瀹�</el-button>
+ <el-button type="primary" @click="setAddMapLayer">纭� 瀹�</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
-import ImageWMS from 'ol/source/ImageWMS';
-import Map from 'ol/Map';
-import XYZ from 'ol/source/XYZ';
-import View from 'ol/View';
-import Image from 'ol/layer/Image';
-import TileLayer from 'ol/layer/Tile';
-import { transform } from 'ol/proj';
-import Draw, { createRegularPolygon, createBox } from 'ol/interaction/Draw.js';
-import { OSM, Vector as VectorSource } from 'ol/source';
-import { Vector as VectorLayer } from 'ol/layer';
-import LayerVector from 'ol/layer/Vector';
-import Style from 'ol/style/Style';
-import Fill from 'ol/style/Fill';
-import Stroke from 'ol/style/Stroke';
-import Circle from 'ol/style/Circle';
-import mapviewVue from '../../components/mapview.vue';
-import { removeToken, getToken } from '@/utils/auth';
-import $ from 'jquery';
-import { exportSelectByPage, perms_selectLayers } from '../../api/api.js';
-import moment from 'moment';
-import { image_layer } from '../../assets/js/index.js';
+import ImageWMS from "ol/source/ImageWMS"
+import Map from "ol/Map"
+import XYZ from "ol/source/XYZ"
+import View from "ol/View"
+import { OverviewMap, defaults as defaultControls, FullScreen, ScaleLine, Rotate} from "ol/control.js"
+import Image from "ol/layer/Image"
+import TileLayer from "ol/layer/Tile"
+import { transform } from "ol/proj"
+import Draw, { createRegularPolygon, createBox } from "ol/interaction/Draw.js"
+import { OSM, Vector as VectorSource } from "ol/source"
+import { Vector as VectorLayer } from "ol/layer"
+import LayerVector from "ol/layer/Vector"
+import Style from "ol/style/Style"
+import Fill from "ol/style/Fill"
+import Stroke from "ol/style/Stroke"
+import Circle from "ol/style/Circle"
+import mapviewVue from "../../components/mapview.vue"
+import { removeToken, getToken } from "@/utils/auth"
+import $ from "jquery"
+import { exportSelectByPage, perms_selectLayers } from "../../api/api.js"
+import moment from "moment"
+import { image_layer } from "../../assets/js/index.js"
export default {
data() {
return {
@@ -324,28 +267,26 @@
rowtype: true,
loading: false,
form: {},
- formInline: { role: '' },
+ formInline: { role: "" },
layerform: {},
tableData: [],
exportable: [],
multipleSelection: [],
options: [
- { label: 'A0', value: 'A0' },
- { label: 'A1', value: 'A1' },
- { label: 'A2', value: 'A2' },
- { label: 'A3', value: 'A3' },
- { label: 'A4', value: 'A4' },
- { label: 'A5', value: 'A5' },
- { label: 'A6', value: 'A6' },
+ { label: "A0", value: "A0" },
+ { label: "A1", value: "A1" },
+ { label: "A2", value: "A2" },
+ { label: "A3", value: "A3" },
+ { label: "A4", value: "A4" },
+ { label: "A5", value: "A5" },
+ { label: "A6", value: "A6" },
],
- value: 'A4',
- treeData: [
-
- ],
+ value: "A4",
+ treeData: [],
arrList: [],
defaultProps: {
- children: 'children',
- label: 'label',
+ children: "children",
+ label: "label",
},
draw: null,
vector: null,
@@ -357,23 +298,23 @@
pageIndex: 1,
},
count: 0,
- };
+ }
},
mounted() {
- this.LayerStart();
- this.initMap();
- this.showMapLayer();
+ this.LayerStart()
+ this.initMap()
+ this.showMapLayer()
},
methods: {
async LayerStart() {
- const data = await perms_selectLayers();
+ const data = await perms_selectLayers()
if (data.code != 200) {
- return this.$message.error("鍥惧眰鍒楄〃鏌ヨ澶辫触");
+ return this.$message.error("鍥惧眰鍒楄〃鏌ヨ澶辫触")
}
- var std = [];
- var layer_list = [];
- var layer_groups = [];
+ var std = []
+ var layer_list = []
+ var layer_groups = []
for (var i in data.result) {
if (data.result[i].type == 1) {
layer_groups.push({
@@ -395,8 +336,8 @@
}
layer_list.push(layer_entity)
if (data.result[i].isShow == 1) {
- std.push(data.result[i].id);
- this.showMapLayer(layer_entity);
+ std.push(data.result[i].id)
+ this.showMapLayer(layer_entity)
}
}
}
@@ -408,103 +349,102 @@
}
}
}
- this.treeData = layer_groups;
+ this.treeData = layer_groups
for (var i in data.result) {
if (data.result[i].type == 2 && data.result[i].url != null) {
for (var j = 0; j < window.Viewer.imageryLayers._layers.length; j++) {
- var val_id = window.Viewer.imageryLayers._layers[j];
+ var val_id = window.Viewer.imageryLayers._layers[j]
if (val_id.show == true) {
-
if (val_id.imageryProvider.name == data.result[i].cnName) {
- std.push(data.result[i].id);
+ std.push(data.result[i].id)
}
}
}
}
}
- this.$refs.tree.setCheckedKeys(std);
+ this.$refs.tree.setCheckedKeys(std)
},
showMapLayer(val) {
var layer2 = new Image({
name: val.label,
source: new ImageWMS({
- crossOrigin: 'anonymous',
+ crossOrigin: "anonymous",
url: geoServerURl,
params: {
- FORMAT: 'image/png',
- VERSION: '1.1.1',
+ FORMAT: "image/png",
+ VERSION: "1.1.1",
LAYERS: val.resource,
},
}),
- });
- mapView.addLayer(layer2);
+ })
+ mapView.addLayer(layer2)
},
showLeftMenu(res) {
switch (res) {
case 1:
- this.leftMenuOpen = !this.leftMenuOpen;
- break;
+ this.leftMenuOpen = !this.leftMenuOpen
+ break
case 2:
- this.leftMenuOpen = false;
- break;
+ this.leftMenuOpen = false
+ break
}
if (this.leftMenuOpen == true) {
setTimeout(() => {
- this.lefMenuContent = true;
- }, 200);
+ this.lefMenuContent = true
+ }, 200)
} else {
setTimeout(() => {
- this.lefMenuContent = false;
- }, 1100);
+ this.lefMenuContent = false
+ }, 1100)
}
},
formatTime(row, column) {
- let date = row[column.property];
+ let date = row[column.property]
if (date === undefined || date === null) {
- return '';
+ return ""
}
- return moment(parseInt(date)).format('YYYY-MM-DD HH:mm:ss');
+ return moment(parseInt(date)).format("YYYY-MM-DD HH:mm:ss")
},
handleSelectionChange(val) {
- this.multipleSelection = val;
+ this.multipleSelection = val
},
handleSizeChange(val) {
- this.listdata.pageIndex = 1;
- this.listdata.pageSize = val;
- this.getShowMapList();
+ this.listdata.pageIndex = 1
+ this.listdata.pageSize = val
+ this.getShowMapList()
},
handleCurrentChange(val) {
- this.listdata.pageIndex = val;
- this.getShowMapList();
+ this.listdata.pageIndex = val
+ this.getShowMapList()
},
async getShowMapList() {
- this.showMapList = true;
- const data = await exportSelectByPage(this.listdata);
+ this.showMapList = true
+ const data = await exportSelectByPage(this.listdata)
- this.exportable = data.result;
+ this.exportable = data.result
- this.count = data.count;
+ this.count = data.count
},
getYMD() {
- let myDate = new Date();
- let myYear = myDate.getFullYear(); //鑾峰彇瀹屾暣鐨勫勾浠�(4浣�,1970-????)
- let myMonth = myDate.getMonth() + 1; //鑾峰彇褰撳墠鏈堜唤(0-11,0浠ｈ〃1鏈�)
- let myToday = myDate.getDate(); //鑾峰彇褰撳墠鏃�(1-31)
- myMonth = myMonth > 9 ? myMonth : '0' + myMonth;
- myToday = myToday > 9 ? myToday : '0' + myToday;
- let nowDate = 'V' + myYear + myMonth + myToday;
- return nowDate;
+ let myDate = new Date()
+ let myYear = myDate.getFullYear() //鑾峰彇瀹屾暣鐨勫勾浠�(4浣�,1970-????)
+ let myMonth = myDate.getMonth() + 1 //鑾峰彇褰撳墠鏈堜唤(0-11,0浠ｈ〃1鏈�)
+ let myToday = myDate.getDate() //鑾峰彇褰撳墠鏃�(1-31)
+ myMonth = myMonth > 9 ? myMonth : "0" + myMonth
+ myToday = myToday > 9 ? myToday : "0" + myToday
+ let nowDate = "V" + myYear + myMonth + myToday
+ return nowDate
},
setExportMapLayer(res) {
- var token = '?token=' + getToken();
+ var token = "?token=" + getToken()
var data = {
- token: token.replace('?token=', ''),
+ token: token.replace("?token=", ""),
title: this.form.name,
pageSize: this.value,
- province: '灞变笢鐪�',
- scale: '1:20涓�',
- resolution: '20绫�',
+ province: "灞变笢鐪�",
+ scale: "1:20涓�",
+ resolution: "20绫�",
date: this.getYMD(),
layers: res.toString(),
rotation: 0,
@@ -512,216 +452,214 @@
ymin: this.layerExtent.ymin,
xmax: this.layerExtent.xmax,
ymax: this.layerExtent.ymax,
- };
+ }
$.ajax({
async: true,
- url: BASE_URL + '/export/insertMap' + token,
- type: 'POST',
+ url: BASE_URL + "/export/insertMap" + token,
+ type: "POST",
data: JSON.stringify(data),
- contentType: 'application/json',
- dataType: 'json',
- error: function () { },
- success: (rs) => {
- this.loading = false;
- var value = 'code = ' + rs.code + ', result = ' + rs.result;
+ contentType: "application/json",
+ dataType: "json",
+ error: function () {},
+ success: rs => {
+ this.loading = false
+ var value = "code = " + rs.code + ", result = " + rs.result
if ((rs.code = 200)) {
this.$message({
message: "鍑哄浘鎴愬姛,璇峰埌鍑哄浘鍒楄〃鏌ョ湅骞朵笅杞�",
- type: 'success',
- });
- this.setMapRemoveDraw();
+ type: "success",
+ })
+ this.setMapRemoveDraw()
} else {
- this.loading = false;
- this.$message.error(value);
+ this.loading = false
+ this.$message.error(value)
}
},
- });
+ })
},
downloadMap(index, rows) {
- var guid = rows.guid;
- var token = '?token=' + getToken();
- var a = document.createElement('a'); // 鍒涘缓涓�涓猘鏍囩鍏冪礌
- a.style.display = 'none'; // 璁剧疆鍏冪礌涓嶅彲瑙�
- a.href = BASE_URL + '/mark/downloadFile' + token + '&guid=' + guid;
+ var guid = rows.guid
+ var token = "?token=" + getToken()
+ var a = document.createElement("a") // 鍒涘缓涓�涓猘鏍囩鍏冪礌
+ a.style.display = "none" // 璁剧疆鍏冪礌涓嶅彲瑙�
+ a.href = BASE_URL + "/mark/downloadFile" + token + "&guid=" + guid
- document.body.appendChild(a); // 鍔犲叆
- a.click(); // 瑙﹀彂鐐瑰嚮,涓嬭浇
- document.body.removeChild(a); // 閲婃斁
+ document.body.appendChild(a) // 鍔犲叆
+ a.click() // 瑙﹀彂鐐瑰嚮,涓嬭浇
+ document.body.removeChild(a) // 閲婃斁
},
setMapRemoveDraw() {
if (this.draw != null) {
- mapView.removeLayer(this.vector);
+ mapView.removeLayer(this.vector)
}
- this.layerExtent = null;
+ this.layerExtent = null
},
setMapAddDraw() {
- this.setMapRemoveDraw();
+ this.setMapRemoveDraw()
- this.source = new VectorSource({ wrapX: false });
+ this.source = new VectorSource({ wrapX: false })
this.vector = new VectorLayer({
source: this.source,
- });
- mapView.addLayer(this.vector);
+ })
+ mapView.addLayer(this.vector)
- let type = 'Circle';
- let geometryFunction = createBox();
+ let type = "Circle"
+ let geometryFunction = createBox()
this.draw = new Draw({
source: this.source,
type,
geometryFunction,
- });
- mapView.addInteraction(this.draw);
- this.draw.on('drawend', (e) => {
- let feature = e.feature;
- let geom = feature.getGeometry();
- var extent = geom.getExtent();
- var a1 = transform([extent[0], extent[1]], 'EPSG:3857', 'EPSG:4326');
- var a2 = transform([extent[2], extent[3]], 'EPSG:3857', 'EPSG:4326');
+ })
+ mapView.addInteraction(this.draw)
+ this.draw.on("drawend", e => {
+ let feature = e.feature
+ let geom = feature.getGeometry()
+ var extent = geom.getExtent()
+ var a1 = transform([extent[0], extent[1]], "EPSG:3857", "EPSG:4326")
+ var a2 = transform([extent[2], extent[3]], "EPSG:3857", "EPSG:4326")
this.layerExtent = {
xmin: a1[0],
ymin: a1[1],
xmax: a2[0],
ymax: a2[1],
- };
- mapView.removeInteraction(this.draw);
- });
+ }
+ mapView.removeInteraction(this.draw)
+ })
},
setMapRole() {
- if (this.formInline.role == '') {
- this.formInline.role = '0';
+ if (this.formInline.role == "") {
+ this.formInline.role = "0"
}
- var value = parseFloat(this.formInline.role);
+ var value = parseFloat(this.formInline.role)
- var role = (Math.PI / 180) * value;
- mapView.getView().setRotation(role);
+ var role = (Math.PI / 180) * value
+ mapView.getView().setRotation(role)
},
setMapApply() {
if (this.layerExtent == null) {
- this.$message.error('璇烽�夋嫨鍑哄浘鑼冨洿');
- return;
+ this.$message.error("璇烽�夋嫨鍑哄浘鑼冨洿")
+ return
}
- this.loading = true;
- var val_data = [];
+ this.loading = true
+ var val_data = []
for (var i in this.tableData) {
- val_data.push(this.tableData[i].name);
+ val_data.push(this.tableData[i].name)
}
if (this.isActive) {
- val_data.push('鐭㈤噺鍥�');
+ val_data.push("鐭㈤噺鍥�")
} else {
- val_data.push('褰卞儚娉ㄨ');
- val_data.push('褰卞儚鍥�');
+ val_data.push("褰卞儚娉ㄨ")
+ val_data.push("褰卞儚鍥�")
}
- this.setExportMapLayer(val_data);
- this.showMapApply = false;
- this.form = {};
+ this.setExportMapLayer(val_data)
+ this.showMapApply = false
+ this.form = {}
},
- handleClose() { },
+ handleClose() {},
handleTreeNodeClick(data, nodes) {
- if (data.children != null) return;
- var layers = mapView.getAllLayers();
+ if (data.children != null) return
+ var layers = mapView.getAllLayers()
for (var i in layers) {
- var layer = layers[i];
- var str = 0;
+ var layer = layers[i]
+ var str = 0
if (layer.values_.name == data.label) {
-
- layer.setVisible(nodes); //鏄剧ず鍥惧眰
+ layer.setVisible(nodes) //鏄剧ず鍥惧眰
if (nodes == true) {
- str++;
+ str++
this.arrList.push({
name: data.label,
- });
+ })
} else {
this.arrList.some((item, i) => {
if (item.name === data.label) {
- this.arrList.splice(i, 1);
+ this.arrList.splice(i, 1)
}
- });
+ })
}
}
}
-
+
if (str == 0 && nodes == true) {
-
this.showMapLayer(data)
this.arrList.push({
name: data.label,
- });
+ })
}
-
- this.tableData = this.arrList;
+ this.tableData = this.arrList
},
setAddMapLayer() {
- this.dialogVisible = false;
+ this.dialogVisible = false
this.data[0].children.push({
label: this.layerform.name,
type: this.layerform.type,
resource: this.layerform.resource,
- });
+ })
},
setLeftMenu() {
- this.showleftMenu = true;
- this.rowtype = true;
+ this.showleftMenu = true
+ this.rowtype = true
},
//宸︿晶鑿滃崟鐐瑰嚮浜嬩欢
changeRowType() {
- this.rowtype = !this.rowtype;
+ this.rowtype = !this.rowtype
},
//鍦板浘鍒濆鍖�
initMap() {
var TiandiLayer = new TileLayer({
source: new XYZ({
- url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
+ url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
}),
- });
+ })
var GaoDeLayer = new TileLayer({
source: new XYZ({
- url: 'http://wprd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=6',
+ url: "http://wprd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=6",
}),
- });
+ })
var GaoDeTitle = new TileLayer({
source: new XYZ({
- url: 'http://wprd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=8',
+ url: "http://wprd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=8",
}),
- });
+ })
window.mapView = new Map({
- target: 'mapView',
+ target: "mapView",
layers: [TiandiLayer, GaoDeLayer, GaoDeTitle],
view: new View({
- center: transform([105.02, 34.9], 'EPSG:4326', 'EPSG:3857'),
+ center: transform([105.02, 34.9], "EPSG:4326", "EPSG:3857"),
zoom: 4,
- projection: 'EPSG:3857',
+ projection: "EPSG:3857",
}),
- });
- mapView.getLayers().item(1).setVisible(false);
- mapView.getLayers().item(2).setVisible(false);
- this.formInline.role = mapView.getView().getRotation();
+ controls: defaultControls().extend([new FullScreen(), new ScaleLine(), new Rotate()]),
+ })
+ mapView.getLayers().item(1).setVisible(false)
+ mapView.getLayers().item(2).setVisible(false)
+ // this.formInline.role = mapView.getView().getRotation()
},
//鍒囨崲搴曞浘
changeMenulayer() {
- this.isActive = !this.isActive;
- this.isMenuLayer = !this.isMenuLayer;
- this.setLayerVisible();
+ this.isActive = !this.isActive
+ this.isMenuLayer = !this.isMenuLayer
+ this.setLayerVisible()
},
setLayerVisible() {
if (this.isActive == true) {
- mapView.getLayers().item(1).setVisible(false);
- mapView.getLayers().item(2).setVisible(false);
- mapView.getLayers().item(0).setVisible(true);
+ mapView.getLayers().item(1).setVisible(false)
+ mapView.getLayers().item(2).setVisible(false)
+ mapView.getLayers().item(0).setVisible(true)
} else {
- mapView.getLayers().item(1).setVisible(true);
- mapView.getLayers().item(2).setVisible(true);
- mapView.getLayers().item(0).setVisible(false);
+ mapView.getLayers().item(1).setVisible(true)
+ mapView.getLayers().item(2).setVisible(true)
+ mapView.getLayers().item(0).setVisible(false)
}
},
},
-};
+}
</script>
<style lang="less" scoped>
--
Gitblit v1.9.3