<template>
|
<div>
|
<div id="search-viewer-container" style="height: 50vh; width: 100%"></div>
|
</div>
|
</template>
|
|
<script>
|
|
let pointLayer = null
|
export default {
|
name: "dcSearchMap",
|
props: ['isDetail', 'point'],
|
data () {
|
return {
|
currentPoint: null,
|
//绘制工具
|
plotTool: null,
|
coordinates: []
|
}
|
},
|
created () {
|
|
},
|
mounted () {
|
|
},
|
methods: {
|
init () {
|
let self = this
|
if (global.searchViewer != null) {
|
global.searchViewer = null
|
}
|
|
global.DC.ready(() => {
|
initViewer()
|
})
|
|
function initViewer () {
|
//配置viewer
|
global.searchViewer = new global.DC.Viewer('search-viewer-container', {
|
contextOptions: {
|
webgl: {
|
alpha: true,
|
stencil: true,
|
preserveDrawingBuffer: true
|
}
|
},
|
sceneMode: 2
|
})
|
|
//加载地图
|
// global.searchViewer.imageryLayers.addImageryProvider(
|
// new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
|
// url: 'http://t{s}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=d083e4cf30bfc438ef93436c10c2c20a',
|
// subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
|
// format: 'image/jpeg',
|
// show: true,
|
// maximumLevel: 18
|
// })
|
// )
|
|
global.searchViewer.imageryLayers.addImageryProvider(
|
new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
|
url: "http://10.141.11.11:80/slapi/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(),
|
})
|
)
|
|
//添加图层
|
pointLayer = new global.DC.VectorLayer('polygonLayer')
|
global.searchViewer.addLayer(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 // 点位是否获取模型表面坐标
|
})
|
|
//初始化定位
|
global.searchViewer.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
|
}
|
})
|
|
}
|
|
this.showPoint(this.point)
|
|
this.draw()
|
|
},
|
//开始绘画
|
draw () {
|
const self = this
|
if (this.polygon) {
|
this.clearDraw()
|
}
|
//鼠标左键事件
|
let leftClick = function (event) {
|
if (self.currentPoint) {
|
pointLayer.removeOverlay(self.currentPoint)
|
self.currentPoint = null
|
}
|
let point = new global.DC.Billboard(new global.DC.Position(event.wgs84SurfacePosition.lng, event.wgs84SurfacePosition.lat), 'img/dwicon.jpeg')
|
// point.setStyle({
|
// pixelSize: 10,
|
// color: global.DC.Color.RED, //颜色
|
// outlineColor: global.DC.Color.WHITE, //边框颜色
|
// outlineWidth: 2, //边框大小，
|
// })
|
self.currentPoint = point
|
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.Billboard(position, 'img/dwicon.jpeg')
|
// point.setStyle({
|
// pixelSize: 10,
|
// color: global.DC.Color.RED, //颜色
|
// outlineColor: global.DC.Color.WHITE, //边框颜色
|
// outlineWidth: 2, //边框大小，
|
// })
|
this.currentPoint = point
|
pointLayer.addOverlay(point)
|
viewer.flyTo(pointLayer)
|
}
|
},
|
setView (points) {
|
if (points) {
|
let position = new global.DC.Position(Number(points.lng), Number(points.lat), 2000, 0, -90, 0)
|
let point = new global.DC.Billboard(position, 'img/dwicon.jpeg')
|
this.currentPoint = point
|
pointLayer.clear()
|
pointLayer.addOverlay(point)
|
global.searchViewer.flyToPosition(
|
new global.DC.Position(Number(points.lng), Number(points.lat), 2000, 0, -90, 0)
|
)
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped></style>
|
