From c3a857ffa767fa8a59c0c4814546d280f6bc9fea Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Wed, 15 Feb 2023 15:26:17 +0800
Subject: [PATCH] 更新
---
src/components/map/dcSearchMap.vue | 293 +++++++++++++++++++++++++++++-----------------------------
1 files changed, 146 insertions(+), 147 deletions(-)
diff --git a/src/components/map/dcSearchMap.vue b/src/components/map/dcSearchMap.vue
index 402dfcd..6e6f556 100644
--- a/src/components/map/dcSearchMap.vue
+++ b/src/components/map/dcSearchMap.vue
@@ -1,169 +1,168 @@
<template>
- <div>
- <div id="search-viewer-container" style="height: 100%; width: 100%"></div>
- </div>
+ <div>
+ <div id="search-viewer-container" style="height: 50vh; width: 100%"></div>
+ </div>
</template>
<script>
export default {
- name: "dcSearchMap",
- props: ['isDetail','point'],
- data() {
- return {
- pointLayer: null,
- currentPoint:null,
- //绘制工具
- plotTool: null,
- coordinates: []
- }
- },
- created() {
+ name: "dcSearchMap",
+ props: ['isDetail', 'point'],
+ data () {
+ return {
+ pointLayer: null,
+ currentPoint: null,
+ //绘制工具
+ plotTool: null,
+ coordinates: []
+ }
+ },
+ created () {
- },
- mounted() {
+ },
+ mounted () {
- },
- methods: {
- init(){
- let self = this
- if (global.viewer != null) {
- global.viewer = null
- }
-
- global.DC.ready(() => {
- initViewer()
- })
-
- function initViewer() {
- //配置viewer
- global.viewer = new global.DC.Viewer('search-viewer-container', {
- contextOptions: {
- webgl: {
- alpha: true,
- stencil: true,
- preserveDrawingBuffer: true
+ },
+ methods: {
+ init () {
+ let self = this
+ if (global.searchViewer != null) {
+ global.searchViewer = null
}
- },
- 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
- })
- )
+ global.DC.ready(() => {
+ initViewer()
+ })
- //添加图层
- self.pointLayer = new global.DC.VectorLayer('polygonLayer')
- global.viewer.addLayer(self.pointLayer)
+ function initViewer () {
+ //配置viewer
+ global.searchViewer = new global.DC.Viewer('search-viewer-container', {
+ contextOptions: {
+ webgl: {
+ alpha: true,
+ stencil: true,
+ preserveDrawingBuffer: true
+ }
+ },
+ sceneMode: 2
+ })
- self.plotTool = new global.DC.Plot(global.viewer,{
- icon_center: "/img/dwicon.jpeg", // 自定义的中心点图标
- icon_anchor: "/img/dwicon.jpeg", //自定义的锚点图标
- icon_midAnchor: "/img/dwicon.jpeg", //自定义的中心锚点图标
- icon_size: [12, 12],//自定义的中心锚点大小
- clampToModel:false // 点位是否获取模型表面坐标
- })
+ //加载地图
+ global.searchViewer.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
+ })
+ )
- //初始化定位
- global.viewer.camera.setView({
- // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
- // fromDegrees()方法，将经纬度和高程转换为世界坐标
- destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
- //设置坐标为上饶市
- 117.951478782, 28.447896798, 1800.0
- ),
- orientation: {
- // 指向
- heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0),
- // 视角
- pitch: global.DC.Namespace.Cesium.Math.toRadians(-90),
- roll: 0.0
- }
- })
+ //添加图层
+ self.pointLayer = new global.DC.VectorLayer('polygonLayer')
+ global.searchViewer.addLayer(self.pointLayer)
- }
+ self.plotTool = new global.DC.Plot(global.searchViewer, {
+ icon_center: "/img/dwicon.jpeg", // 自定义的中心点图标
+ icon_anchor: "/img/dwicon.jpeg", //自定义的锚点图标
+ icon_midAnchor: "/img/dwicon.jpeg", //自定义的中心锚点图标
+ icon_size: [12, 12],//自定义的中心锚点大小
+ clampToModel: false // 点位是否获取模型表面坐标
+ })
- this.showPoint(this.point)
+ //初始化定位
+ global.searchViewer.camera.setView({
+ // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
+ // fromDegrees()方法，将经纬度和高程转换为世界坐标
+ destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
+ //设置坐标为上饶市
+ 117.951478782, 28.447896798, 1800.0
+ ),
+ orientation: {
+ // 指向
+ heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0),
+ // 视角
+ pitch: global.DC.Namespace.Cesium.Math.toRadians(-90),
+ roll: 0.0
+ }
+ })
- this.draw()
+ }
- },
- //开始绘画
- draw() {
- const self = this
- if (this.polygon) {
- this.clearDraw()
- }
- //鼠标左键事件
- let leftClick = function (event) {
- if (self.currentPoint){
- self.pointLayer.removeOverlay(self.currentPoint)
- self.currentPoint = null
- }
- let point = new global.DC.Point(new global.DC.Position(event.wgs84SurfacePosition.lng, event.wgs84SurfacePosition.lat))
- point.setStyle({
- pixelSize: 10,
- color: global.DC.Color.RED, //颜色
- outlineColor: global.DC.Color.WHITE, //边框颜色
- outlineWidth: 2, //边框大小，
- })
- self.currentPoint = point
- self.pointLayer.addOverlay(point)
- let pointLonLat = [event.wgs84SurfacePosition.lng,event.wgs84SurfacePosition.lat]
- self.$emit("getMapData", pointLonLat)
- }
- //添加鼠标左键事件
- global.viewer.on(global.DC.MouseEventType.LEFT_DOWN,leftClick)
- },
- //重置
- 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 + '\''
- },
- //回显点
- showPoint(positions) {
- let viewer = global.viewer
- if (positions){
- let pointData = ""
- let pointArray = []
- pointData = positions.match(/\(([^)]*)\)/)
- pointArray = pointData[1].split(" ")
+ this.showPoint(this.point)
- let position = new global.DC.Position(pointArray[0],pointArray[1])
- let point = new global.DC.Point(position)
- point.setStyle({
- pixelSize: 10,
- color: global.DC.Color.RED, //颜色
- outlineColor: global.DC.Color.WHITE, //边框颜色
- outlineWidth: 2, //边框大小，
- })
- this.currentPoint = point
- this.pointLayer.addOverlay(point)
- viewer.flyTo(this.pointLayer)
- }
- },
- }
+ this.draw()
+
+ },
+ //开始绘画
+ draw () {
+ const self = this
+ if (this.polygon) {
+ this.clearDraw()
+ }
+ //鼠标左键事件
+ let leftClick = function (event) {
+ if (self.currentPoint) {
+ self.pointLayer.removeOverlay(self.currentPoint)
+ self.currentPoint = null
+ }
+ let point = new global.DC.Point(new global.DC.Position(event.wgs84SurfacePosition.lng, event.wgs84SurfacePosition.lat))
+ point.setStyle({
+ pixelSize: 10,
+ color: global.DC.Color.RED, //颜色
+ outlineColor: global.DC.Color.WHITE, //边框颜色
+ outlineWidth: 2, //边框大小，
+ })
+ self.currentPoint = point
+ self.pointLayer.addOverlay(point)
+ let pointLonLat = [event.wgs84SurfacePosition.lng, event.wgs84SurfacePosition.lat]
+ self.$emit("getMapData", pointLonLat)
+ }
+ //添加鼠标左键事件
+ global.searchViewer.on(global.DC.MouseEventType.LEFT_DOWN, leftClick)
+ },
+ //重置
+ 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 + '\''
+ },
+ //回显点
+ showPoint (positions) {
+ let viewer = global.searchViewer
+ if (positions) {
+ let pointData = ""
+ let pointArray = []
+ pointData = positions.match(/\(([^)]*)\)/)
+ pointArray = pointData[1].split(" ")
+
+ let position = new global.DC.Position(pointArray[0], pointArray[1])
+ let point = new global.DC.Point(position)
+ point.setStyle({
+ pixelSize: 10,
+ color: global.DC.Color.RED, //颜色
+ outlineColor: global.DC.Color.WHITE, //边框颜色
+ outlineWidth: 2, //边框大小，
+ })
+ this.currentPoint = point
+ this.pointLayer.addOverlay(point)
+ viewer.flyTo(this.pointLayer)
+ }
+ },
+ }
}
</script>
<style scoped>
-
</style>
--
Gitblit v1.9.3