|
|
@@ -1,403 +0,0 @@
|
|
|
-import config from "@/api/config.js";
|
|
|
-
|
|
|
-//引入cesium基础库
|
|
|
-import "mars3d-cesium/Build/Cesium/Widgets/widgets.css";
|
|
|
-import * as Cesium from "mars3d-cesium";
|
|
|
-import './map.scss'
|
|
|
-
|
|
|
-//导入mars3d主库
|
|
|
-import "mars3d/mars3d.css"; //v3.8.6及之前版本使用 import "mars3d/dist/mars3d.css";
|
|
|
-import * as mars3d from "mars3d";
|
|
|
-import "mars3d-tdt";
|
|
|
-import GeoUtils from "@/utils/turf_util.js"
|
|
|
-import { LayerType } from "mars3d";
|
|
|
-import eventBus from "@/api/eventBus";
|
|
|
-
|
|
|
-/**
|
|
|
- * @description 智能巡园地图层对象
|
|
|
- */
|
|
|
-class FarmMap {
|
|
|
- constructor() {
|
|
|
- }
|
|
|
- //初始化地图
|
|
|
- initMap(location, targetId) {
|
|
|
- mars3d.Token.updateAll({ tianditu: 'e95115c454a663cd052d96019fd83840' })
|
|
|
- // lat纬度，lng经度，alt高度，heading方向角度值，pitch俯仰角度值
|
|
|
- let mapOptions = {
|
|
|
- scene: {
|
|
|
- // center: { lat: coord[1], lng: coord[0], alt: 1000, heading: 0, pitch: 0 },
|
|
|
- showSun: true,
|
|
|
- showMoon: false,
|
|
|
- showSkyBox: false,
|
|
|
- scene3DOnly: true,
|
|
|
- skyBox: {
|
|
|
- type: "ground",
|
|
|
- sources: {
|
|
|
- positiveX: "//data.mars3d.cn/img/skybox-near/lantian/Right.jpg",
|
|
|
- negativeX: "//data.mars3d.cn/img/skybox-near/lantian/Left.jpg",
|
|
|
- positiveY: "//data.mars3d.cn/img/skybox-near/lantian/Front.jpg",
|
|
|
- negativeY: "//data.mars3d.cn/img/skybox-near/lantian/Back.jpg",
|
|
|
- positiveZ: "//data.mars3d.cn/img/skybox-near/lantian/Up.jpg",
|
|
|
- negativeZ: "//data.mars3d.cn/img/skybox-near/lantian/Down.jpg"
|
|
|
- }
|
|
|
- },
|
|
|
- backgroundImage: "url(//birdseye-img.sysuimars.com/birdseye-look-mini/home/20250123113804.png)",
|
|
|
- backgroundColor: "rgba(0,0,0,0)",
|
|
|
- sceneMode: Cesium.SceneMode.SCENE3D,
|
|
|
- showSkyAtmosphere: false,
|
|
|
- requestRenderMode: true, // 显式渲染
|
|
|
- cameraController: {
|
|
|
- enableRotate: true,
|
|
|
- enableTilt: false,
|
|
|
- enableTranslate: true,
|
|
|
- },
|
|
|
- shadowMap: {
|
|
|
- enabled: false,
|
|
|
- softShadows: true
|
|
|
- },
|
|
|
- fog: false,
|
|
|
- globe: {
|
|
|
- show: true,
|
|
|
- showGroundAtmosphere: false,
|
|
|
- enableLighting: true,
|
|
|
- backgroundImage: "url(//data.mars3d.cn/img/busines/background1.jpg)",
|
|
|
- }
|
|
|
- },
|
|
|
- basemaps: [{ name: "天地图", type: "tdt", layer: "img_d", show: true }],
|
|
|
- // basemaps: [],
|
|
|
- terrain: {
|
|
|
- show: true,
|
|
|
- type: LayerType.tdt
|
|
|
- },
|
|
|
- locationBar: {},
|
|
|
- control: {
|
|
|
- contextmenu: false
|
|
|
- }
|
|
|
-
|
|
|
- };
|
|
|
- let map = new mars3d.Map(targetId, mapOptions); //支持的参数请看API文档：http://mars3d.cn/api/Map.html
|
|
|
- map.fixedLight = true // 固定光照，避免gltf模型随时间存在亮度不一致。
|
|
|
- // 固定光照方向
|
|
|
- map.scene.light = new Cesium.DirectionalLight({
|
|
|
- direction: map.scene.camera.direction
|
|
|
- })
|
|
|
- map.scene.globe.depthTestAgainstTerrain = true
|
|
|
-
|
|
|
- // let xyz = config.base_img_url3 + "map/lby/{z}/{x}/{y}.png";
|
|
|
- // map.addLayer(new mars3d.layer.XyzLayer({ url: xyz }), true);
|
|
|
- this.map = map;
|
|
|
- this.mapNum = 0
|
|
|
- // this.initModel(coord)
|
|
|
- // this.initInfo()
|
|
|
- const point = [113.617022, 23.5848634]
|
|
|
- // this.addGardenAndTree(point)
|
|
|
- this.addGraphicPoint(point)
|
|
|
- this.graphicLayer = new mars3d.layer.GraphicLayer();
|
|
|
- this.map.addLayer(this.graphicLayer);
|
|
|
- // this.addAreaGraphic()// 添加区域
|
|
|
- // this.cameraMoveStart()
|
|
|
- // this.scrollWall()// 走马灯围栏效果
|
|
|
- // this.wallEntity()//实心围墙效果
|
|
|
-
|
|
|
- // 飞行到 500m 高度
|
|
|
- this.map.camera.flyTo({
|
|
|
- destination: Cesium.Cartesian3.fromDegrees(113.6149629, 23.58594117, 500),
|
|
|
- duration: 3 // 3秒飞行
|
|
|
- });
|
|
|
-
|
|
|
- // 创建图层
|
|
|
- this.treeGraphicLayer = new mars3d.layer.GraphicLayer();
|
|
|
- this.map.addLayer(this.treeGraphicLayer);
|
|
|
- // 创建图层
|
|
|
- this.treePointGraphicLayer = new mars3d.layer.GraphicLayer();
|
|
|
- this.map.addLayer(this.treePointGraphicLayer);
|
|
|
-
|
|
|
- this.pointsData = [
|
|
|
- { lng: 113.6149629, lat: 23.58594117, id: 1, fruitType: 1, age: 1, },
|
|
|
- { lng: 113.6146207, lat: 23.58591316, id: 2, fruitType: 2, age: 2, },
|
|
|
- { lng: 113.6147351, lat: 23.586311962, id: 3, fruitType: 1, age: 2, },
|
|
|
- { lng: 113.6144588, lat: 23.58577547, id: 4, fruitType: 3, age: 3, },
|
|
|
- { lng: 113.6139674, lat: 23.58594271, id: 5, fruitType: 0, age: 1, },
|
|
|
- ];
|
|
|
-
|
|
|
- // 3秒后绘制范围和点
|
|
|
- setTimeout(() => {
|
|
|
- this.drawPolygon(); // 画范围
|
|
|
- this.addBluePoints(); // 加蓝色点
|
|
|
- }, 3000);
|
|
|
- }
|
|
|
-
|
|
|
- drawPolygon() {
|
|
|
- const polygon = new mars3d.graphic.PolygonEntity({
|
|
|
- positions: [
|
|
|
- [113.6149629, 23.5851594117, 80],
|
|
|
- [113.6142961914, 23.58524871517, 80],
|
|
|
- [113.614396297, 23.585358145, 80],
|
|
|
- [113.614496379, 23.58547545, 80],
|
|
|
- ],
|
|
|
- style: {
|
|
|
- color: "#000000",
|
|
|
- opacity: 0.3,
|
|
|
- outline: true,
|
|
|
- // outlineWidth: 3,
|
|
|
- // outlineColor: "#ffffff",
|
|
|
- outlineStyle: {
|
|
|
- width: 1.5,
|
|
|
- materialType: mars3d.MaterialType.LineBloom,
|
|
|
- materialOptions: {
|
|
|
- color: "#18E0FF",
|
|
|
- glow: 3.0,
|
|
|
- showRatio: -0.5,
|
|
|
- speed: 0
|
|
|
- }
|
|
|
- },
|
|
|
- },
|
|
|
- attr: { remark: "示例1" }
|
|
|
- })
|
|
|
- this.treeGraphicLayer.addGraphic(polygon);
|
|
|
- }
|
|
|
-
|
|
|
- // 2️⃣ **添加蓝色点**
|
|
|
- addBluePoints() {
|
|
|
- this.mapPoint = []
|
|
|
- this.pointsData.forEach((point) => {
|
|
|
- let pointEntity = new mars3d.graphic.PointEntity({
|
|
|
- position: Cesium.Cartesian3.fromDegrees(point.lng, point.lat, 100),
|
|
|
- style: {
|
|
|
- pixelSize: 12,
|
|
|
- // color: "rgba(24, 224, 255, 0.6)",
|
|
|
- color: "rgba(24, 224, 255, 0.6)",
|
|
|
- outline: true,
|
|
|
- outlineColor: "#fff"
|
|
|
- },
|
|
|
- attr: { id: point.id, fruitType: point.fruitType, age: point.age }
|
|
|
- });
|
|
|
- this.mapPoint.push(pointEntity)
|
|
|
- this.treePointGraphicLayer.addGraphic(pointEntity);
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- // 2️⃣ **根据品种高亮显示**
|
|
|
- highlightCategory(selectedCategory) {
|
|
|
- console.log('this.pointsData', this.mapPoint);
|
|
|
- this.mapPoint.forEach((point) => {
|
|
|
- if (point.attr.fruitType === selectedCategory) {
|
|
|
- point.setStyle({ opacity: 1.0, color: "rgba(24, 224, 255, 0.6)" }); // 高亮
|
|
|
- } else {
|
|
|
- point.setStyle({ opacity: 1, color: "rgba(255, 255, 255, 0.8)" }); // 透明
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
-// 筛选树龄
|
|
|
- // 4️⃣ **更新点位样式**
|
|
|
- highlightAge(selectedFruitType, selectedAge) {
|
|
|
- this.mapPoint.forEach((point) => {
|
|
|
- const { fruitType, age, id } = point.attr;
|
|
|
-
|
|
|
- // if (fruitType !== selectedFruitType) {
|
|
|
- // point.setStyle({ opacity: 0.1 }); // 其他品种点透明
|
|
|
- // } else {
|
|
|
- // point.setStyle({ opacity: 1.0 }); // 选中品种显示
|
|
|
-
|
|
|
- // if (selectedAge) {
|
|
|
- // if (selectedAge === age) {
|
|
|
- // point.setStyle({ color: "rgba(24, 224, 255, 0.6)" }); // 符合树龄的变蓝色
|
|
|
- // } else {
|
|
|
- // point.setStyle({ color: "rgba(255, 255, 255, 0.8)" }); // 不符合树龄的变黑色
|
|
|
- // }
|
|
|
- // } else {
|
|
|
- // point.setStyle({ color: "rgba(255, 255, 255, 0.8)" }); // 还原颜色
|
|
|
- // }
|
|
|
- // }
|
|
|
-
|
|
|
- if (fruitType === selectedFruitType && age === selectedAge) {
|
|
|
- point.setStyle({ color: "rgba(24, 224, 255, 0.6)" }); // 符合树龄的变蓝色
|
|
|
- console.log('ppp', point);
|
|
|
- } else {
|
|
|
- point.setStyle({ color: "rgba(255, 255, 255, 0.8)" }); // 不符合树龄的变黑色
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- // 地图开始移动事件
|
|
|
- cameraMoveStart() {
|
|
|
- let that = this
|
|
|
- this.map.on(mars3d.EventType.cameraMoveStart, () => {
|
|
|
- that.mapNum++
|
|
|
- if (that.mapNum > 1) {
|
|
|
- eventBus.emit('mars3d:cameraMoveStart');
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- //初始化模型
|
|
|
- initModel(coord) {
|
|
|
- //entity方式
|
|
|
- let graphicLayer = new mars3d.layer.GraphicLayer()
|
|
|
- this.map.addLayer(graphicLayer)
|
|
|
- for (let i = 0.001; i < 0.01; i += 0.001) {
|
|
|
- let graphic = new mars3d.graphic.ModelEntity({
|
|
|
- position: [coord[0] + i, coord[1] + i, 70.6],
|
|
|
- clampToGround: true,
|
|
|
- style: {
|
|
|
- url: '/fengche.gltf',
|
|
|
- heading: 0,
|
|
|
- scale: 10,
|
|
|
- minimumPixelSize: 100,
|
|
|
- },
|
|
|
- })
|
|
|
- graphicLayer.addGraphic(graphic)
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- initInfo() {
|
|
|
- let that = this
|
|
|
- this.map.on(mars3d.EventType.click, (event) => {
|
|
|
- // console.log('customProperties',event.graphic?.attr);
|
|
|
- if (event.graphic?.type === 'polygon') {
|
|
|
- // eventBus.emit('map:clickArea')
|
|
|
- return
|
|
|
- }
|
|
|
- eventBus.emit('mars3d:cameraMoveStart');
|
|
|
- let point = mars3d.LngLatPoint.fromCartesian(event.cartesian); //转为经纬度
|
|
|
- console.log(point)
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- // 点位
|
|
|
- addGraphicPoint(coord) {
|
|
|
- let graphicLayer = new mars3d.layer.GraphicLayer()
|
|
|
- this.map.addLayer(graphicLayer)
|
|
|
- const graphic = new mars3d.graphic.BillboardEntity({
|
|
|
- position: [coord[0], coord[1], 100],
|
|
|
- style: {
|
|
|
- image: "/lby-point.png",
|
|
|
- scale: 1,
|
|
|
- horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
|
|
- verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
|
- // label: {
|
|
|
- // text: "果园",
|
|
|
- // font_size: 18,
|
|
|
- // color: "#ffffff",
|
|
|
- // pixelOffsetY: -60,
|
|
|
- // distanceDisplayCondition: true,
|
|
|
- // distanceDisplayCondition_far: 500000,
|
|
|
- // distanceDisplayCondition_near: 0
|
|
|
- // }
|
|
|
- },
|
|
|
- attr: { remark: "示例点击" }
|
|
|
- })
|
|
|
- graphicLayer.addGraphic(graphic)
|
|
|
-
|
|
|
-
|
|
|
- const graphic2 = new mars3d.graphic.BillboardEntity({
|
|
|
- position: [113.746646, 22.970229, 100],
|
|
|
- style: {
|
|
|
- image: "/point-2.png",
|
|
|
- scale: 1,
|
|
|
- horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
|
|
- verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
|
- label: {
|
|
|
- text: "果园",
|
|
|
- font_size: 18,
|
|
|
- color: "#ffffff",
|
|
|
- pixelOffsetY: -60,
|
|
|
- distanceDisplayCondition: true,
|
|
|
- distanceDisplayCondition_far: 500000,
|
|
|
- distanceDisplayCondition_near: 0
|
|
|
- }
|
|
|
- },
|
|
|
- attr: { remark: "示例点击" }
|
|
|
- })
|
|
|
- graphicLayer.addGraphic(graphic2)
|
|
|
-
|
|
|
- this.bindLayerPopup(graphicLayer)
|
|
|
- }
|
|
|
- // 在图层绑定Popup弹窗
|
|
|
- bindLayerPopup(graphicLayer) {
|
|
|
- graphicLayer.bindPopup(function (event) {
|
|
|
- if (event.graphics?.length > 1) {
|
|
|
- return `您单击了重叠图标，该区域有${event.graphics.length}个对象` // 如果存在坐标完全相同的图标点时
|
|
|
- }
|
|
|
-
|
|
|
- const attr = event.graphic.attr || {}
|
|
|
- attr["xxx"] = event.graphic.type
|
|
|
- attr["xxx"] = "绑定的Popup"
|
|
|
- attr["xxxx"] = "xxxxxx"
|
|
|
-
|
|
|
- return mars3d.Util.getTemplateHtml({ title: "xxx果园", template: "all", attr })
|
|
|
- }, { useGraphicPostion: true })
|
|
|
- }
|
|
|
- // 添加模型
|
|
|
- addGardenAndTree(coord) {
|
|
|
- // 创建矢量图层
|
|
|
- let graphicLayer = new mars3d.layer.GraphicLayer()
|
|
|
- this.map.addLayer(graphicLayer)
|
|
|
- // 创建并添加gltf模型实体
|
|
|
- // const graphic = new mars3d.graphic.ModelEntity({
|
|
|
- // name: '示例模型',
|
|
|
- // position: [coord[0], coord[1], 0], // 模型位置
|
|
|
- // style: {
|
|
|
- // url: '/garden.glb', // 模型URL
|
|
|
- // // scale: 20, // 模型缩放比例
|
|
|
- // minimumPixelSize: 50, // 模型最小像素尺寸
|
|
|
- // heading: 90, // 模型朝向
|
|
|
- // // 其他样式参数...
|
|
|
- // },
|
|
|
- // attr: {
|
|
|
- // remark: '示例1' // 自定义属性
|
|
|
- // }
|
|
|
- // });
|
|
|
-
|
|
|
- // 将模型实体添加到图层中
|
|
|
- // graphicLayer.addGraphic(graphic);
|
|
|
- }
|
|
|
-
|
|
|
- // 树🌲
|
|
|
- addDemoGraphic() {
|
|
|
- const graphic = new mars3d.graphic.DivGraphic({
|
|
|
- position: [116.510732, 31.403786, 176.4],
|
|
|
- style: {
|
|
|
- html:`
|
|
|
- <div class="tree-wrap">
|
|
|
- <img class="photo" src="${require('@/assets/img/home/photo-icon.png')}" alt="">
|
|
|
- <img class="tree"src="${require('@/assets/img/home/tree-icon.png')}" alt="">
|
|
|
- <div class="bar">
|
|
|
- <div class="value"></div>
|
|
|
- </div>
|
|
|
- <div class="text-bg">
|
|
|
- 预计还差<span>15</span>天会成熟
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- `,
|
|
|
- offsetY: 100,
|
|
|
- horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
|
|
- verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
|
- scaleByDistance: new Cesium.NearFarScalar(900, 1,4000, 0.1)
|
|
|
- },
|
|
|
- })
|
|
|
- this.graphicLayer.addGraphic(graphic)
|
|
|
- this.map.camera.flyTo({
|
|
|
- destination: Cesium.Cartesian3.fromDegrees(116.510732, 31.403786, 900),
|
|
|
- duration: 3 // 3秒飞行
|
|
|
- });
|
|
|
-
|
|
|
- // 监听 graphic 的点击事件
|
|
|
- graphic.on(mars3d.EventType.click, (event) => {
|
|
|
- const container = graphic._container; // 获取实际的 DOM 容器
|
|
|
- if (container) {
|
|
|
- const textBg = container.querySelector('.photo'); // 获取子元素
|
|
|
- if (textBg) {
|
|
|
- textBg.addEventListener('click', (event) => {
|
|
|
- event.stopPropagation(); // 阻止事件冒泡
|
|
|
- eventBus.emit('map:photo')
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-export default FarmMap;
|
wangsisi