Skip to content

M
missis-demo
Commit 552ddcb0 authored by yuanchongyou's avatar yuanchongyou
Browse files
Options

layer

parent 7cfef069
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 5539 additions and 268 deletions
package-lock.json
View file @ 552ddcb0
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
View file @ 552ddcb0
......@@ -7,6 +7,9 @@
"build": "vue-cli-service build"
},
"dependencies": {
"ant-design-vue": "^1.7.4",
"axios": "^0.21.1",
"proj4": "^2.7.2",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"
......@@ -15,6 +18,8 @@
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"ol": "^6.5.0",
"parcel-bundler": "^1.12.4",
"vue-template-compiler": "^2.6.11"
},
"browserslist": [
......
public/api/casedata.json 0 → 100644
View file @ 552ddcb0
This diff is collapsed.
public/api/region.json 0 → 100644
View file @ 552ddcb0
[
{
"label":"东北地区",
"value":"1"
},
{
"label":"华北地区",
"value":"2"
},
{
"label":"华东地区",
"value":"3"
},
{
"label":"华南地区",
"value":"4"
},
{
"label":"华中地区",
"value":"5"
},
{
"label":"西北地区",
"value":"6"
},
{
"label":"西南地区",
"value":"7"
}
]
\ No newline at end of file
public/index.html
View file @ 552ddcb0
......@@ -14,4 +14,9 @@
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
<style>
.ol-attribution.ol-uncollapsible{
display: none!important;
}
</style>
</html>
src/App.vue
View file @ 552ddcb0
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view/>
</div>
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
html,body{
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
#nav a {
font-weight: bold;
color: #2c3e50;
#app {
width: 100%;
height: 100%;
}
#nav a.router-link-exact-active {
color: #42b983;
}
</style>
src/components/HelloWorld.vue deleted 100644 → 0
View file @ 7cfef069
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
src/components/addcontrols.vue 0 → 100644
View file @ 552ddcb0
<template>
<div class="page">
<a-row id="btndashed" type="flex" justify="space-around" >
<a-col :span="6">
<a-button type="dashed" class="btnactive" @click="btnchoice(0)">
全国
</a-button>
</a-col>
<a-col :span="6">
<a-popover v-model="provincevisible" s title="分省选择" trigger="click" >
<template slot="content">
<div class="cardflow" >
<p v-for="item in province" @click="hideprovince(item)" class="provice" :key="item.index" style="cursor: pointer">{{item.label}}</p>
</div>
</template>
<a-button type="dashed" disabled @click="btnchoice(1)">
分省
</a-button>
</a-popover>
</a-col>
<a-col :span="6">
<a-popover v-model="regionvisible" s title="分区选择" trigger="click" >
<template slot="content">
<div class="cardflow" >
<p v-for="item in region" @click="hideregion(item)" class="provice" :key="item.index" style="cursor: pointer">{{item.label}}</p>
</div>
</template>
<a-button type="dashed" disabled @click="btnchoice(2)">
分区
</a-button>
</a-popover>
</a-col>
</a-row>
<div class="base-layers">
<div>
<div :style="{ borderBottom: '1px solid #E9E9E9' }">
<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>
</div>
</div>
</template>
<script>
import axios from 'axios';
import { mapActions } from 'vuex';
export default {
data() {
return {
provincevisible: false,
regionvisible:false,
province:[],
region:[],
checkedList: ['国界线'],
indeterminate: true,
checkAll: false,
plainOptions:[],
layerData:[]
}
},
mounted() {
this.getData()
},
methods: {
...mapActions(['getlayerdata']),
getData(){
axios.get('/php/server/china/info').then((res => {
let len = res.data.layer.length
for(let i = 0;i<len;i++){
this.plainOptions.push(res.data.layer[i].title)
}
this.layerData = res.data.layer
}))
},
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 = []
for(let i = 0;i<len;i++){
for(let a = 0;a<len2;a++){
if(this.checkedList[i] === this.layerData[a].title){
newarr.push(this.layerData[a].id)
}
}
}
this.getlayerdata(newarr)
},
onCheckAllChange(e) {
this.checkedList = e.target.checked ? this.plainOptions : [],
this.indeterminate = false,
this.checkAll = e.target.checked
console.log(this.checkedList,'eee')
},
hideregion(){
},
hideprovince(){
},
buttonStat(){
},
btnchoice(){
}
},
}
</script>
<style >
.page{
width: 100%;
height: 100%;
color: black;
}
.a-col{
background-color: blue;
}
.btnactive{
color: #40a9ff;
border-color: #40a9ff;
}
.cardflow{
width: 100%;
height:250px;
white-space: nowrap;
overflow: auto;
text-overflow: ellipsis;
}
.provice:hover {
color: #40a9ff;
}
.base-layers{
width: 100%;
height: 80vh;
padding: 20px 20px 20px 20px;
}
.ant-checkbox-group{
display: flex!important;
flex-direction: column!important;
}
.ant-checkbox-group-item{
margin-bottom: 10px!important;
}
</style>
\ No newline at end of file
src/components/adds.vue 0 → 100644
View file @ 552ddcb0
<template>
<div class="mappage">
<div id="map"></div>
</div>
</template>
<script>
import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import {getWidth,getCenter,getTopLeft,getTopRight,getBottomRight,getBottomLeft} from 'ol/extent';
import TileGrid from 'ol/tilegrid/TileGrid';
import TileLayer from 'ol/layer/Tile';
import TileDebug from 'ol/source/TileDebug';
import WMTSTileGrid from 'ol/tilegrid/WMTS';
import WMTS from 'ol/source/WMTS';
import { mapState } from 'vuex';
export default {
data() {
return {
tilegrid:{},
initbasemap:{}
}
},
mounted() {
this.initmap()
},
computed: {
...mapState(['layersData']),
},
watch:{
layersData(val){
this.initbasemap.removeLayer(this.initbasemap.getLayers().array_[0])
let mapXYZ = new WMTS({
layer:val,
style:null,
tileGrid: this.tilegrid,
matrixSet:'alberts_china',
format: 'image/png',
url:
'http://192.168.1.142:5000/server/china/wmts'
})
let newLayer = new TileLayer({
source: mapXYZ
})
this.initbasemap.addLayer(newLayer)
}
},
methods: {
initmap(){
let _self = this
//区域范围
let projectionExtent = [-2800000, -4000000, 3600000, 2200000]
// debugger 调试
let width = getWidth(projectionExtent);
let resolutions = []
let matrixIds = [];
// 可以在元数据中找到 获取分辨率
for(var i=0; i<=18; i++){
resolutions[i] = (3.3482142857142862 * Math.pow(10, 7)/2**i)*0.0254/40
matrixIds[i] = [i];
}
//定义瓦片
_self.tilegrid = new WMTSTileGrid({
resolutions: resolutions,
extent: projectionExtent,
matrixIds: matrixIds
});
//获取zxy
let mapXYZ = new WMTS({
layer:'boul_g',
style:null,
tileGrid: _self.tilegrid,
// projection: projection,
matrixSet:'alberts_china',
format: 'image/png',
url:
'http://192.168.1.142:5000/server/china/wmts'
})
let map = new Map({
target: 'map',
layers: [
new TileLayer({
source: mapXYZ
}),
],
view: new View({
// projection: projection,
center: [0, 0],
zoom: 4,
multiWorld:true,
maxZoom:10,
minZoom:4
})
});
this.initbasemap = map
}
},
}
</script>
<style scoped>
.mappage{
width: 100%;
height: 100%;
}
#map{
width: 96%;
height: 99.5%;
border: 1px solid black;
position: relative;
top: 0.25%;
left: 0.25%;
}
</style>
\ No newline at end of file
src/main.js
View file @ 552ddcb0
......@@ -2,8 +2,14 @@ import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
import axios from 'axios'
Vue.config.productionTip = false
Vue.use(Antd);
// Vue.use(axios)
new Vue({
router,
......
src/router/index.js
View file @ 552ddcb0
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Main from '../views/Main.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: function () {
return import(/* webpackChunkName: "about" */ '../views/About.vue')
}
name: 'Main',
component: Main
}
]
......
src/store/index.js
View file @ 552ddcb0
......@@ -5,10 +5,17 @@ Vue.use(Vuex)
export default new Vuex.Store({
state: {
layersData:[]
},
mutations: {
GET_LAYER_DATA(state,data){
state.layersData = data
}
},
actions: {
getlayerdata({ commit }, data) {
commit('GET_LAYER_DATA', data)
},
},
modules: {
}
......
src/views/About.vue deleted 100644 → 0
View file @ 7cfef069
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
src/views/Home.vue deleted 100644 → 0
View file @ 7cfef069
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'Home',
components: {
HelloWorld
}
}
</script>
src/views/Main.vue 0 → 100644
View file @ 552ddcb0
<template>
<div class="page">
<a-row style="height: 7%;background-color: black;">
<a-col :span="12">
col-12
</a-col>
<a-col :span="12">
col-12
</a-col>
</a-row>
<a-row style="height: 93%;">
<a-col :span="18" style="border: 1px solid #7dbcea;height: 99.5%;padding: 0.25% 0 0 0.25%;">
<add-s></add-s>
</a-col>
<a-col :span="6" style="padding-top: 0.5%;">
<add-controls></add-controls>
</a-col>
</a-row>
</div>
</template>
<script>
import AddS from '../components/adds';
import AddControls from '../components/addcontrols'
export default {
components:{
AddS,
AddControls
}
}
</script>
<style scoped>
.page{
width: 100%;
height: 100%;
}
</style>
\ No newline at end of file
vue.config.js 0 → 100644
View file @ 552ddcb0
module.exports = {
publicPath: './',
lintOnSave: process.env.NODE_ENV === 'development',
productionSourceMap: false,
css: {
loaderOptions: {
less: {
javascriptEnabled: true // 解决ant-design-vue编译报错问题
}
}
},
assetsDir: 'static',
devServer: {
hot: true,
port: 5500,
overlay: {
warnings: true,
errors: false
},
proxy: {
'/php': {
// target: 'http://10.40.16.44:5003',
target:'http://192.168.1.142:5000',
changeOrigin: true,
pathRewrite: {
'^/php': ''
}
}
}
}
}
\ No newline at end of file
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