From 89fce9c42cdc306d77589cac483c9fe335cf67cd Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Thu, 16 Feb 2023 09:46:58 +0800
Subject: [PATCH] 更换底图
---
src/components/map/dcMap.vue | 279 +++++++++++++++++++++++++++++--------------------------
1 files changed, 145 insertions(+), 134 deletions(-)
diff --git a/src/components/map/dcMap.vue b/src/components/map/dcMap.vue
index 6096a96..9291ba8 100644
--- a/src/components/map/dcMap.vue
+++ b/src/components/map/dcMap.vue
@@ -1,157 +1,168 @@
<template>
- <div>
- <div id="viewer-container" :style="{ height: isDetail ? '95vh' : '40vh', width: '100%' }"></div>
- <div style="position: absolute;right:45%;top:-1%;z-index: 999999">
- <p style="margin-top: 10px" v-if="!isDetail">
- <el-button type="primary" size="small" @click="draw('polygon')">绘制区域</el-button>
- <el-button size="small" @click="clearDraw">重置</el-button>
- </p>
+ <div>
+ <div id="viewer-container" :style="{ height: isDetail ? '95vh' : '40vh', width: '100%' }"></div>
+ <div style="position: absolute;right:45%;top:-1%;z-index: 999999">
+ <p style="margin-top: 10px" v-if="!isDetail">
+ <el-button type="primary" size="small" @click="draw('polygon')">绘制区域</el-button>
+ <el-button size="small" @click="clearDraw">重置</el-button>
+ </p>
+ </div>
</div>
- </div>
</template>
<script>
export default {
- name: "dcMap",
- props:['isDetail','range'],
- data(){
- return{
- polygonLayer:null,
- polyLineLayer:null,
- polygon:null,
- polyLine:null,
- //绘制工具
- plotTool:null,
- coordinates:[]
- }
- },
- created() {
+ name: "dcMap",
+ props: ['isDetail', 'range'],
+ data () {
+ return {
+ polygonLayer: null,
+ polyLineLayer: null,
+ polygon: null,
+ polyLine: null,
+ //绘制工具
+ plotTool: null,
+ coordinates: []
+ }
+ },
+ created () {
- },
- mounted() {
- let self = this
- global.DC.ready(() => {
- initViewer()
- })
-
- function initViewer() {
- //配置viewer
- global.viewer = new global.DC.Viewer('viewer-container',{
- contextOptions: {
- webgl: {
- alpha: true,
- stencil: true,
- preserveDrawingBuffer: true
- }
- },
- sceneMode:2
- })
-
- //加载地图
- global.viewer.imageryLayers.addImageryProvider(
- new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
- url: 'https://webmap-tile.sf-express.com/MapTileService/rt?fetchtype=static&x={x}&y={y}&z={z}&project=sfmap&pic_size=256&pic_type=png8&data_name=361100&data_format=merged-dat&data_type=normal',
- format: 'image/jpeg',
- show: true,
- maximumLevel: 18
+ },
+ mounted () {
+ let self = this
+ global.DC.ready(() => {
+ initViewer()
})
- )
- //添加图层
- self.polygonLayer = new global.DC.VectorLayer('polygonLayer')
- global.viewer.addLayer(self.polygonLayer)
+ function initViewer () {
+ //配置viewer
+ global.viewer = new global.DC.Viewer('viewer-container', {
+ contextOptions: {
+ webgl: {
+ alpha: true,
+ stencil: true,
+ preserveDrawingBuffer: true
+ }
+ },
+ sceneMode: 2
+ })
- //添加图层
- self.polyLineLayer = new global.DC.VectorLayer('polyLineLayer')
- global.viewer.addLayer(self.polyLineLayer)
+ //加载地图
+ // global.viewer.imageryLayers.addImageryProvider(
+ // new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
+ // url: 'https://webmap-tile.sf-express.com/MapTileService/rt?fetchtype=static&x={x}&y={y}&z={z}&project=sfmap&pic_size=256&pic_type=png8&data_name=361100&data_format=merged-dat&data_type=normal',
+ // format: 'image/jpeg',
+ // show: true,
+ // maximumLevel: 18
+ // })
+ // )
- self.plotTool = new global.DC.Plot(global.viewer)
+ global.viewer.imageryLayers.addImageryProvider(
+ new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
+ url: "http://10.141.11.11:8090/MapTileService/wmts?STORETYPE=merged-dat&PROJECTION=4326",
+ layer: "wmts_4326_361100",
+ style: "default",
+ format: "image/png",
+ tileMatrixSetID: "c",
+ tileMatrixLabels: new Array(18).fill(0).map((v, i) => i + 1),
+ tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(),
+ })
+ )
- //初始化定位
- global.viewer.camera.setView({
- // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
- // fromDegrees()方法，将经纬度和高程转换为世界坐标
- destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
- //设置坐标为上饶市信州区
- 117.966460, 28.431002, 5000.0
- ),
- orientation: {
- // 指向
- heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0),
- // 视角
- pitch: global.DC.Namespace.Cesium.Math.toRadians(-90),
- roll: 0.0
+ //添加图层
+ self.polygonLayer = new global.DC.VectorLayer('polygonLayer')
+ global.viewer.addLayer(self.polygonLayer)
+
+ //添加图层
+ self.polyLineLayer = new global.DC.VectorLayer('polyLineLayer')
+ global.viewer.addLayer(self.polyLineLayer)
+
+ self.plotTool = new global.DC.Plot(global.viewer)
+
+ //初始化定位
+ global.viewer.camera.setView({
+ // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
+ // fromDegrees()方法，将经纬度和高程转换为世界坐标
+ destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
+ //设置坐标为上饶市信州区
+ 117.966460, 28.431002, 5000.0
+ ),
+ orientation: {
+ // 指向
+ heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0),
+ // 视角
+ pitch: global.DC.Namespace.Cesium.Math.toRadians(-90),
+ roll: 0.0
+ }
+ })
}
- })
- }
- if (this.isDetail){
- this.showPolyLine(this.range)
- }
-
- },
- methods:{
- //开始绘画
- draw(type){
- if (this.polygon){
- this.clearDraw()
- }
-
- this.plotTool && this.plotTool.draw(type,overlay => {
- if(overlay){
- this.polygonLayer.addOverlay(overlay)
- overlay.positions.forEach(e=>{
- this.coordinates.push([e.lng,e.lat])
- })
- let toData = this.doData(this.coordinates)
- this.$emit('toData', toData)
+ if (this.isDetail) {
+ this.showPolyLine(this.range)
}
- })
+
},
- //重置
- clearDraw(){
- this.polygonLayer.clear()
- },
- //转换成数据库数据
- doData(val) {
- let str = "LINESTRING("
- for (let k = 0; k < val.length; k++) {
- str += `${val[k][0]} ${val[k][1]}`
- if (k != val.length - 1) {
- str += ","
+ methods: {
+ //开始绘画
+ draw (type) {
+ if (this.polygon) {
+ this.clearDraw()
+ }
+
+ this.plotTool && this.plotTool.draw(type, overlay => {
+ if (overlay) {
+ this.polygonLayer.addOverlay(overlay)
+ overlay.positions.forEach(e => {
+ this.coordinates.push([e.lng, e.lat])
+ })
+ let toData = this.doData(this.coordinates)
+ this.$emit('toData', toData)
+ }
+ })
+ },
+ //重置
+ clearDraw () {
+ this.polygonLayer.clear()
+ },
+ //转换成数据库数据
+ doData (val) {
+ let str = "LINESTRING("
+ for (let k = 0; k < val.length; k++) {
+ str += `${val[k][0]} ${val[k][1]}`
+ if (k != val.length - 1) {
+ str += ","
+ }
+ }
+ str = str + "," + `${val[0][0]} ${val[0][1]}`
+ str += ")"
+ // console.log(str)
+ return '\'' + str + '\''
+ },
+ //回显多边形
+ showPolygon (positions) {
+ let viewer = global.viewer
+ positions = positions.replaceAll(",", ";").replaceAll(" ", ",")
+ this.polygon = new global.DC.Polygon(positions)
+ this.polygon.setStyle({
+ material: global.DC.Color.RED
+ })
+ this.polygonLayer.addOverlay(this.polygon)
+ viewer.flyTo(this.polygonLayer)
+ },
+ //回显线
+ showPolyLine (positions) {
+ let viewer = global.viewer
+ positions = positions.replaceAll(",", ";").replaceAll(" ", ",")
+ this.polyLine = new global.DC.Polyline(positions)
+ this.polyLine.setStyle({
+ material: global.DC.Color.RED
+ })
+ this.polyLineLayer.addOverlay(this.polyLine)
+ viewer.flyTo(this.polyLineLayer)
}
- }
- str = str + "," + `${val[0][0]} ${val[0][1]}`
- str += ")"
- // console.log(str)
- return '\'' + str + '\''
- },
- //回显多边形
- showPolygon(positions){
- let viewer = global.viewer
- positions = positions.replaceAll(",",";").replaceAll(" ",",")
- this.polygon = new global.DC.Polygon(positions)
- this.polygon.setStyle({
- material: DC.Color.RED
- })
- this.polygonLayer.addOverlay(this.polygon)
- viewer.flyTo(this.polygonLayer)
- },
- //回显线
- showPolyLine(positions){
- let viewer = global.viewer
- positions = positions.replaceAll(",",";").replaceAll(" ",",")
- this.polyLine = new global.DC.Polyline(positions)
- this.polyLine.setStyle({
- material: DC.Color.RED
- })
- this.polyLineLayer.addOverlay(this.polyLine)
- viewer.flyTo(this.polyLineLayer)
}
- }
}
</script>
<style scoped>
-
</style>
--
Gitblit v1.9.3