Skip to content

F
founder_vue
Commit 9c085edb by 李萌萌
Options

多图层样式切换问题，数据支持绘制后下载

parent 0100e0d5
Showing with 428 additions and 62 deletions
package.json
......@@ -13,6 +13,7 @@
"driver.js": "^0.9.8",
"echarts": "^4.9.0",
"element-ui": "^2.4.5",
"file-saver": "^2.0.5",
"js-cookie": "^2.2.1",
"qs": "^6.9.4",
"sass-resources-loader": "^2.1.1",
......
public/FMapClient/EzMapAPI.js
......@@ -53,7 +53,7 @@ var ezMap = {
type: "group",
subType: "wmts_sl",
crs: "4326",
wrapX: false,
wrapX: true,
subLayer: [
"http://172.18.124.72:8082/vtserver/wmts",
{
......@@ -64,20 +64,35 @@ var ezMap = {
subLayer: [
"http://172.18.124.72:8082/vtserver/wmts",
{
type: "wmts_sl",
type: "group",
subType: "wmts_sl",
crs: "4326",
wrapX: false,
layer: "shangluo",
subLayer: [
"http://172.18.124.72:8082/vtserver/wmts",
{
type: "wmts_sl",
crs: "4326",
wrapX: false,
layer: "shangluo",
styleType: "mapbox",
styleUrl:
"http://172.18.124.72:8082/FMapClient8.0.4/lib/shangluo.json",
styleSource: "shangluo",
},
],
layer: "QG1W",
styleType: "mapbox",
styleUrl:
"http://172.18.124.72:8082/FMapClient8.0.4/lib/shangluo.json",
styleSource: "shangluo",
"http://172.18.124.72:8082/FMapClient8.0.4/lib/qg1w.json",
styleSource: "QG1W",
},
],
layer: "QG1W",
layer: "QG25W",
styleType: "mapbox",
styleUrl: "http://172.18.124.72:8082/FMapClient8.0.4/lib/qg1w.json",
styleSource: "QG1W",
styleUrl:
"http://172.18.124.72:8082/FMapClient8.0.4/lib/qg25w.json",
styleSource: "QG25W",
},
],
layer: "QQ400",
......@@ -92,45 +107,126 @@ var ezMap = {
"夜景矢量",
"http://172.18.124.72:8082/vtserver/wmts",
{
type: "wmts_sl",
type: "group",
subType: "wmts_sl",
crs: "4326",
wrapX: false,
layer: "shangluo",
wrapX: true,
subLayer: [
"http://172.18.124.72:8082/vtserver/wmts",
{
type: "group",
subType: "wmts_sl",
crs: "4326",
wrapX: false,
subLayer: [
"http://172.18.124.72:8082/vtserver/wmts",
{
type: "wmts_sl",
crs: "4326",
wrapX: false,
layer: "shangluo",
styleType: "mapbox",
styleUrl:
"http://172.18.124.72:8082/FMapClient8.0.4/lib/shangluo_night.json",
styleSource: "shangluo",
},
],
layer: "QG1W",
styleType: "mapbox",
styleUrl:
"http://172.18.124.72:8082/FMapClient8.0.4/lib/qg1w_night.json",
styleSource: "QG1W",
},
],
layer: "QQ400",
styleType: "mapbox",
styleUrl:
"http://172.18.124.72:8082/FMapClient8.0.4/lib/shangluo_night.json",
imageSRC: "./FMapClient/images/layer_shiying.png",
styleSource: "shangluo",
styleUrl: "http://172.18.124.72:8082/FMapClient8.0.4/lib/qq_night.json",
imageSRC: "./FMapClient/images/layer_tdtsydj.png",
styleSource: "QQ400",
},
],
[
"蓝色大屏",
"http://172.18.124.72:8082/vtserver/wmts",
{
type: "wmts_sl",
type: "group",
subType: "wmts_sl",
crs: "4326",
wrapX: false,
layer: "shangluo",
wrapX: true,
subLayer: [
"http://172.18.124.72:8082/vtserver/wmts",
{
type: "group",
subType: "wmts_sl",
crs: "4326",
wrapX: false,
subLayer: [
"http://172.18.124.72:8082/vtserver/wmts",
{
type: "wmts_sl",
crs: "4326",
wrapX: false,
layer: "shangluo",
styleType: "mapbox",
styleUrl:
"http://172.18.124.72:8082/FMapClient8.0.4/lib/shangluo_night.json",
styleSource: "shangluo",
},
],
layer: "QG1W",
styleType: "mapbox",
styleUrl:
"http://172.18.124.72:8082/FMapClient8.0.4/lib/qg1w_night.json",
styleSource: "QG1W",
},
],
layer: "QQ400",
styleType: "mapbox",
styleUrl:
"http://172.18.124.72:8082/FMapClient8.0.4/lib/shangluo_night.json",
styleUrl: "http://172.18.124.72:8082/FMapClient8.0.4/lib/qq_dp.json",
imageSRC: "./FMapClient/images/layer_sldplan.png",
styleSource: "shangluo",
styleSource: "QQ400",
},
],
[
"藏蓝色大屏",
"http://172.18.124.72:8082/vtserver/wmts",
{
type: "wmts_sl",
type: "group",
subType: "wmts_sl",
crs: "4326",
wrapX: false,
layer: "shangluo",
wrapX: true,
subLayer: [
"http://172.18.124.72:8082/vtserver/wmts",
{
type: "group",
subType: "wmts_sl",
crs: "4326",
wrapX: false,
subLayer: [
"http://172.18.124.72:8082/vtserver/wmts",
{
type: "wmts_sl",
crs: "4326",
wrapX: false,
layer: "shangluo",
styleType: "mapbox",
styleUrl:
"http://172.18.124.72:8082/FMapClient8.0.4/lib/shangluo_night.json",
styleSource: "shangluo",
},
],
layer: "QG1W",
styleType: "mapbox",
styleUrl:
"http://172.18.124.72:8082/FMapClient8.0.4/lib/qg1w_night.json",
styleSource: "QG1W",
},
],
layer: "QQ400",
styleType: "mapbox",
styleUrl:
"http://172.18.124.72:8082/FMapClient8.0.4/lib/shangluo_night.json",
styleUrl: "http://172.18.124.72:8082/FMapClient8.0.4/lib/qq_dpzl.json",
imageSRC: "./FMapClient/images/layer_sldpzanglan.png",
styleSource: "shangluo",
styleSource: "QQ400",
},
],
[
......@@ -150,17 +246,32 @@ var ezMap = {
crs: "4326",
useInterimTilesOnError: true,
wrapX: false,
imageSRC: "../images/yingxiang.png",
subLayer: [
"http://172.18.124.72:8082/vtserver/wmts",
{
type: "wmts_sl",
type: "group",
subType: "wmts_sl",
crs: "4326",
wrapX: false,
layer: "shangluo",
subLayer: [
"http://172.18.124.72:8082/vtserver/wmts",
{
type: "wmts_sl",
crs: "4326",
wrapX: false,
layer: "shangluo",
styleType: "mapbox",
styleUrl:
"http://172.18.124.72:8082/FMapClient8.0.4/lib/shangluo_sydj.json",
styleSource: "shangluo",
},
],
layer: "QQ400",
styleType: "mapbox",
styleUrl:
"http://172.18.124.72:8082/FMapClient8.0.4/lib/shangluo_sydj.json",
styleSource: "shangluo",
"http://172.18.124.72:8082/FMapClient8.0.4/lib/qq_sydj.json",
styleSource: "QQ400",
},
],
layer: "qg_yxdt",
......@@ -261,6 +372,7 @@ var ezMap = {
},
},
],
/* ["bbb", "http://172.18.124.72:8082/vtserver/gwc/service/wmts", {
type: 'wmts_sl',
crs: '4326',
......@@ -425,7 +537,7 @@ var ezMap = {
* 取值范围：无限制
* 默认值：无
*/
MapInitLevel: 4,
MapInitLevel: 5,
//MapInitLevel: 12,
/**
......
public/FMapClient/FMapClient.js
This source diff could not be displayed because it is too large. You can view the blob instead.
src/router/modules/index.js
/*
* @Author: your name
* @Date: 2021-08-06 16:05:33
* @LastEditTime: 2021-08-11 14:43:10
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \founder_vue\src\router\modules\index.js
*/
export default [
{
path: '/',
......@@ -16,7 +24,7 @@ export default [
path: "/Home",
name: "Home",
meta: {
title: "工作桌面",
title: "时空数据展示平台",
auth: "5"
},
component: () => import("@/views/Home.vue")
......
src/utils/map.js 0 → 100644
/*
* @Author: your name
* @Date: 2021-08-11 14:55:07
* @LastEditTime: 2021-08-11 17:27:42
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \founder_vue\src\utils\map.js
*/
import markerpng from "../assets/img/marker.png";
import { saveAs } from 'file-saver'
let _source, _vector, _draw, _snap, _modify;
const addVectorLayer = function() {
const source = new ol.source.Vector();
const vector = new ol.layer.Vector({
source: source,
style: new ol.style.Style({
fill: new ol.style.Fill({
color: "rgba(255, 255, 255, 0.2)",
}),
stroke: new ol.style.Stroke({
color: "#ffcc33",
width: 2,
}),
image: new ol.style.Icon({
src: markerpng,
scale: window.map.getView().getZoom() / 10,
}),
}),
});
window.map.addLayer(vector, true);
_source = source;
_vector = vector;
return vector;
};
export function removeInteraction() {
if (_draw) {
window.map.removeInteraction(_draw);
_draw = null;
}
if (_snap) {
window.map.removeInteraction(_snap);
_snap = null;
}
if (_modify) {
window.map.removeInteraction(_modify);
_modify = null;
}
}
// 添加绘制事件
export function addDrawInteractions(
type = "Point",
opts = { isSnap: true, isModify: true }
) {
removeInteraction();
if (!_source) {
addVectorLayer();
}
_draw = new ol.interaction.Draw({
source: _source,
type: type,
});
window.map.addInteraction(_draw);
// 捕捉事件
if (opts.isSnap) {
_snap = new ol.interaction.Snap({ source: _source });
map.addInteraction(_snap);
}
if (opts.isModify) {
_modify = new ol.interaction.Modify({ source: _source });
map.addInteraction(_modify);
}
}
// 保存已绘制的数据
export function exportFeatures(type = "GeoJSON", features,name="Features") {
let format;
switch (type.toUpperCase()) {
case "GEOJSON":
format = new ol.format.GeoJSON();
break;
case "ESRIJSON":
format = new ol.format.EsriJSON();
break;
case "GPX":
format = new ol.format.GPX();
break;
case "KML":
format = new ol.format.KML();
break;
case "WKT":
format = new ol.format.WKT();
break;
}
if (!features || features.length <= 0) {
features = _source.getFeatures();
}
let txt = format.writeFeatures(features);
// console.log(txt);
const blob = new Blob([txt], {type: "application/json;charset=utf-8"});
saveAs(blob,name+"."+type);
}
src/views/Home.vue
<!--
* @Author: LMM
* @Date: 2021-08-06 16:05:33
* @LastEditTime: 2021-08-09 15:15:24
* @LastEditTime: 2021-08-11 16:26:50
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \founder_vue\src\views\Home.vue
-->
<template>
<div class="home">
<titleBlk></titleBlk>
<mapToolBlk></mapToolBlk>
<mapPage v-show="!isShow3D"></mapPage>
<map3DPage v-show="isShow3D"></map3DPage>
</div>
......@@ -15,26 +17,39 @@
<script>
import { mapGetters } from "vuex";
import mapPage from "./map/map.vue"
import map3DPage from "./map/3DMap.vue"
import mapPage from "./map/map.vue";
import map3DPage from "./map/3DMap.vue";
import titleBlk from "./block/title.vue";
import mapToolBlk from "./block/mapTool.vue";
import { exportFeatures } from "../utils/map";
export default {
name: "Home",
components:{mapPage,map3DPage},
components: { mapPage, map3DPage, titleBlk, mapToolBlk },
data() {
return{
return {
// 展示地图，true：三维；false：二维
isShow3D:true,
}
},
created() {
isShow3D: false,
};
},
created() {},
computed: {
...mapGetters(["defaultGoodsImage", "userAuth"])
...mapGetters(["defaultGoodsImage", "userAuth"]),
},
methods: {
}
created() {
// 保存按钮点击事件
document.addEventListener("keydown", function(e) {
if (
e.key.toLowerCase() === "s" &&
(navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)
) {
// 取消事件的默认动作。
e.preventDefault();
// 获取所有已绘制图形
exportFeatures();
}
});
},
methods: {},
};
</script>
<style lang="scss">
</style>
<style lang="scss"></style>
src/views/block/mapTool.vue 0 → 100644
<!--
* @Author: LMM
* @Date: 2021-08-11 10:43:50
* @LastEditTime: 2021-08-11 16:49:45
* @LastEditors: Please set LastEditors
* @Description: 右上角地图工具
* @FilePath: \founder_vue\src\views\block\mapTool.vue
-->
<template>
<div>
<div class="mapToolBlk">
<div class="toolItem" @click="drawMarker">标记</div>
<img :src="shuxian" />
<div class="toolItem" @click="changeDraw">
绘制
</div>
<img :src="shuxian" />
<div class="toolItem" @click="measureline">测距</div>
<img :src="shuxian" />
<div class="toolItem" @click="measurearea">测面</div>
</div>
<div v-show="isShowDrawToolBox" class="drawToolBox">
<div class="drawToolItem" @click="draw('Point')">点</div>
<img :src="shuxian" />
<div class="drawToolItem" @click="draw('LineString')">线</div>
<img :src="shuxian" />
<div class="drawToolItem" @click="draw('Polygon')">面</div>
</div>
</div>
</template>
<script>
import img from "../../assets/img/shuxian.png";
import { addDrawInteractions, removeInteraction } from "../../utils/map";
export default {
name: "mapToolBlk",
data() {
return {
shuxian: img,
isShowDrawToolBox: false,
};
},
methods: {
measureline() {
window.map.changeDragMode("measureLine", function(result) {});
},
measurearea() {
window.map.changeDragMode("measureArea", function(result) {});
},
drawMarker() {
addDrawInteractions();
},
draw(type) {
addDrawInteractions(type);
},
changeDraw() {
if (this.isShowDrawToolBox) {
removeInteraction();
}else{
addDrawInteractions();
}
this.isShowDrawToolBox = !this.isShowDrawToolBox;
},
},
};
</script>
<style lang="scss" scoped>
.mapToolBlk {
position: absolute;
top: 88px;
right: 20px;
z-index: 2;
font-size: 14px;
text-align: center;
background-color: #183250;
font-family: Microsoft YaHei;
font-weight: 400;
color: #d1f1ff;
line-height: 40px;
border-radius: 4px;
cursor: pointer;
}
.toolItem {
display: inline-block;
width: 88px;
height: 40px;
}
.drawToolBox {
position: absolute;
top: 128px;
right: 80px;
z-index: 2;
font-size: 14px;
text-align: center;
background-color: #183250;
font-family: Microsoft YaHei;
font-weight: 400;
color: #d1f1ff;
line-height: 30px;
border: 1px solid #1e1c52;
cursor: pointer;
}
.drawToolItem {
display: inline-block;
width: 66px;
height: 30px;
}
</style>
src/views/block/title.vue 0 → 100644
<!--
* @Author: LMM
* @Date: 2021-08-11 10:13:48
* @LastEditTime: 2021-08-11 10:36:09
* @LastEditors: Please set LastEditors
* @Description: 头
* @FilePath: \founder_vue\src\views\block\title.vue
-->
<template>
<div class="titleBlk">
<img :src="titleImg"></img>
</div>
</template>
<script>
import img from "../../assets/img/title.png"
export default {
name:"titleBlk",
data(){
return {
titleImg:img
}
}
}
</script>
<style lang="scss" scoped>
.titleBlk{
position: absolute;
z-index: 2;
width: 100%;
height:163px ;
}
</style>
\ No newline at end of file
src/views/map/map.vue
<!--
* @Author: LMM
* @Date: 2021-08-09 10:08:57
* @LastEditTime: 2021-08-09 14:37:32
* @LastEditTime: 2021-08-11 10:37:03
* @LastEditors: Please set LastEditors
* @Description: 地图
* @FilePath: \founder_vue\src\views\map.vue
-->
<template>
<div id="mapDiv" v-bind:style="{ height: heightWindow }"></div>
<div id="mapDiv" style="height: 100%;width:100%"></div>
</template>
<script>
export default {
......@@ -25,21 +25,10 @@ export default {
type: "simple",
};
});
// map.showLayersControl(function() {
// return {
// layerInfo: ezMap.MapSrcURL,
// type: "simple",
// };
// });
map.showSimpleZoomControl();
},
},
mounted: function() {
const that = this;
window.onresize = () => {
return (() => {
that.heightWindow = window.innerHeight - 1 + "px";
})();
};
this.initMap();
},
};
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment