Skip to content

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

地图样式添加

parent 552ddcb0
Hide 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)
export default new Vuex.Store({
state: {
layersData:[]
layersData:[],
layerStyle:{}
},
mutations: {
GET_LAYER_DATA(state,data){
state.layersData = data
},
GET_LAYER_STYLE(state,data){
state.layerStyle = data
}
},
actions: {
getlayerdata({ commit }, data) {
commit('GET_LAYER_DATA', data)
},
getlayerstyle({ commit }, data) {
commit('GET_LAYER_STYLE', data)
},
},
modules: {
}
......
src/views/Main.vue
View file @ 6537ef62
......@@ -21,8 +21,8 @@
<script>
import AddS from '../components/adds';
import AddControls from '../components/addcontrols'
import AddS from './adds';
import AddControls from './addcontrols'
export default {
components:{
AddS,
......
src/components/addcontrols.vue → src/views/addcontrols.vue
View file @ 6537ef62
......@@ -38,16 +38,38 @@
</a-col>
</a-row>
<div class="base-layers">
<div>
<a-row>
<div :style="{ borderBottom: '1px solid #E9E9E9' }">
<a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange">
Check all
</a-checkbox>
<a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange">
Check all
</a-checkbox>
</div>
<br />
<a-checkbox-group v-model="checkedList" :options="plainOptions" @change="onChange" />
</div>
<a-col :span="18" style="width:180px">
<div>
<br />
<a-checkbox-group v-model="checkedList" :options="plainOptions" @change="onChange" />
</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>
<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>
</template>
......@@ -55,9 +77,11 @@
<script>
import axios from 'axios';
import { mapActions } from 'vuex';
import LayerStyle from './layerStyle'
export default {
data() {
return {
styleVisible: false,
provincevisible: false,
regionvisible:false,
province:[],
......@@ -66,16 +90,35 @@ export default {
indeterminate: true,
checkAll: false,
plainOptions:[],
layerData:[]
layerData:[],
layerProp:[],
drawerTitle:''
}
},
components:{
LayerStyle
},
mounted() {
this.getData()
},
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(){
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
for(let i = 0;i<len;i++){
this.plainOptions.push(res.data.layer[i].title)
......@@ -86,7 +129,6 @@ export default {
onChange(checkedList) {
this.indeterminate = !!checkedList.length && 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 len2 = this.layerData.length
let newarr = []
......@@ -103,7 +145,6 @@ export default {
this.checkedList = e.target.checked ? this.plainOptions : [],
this.indeterminate = false,
this.checkAll = e.target.checked
console.log(this.checkedList,'eee')
},
hideregion(){
......@@ -126,6 +167,16 @@ export default {
width: 100%;
height: 100%;
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{
background-color: blue;
......@@ -148,7 +199,10 @@ export default {
width: 100%;
height: 80vh;
padding: 20px 20px 20px 20px;
overflow: auto;
}
.ant-checkbox-group{
display: flex!important;
flex-direction: column!important;
......@@ -156,5 +210,6 @@ export default {
}
.ant-checkbox-group-item{
margin-bottom: 10px!important;
}
</style>
\ No newline at end of file
src/components/adds.vue → src/views/adds.vue
View file @ 6537ef62
......@@ -41,8 +41,8 @@ export default {
tileGrid: this.tilegrid,
matrixSet:'alberts_china',
format: 'image/png',
url:
'http://192.168.1.142:5000/server/china/wmts'
// url:
// '/api/messis/server/china/wmts'
})
let newLayer = new TileLayer({
source: mapXYZ
......@@ -81,8 +81,8 @@ export default {
// projection: projection,
matrixSet:'alberts_china',
format: 'image/png',
url:
'http://192.168.1.142:5000/server/china/wmts'
// url:
// '/api/messis/server/china/wmts'
})
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 = {
errors: false
},
proxy: {
'/php': {
// target: 'http://10.40.16.44:5003',
target:'http://192.168.1.142:5000',
'/api/messis': {
target: 'http://10.40.16.44:5003',
// target:'http://192.168.1.142:5000',
changeOrigin: true,
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