| | |
| | | </template> |
| | | |
| | | <script> |
| | | let polygonLayer = null |
| | | let polyLineLayer = null |
| | | let polygon = null |
| | | let polyLine = null |
| | | let plotTool = null |
| | | let plot = undefined |
| | | |
| | | export default { |
| | | name: "dcMap", |
| | | props: ['isDetail', 'range'], |
| | | data () { |
| | | return { |
| | | polygonLayer: null, |
| | | polyLineLayer: null, |
| | | polygon: null, |
| | | polyLine: null, |
| | | //绘制工具 |
| | | plotTool: null, |
| | | coordinates: [] |
| | | } |
| | | }, |
| | |
| | | |
| | | global.viewer.imageryLayers.addImageryProvider( |
| | | new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({ |
| | | url: "http://10.141.11.8:8090/MapTileService/wmts?STORETYPE=merged-dat&PROJECTION=4326", |
| | | url: "http://10.141.11.11:80/slapi/MapTileService/wmts?STORETYPE=merged-dat&PROJECTION=4326", |
| | | layer: "wmts_4326_361100", |
| | | style: "default", |
| | | format: "image/png", |
| | |
| | | }) |
| | | ) |
| | | |
| | | //添加图层 |
| | | self.polygonLayer = new global.DC.VectorLayer('polygonLayer') |
| | | global.viewer.addLayer(self.polygonLayer) |
| | | // global.viewer.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=e45274b0235bb913eceb393aabbf9c9c', |
| | | // subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'], |
| | | // format: 'image/jpeg', |
| | | // show: true, |
| | | // maximumLevel: 18 |
| | | // }) |
| | | // ) |
| | | |
| | | //添加图层 |
| | | self.polyLineLayer = new global.DC.VectorLayer('polyLineLayer') |
| | | global.viewer.addLayer(self.polyLineLayer) |
| | | polygonLayer = new global.DC.VectorLayer('polygonLayer') |
| | | global.viewer.addLayer(polygonLayer) |
| | | plot = new global.DC.Plot(global.viewer, { |
| | | clampToModel: true |
| | | }) |
| | | |
| | | self.plotTool = new global.DC.Plot(global.viewer) |
| | | //添加图层 |
| | | polyLineLayer = new global.DC.VectorLayer('polyLineLayer') |
| | | global.viewer.addLayer(polyLineLayer) |
| | | |
| | | plotTool = new global.DC.Plot(global.viewer) |
| | | |
| | | //初始化定位 |
| | | global.viewer.camera.setView({ |
| | |
| | | methods: { |
| | | //开始绘画 |
| | | draw (type) { |
| | | if (this.polygon) { |
| | | if (polygon) { |
| | | this.clearDraw() |
| | | } |
| | | |
| | | this.plotTool && this.plotTool.draw(type, overlay => { |
| | | this.coordinates = [] |
| | | plotTool && plotTool.draw(type, overlay => { |
| | | if (overlay) { |
| | | this.polygonLayer.addOverlay(overlay) |
| | | polygonLayer.addOverlay(overlay) |
| | | overlay.positions.forEach(e => { |
| | | this.coordinates.push([e.lng, e.lat]) |
| | | }) |
| | |
| | | }, |
| | | //重置 |
| | | clearDraw () { |
| | | this.polygonLayer.clear() |
| | | polygonLayer.clear() |
| | | }, |
| | | //转换成数据库数据 |
| | | doData (val) { |
| | |
| | | }, |
| | | //回显多边形 |
| | | showPolygon (positions) { |
| | | console.log('showPolygon', positions) |
| | | let viewer = global.viewer |
| | | positions = positions.replaceAll(",", ";").replaceAll(" ", ",") |
| | | this.polygon = new global.DC.Polygon(positions) |
| | | this.polygon.setStyle({ |
| | | polygon = new global.DC.Polygon(positions) |
| | | polygon.setStyle({ |
| | | material: global.DC.Color.RED |
| | | }) |
| | | this.polygonLayer.addOverlay(this.polygon) |
| | | viewer.flyTo(this.polygonLayer) |
| | | polygonLayer.addOverlay(polygon) |
| | | viewer.flyTo(polygonLayer) |
| | | polygon.on(global.DC.MouseEventType.CLICK, this.polygonClick) |
| | | }, |
| | | //回显线 |
| | | showPolyLine (positions) { |
| | | let viewer = global.viewer |
| | | positions = positions.replaceAll(",", ";").replaceAll(" ", ",") |
| | | this.polyLine = new global.DC.Polyline(positions) |
| | | this.polyLine.setStyle({ |
| | | polyLine = new global.DC.Polyline(positions) |
| | | polyLine.setStyle({ |
| | | material: global.DC.Color.RED |
| | | }) |
| | | this.polyLineLayer.addOverlay(this.polyLine) |
| | | viewer.flyTo(this.polyLineLayer) |
| | | } |
| | | polyLineLayer.addOverlay(polyLine) |
| | | viewer.flyTo(polyLineLayer) |
| | | }, |
| | | |
| | | // 点击编辑多边形 |
| | | polygonClick (e) { |
| | | let plotOverlay = e.overlay |
| | | plot.edit(plotOverlay, (e) => { |
| | | let newPolygonPositions = [] |
| | | let newPolygonPositionsArr = [] |
| | | plotOverlay._positions.forEach((item, index) => { |
| | | if (index % 2 == 0) { |
| | | newPolygonPositions.push(item) |
| | | newPolygonPositionsArr.push([item._lng, item._lat]) |
| | | } |
| | | }) |
| | | plotOverlay.positions = newPolygonPositions |
| | | let toData = this.doData(newPolygonPositionsArr) |
| | | this.$emit('toData', toData) |
| | | }, { material: global.DC.Color.RED.withAlpha(0.5) }) |
| | | }, |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style scoped> |
| | | </style> |
| | | <style scoped></style> |