devbox
小蓝xlanll
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue3 mars3d 天地图_mars3d绘制结束经纬度

作者：小蓝xlanll | 2024-06-08 00:06:32

赞

踩

mars3d绘制结束经纬度

准备工作：

        安装mars3d依赖：

                npm i mars3d 

                npm i mars3d-heatmap （热力图，需要的话安装）

                npm i -D copy-webpack-plugin

                增加mars3d目录配置，修改vue.config.js中configureWebpack里的内容如下：

  1. const CopyWebpackPlugin = require("copy-webpack-plugin");
  2. const cesiumSourcePath = "node_modules/mars3d-cesium/Build/Cesium/"; // cesium库安装目录
  3. const cesiumRunPath = "./mars3d-cesium/"; // cesium运行时路径
  4. const timeStamp = Date.now()
  5. module.exports = {
  6.     configureWebpack: (config) => {
  7.     const plugins = [
  8.       // 标识cesium资源所在的主目录，cesium内部资源加载、多线程等处理时需要用到
  9.       new webpack.DefinePlugin({
  10.         CESIUM_BASE_URL: JSON.stringify(path.join(config.output.publicPath, cesiumRunPath))
  11.       }),
  12.       // Cesium相关资源目录需要拷贝到系统目录下面（部分CopyWebpackPlugin版本的语法可能没有patterns）
  13.       new CopyWebpackPlugin([
  14.           { from: path.join(cesiumSourcePath, 'Workers'), to: path.join(config.output.path, cesiumRunPath, 'Workers') },
  15.           { from: path.join(cesiumSourcePath, 'Assets'), to: path.join(config.output.path, cesiumRunPath, 'Assets') },
  16.           { from: path.join(cesiumSourcePath, 'ThirdParty'), to: path.join(config.output.path, cesiumRunPath, 'ThirdParty') },
  17.           { from: path.join(cesiumSourcePath, 'Widgets'), to: path.join(config.output.path, cesiumRunPath, 'Widgets') }
  18.       ])
  19.     ]
  20.  
  21.     if (process.env.NODE_ENV === "production") {
  22.       plugins.push(
  23.         new UglifyJSPlugin({
  24.           uglifyOptions: {
  25.             //删除注释
  26.             output: {comments: false},
  27.             warnings: false,
  28.             //删除console 和 debugger  删除警告
  29.             compress: {
  30.               drop_debugger: true,
  31.               drop_console: true
  32.             }
  33.           },
  34.           cache: true, // 启用文件缓存
  35.           sourceMap: false,//不生成调试文件
  36.           parallel: true // 使用多进程并行运行来提高构建速度
  37.         })
  38.       );
  39.     }
  40.     config.plugins = [...config.plugins, ...plugins]
  41.     //给打包的文件名加上时间戳，防止浏览器缓存
  42.  
  43.     config.output.filename = `js/[name].${timeStamp}.js`
  44.     config.output.chunkFilename = `js/[name].${timeStamp}.js`
  45.  
  46.     return {
  47.       module: { unknownContextCritical: false }, // 配置加载的模块类型，cesium时必须配置
  48.       plugins: plugins
  49.     }
  50.   },
  51.   //...其它配置
  52. }

组件页：

  1. <template>
  2.   <div class="r-map-3d">
  3.     <div class="map-box" :id="mapId"></div>
  4.   </div>
  5. </template>
  6. <script setup>
  7. import {defineEmits, defineProps, onMounted, reactive, ref} from 'vue'
  8. import mars3D from '@/plugins/mars3d/mapController'
  9.  
  10. const props = defineProps({
  11.   //中心点
  12.   center: {
  13.     type: Array,
  14.     default: () => [0, 0]
  15.   }
  16. })
  17. const emit = defineEmits(['onLoad']);
  18. const mapId = ref(`map_${Date.now()}`)
  19.  
  20. const data = reactive({
  21.   map: null,
  22. })
  23.  
  24. onMounted(() => {
  25.   data.map = new mars3D(mapId.value, props.center)
  26.   emit('onLoad', data.map)
  27. })
  28. </script>
  29. <style scoped lang="scss">
  30. .r-map-3d {
  31.   width: 100%;
  32.   height: 100%;
  33.  
  34.   .map-box {
  35.     height: 100%;
  36.     width: 100%;
  37.   }
  38. }
  39. </style>

