| | |
| | | </template> |
| | | |
| | | <script> |
| | | import axios from 'axios' |
| | | // import axios from 'axios' |
| | | import NCregion from '@/assets/region' |
| | | import {getSensings} from '@/api/remote/remote' |
| | | |
| | | // 图层变量做声明 |
| | | var farmRegionLayer = null |
| | |
| | | |
| | | data () { |
| | | return { |
| | | |
| | | polyline: null |
| | | } |
| | | }, |
| | | |
| | | watch: { |
| | | 'polyline' (newObj, oldObj) { |
| | | if (newObj && oldObj) { |
| | | plotRegionLayer.removeOverlay(oldObj) |
| | | } |
| | | } |
| | | }, |
| | | computed: { |
| | | |
| | | }, |
| | |
| | | } |
| | | } |
| | | }) |
| | | |
| | | // 去除logo |
| | | let primitiveArr = global.viewer.scene.primitives._primitives |
| | | global.viewer.scene.primitives.remove(primitiveArr[0]) |
| | | |
| | | // global.viewer.scene.globe.depthTestAgainstTerrain = true |
| | | |
| | |
| | | // 天地图 影像 |
| | | global.viewer.imageryLayers.addImageryProvider( |
| | | new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({ |
| | | url: 'http://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0', |
| | | url: 'http://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e45274b0235bb913eceb393aabbf9c9c', |
| | | subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'], |
| | | format: 'image/jpeg', |
| | | show: true, |
| | |
| | | }) |
| | | ) |
| | | |
| | | // http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdom/MapServer |
| | | |
| | | // arcgis服务添加 |
| | | global.viewer.imageryLayers.addImageryProvider( |
| | | new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({ |
| | | url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengyjjddom/MapServer/WMTS', |
| | | // url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdom/MapServer/WMTS', |
| | | layer: 'nanchengyjjddom', |
| | | style: 'default', |
| | | tileMatrixSetID: 'default028mm', |
| | | format: 'image/png', |
| | | tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(), |
| | | maximumLevel: 19, |
| | | tileMatrixLabels: [ |
| | | '0', |
| | | '1', |
| | | '2', |
| | | '3', |
| | | '4', |
| | | '5', |
| | | '6', |
| | | '7', |
| | | '8', |
| | | '9', |
| | | '10', |
| | | '11', |
| | | '12', |
| | | '13', |
| | | '14', |
| | | '15', |
| | | '16', |
| | | '17', |
| | | '18', |
| | | '19' |
| | | ] |
| | | //获取默认展示影像 |
| | | getSensings("SHOW").then(res=>{ |
| | | res.data.data.forEach(e=>{ |
| | | global.viewer.imageryLayers.addImageryProvider( |
| | | new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({ |
| | | url: e.reUrl, |
| | | maximumLevel: 18 |
| | | }) |
| | | ) |
| | | }) |
| | | ) |
| | | |
| | | // arcgis服务添加 |
| | | global.viewer.imageryLayers.addImageryProvider( |
| | | new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({ |
| | | url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdom/MapServer/WMTS', |
| | | // url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdom/MapServer/WMTS', |
| | | layer: 'nanchengdom', |
| | | style: 'default', |
| | | tileMatrixSetID: 'default028mm', |
| | | format: 'image/png', |
| | | tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(), |
| | | maximumLevel: 19, |
| | | tileMatrixLabels: [ |
| | | '0', |
| | | '1', |
| | | '2', |
| | | '3', |
| | | '4', |
| | | '5', |
| | | '6', |
| | | '7', |
| | | '8', |
| | | '9', |
| | | '10', |
| | | '11', |
| | | '12', |
| | | '13', |
| | | '14', |
| | | '15', |
| | | '16', |
| | | '17', |
| | | '18', |
| | | '19' |
| | | ] |
| | | }) |
| | | ) |
| | | }) |
| | | |
| | | // 矢量电子 |
| | | // global.viewer.imageryLayers.addImageryProvider( |
| | |
| | | // maximumLevel: 18 |
| | | // }) |
| | | // ) |
| | | |
| | | // |
| | | // global.viewer.imageryLayers.addImageryProvider( |
| | | // new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({ |
| | | // url: 'http://t{s}.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0', |
| | |
| | | |
| | | // global.viewer.locationBar.enable = true |
| | | } |
| | | |
| | | global.DC.ready(initViewer) |
| | | |
| | | this.addRegionPolyLine('http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengfwx/MapServer/0/query?where=1%3D1&text=&objectIds=&time=&geometry=&geometryType=esriGeometryEnvelope&inSR=&spatialRel=esriSpatialRelIntersects&relationParam=&outFields=*&returnGeometry=true&maxAllowableOffset=&geometryPrecision=&outSR=&returnIdsOnly=false&returnCountOnly=false&orderByFields=&groupByFieldsForStatistics=&outStatistics=&returnZ=false&returnM=false&gdbVersion=&returnDistinctValues=false&returnTrueCurves=false&resultOffset=&resultRecordCount=&f=pjson') |
| | | // this.addRegionPolyLine('http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengfwx/MapServer/0/query?where=1%3D1&text=&objectIds=&time=&geometry=&geometryType=esriGeometryEnvelope&inSR=&spatialRel=esriSpatialRelIntersects&relationParam=&outFields=*&returnGeometry=true&maxAllowableOffset=&geometryPrecision=&outSR=&returnIdsOnly=false&returnCountOnly=false&orderByFields=&groupByFieldsForStatistics=&outStatistics=&returnZ=false&returnM=false&gdbVersion=&returnDistinctValues=false&returnTrueCurves=false&resultOffset=&resultRecordCount=&f=pjson') |
| | | this.addRegionPolyLine(NCregion) |
| | | }, |
| | | methods: { |
| | | /** |
| | | * 添加南城县边界的数据 |
| | | * @param {string} url arcgis服务地址 |
| | | */ |
| | | addRegionPolyLine (url) { |
| | | axios.get(url).then(res => { |
| | | let position = '' |
| | | addRegionPolyLine (regionJSON) { |
| | | // axios.get(regionJSON).then(res => { |
| | | let position = '' |
| | | |
| | | res.data.features[0].geometry.rings[0].forEach(item => { |
| | | position += `${item[0]}, ${item[1]};` |
| | | }) |
| | | |
| | | console.log(position, 565656) |
| | | |
| | | const polyline = new global.DC.Polyline(position) |
| | | polyline.setStyle({ |
| | | width: 4, |
| | | material: global.DC.Namespace.Cesium.Color.fromBytes( |
| | | 244, 157, 21, |
| | | 200 |
| | | ), |
| | | clampToGround: true |
| | | }) |
| | | regionPolyLineLayer.addOverlay(polyline) |
| | | regionJSON.features[0].geometry.rings[0].forEach(item => { |
| | | position += `${item[0]}, ${item[1]};` |
| | | }) |
| | | |
| | | console.log(position, 565656) |
| | | |
| | | const polyline = new global.DC.Polyline(position) |
| | | polyline.setStyle({ |
| | | width: 4, |
| | | material: global.DC.Namespace.Cesium.Color.fromBytes( |
| | | 244, 157, 21, |
| | | 200 |
| | | ), |
| | | clampToGround: true |
| | | }) |
| | | regionPolyLineLayer.addOverlay(polyline) |
| | | // }) |
| | | }, |
| | | /** |
| | | * 添加农场点及范围的方法 |
| | | * 添加基地点及范围的方法 |
| | | * @param {*} positions 位置信息(范围信息) |
| | | * @param {*} item 农场对应的所有信息(接口返回的数据) |
| | | * @param {*} item 基地对应的所有信息(接口返回的数据) |
| | | */ |
| | | addPolygon (positions, item) { |
| | | addPolygon (item) { |
| | | const that = this |
| | | |
| | | const center = this.getCenter(positions) |
| | | // const center = this.getCenter(positions) |
| | | |
| | | const divIcon = new global.DC.DivIcon( |
| | | new global.DC.Position(center[0], center[1], 0), |
| | | const center = global.DC.CoordTransform.GCJ02ToWGS84(item.longitude, item.latitude) |
| | | |
| | | const divIcon = new global.DC.DivIcon(new global.DC.Position(center[0], center[1]), |
| | | ` |
| | | <div class="farm-map-icon"> |
| | | <img src="/img/icon/3858.png" alt=""> |
| | | <img src="../../../zhny-dp/img/icon/3858.png" alt=""> |
| | | <div>${item.farmName}</div> |
| | | </div> |
| | | ` |
| | |
| | | |
| | | const center = this.getCenter(positions) |
| | | |
| | | // const divIcon = new global.DC.DivIcon( |
| | | // new global.DC.Position(center[0], center[1], 0), |
| | | // ` |
| | | // <div class="farm-map-icon"> |
| | | // <img src="/img/icon/3858.png" alt=""> |
| | | // // <div>${item.farmName}</div> |
| | | // </div> |
| | | // ` |
| | | // ) |
| | | // divIcon.attrParams = item |
| | | // farmLogoLayer.addOverlay(divIcon) |
| | | if (item.strainUrl != '') { |
| | | const urls = item.strainUrl.split(',') |
| | | let imageStr = '<div class="land-map-icon">' |
| | | urls.forEach(url => { |
| | | imageStr += `<img src="${url}" alt=""width="100px" height="100px" text-align="center" class="strainImg">` |
| | | }) |
| | | imageStr += '</div>' |
| | | const divIcon = new global.DC.DivIcon( |
| | | new global.DC.Position(center[0], center[1], 0), imageStr |
| | | ) |
| | | |
| | | // divIcon.on(global.DC.MouseEventType.CLICK, (e) => { |
| | | // that.$parent.showDetailPopup(e.overlay.attrParams) |
| | | // }) |
| | | divIcon.attrParams = item |
| | | farmLogoLayer.addOverlay(divIcon) |
| | | |
| | | divIcon.on(global.DC.MouseEventType.CLICK, (e) => { |
| | | that.$parent.plotDetailsPopupShow(e.overlay.attrParams) |
| | | }) |
| | | } |
| | | const polygon = new global.DC.Polygon(positions) |
| | | polygon.attrParams = item |
| | | polygon.setStyle({ |
| | | material: global.DC.Namespace.Cesium.Color.fromBytes( |
| | | 129, 255, 84, |
| | | 200 |
| | | 400 |
| | | ) |
| | | }) |
| | | |
| | | polygon.on(global.DC.MouseEventType.CLICK, (e) => { |
| | | that.drawLandPolyLine(positions) |
| | | that.$parent.plotDetailsPopupShow(e.overlay.attrParams) |
| | | }) |
| | | |
| | | plotRegionLayer.addOverlay(polygon) |
| | | addPlotLayers.push({ center, name: item.landName }) |
| | | }, |
| | | /** |
| | | * 地块画线 |
| | | * @param positions |
| | | */ |
| | | drawLandPolyLine (positions) { |
| | | // 画线 |
| | | this.polyline = new global.DC.Polyline(positions) |
| | | this.polyline.setStyle({ |
| | | width: 4, |
| | | material: global.DC.Namespace.Cesium.Color.fromBytes( |
| | | 200, 255, 255, |
| | | 200 |
| | | ), |
| | | clampToGround: true |
| | | }) |
| | | plotRegionLayer.addOverlay(this.polyline) |
| | | }, |
| | | |
| | | /** |
| | |
| | | }, |
| | | |
| | | /** |
| | | * 设置中心点 |
| | | * @param {*} name 对应站点(农场范围)的中心点 --- 对应的名字 |
| | | * 将数据库保存值转换成Map使用坐标 |
| | | * @param landRange 数据库的值 |
| | | * @returns {*[]} Map使用坐标 |
| | | */ |
| | | setCenter (name) { |
| | | let center |
| | | addLayers.forEach(item => { |
| | | if (name == item.name) { |
| | | center = item.center |
| | | } |
| | | }) |
| | | setPositionByLandRange (landRange) { |
| | | if (landRange) { |
| | | landRange = landRange.replace(/POLYGON\(\(/g, '') |
| | | landRange = landRange.replace(/\)\)/g, '') |
| | | |
| | | if (center == '') { |
| | | this.$message({ |
| | | message: '当前农场暂未绘制', |
| | | type: 'warning' |
| | | const arr = landRange.split(',') |
| | | var brr = [] |
| | | arr.forEach(it => { |
| | | brr.push(it.split(' ')) |
| | | }) |
| | | return |
| | | } |
| | | |
| | | return brr |
| | | } |
| | | return null |
| | | }, |
| | | |
| | | /** |
| | | * 设置中心点 |
| | | * @param {*} name 对应站点(基地范围)的中心点 --- 对应的名字 |
| | | */ |
| | | setCenter (farmObj) { |
| | | // let center |
| | | // addLayers.forEach(item => { |
| | | // if (name == item.name) { |
| | | // center = item.center |
| | | // } |
| | | // }) |
| | | |
| | | // if (center == '') { |
| | | // this.$message({ |
| | | // message: '当前基地暂未绘制', |
| | | // type: 'warning' |
| | | // }) |
| | | // return |
| | | // } |
| | | const center = global.DC.CoordTransform.GCJ02ToWGS84(farmObj.longitude, farmObj.latitude) |
| | | global.viewer.camera.flyTo({ |
| | | // Cesium的坐标是以地心为原点,一向指向南美洲,一向指向亚洲,一向指向北极州 |
| | | // fromDegrees()方法,将经纬度和高程转换为世界坐标 |
| | | |
| | | destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees( |
| | | center[0], center[1], 3000.0 |
| | | center[0], center[1], 3000.0 |
| | | ), |
| | | orientation: { |
| | | // 指向 |
| | |
| | | * @param {*} name 对应站点(地块范围)的中心点 --- 对应的名字 |
| | | */ |
| | | |
| | | setPlotCenter (name) { |
| | | setPlotCenter (landObj) { |
| | | if (!landObj.landRange) { |
| | | this.$message({ |
| | | message: '当前地块暂未绘制', |
| | | type: 'warning' |
| | | }) |
| | | return |
| | | } |
| | | let center |
| | | addPlotLayers.forEach(item => { |
| | | if (name == item.name) { |
| | | if (landObj.landName == item.name) { |
| | | center = item.center |
| | | } |
| | | }) |
| | | // 根据坐标画线 |
| | | const positions = this.setPositionByLandRange(landObj.landRange) |
| | | if (positions) { |
| | | this.drawLandPolyLine(positions) |
| | | } |
| | | |
| | | global.viewer.camera.flyTo({ |
| | | // Cesium的坐标是以地心为原点,一向指向南美洲,一向指向亚洲,一向指向北极州 |
| | |
| | | } |
| | | return centerLonLat |
| | | }, |
| | | // 隐藏农场标记图层 |
| | | // 隐藏基地标记图层 |
| | | hiddenFarmLayer () { |
| | | farmLogoLayer.show = false |
| | | farmRegionLayer.show = false |
| | | }, |
| | | // 显示农场标记图层 |
| | | // 显示基地标记图层 |
| | | showFarmLayer () { |
| | | farmLogoLayer.show = true |
| | | farmRegionLayer.show = true |