Merge branch 'wangmengqi' of zhangtao/gis into develop
This commit is contained in:
commit
7c49d9584e
|
|
@ -2692,9 +2692,9 @@
|
|||
"dev": true
|
||||
},
|
||||
"follow-redirects": {
|
||||
"version": "1.14.9",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz",
|
||||
"integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w=="
|
||||
"version": "1.15.2",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
|
||||
"integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA=="
|
||||
},
|
||||
"formstream": {
|
||||
"version": "1.1.1",
|
||||
|
|
|
|||
26
src/App.vue
26
src/App.vue
|
|
@ -7,29 +7,23 @@
|
|||
* @FilePath: \gis\src\App.vue
|
||||
-->
|
||||
<template>
|
||||
<n-config-provider :locale="zhCN" :date-locale="dateZhCN" inline-theme-disabled :theme-overrides="themeOverrides">
|
||||
<n-loading-bar-provider>
|
||||
<loading-bar />
|
||||
<n-dialog-provider>
|
||||
<dialog-content />
|
||||
<n-message-provider>
|
||||
<message-content />
|
||||
</n-message-provider>
|
||||
<router-view v-slot="{ Component }">
|
||||
<component :is="Component" />
|
||||
</router-view>
|
||||
</n-dialog-provider>
|
||||
</n-loading-bar-provider>
|
||||
</n-config-provider>
|
||||
<div>
|
||||
<Dashboard/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<script>
|
||||
import { zhCN, dateZhCN } from 'naive-ui'
|
||||
import themeOverrides from '@/utils/ui/theme.js'
|
||||
import loadingBar from '@/components/LoadingBar/index.vue'
|
||||
import messageContent from '@/components/Message/index.vue'
|
||||
import dialogContent from '@/components/Dialog/index.vue'
|
||||
|
||||
import Dashboard from './views/dashboard/index.vue'
|
||||
export default {
|
||||
components:{
|
||||
Dashboard
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
|
|||
|
|
@ -14,8 +14,8 @@ const chinaurl =
|
|||
chinaGroupName +
|
||||
'@EPSG:900913@pbf/{z}/{x}/{y}.pbf';
|
||||
|
||||
const spriteurl = 'http://192.168.12.58:8080/sprite-zt/sprite';
|
||||
const glyphsurl = 'http://192.168.12.58:8080/mbgl_data/fonts/{fontstack}/{range}.pbf';
|
||||
const spriteurl = 'http://192.168.11.35:8089/assets/sprite-th/sprite';
|
||||
const glyphsurl = 'http://192.168.11.35:8089/assets/fonts/{fontstack}/{range}.pbf';
|
||||
const iconSize = 0.6;
|
||||
const normal_style = {
|
||||
version: 8,
|
||||
|
|
|
|||
|
|
@ -3,7 +3,8 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import normal_style from '../assets/js/normal_style.js'
|
||||
import normal_style from "../assets/js/normal_style.js";
|
||||
import axios from "axios";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -15,9 +16,11 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
initMap() {
|
||||
|
||||
this.map = new mapboxgl.Map({
|
||||
let that = this;
|
||||
that.map = new mapboxgl.Map({
|
||||
container: "map",
|
||||
center: [120.476913, 31.416667],
|
||||
zoom: 5,
|
||||
style: {
|
||||
version: 8,
|
||||
name: "Mapbox Streets",
|
||||
|
|
@ -38,9 +41,114 @@ export default {
|
|||
},
|
||||
],
|
||||
},
|
||||
// style:normal_style
|
||||
// style:normal_style
|
||||
});
|
||||
|
||||
},
|
||||
loadWFS(url,option){
|
||||
var geoJsonUrl =
|
||||
"http://192.168.11.35:8999/geoserver/wfs?service=WFS&version=1.0.0&request=getFeature&typeName=sz_pg:sz_pg_china_mb_china_poi&outputFormat=application/json";
|
||||
//线 var geoJsonUrl = 'http://192.168.11.35:8999/geoserver/wfs?service=WFS&version=1.0.0&request=getFeature&typeName=sz_pg:sz_pg_mb_bg_line&outputFormat=application/json'
|
||||
// var geoJsonUrl = 'http://192.168.11.35:8999/geoserver/wfs?service=WFS&version=1.0.0&request=getFeature&typeName=sz_pg:sz_pg_mb_admin&outputFormat=application/json';
|
||||
// var geoJsonUrl = 'http://192.168.11.35:8999/geoserver/wfs?service=WFS&version=1.0.0&request=getFeature&typeName=sz_pg:sz_pg_mb_road&outputFormat=application/json';
|
||||
// var geoJsonUrl = 'http://192.168.11.35:8999/geoserver/wfs?service=WFS&version=1.0.0&request=getFeature&typeName=sz_pg:sz_pg_mb_label&outputFormat=application/json';
|
||||
//var geoJsonUrl = 'http://192.168.11.35:8999/geoserver/wfs?service=WFS&version=1.0.0&request=getFeature&typeName=sz_pg:sz_pg_mb_label&outputFormat=application/json';
|
||||
axios.get(geoJsonUrl).then((res) => {
|
||||
console.log(res);
|
||||
let features = res.data.features;
|
||||
console.log(features, "元素层");
|
||||
let layerType = null;
|
||||
let geometryType = features[0].geometry.type;
|
||||
let addLayerOption = {
|
||||
id: "points",
|
||||
type: layerType,
|
||||
source: {
|
||||
type: "geojson",
|
||||
data: {
|
||||
type: "FeatureCollection",
|
||||
features: features,
|
||||
},
|
||||
},
|
||||
layout: {
|
||||
visibility: "visible",
|
||||
},
|
||||
};
|
||||
if (geometryType == "MultiLineString") {
|
||||
addLayerOption.type = "line";
|
||||
} else if (geometryType == "Line") {
|
||||
addLayerOption.type = "line";
|
||||
} else if (geometryType == "Point") {
|
||||
addLayerOption.type = "circle";
|
||||
} else if (geometryType == " MultiPoint") {
|
||||
addLayerOption.type = "circle";
|
||||
} else if (geometryType == "Polygon") {
|
||||
addLayerOption.type = "fill";
|
||||
addLayerOption.paint = {
|
||||
"fill-color": "rgba(200,100,240,0.4)",
|
||||
"fill-outline-color": "rgba(200,100,240,1)",
|
||||
};
|
||||
} else if (geometryType == "MultiPolygon") {
|
||||
addLayerOption.type = "fill";
|
||||
addLayerOption.paint = {
|
||||
"fill-color": "rgba(200,100,240,0.4)",
|
||||
"fill-outline-color": "rgba(200,100,240,1)",
|
||||
};
|
||||
}
|
||||
|
||||
this.map.addLayer(addLayerOption);
|
||||
|
||||
});
|
||||
},
|
||||
loadWMS(url,option){
|
||||
console.log('111')
|
||||
|
||||
this.map.addSource('wms-source',{
|
||||
'type':'raster',
|
||||
'tiles':[url],
|
||||
'tileSize':512
|
||||
})
|
||||
this.map.addLayer({
|
||||
'id':'wms-layer',
|
||||
'type':'raster',
|
||||
'source':'wms-source',
|
||||
'paint':{}
|
||||
})
|
||||
|
||||
},
|
||||
loadWMTS(url,option){
|
||||
|
||||
|
||||
this.map.addSource('wmts-source',{
|
||||
'type':'raster',
|
||||
'tiles':['http://192.168.11.35:8999/geoserver/ows?service=WMS&request=GetLegendGraphic&format=image%2Fpng&width=20&height=20&layer=dem_test%3Ajs'],
|
||||
|
||||
'tileSize':256
|
||||
})
|
||||
this.map.addLayer({
|
||||
'id':'wmts-layer',
|
||||
'type':'raster',
|
||||
'source':'wmts-source',
|
||||
'paint':{
|
||||
'raster-opacity':0.8
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
loadTMS(url,option){
|
||||
var tmsUrl='http://192.168.11.35:8999/geoserver/gwc/service/tms/1.0.0/sz_pg%3Asz_pg_mb@EPSG%3A900913@pbf'
|
||||
|
||||
|
||||
this.map.addLayer({
|
||||
'id':'tms-layer',
|
||||
'type':'raster',
|
||||
'source':{
|
||||
'type':'raster',
|
||||
'tiles':[tmsUrl]
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import '@/styles/index.scss'
|
||||
import 'uno.css'
|
||||
import axios from 'axios'
|
||||
|
||||
import { createApp } from 'vue'
|
||||
import { setupRouter } from '@/router'
|
||||
|
|
@ -7,6 +8,7 @@ import { setupStore } from '@/store'
|
|||
|
||||
import App from './App.vue'
|
||||
|
||||
|
||||
function setupApp() {
|
||||
const app = createApp(App)
|
||||
|
||||
|
|
|
|||
|
|
@ -3,11 +3,12 @@
|
|||
<!-- <span>首页</span> -->
|
||||
<!-- 按钮控制区 -->
|
||||
<div class="btns">
|
||||
<button @click="showInfo()">WMS服务</button>
|
||||
<button >WMTS服务</button>
|
||||
<button>TMS服务</button>
|
||||
<button @click="loadWFS()">WFS服务</button>
|
||||
<button @click="loadWMS()">WMS服务</button>
|
||||
<button @click="loadWMTS()">WMTS服务</button>
|
||||
<button @click="loadTMS()">TMS服务</button>
|
||||
</div>
|
||||
<Service/>
|
||||
<Service ref="service"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -32,16 +33,26 @@ export default {
|
|||
|
||||
},
|
||||
methods:{
|
||||
showInfo(){
|
||||
console.log('111')
|
||||
loadWFS(){
|
||||
this.$refs.service.loadWFS()
|
||||
},
|
||||
loadWMS(){
|
||||
let wmsUrl='http://192.168.11.35:8999/geoserver/ows?service=WMS&version=1.3.0&request=GetLegendGraphic&format=image%2Fpng&width=20&height=20&layer=sz_pg%3Asz_pg_mb_building_area'
|
||||
this.$refs.service.loadWMS(wmsUrl)
|
||||
},
|
||||
loadWMTS(){
|
||||
this.$refs.service.loadWMTS()
|
||||
},
|
||||
loadTMS(){
|
||||
this.$refs.service.loadTMS()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.content{
|
||||
width:100%;
|
||||
height:100%;
|
||||
width:100vw;
|
||||
height:100vh;
|
||||
position:relative;
|
||||
.btns{
|
||||
width:100%;
|
||||
|
|
|
|||
Loading…
Reference in New Issue