mapController.js：(地图操作类)

  1. import {mapUrl, mapAk} from "@/config/baseURL";
  2. //引入cesium基础库
  3. import "mars3d-cesium/Build/Cesium/Widgets/widgets.css";
  4. import * as Cesium from "mars3d-cesium";
  5. //导入mars3d主库
  6. import "mars3d/dist/mars3d.css";
  7. import * as mars3d from "mars3d";
  8. import "mars3d-heatmap"
  9.  
  10. export default class MapController {
  11.     constructor(mapId) {
  12.         this.ak = mapAk
  13.         this.mapId = mapId
  14.  
  15.         /** 地图实例 */
  16.         this.instance = null
  17.  
  18.         this.initMap()
  19.     }
  20.  
  21.     /**
  22.      * 创建天地图层
  23.      * @param name 描述
  24.      * @auth Roffer
  25.      * @date 2022/9/29 15:50
  26.      *
  27.      */
  28.     initMap() {
  29.         // 需要覆盖config.json中地图属性参数（当前示例框架中自动处理合并）
  30.         //option相关设置：http://mars3d.cn/apidoc.html#Map
  31.         const mapOptions = {
  32.             //scene相关设置：http://mars3d.cn/api/Map.html#.sceneOptions
  33.             scene: {
  34.                 center: {lat: 29.068075, lng: 103.966252, alt: 82849.5, heading: 358.9, pitch: -28.4},
  35.                 showSkyAtmosphere: false,
  36.                 backgroundColor: '#000',
  37.                 contextOptions: {
  38.                     webgl: {
  39.                         //通过canvas.toDataURL()实现截图需要将该项设置为true
  40.                         preserveDrawingBuffer: true
  41.                     }
  42.                 },
  43.                 cameraController: {
  44.                     //相机最近视距，变焦时相机位置的最小量级（以米为单位），默认为1。该值是相机与地表(含地形)的相对距离。默认1.0
  45.                     minimumZoomDistance: 1,
  46.                     //相机最远视距，变焦时相机位置的最大值（以米为单位）。该值是相机与地表(含地形)的相对距离。默认50000000.0
  47.                     maximumZoomDistance: 200000
  48.                 },
  49.                 globe: {
  50.                     show: true,//是否显示地球
  51.                 }
  52.             },
  53.             // control: {
  54.             //     locationBar: {
  55.             //         fps: true,//是否显示实时FPS帧率
  56.             //         navigationHelpButton: true
  57.             //     }
  58.             // },
  59.         }
  60.  
  61.         this.instance = new mars3d.Map(this.mapId, mapOptions); //支持的参数请看API文档：http://mars3d.cn/api/Map.html
  62.         this.instance.basemap = 2017 // 蓝色底图
  63.         const mapLayer = mars3d.LayerUtil.create({
  64.             type: "wmts",
  65.             url: mapUrl,
  66.             //wmts服务元数据中指定的layer值
  67.             format: "image/png",
  68.             layer: "defaultLayer",
  69.             style: "default",
  70.             //跨域支持，在使用html2canvas截屏的时候，如果不设置该属性，会截不到地图内容
  71.             crossOrigin: 'Anonymous',
  72.             tileMatrixSetID: "GetTileMatrix",
  73.             minimumLevel: 3,
  74.             maximumLevel: 17,
  75.             minimumTerrainLevel: 1,
  76.             maximumTerrainLevel: 25,
  77.             zIndex: 2,
  78.             crs: "EPSG4490",
  79.             chinaCRS: "WGS84",
  80.             tileWidth: 256,
  81.             tileHeight: 256,
  82.             name: "影像",
  83.             extent: {
  84.                 xmin: 96.8064823,
  85.                 ymin: 25.68096106,
  86.                 xmax: 109.1252279,
  87.                 ymax: 34.75215408
  88.             }
  89.         })
  90.  
  91.         this.instance.addLayer(mapLayer)
  92.  
  93.         //获取右键菜单绘制完成数据
  94.         this.instance.on(mars3d.EventType.drawCreated, (e) => {
  95.             console.log(JSON.stringify(e.graphic));
  96.         })
  97.     }
  98.  
  99.     /**
  100.      * 区域标记
  101.      * @param areaCode 区域编码
  102.      * @param filter 透明度，默认不透明，值范围：0～1
  103.      * @param popupState 点击地图popup显隐
  104.      * @auth Roffer
  105.      * @date 2022/11/10 19:03
  106.      *
  107.      */
  108.     addAreaLayer(areaCode = '510100000000', filter = 1, styleCback,popupState=true) {
  109.         const geoJsonLayer = new mars3d.layer.GeoJsonLayer({
  110.             name: "成都市",
  111.             url: `/json/5101/${areaCode}.json`,
  112.             allowDrillPick: true,
  113.             symbol: {
  114.                 type: "polygon",
  115.                 styleOptions: {
  116.                     materialType: mars3d.MaterialType.PolyGradient, // 重要参数，指定材质
  117.                     // materialType: mars3d.MaterialType.Stripe, // 重要参数，指定材质
  118.                     materialOptions: {
  119.                         color: "#3388cc",
  120.                         opacity: 0.7,
  121.                         alphaPower: 1.3
  122.                     },
  123.                     // 面中心点，显示文字的配置
  124.                     label: {
  125.                         text: "{name}", // 对应的属性名称
  126.                         opacity: 1,
  127.                         font_size: 18,
  128.                         color: "#fff",
  129.                         font_family: "宋体",
  130.                         outline: false,
  131.                         scaleByDistance: true,
  132.                         scaleByDistance_far: 20000000,
  133.                         scaleByDistance_farValue: 0.1,
  134.                         scaleByDistance_near: 1000,
  135.                         scaleByDistance_nearValue: 1
  136.                     }
  137.                 },
  138.                 callback: styleCback ? styleCback : function (attr, styleOpt) {
  139.                     const randomHeight = (attr.childrenNum || 1) * 600 // 测试的高度
  140.                     return {
  141.                         materialOptions: {
  142.                             color: attr.fill,
  143.                             alphaPower: filter
  144.                             // color: getColor()
  145.                         },
  146.                         height: 20,
  147.                         diffHeight: randomHeight
  148.                     }
  149.                 }
  150.             },
  151.             popup:popupState ? "{name}" : false
  152.         })
  153.         this.instance.addLayer(geoJsonLayer)
  154.  
  155.         const arrColor = ["rgb(15,176,255)", "rgb(18,76,154)", "#40C4E4", "#42B2BE", "rgb(51,176,204)", "#8CB7E5", "rgb(0,244,188)", "#139FF0"]
  156.  
  157.         let index = 0
  158.  
  159.         function getColor() {
  160.             return arrColor[++index % arrColor.length]
  161.         }
  162.  
  163.         return geoJsonLayer
  164.     }
  165.  
  166.     /**
  167.      * 添加自定义多边形
  168.      * @param geoJson geoJson数据
  169.      * @param color 多边形颜色
  170.      * @auth Roffer
  171.      * @date 2022/12/8 11:01
  172.      *
  173.      */
  174.     addCustomLayer({pointList, color, text, popup, popupOptions, tooltip, tooltipOptions}) {
  175.         const graphicLayer = this.genGraphicLayer()
  176.         const graphic = new mars3d.graphic.PolygonEntity({
  177.             positions: pointList,
  178.             style: {
  179.                 color,
  180.                 opacity: 0.5,
  181.                 outline: false,
  182.                 outlineWidth: 3,
  183.                 outlineColor: "#ffffff",
  184.                 highlight: {
  185.                     opacity: 0.8
  186.                 },
  187.                 label: {
  188.                     show: false,
  189.                     text,
  190.                     font_size: 12,
  191.                     color: "#ffffff",
  192.                     distanceDisplayCondition: true,
  193.                     distanceDisplayCondition_far: 500000,
  194.                     distanceDisplayCondition_near: 0
  195.                 }
  196.             },
  197.             popup,
  198.             popupOptions,
  199.             tooltip,
  200.             tooltipOptions
  201.         })
  202.  
  203.         graphicLayer.addGraphic(graphic)
  204.         this.instance.addLayer(graphicLayer)
  205.  
  206.         return graphicLayer
  207.     }
  208.  
  209.     /**
  210.      * 添加一个自定义标注层
  211.      * @auth Roffer
  212.      * @date 2022/11/11 14:19
  213.      *
  214.      */
  215.     genGraphicLayer() {
  216.         let graphicLayer = new mars3d.layer.GraphicLayer()
  217.         this.instance.addLayer(graphicLayer)
  218.         return graphicLayer
  219.     }
  220.  
  221.     /**
  222.      * 添加自定义html标记点,适用于小于100条数据
  223.      * @param point 经纬度,示例：[123.1,22.444]
  224.      * @param html 要显示的html内容
  225.      * @param popup 自定义详细信息（String,Array,function）
  226.      * @param popupOptions 自定义详细信息参数设置（Object）详情：http://mars3d.cn/api/Popup.html#.StyleOptions
  227.      * @param tooltip 自定义鼠标悬浮提示信息（String,Array,function）
  228.      * @param tooltipOptions 自定义鼠标悬浮提示信息参数设置（Object）详情：http://mars3d.cn/api/Tooltip.html#.StyleOptions
  229.      * @param attr 附加自定义属性（可在点击时，通过e.target.attr获取）
  230.      * @param click 点击回调函数（返回点击的对象）
  231.      * @param style Object，覆盖style对象中的属性值
  232.      * @auth Roffer
  233.      * @date 2022/10/22 14:55
  234.      *
  235.      */
  236.     addDivLayer({point, html, popup, popupOptions, tooltip, tooltipOptions, attr, click, style}, graphicLayer) {
  237.         const graphic = new mars3d.graphic.DivGraphic({
  238.             position: new mars3d.LngLatPoint(point[0], point[1], 915),
  239.             style: {
  240.                 html,
  241.                 horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
  242.                 verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
  243.                 clampToGround: true,
  244.                 offsetX: -20,
  245.                 offsetY: -30,
  246.                 ...style
  247.             },
  248.             attr,
  249.             popup,
  250.             popupOptions,
  251.             tooltip,
  252.             tooltipOptions,
  253.             eventParent: false,//不冒泡事件
  254.         })
  255.         graphicLayer.addGraphic(graphic)
  256.  
  257.         click && graphic.on(mars3d.EventType.click, click)
  258.  
  259.         return graphicLayer
  260.     }
  261.  
  262.     /**
  263.      * 批量添加html标标注
  264.      * @param list 数据，
  265.      *         格式为：
  266.      *              [{
  267.      *                  point:[103.111,30.123],html:'<div>xxx</div>',attr:{},click:()=>{}
  268.      *              },...]
  269.      * @auth Roffer
  270.      * @date 2022/11/11 14:00
  271.      *
  272.      */
  273.     batchAddDivLayer(list = []) {
  274.         // 创建矢量数据图层
  275.         let graphicLayer = this.genGraphicLayer()
  276.  
  277.         list.forEach(item => {
  278.             this.addDivLayer(item, graphicLayer)
  279.         })
  280.  
  281.         return graphicLayer
  282.     }
  283.  
  284.     /**
  285.      * 获取当前屏幕边界坐标
  286.      * @auth Roffer
  287.      * @date 2022/11/21 15:37
  288.      *
  289.      */
  290.     getScreenXY() {
  291.         //屏幕边界坐标
  292.         let info = this.instance.viewer.camera.computeViewRectangle()
  293.         info.east = Cesium.Math.toDegrees(info.east)
  294.         info.north = Cesium.Math.toDegrees(info.north)
  295.         info.south = Cesium.Math.toDegrees(info.south)
  296.         info.west = Cesium.Math.toDegrees(info.west)
  297.         // east 104.58916517174933
  298.         // north 30.8081617249502
  299.         // south 30.48271217718593
  300.         // west 103.95342383654778
  301.         return info
  302.     }
  303.  
  304.     /**
  305.      * 添加自定义标记点
  306.      * @param data 参数对象，包含以下：
  307.      *              url 请求数据的接口地址(url、data二选一)
  308.      *              dataColumn data字段key(url时指定)
  309.      *              data 请求数据的接口地址(url、data二选一)
  310.      *              lngColumn 经纬字段key
  311.      *              latColumn 纬纬字段key
  312.      *              altColumn 高度字段key
  313.      *              positionIconImg 显示的图标图片
  314.      *              showGroup 是否显示聚合分组数据，默认true显示
  315.      *              text 显示的名称字段key
  316.      * @param popup 详细信息对象
  317.      *          key:对象中的key值
  318.      *          item[key]:显示的名称 eg:{name:'名称'}
  319.      * @auth Roffer
  320.      * @date 2022/10/22 14:55
  321.      *
  322.      */
  323.     addBusineDataLayer(data, popup) {
  324.         let option = {
  325.             showGroup: true,
  326.             ...data
  327.         }
  328.         // 创建矢量数据图层（业务数据图层）
  329.         let busineDataLayer = new mars3d.layer.BusineDataLayer({
  330.             ...option,
  331.             symbol: {
  332.                 type: "billboard", // 对应是 mars3d.graphic.BillboardEntity
  333.                 styleOptions: {
  334.                     image: option.positionIconImg,
  335.                     horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
  336.                     verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
  337.                     scaleByDistance: new Cesium.NearFarScalar(1000, 0.7, 5000000, 0.3),
  338.                     visibleDepth: false,
  339.                     // label: {
  340.                     //     text: `{${data.text || 'text'}}`,
  341.                     //     font_size: 13,
  342.                     //     color: Cesium.Color.AZURE,
  343.                     //     outline: true,
  344.                     //     outlineColor: Cesium.Color.BLACK,
  345.                     //     outlineWidth: 2,
  346.                     //     horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
  347.                     //     verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
  348.                     //     pixelOffset: new Cesium.Cartesian2(10, 0), // 偏移量
  349.                     //     distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 80000)
  350.                     // }
  351.                 }
  352.             },
  353.             // 点的聚合配置
  354.             clustering: {
  355.                 enabled: option.showGroup,
  356.                 pixelRange: 20,
  357.                 clampToGround: false,
  358.                 opacity: 1,
  359.                 // getImage: function (count) {   //getImage是完全自定义方式
  360.                 //   let colorIn
  361.                 //   if (count < 10) {
  362.                 //     colorIn = 'rgba(110, 204, 57, 0.6)'
  363.                 //   } else if (count < 100) {
  364.                 //     colorIn = 'rgba(240, 194, 12,  0.6)'
  365.                 //   } else {
  366.                 //     colorIn = 'rgba(241, 128, 23,  0.6)'
  367.                 //   }
  368.                 //   return mars3d.Util.getCircleImage(count, {
  369.                 //     color: colorIn,
  370.                 //     radius: 30,
  371.                 //   })
  372.                 // },
  373.             }
  374.         })
  375.  
  376.         this.instance.addLayer(busineDataLayer)
  377.  
  378.         //包含详情
  379.         if (popup) {
  380.             //详细信息弹窗
  381.             busineDataLayer.bindPopup(function (event) {
  382.                 const item = event.graphic?.attr
  383.                 if (!item) {
  384.                     return false
  385.                 }
  386.                 const tabData = [
  387.                     `<table style="width: auto;">
  388.                     <tr><th scope="col" colspan="2" style="text-align:center;font-size:15px;">${item[option.text]}</th></tr>`
  389.                 ]
  390.                 for (let key in popup) {
  391.                     tabData.push(`<tr>`)
  392.                     tabData.push(`<td>${popup[key]}</td><td>${item[key]}</td>`)
  393.                     tabData.push(`</tr>`)
  394.                 }
  395.                 tabData.push('</table>')
  396.                 return tabData.join('')
  397.             })
  398.  
  399.             busineDataLayer.bindTooltip(function (event) {
  400.                 const item = event.graphic?.attr
  401.                 if (!item) {
  402.                     return false
  403.                 }
  404.                 const tabData = [
  405.                     `<table style="width: auto;">
  406.                     <tr><th scope="col" colspan="2" style="text-align:center;font-size:15px;">${item[option.text]}</th></tr>`
  407.                 ]
  408.                 for (let key in popup) {
  409.                     tabData.push(`<tr>`)
  410.                     tabData.push(`<td>${popup[key]}</td><td>${item[key]}</td>`)
  411.                     tabData.push(`</tr>`)
  412.                 }
  413.                 tabData.push('</table>')
  414.                 return tabData.join('')
  415.             })
  416.         }
  417.  
  418.         // 单击事件
  419.         busineDataLayer.on(mars3d.EventType.click, (event) => {
  420.             if (this.instance.camera.positionCartographic.height > 1000) {
  421.                 const graphic = event.graphic
  422.                 if (graphic) {
  423.                     // 单击了具体的点对象
  424.                     // graphic.closePopup()
  425.  
  426.                     const position = graphic.positionShow
  427.                     this.instance.flyToPoint(position, {
  428.                         radius: 1000, // 距离目标点的距离
  429.                         duration: 3,
  430.                         complete: function (e) {
  431.                             // 飞行完成回调方法
  432.                             // graphic.openPopup()
  433.                         }
  434.                     })
  435.                 } else {
  436.                     // 单击了聚合的点
  437.                     const arrEntity = event.pickedObject.id
  438.                     this.instance.flyTo(arrEntity)
  439.                 }
  440.             }
  441.         })
  442.  
  443.         return busineDataLayer
  444.     }
  445.  
  446.     /**
  447.      * 两点连线(弧线)
  448.      * @param startPoint 起始经纬度
  449.      * @param endPoint 结束经纬度
  450.      * @param attr 显示的信息对象(object，key、value格式)
  451.      * @param popup 点击时显示的信息
  452.      * @param popupOptions 点击时显示的信息参数设置对象，如可以设置偏移量{offsetX:-10,offsetY:-10},更多参数：http://mars3d.cn/api/Popup.html#.StyleOptions
  453.      * @param tooltip hover时显示的信息
  454.      * @param tooltipOptions hover时显示的信息参数设置对象，如可以设置偏移量{offsetX:-10,offsetY:-10},更多参数：http://mars3d.cn/api/Tooltip.html#.StyleOptions
  455.      * @param lineColor 线条的颜色（默认：#1a9850）
  456.      * @auth Roffer
  457.      * @date 2022/12/3 11:04
  458.      *
  459.      */
  460.     addArc({startPoint, endPoint, attr, popup, popupOptions, tooltip, tooltipOptions, lineColor}, graphicLayer) {
  461.         graphicLayer = graphicLayer || this.genGraphicLayer()
  462.         const start = Cesium.Cartesian3.fromDegrees(...startPoint, 42.31)
  463.         const end = Cesium.Cartesian3.fromDegrees(...endPoint, 37.53)
  464.         const positions = mars3d.PolyUtil.getLinkedPointList(start, end, 20000, 50) // 计算曲线点
  465.  
  466.         const graphic = new mars3d.graphic.PolylineEntity({
  467.             positions: positions,
  468.             style: {
  469.                 width: 10,
  470.                 // 动画线材质
  471.                 materialType: mars3d.MaterialType.LineFlow,
  472.                 materialOptions: {
  473.                     image: require('@/assets/img/map_icon/line-arrow-blue.png'),
  474.                     color: lineColor || '#1a9850',
  475.                     mixt: false,
  476.                     speed: 20,
  477.                     repeat: new Cesium.Cartesian2(5, 1)
  478.                 }
  479.             },
  480.             attr,
  481.             popup,
  482.             popupOptions,
  483.             tooltip,
  484.             tooltipOptions
  485.         })
  486.         graphicLayer.addGraphic(graphic)
  487.  
  488.         return graphicLayer
  489.     }
  490.  
  491.     /**
  492.      * 热力图
  493.      * @param pointData 经纬度数组 [{lng:123,lat:456},...]
  494.      * @auth Roffer
  495.      * @date 2022/11/11 14:58
  496.      *
  497.      */
  498.     addHeatLayer(pointData) {
  499.         // 热力图 图层
  500.         let heatLayer = new mars3d.layer.HeatLayer({
  501.             positions: pointData,
  502.             // rectangle: rectangle,
  503.             // 以下为热力图本身的样式参数，可参阅api：https://www.patrick-wied.at/static/heatmapjs/docs.html
  504.             heatStyle: {
  505.                 radius: 40,
  506.                 blur: 0.85
  507.             },
  508.             // 以下为矩形矢量对象的样式参数
  509.             style: {
  510.                 arc: true, // 是否为曲面
  511.                 height: 100.0,
  512.                 opacity: 0.6,
  513.                 // classificationType: Cesium.ClassificationType.CESIUM_3D_TILE,
  514.                 // clampToGround: true
  515.             }
  516.         })
  517.  
  518.         this.instance.addLayer(heatLayer)
  519.  
  520.         return heatLayer
  521.     }
  522.  
  523.     /**
  524.      * 删除layer
  525.      * @param layer layer对象
  526.      * @auth Roffer
  527.      * @date 2022/11/11 14:26
  528.      *
  529.      */
  530.     removeLayer(layer) {
  531.         this.instance.removeLayer(layer)
  532.     }
  533. }

 使用：

<r-map-3d @onLoad="mapLoad"/>

  1. <script setup>
  2. let map = null//地图实例
  3. let areaLayer = null//图层的操作最好不要定义在vue3的响应式对象中，否则会引起页面卡顿
  4. /** 地图加载完成 */
  5. const mapLoad = (instance) => {
  6.   map = instance
  7.   areaLayer = map.addAreaLayer('510100000000')
  8. }
  9. </script>

最后附上天地图mapUrl地址：

  1. export const mapAk = 'xxxx'//请自行去官方申请
  2. //浅色底图
  3. // export const mapUrl = `http://www.scgis.net/services/newtianditudlg/WMTS?ak=${mapAk}`
  4. //暗色底图
  5. export const mapUrl = `http://www.scgis.net/services/tdtdarkmap/WMTS?ak=${mapAk}`

 省市区地图json数据，请移步到https://geojson.cn/ 根据业务需求下载对应的json数据

mars3d官网 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/687614
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号