Skip to content

M
missis-demo
Commit 6537ef62 authored by yuanchongyou's avatar yuanchongyou
Browse files
Options

地图样式添加

parent 552ddcb0
Show whitespace changes
Inline Side-by-side
Showing with 368 additions and 23 deletions
public/api/test.json 0 → 100644
View file @ 6537ef62
{
"layer": [
{
"crs": "EPSG:4326",
"id": "hfcp",
"type": "marker",
"style": "default",
"title": "南沙群岛"
},
{
"crs": "EPSG:4326",
"id": "hyda22",
"type": "Polygon",
"style": "default",
"title": "海洋"
},
{
"crs": "EPSG:4326",
"id": "hyda2",
"type": "Polygon",
"style": "default",
"title": "湖泊水库面2"
},
{
"crs": "EPSG:4326",
"id": "hyda1",
"type": "Polygon",
"style": "default",
"title": "湖泊水库面1"
},
{
"crs": "EPSG:4326",
"id": "hyda",
"type": "Polygon",
"style": "default",
"title": "湖泊水库面"
},
{
"crs": "EPSG:4326",
"id": "hydl",
"type": "line",
"style": "default",
"title": "流域"
},
{
"crs": "EPSG:4326",
"id": "sgzb",
"type": "line",
"style": "default",
"title": "森格藏布"
},
{
"crs": "EPSG:4326",
"id": "colormap",
"type": "Polygon",
"style": "default",
"title": "色带"
},
{
"crs": "EPSG:4326",
"id": "boua",
"type": "Polygon",
"style": "default",
"title": "出图范围"
},
{
"crs": "EPSG:4326",
"id": "gwhax-bu",
"type": "line",
"style": "default",
"title": "国外海岸线-补"
},
{
"crs": "EPSG:4326",
"id": "hax",
"type": "line",
"style": "default",
"title": "海岸线"
},
{
"crs": "EPSG:4326",
"id": "mark2",
"type": "text",
"style": "default",
"title": "市县级注记"
},
{
"crs": "EPSG:4326",
"id": "mark",
"type": "text",
"style": "default",
"title": "国家省级注记"
},
{
"crs": "EPSG:4326",
"id": "sgzb-mark",
"type": "point",
"style": "default",
"title": "森格藏布注记"
},
{
"crs": "EPSG:4326",
"id": "boul_x",
"type": "line",
"style": "default",
"title": "县级行政界线"
},
{
"crs": "EPSG:4326",
"id": "boul_d",
"type": "line",
"style": "default",
"title": "市级行政界线"
},
{
"crs": "EPSG:4326",
"id": "boul_s",
"type": "line",
"style": "default",
"title": "省级行政界线"
},
{
"crs": "EPSG:4326",
"id": "boul_s2",
"type": "line",
"style": "default",
"title": "香港特别行政区界线"
},
{
"crs": "EPSG:4326",
"id": "boul_g",
"type": "line",
"style": "default",
"title": "国界线"
},
{
"crs": "EPSG:4326",
"id": "boul_g2",
"type": "line",
"style": "default",
"title": "未定国界线"
},
{
"crs": "EPSG:4326",
"id": "jiantou",
"type": "Polygon",
"style": "default",
"title": "飞地指引箭头"
},
{
"crs": "EPSG:4326",
"id": "qyx",
"type": "line",
"style": "default",
"title": "飞地牵引线"
},
{
"crs": "EPSG:4326",
"id": "agnp_x",
"type": "text",
"style": "default",
"title": "县级行政驻地标注"
},
{
"crs": "EPSG:4326",
"id": "agnp_x_point",
"type": "point",
"style": "default",
"title": "县级行政驻地点"
},
{
"crs": "EPSG:4326",
"id": "agnp_d",
"type": "text",
"style": "default",
"title": "市级行政驻地标注"
},
{
"crs": "EPSG:4326",
"id": "agnp_d_point",
"type": "point",
"style": "default",
"title": "市级行政驻地点"
},
{
"crs": "EPSG:4326",
"id": "agnp_shcs",
"type": "text",
"style": "default",
"title": "省会驻地标注"
},
{
"crs": "EPSG:4326",
"id": "agnp_shcs_point",
"style": "default",
"type": "point",
"title": "省会驻地点"
},
{
"crs": "EPSG:4326",
"id": "agnp",
"type": "text",
"style": "default",
"title": "首都驻地标注"
},
{
"crs": "EPSG:4326",
"id": "agnp_point",
"type": "point",
"style": "default",
"title": "首都驻地点"
}
],
"name": "china",
"tileMatrixSet": [
{
"baseScale": 88582677.16535433,
"bbox": [
-2800000,
-3500000,
2900000,
2200000
],
"crs": "EPSG:4326",
"id": "alberts_china",
"maxZoom": 10,
"minZoom": 0,
"tileHeight": 256,
"tileWidth": 256
}
]
}
\ No newline at end of file
src/store/index.js
View file @ 6537ef62
...@@ -5,17 +5,24 @@ Vue.use(Vuex) ...@@ -5,17 +5,24 @@ Vue.use(Vuex)
export default new Vuex.Store({ export default new Vuex.Store({
state: { state: {
layersData:[] layersData:[],
layerStyle:{}
}, },
mutations: { mutations: {
GET_LAYER_DATA(state,data){ GET_LAYER_DATA(state,data){
state.layersData = data state.layersData = data
},
GET_LAYER_STYLE(state,data){
state.layerStyle = data
} }
}, },
actions: { actions: {
getlayerdata({ commit }, data) { getlayerdata({ commit }, data) {
commit('GET_LAYER_DATA', data) commit('GET_LAYER_DATA', data)
}, },
getlayerstyle({ commit }, data) {
commit('GET_LAYER_STYLE', data)
},
}, },
modules: { modules: {
} }
......
src/views/Main.vue
View file @ 6537ef62
...@@ -21,8 +21,8 @@ ...@@ -21,8 +21,8 @@
<script> <script>
import AddS from '../components/adds'; import AddS from './adds';
import AddControls from '../components/addcontrols' import AddControls from './addcontrols'
export default { export default {
components:{ components:{
AddS, AddS,
......
src/components/addcontrols.vue → src/views/addcontrols.vue
View file @ 6537ef62
...@@ -38,16 +38,38 @@ ...@@ -38,16 +38,38 @@
</a-col> </a-col>
</a-row> </a-row>
<div class="base-layers"> <div class="base-layers">
<div> <a-row>
<div :style="{ borderBottom: '1px solid #E9E9E9' }"> <div :style="{ borderBottom: '1px solid #E9E9E9' }">
<a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange"> <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange">
Check all Check all
</a-checkbox> </a-checkbox>
</div> </div>
<a-col :span="18" style="width:180px">
<div>
<br /> <br />
<a-checkbox-group v-model="checkedList" :options="plainOptions" @change="onChange" /> <a-checkbox-group v-model="checkedList" :options="plainOptions" @change="onChange" />
</div> </div>
</a-col>
<a-col :span="6" >
<br />
<a-tag color="blue" v-for="item in layerProp" :key="item.index" @click="layerStyle(item)" style="margin-bottom: 8px; cursor: pointer;">
样式修改
</a-tag>
</a-col>
</a-row>
</div> </div>
<a-drawer
:mask="false"
:title="drawerTitle"
placement="right"
:closable="true"
:visible="styleVisible"
:get-container="false"
:wrap-style="{ position: 'absolute' }"
@close="onClose"
>
<layer-style></layer-style>
</a-drawer>
</div> </div>
</template> </template>
...@@ -55,9 +77,11 @@ ...@@ -55,9 +77,11 @@
<script> <script>
import axios from 'axios'; import axios from 'axios';
import { mapActions } from 'vuex'; import { mapActions } from 'vuex';
import LayerStyle from './layerStyle'
export default { export default {
data() { data() {
return { return {
styleVisible: false,
provincevisible: false, provincevisible: false,
regionvisible:false, regionvisible:false,
province:[], province:[],
...@@ -66,16 +90,35 @@ export default { ...@@ -66,16 +90,35 @@ export default {
indeterminate: true, indeterminate: true,
checkAll: false, checkAll: false,
plainOptions:[], plainOptions:[],
layerData:[] layerData:[],
layerProp:[],
drawerTitle:''
} }
}, },
components:{
LayerStyle
},
mounted() { mounted() {
this.getData() this.getData()
}, },
methods: { methods: {
...mapActions(['getlayerdata']), ...mapActions(['getlayerdata','getlayerstyle']),
layerStyle(val){
this.drawerTitle = val.title
this.styleVisible = true;
this.getlayerstyle(val)
console.log(typeof(val) ,'????')
},
afterVisibleChange(val) {
console.log('visible', val);
},
onClose() {
this.styleVisible = false;
},
getData(){ getData(){
axios.get('/php/server/china/info').then((res => { // axios.get('/api/messis/server/china/info').then((res => {
axios.get('/api/test.json').then((res => {
this.layerProp = res.data.layer
let len = res.data.layer.length let len = res.data.layer.length
for(let i = 0;i<len;i++){ for(let i = 0;i<len;i++){
this.plainOptions.push(res.data.layer[i].title) this.plainOptions.push(res.data.layer[i].title)
...@@ -86,7 +129,6 @@ export default { ...@@ -86,7 +129,6 @@ export default {
onChange(checkedList) { onChange(checkedList) {
this.indeterminate = !!checkedList.length && checkedList.length < this.plainOptions.length; this.indeterminate = !!checkedList.length && checkedList.length < this.plainOptions.length;
this.checkAll = checkedList.length === this.plainOptions.length; this.checkAll = checkedList.length === this.plainOptions.length;
console.log(this.checkedList,this.layerData,'eee2')
let len = this.checkedList.length let len = this.checkedList.length
let len2 = this.layerData.length let len2 = this.layerData.length
let newarr = [] let newarr = []
...@@ -103,7 +145,6 @@ export default { ...@@ -103,7 +145,6 @@ export default {
this.checkedList = e.target.checked ? this.plainOptions : [], this.checkedList = e.target.checked ? this.plainOptions : [],
this.indeterminate = false, this.indeterminate = false,
this.checkAll = e.target.checked this.checkAll = e.target.checked
console.log(this.checkedList,'eee')
}, },
hideregion(){ hideregion(){
...@@ -126,6 +167,16 @@ export default { ...@@ -126,6 +167,16 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
color: black; color: black;
position: relative;
overflow: hidden;
}
.ant-drawer-right.ant-drawer-open.no-mask {
width: 100%!important;
height: 100%!important;
}
.ant-drawer-content-wrapper{
width: 100%!important;
height: 100%!important;
} }
.a-col{ .a-col{
background-color: blue; background-color: blue;
...@@ -148,7 +199,10 @@ export default { ...@@ -148,7 +199,10 @@ export default {
width: 100%; width: 100%;
height: 80vh; height: 80vh;
padding: 20px 20px 20px 20px; padding: 20px 20px 20px 20px;
overflow: auto;
} }
.ant-checkbox-group{ .ant-checkbox-group{
display: flex!important; display: flex!important;
flex-direction: column!important; flex-direction: column!important;
...@@ -156,5 +210,6 @@ export default { ...@@ -156,5 +210,6 @@ export default {
} }
.ant-checkbox-group-item{ .ant-checkbox-group-item{
margin-bottom: 10px!important; margin-bottom: 10px!important;
} }
</style> </style>
\ No newline at end of file
src/components/adds.vue → src/views/adds.vue
View file @ 6537ef62
...@@ -41,8 +41,8 @@ export default { ...@@ -41,8 +41,8 @@ export default {
tileGrid: this.tilegrid, tileGrid: this.tilegrid,
matrixSet:'alberts_china', matrixSet:'alberts_china',
format: 'image/png', format: 'image/png',
url: // url:
'http://192.168.1.142:5000/server/china/wmts' // '/api/messis/server/china/wmts'
}) })
let newLayer = new TileLayer({ let newLayer = new TileLayer({
source: mapXYZ source: mapXYZ
...@@ -81,8 +81,8 @@ export default { ...@@ -81,8 +81,8 @@ export default {
// projection: projection, // projection: projection,
matrixSet:'alberts_china', matrixSet:'alberts_china',
format: 'image/png', format: 'image/png',
url: // url:
'http://192.168.1.142:5000/server/china/wmts' // '/api/messis/server/china/wmts'
}) })
let map = new Map({ let map = new Map({
......
src/views/layerStyle.vue 0 → 100644
View file @ 6537ef62
<template>
<a-card size="small" :title="nowStyleTitle" style="width: 300px">
<p>card content</p>
</a-card>
</template>
<script>
import { mapState } from 'vuex';
export default {
data() {
return {
nowStyleTitle:''
}
},
computed:{
...mapState(['layerStyle'])
},
methods: {
filterLayerKind(val){
switch (val.type) {
case "marker":
this.nowStyleTitle = "点样式"
break;
case "Polygon":
this.nowStyleTitle = "面样式"
break;
case "line":
this.nowStyleTitle = "线样式"
break;
case "text":
this.nowStyleTitle = "标注样式"
break;
default:
break;
}
console.log(val,'layerstyle')
}
},
watch:{
layerStyle(val){
this.filterLayerKind(val)
}
}
}
</script>
<style>
.ant-card-bordered{
border-radius: 10px!important;
}
</style>
\ No newline at end of file
vue.config.js
View file @ 6537ef62
...@@ -18,12 +18,12 @@ module.exports = { ...@@ -18,12 +18,12 @@ module.exports = {
errors: false errors: false
}, },
proxy: { proxy: {
'/php': { '/api/messis': {
// target: 'http://10.40.16.44:5003', target: 'http://10.40.16.44:5003',
target:'http://192.168.1.142:5000', // target:'http://192.168.1.142:5000',
changeOrigin: true, changeOrigin: true,
pathRewrite: { pathRewrite: {
'^/php': '' '^/api/messis': ''
} }
} }
} }
......
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