38 mars3d 对接地图图层 绘制点线面员

前言

这里主要是展示一下 mars3d 的一个基础的使用 

主要是设计 接入地图服务器的 卫星地图, 普通的二维地图, 增加地区标记 

基础绘制 点线面园 等等

测试用例

<template><div style="width: 1920px; height:1080px;"><div class="mars3dClass" id="mars3dClass"></div></div></template><script>import * as mars3d from "mars3d";const Cesium = mars3d.Cesium;export default {name: "mars3dMapUsage",components: {},props: {},data() {return {map: null,tdtImgLayer: null,labelLayer: null,overlay: null,mapOptions:{scene: {center: {"lat":31.376588,"lng":104.803391,"alt":539.5,"heading":273.6,"pitch":-40.1}},basemaps:[{type:'group',layers:[{name:'3dtiles地图',type:'xyz',url:'/terrainresource/scmf_0to19/{z}/{x}/{y}.png',}],show:true},]},};},computed: {},watch: {},created() {},mounted() {this.initMap()// this.test01AddBoundsLayer()// this.test02AddDtImageLayer()// this.test03AddDtTDLayer()// this.test04AddDtLabelLayer()this.test11AddTerrainLayer()// this.test05AddImageLayer()// this.test06AddCircleLayer([104.065735, 30.759462])// this.test06AddCircleLayer([104.065735, 30.559462], "red")// this.test07AddBoxLayer()// this.test08AddCylinderLayer()// this.test09AddPolylineVolumeLayer()},methods: {initMap() {this.map = new mars3d.Map("mars3dClass")this.map.setCameraView({lng: 104.065735, lat: 30.659462, alt: 44160})},test01AddBoundsLayer() {},test02AddDtImageLayer() {const tdtImgLayer = new mars3d.layer.TdtLayer({url: "/tianditu/servlet/GoogleSatelliteMap?x={x}&y={y}&z={z}",zIndex: 1,crs: mars3d.CRS.EPSG4490});this.map.addLayer(tdtImgLayer);},test03AddDtTDLayer() {const tdtImgLayer = new mars3d.layer.TdtLayer({url: "/tianditu/servlet/GoogleTDMap?x={x}&y={y}&z={z}",zIndex: 1,crs: mars3d.CRS.EPSG4490});this.map.addLayer(tdtImgLayer);},test04AddDtLabelLayer() {const labelLayer = new mars3d.layer.TdtLayer({url: "/tianditu/servlet/GoogleTransparentMap?x={x}&y={y}&z={z}",zIndex: 1,crs: mars3d.CRS.EPSG4490});this.map.addLayer(labelLayer);},test05AddImageLayer() {const graphicLayer = new mars3d.layer.GraphicLayer({zIndex: 20});this.map.addLayer(graphicLayer);const graphic = new mars3d.graphic.BillboardEntity({name: "贴地图标",position: [104.065735, 30.659462, 1000],style: {image: "/img/theme/desktop/17.jpg",scale: 1,horizontalOrigin: mars3d.Cesium.HorizontalOrigin.CENTER,verticalOrigin: mars3d.Cesium.VerticalOrigin.BOTTOM,clampToGround: true,},attr: {remark: "示例3"},});graphicLayer.addGraphic(graphic);},test06AddCircleLayer(coord, color) {const graphicLayer = new mars3d.layer.GraphicLayer({zIndex: 20});this.map.addLayer(graphicLayer);const graphic = new mars3d.graphic.CircleEntity({position: [coord[0], coord[1], 1000],style: {radius: 1800.0,color: color,opacity: 1,outline: true,outlineWidth: 3,outlineColor: color,clampToGround: true,},popup: "直接传参的popup",attr: { remark: "示例6" },});graphicLayer.addGraphic(graphic);},test07AddBoxLayer() {const graphicLayer = new mars3d.layer.GraphicLayer({zIndex: 20});this.map.addLayer(graphicLayer);const graphic = new mars3d.graphic.BoxEntity({position: new mars3d.LngLatPoint(104.165735, 30.759462, 1000),style: {dimensions: new Cesium.Cartesian3(2000.0, 2000.0, 2000.0),fill: true,color: "#00ffff",opacity: 0.9,heading: 45,roll: 45,pitch: 0,},attr: { remark: "示例5" },});graphicLayer.addGraphic(graphic);},test08AddCylinderLayer() {const graphicLayer = new mars3d.layer.GraphicLayer({zIndex: 20});this.map.addLayer(graphicLayer);const graphic = new mars3d.graphic.CylinderEntity({position: [104.265735, 30.759462, 1000],style: {length: 3000.0,topRadius: 0.0,bottomRadius: 1300.0,color: "#00FFFF",opacity: 0.7,},popup: "直接传参的popup",attr: { remark: "示例7" },});graphicLayer.addGraphic(graphic);},test09AddPolylineVolumeLayer() {const graphicLayer = new mars3d.layer.GraphicLayer({zIndex: 20});this.map.addLayer(graphicLayer);const graphic = new mars3d.graphic.PolylineVolumeEntity({positions: [[103.965735, 30.759462, 1000],[103.975735, 30.81, 1000],[103.985735, 30.79, 1000],],style: {shape: "pipeline",radius: 80,color: "#3388ff",opacity: 0.9,},attr: { remark: "示例11" },});graphicLayer.addGraphic(graphic);},test10SetCenter(coord, color) {this.map.setCameraView(coord);},test11AddTerrainLayer() {this.map.setCameraView({lng: 104.803391, lat: 31.376588, alt: 539.5,heading:273.6,pitch:-40.1});const layer = new mars3d.layer.XyzLayer({url: "/terrainresource/xxx/{z}/{x}/{y}.png",zIndex: 1,});this.map.addLayer(layer);}}};
</script><style lang="scss">.mars3dMapUsageClass {}.overdelay1 {position: absolute;border: 1px greenyellow solid;width: 200px;height: 50px;}
</style>

绘制卫星地图 + 地图标注

执行效果如下 

二维地图 + 地图标注

执行效果如下 

绘制点线面园 

执行效果如下 

卫星地图 + 地图标注 + 点线面园 

执行效果如下 

地形资源页面

执行效果如下 

完