### 绘制图层
```js
const graphicLayer = new mars3d.layer.GraphicLayer({
zIndex: 1000000000000000000000000,
hasEdit: false,
isAutoEditing: false, // 绘制完成后是否自动激活编辑
// addHeight: 1,
allowDrillPick: false,
})
```
绘制方法
```js
graphicLayer
.startDraw({
type: type,
style: {
color: window.graphic.fullcolor || props.color,
opacity: props.opacity || 0.4,
outlineColor: window.graphic.linecolor || props.outlineColor,
clampToGround: true,
zIndex: 100000,
// height: 1,
// heightReference: Cesium.RELATIVE_TO_GROUND,
fill: true, // 是否填充，仅面数据有效。
fillColor: window.graphic.fullcolor || 'rgba(192,192,192,0.2)',
font_size: 25,
outline: true, // 是否显示边，仅面数据有效
outlineWidth: window.graphic.linewidth || 4,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
visibleDepth: true,
},
})
.then((graphic) => {
if (!active.value) {
graphicLayer.clear()
return
}
if (isContinue) {
graphicLayer.clear()
graphicLayer.addGraphic(graphic)
}
const gra = graphic.toGeoJSON()
let graphicValue = graphic.toGeoJSON()
if (active.value === 'circle') {
var center = [gra.geometry.coordinates[0], gra.geometry.coordinates[1]]
var radius = gra.properties.style.radius / 1000
var options = { steps: 32, units: 'kilometers', properties: { foo: 'bar' } }
var circle = turf.circle(center, radius, options)
graphicValue = circle
} else if (active.value === 'rectangle') {
graphicValue.geometry.coordinates = [
graphic._outlinePositions.map((d) => {
const c = worldToLonlat(marsMap.map.viewer, d)
return [c.lon, c.lat]
}),
]
graphicValue.geometry.type = 'Polygon'
} else if (active.value === 'polygon') {
graphicValue.geometry.coordinates[0] = graphicValue.geometry.coordinates[0].map((d) => {
return [d[0], d[1]]
})
graphicValue.geometry.coordinates[0] = [
...graphicValue.geometry.coordinates[0],
graphicValue.geometry.coordinates[0][0],
]
}
if (props.useValue === 'wkt') {
graphicValue = convertToWK(graphicValue)
}
useEmit(graphicValue)
useChange(false)
if (type === 'point') {
draw(type, true)
}
})
```
### 加载geojson图层
```js
let _layer = new mars3d.layer.GeoJsonLayer({
domId,
id,
data: {
type: 'FeatureCollection',
features: features
},
zIndex,
symbol: {
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
scale: 1,
styleOptions: {
// opacity:transparent ? 0 : (target.transparency ? parseFloat(target.transparency) : 1.0),
// outline:transparent ? false : true,
// outlineStyle: {
// opacity:transparent ? 0 : (target.transparency ? parseFloat(target.transparency) : 1.0),
// color: target.borderColor || '#0d3685',
// width: target.borderWidth ? parseFloat(target.borderWidth) : 1.0,
// },
// point: {
// clampToGround: true
// },
// clampToGround: true,
// // classification: true,
// materialOptions: {
// width: 20,
// height: 20,
// },
// image: undefined,
// color: transparent ? 'transparent' : (target.featureType === 'point' ? undefined : (target.color || '#E3170D')) ,
// fullColor: transparent ? 'transparent' : (target.color || '#E3170D'),
// // color: '#E3170D',
// // fullColor: '#E3170D',
// verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
// scale: 1,
// scaleByDistance: true,
// scaleByDistance_far: 20000,
// scaleByDistance_farValue: 0.5,
// scaleByDistance_near: 1000,
// scaleByDistance_nearValue: 1,
color,
// opacity: 0.4,
outlineColor: borderColor,
clampToGround: true,
fill: true,
fillColor: color,
font_size: 25,
outline: true,
outlineWidth: borderWidth,
horizontalOrigin: 0,
verticalOrigin: 1,
visibleDepth: true,
},
callback: function (attr, styleOpt) {
const { img, opacity } = geoStyle
styleOpt.id = id,
opacity && (styleOpt.opacity = opacity),
styleOpt.width = target.imageWidth ? parseFloat(target.imageWidth) : 3
styleOpt.height = target.imageWidth ? parseFloat(target.imageWidth) : 3
styleOpt.image = img instanceof Function ? img(attr) : img
if (!styleOpt.image && defaultImage) {
styleOpt.image = defaultImage
}
return styleOpt
}
},
// center: { lat: 31.928659, lng: 120.420654, alt: 838, heading: 344, pitch: -42 },
flyTo,
flyToOptions
})问题描述：
绘制GraphicLayer图层的graphic图形全部都在geojson图层之下，会被覆盖
问题的原因以及解决方案：
1.GraphicLayer的graphic的type
与GeoJsonLayer的symbol的type 指定的类型要一样，都是Entity或者都是Primitive类型，并且要加上clampToGround+zIndex共同实现控制层级覆盖等效果
2.GraphicLayer和GeoJsonLayer的graphic的type不一致的时候，需要不同的高度值实现层级控制功能，GraphicLayer在startDraw的时候，支持updateDrawPosition更新绘制坐标。
3.updateDrawPosition绘制的时候更新绘制坐标的用法，参考mars3d官网示例。
链接：
http://mars3d.cn/editor-vue.html?key=ex_7_14_0&id=layer-graphic/draw/draw
const graphic = await graphicLayer.startDraw({
type: "polyline",
style: {
color: clampToGround ? "#ffff00" : "#3388ff",
width: 3,
clampToGround
},
// 绘制时，外部自定义更新坐标,可以自定义处理特殊业务返回修改后的新坐标。
updateDrawPosition: function (position, graphic) {
if (keyDownCode === 67) {
// 按下C键 ,限定在纬度线上
position = updateDrawPosition(position, graphic.lastDrawPoint, 1)
} else if (keyDownCode === 86) {
// 按下V键 ,限定在经度线上
position = updateDrawPosition(position, graphic.lastDrawPoint, 2)
}
return position
}
// 外部自定义校验坐标，return false 时坐标无效，不参与绘制
// validDrawPosition: function (position, graphic) {
// const point = mars3d.LngLatPoint.fromCartesian(position)
// return (point.lng > 115 && point.lng < 117)
// }
})
console.log("完成了draw标绘", graphic)
补充说明：
1.测试过程中发现【geojsonLayer graphicLayer】两个图层之间的矢量对象zIndex失效
2.问题说明：
【zIndex 层级控制】graphicLayer1.startDraw({绘制的矢量层级zIndex失效
GeoJsonLayer的层级是9，graphicLayer的层级是999，且都是贴地的
但是绘制的矩形依然无法遮挡GeoJsonLayer
相关代码：
export function showDraw(isFlyTo) {
removeLayer()
graphicLayer = new mars3d.layer.GeoJsonLayer({
zIndex:9,
name: "标绘示例数据",
data: {
"type": "FeatureCollection",
"layer": {
"id": "M-C91E06B6-AF6F-4DB3-8237-1F036F8F89C9",
"name": ""
},
"features": [
{
"type": "Feature",
"properties": {
"name": "面",
"type": "polygon",
"group": "平面",
"id": "M-CBBFF5D5-AD8E-4116-B2DA-D0510E04D89E",
"styleType": "polygon",
"style": {
"materialType": "Checkerboard",
"repeat": 10,
"color": "#96b825",
"fill": true,
"oddcolor": "#ffffff",
"opacity": 0.6,
"outlineWidth": 1,
"outlineColor": "#ffffff",
"outlineOpacity": 0.6,
"distanceDisplayCondition_far": 100000,
"clampToGround": false,
"diffHeight": 0,
"lineCount": 8,
"lineThickness": 2,
"cellAlpha": 0.1,
"evenColor": "#0079fa",
"oddColor": "#ffffff",
"stRotationDegree": 0,
"outline": false,
"distanceDisplayCondition": false,
"distanceDisplayCondition_near": 0,
"hasShadows": false,
"zIndex": 0
}
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
116.283799,
30.913481,
563.3
],
[
116.298598,
30.916559,
403.9
],
[
116.309554,
30.906019,
366.3
],
[
116.304475,
30.899226,
382.9
],
[
116.29394,
30.894739,
390.5
],
[
116.280348,
30.904161,
427.2
],
[
116.283799,
30.913481,
563.3
],
[
116.283799,
30.913481,
563.3
],
[
116.283799,
30.913481,
563.3
],
[
116.283799,
30.913481,
563.3
],
[
116.283799,
30.913481,
563.3
]
]
]
}
},
{
"type": "Feature",
"properties": {
"name": "矩形",
"type": "rectangle",
"group": "平面",
"id": "M-216307B9-7608-40C8-9B5A-7825C1158631",
"style": {
"height": 585.7,
"materialType": "Grid",
"cellAlpha": 0.42,
"color": "#33ffc5",
"fill": true,
"lineCount": 6,
"lineThickness": 2,
"opacity": 0.6,
"outlineWidth": 1,
"outlineColor": "#ffffff",
"outlineOpacity": 0.6,
"distanceDisplayCondition_far": 100000,
"clampToGround": false,
"diffHeight": 0,
"evenColor": "#000000",
"oddColor": "#ffffff",
"repeat": 2,
"outline": false,
"rotationDegree": 0,
"stRotationDegree": 0,
"distanceDisplayCondition": false,
"distanceDisplayCondition_near": 0,
"hasShadows": false,
"zIndex": 0
}
},
"geometry": {
"type": "LineString",
"coordinates": [
[
116.242439,
30.898129,
585.7
],
[
116.268751,
30.913517,
585.7
]
]
}
},
{
"type": "Feature",
"properties": {
"name": "圆",
"type": "circle",
"group": "平面",
"id": "M-25E68089-ADE4-405D-8067-C4A8DB968017",
"style": {
"height": 657.6,
"materialType": "Stripe",
"repeat": 10,
"radius": 1255.92,
"fill": true,
"color": "#3388ff",
"opacity": 0.6,
"outlineWidth": 1,
"outlineColor": "#ffffff",
"outlineOpacity": 0.6,
"distanceDisplayCondition_far": 100000,
"clampToGround": false,
"diffHeight": 0,
"speed": 10,
"count": 1,
"gradient": 0.1,
"lineCount": 8,
"lineThickness": 2,
"cellAlpha": 0.1,
"evenColor": "#0036bd",
"oddColor": "#ffffff",
"stRotationDegree": 0,
"outline": false,
"rotationDegree": 0,
"distanceDisplayCondition": false,
"distanceDisplayCondition_near": 0,
"hasShadows": false,
"zIndex": 0
}
},
"geometry": {
"type": "Point",
"coordinates": [
116.214796,
30.907629,
657.6
]
}
},
{
"type": "Feature",
"properties": {
"name": "椭圆",
"type": "ellipse",
"group": "平面",
"id": "M-38574A25-923E-4607-9F5A-7675031B9A10",
"style": {
"height": 619.1,
"materialType": "Checkerboard",
"semiMinorAxis": 858.07,
"semiMajorAxis": 1418.01,
"fill": true,
"oddcolor": "#ffffff",
"repeat": 8,
"color": "#3388ff",
"opacity": 0.6,
"outlineWidth": 1,
"outlineColor": "#ffffff",
"outlineOpacity": 0.6,
"distanceDisplayCondition_far": 100000,
"clampToGround": false,
"diffHeight": 0,
"speed": 10,
"count": 1,
"gradient": 0.1,
"lineCount": 8,
"lineThickness": 2,
"cellAlpha": 0.1,
"evenColor": "#18857c",
"oddColor": "#ffffff",
"stRotationDegree": 0,
"outline": false,
"rotationDegree": 0,
"distanceDisplayCondition": false,
"distanceDisplayCondition_near": 0,
"hasShadows": false,
"zIndex": 0
}
},
"geometry": {
"type": "Point",
"coordinates": [
116.411659,
30.903628,
619.1
]
}
},
{
"type": "Feature",
"properties": {
"type": "circle",
"group": "平面",
"id": "M-B227B6BD-6F0B-4856-9E75-7BB183020070",
"name": "",
"style": {
"materialType": "CircleWave",
"count": 2,
"height": 743.4,
"radius": 1800,
"fill": true,
"speed": 10,
"gradient": 0.1,
"color": "#3388ff",
"opacity": 0.6,
"outlineWidth": 1,
"outlineColor": "#ffffff",
"outlineOpacity": 0.6,
"distanceDisplayCondition_far": 100000,
"clampToGround": false
}
},
"geometry": {
"type": "Point",
"coordinates": [
116.284302,
30.837405,
743.4
]
}
},
{
"type": "Feature",
"properties": {
"name": "圆形图片",
"type": "circle",
"group": "平面",
"id": "M-A90F2FC2-5A1E-472A-A99C-D920AD1601A6",
"style": {
"materialType": "Image",
"image": "/img/tietu/leida.jpg",
"opacity": 0.8,
"height": 472.1,
"radius": 1442.92,
"fill": true,
"color": "#3388ff",
"outlineWidth": 1,
"outlineColor": "#ffffff",
"outlineOpacity": 0.6,
"distanceDisplayCondition_far": 100000,
"clampToGround": false
}
},
"geometry": {
"type": "Point",
"coordinates": [
116.172567,
30.90894,
472.1
]
}
},
{
"type": "Feature",
"properties": {
"name": "多边形图片",
"type": "polygon",
"group": "平面",
"id": "M-D6FF4810-D798-49FF-BF99-D342896D9221",
"styleType": "polygon",
"style": {
"materialType": "Image",
"image": "/img/textures/poly-soil.jpg",
"opacity": 1,
"fill": true,
"color": "#3388ff",
"outlineWidth": 1,
"outlineColor": "#ffffff",
"outlineOpacity": 0.6,
"distanceDisplayCondition_far": 100000,
"clampToGround": false
}
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
116.355381,
30.905217,
545
],
[
116.374256,
30.893151,
550.3
],
[
116.386675,
30.911064,
556.4
],
[
116.36443,
30.914996,
540.9
],
[
116.355381,
30.905217,
545
],
[
116.355381,
30.905217,
545
],
[
116.355381,
30.905217,
545
],
[
116.355381,
30.905217,
545
],
[
116.355381,
30.905217,
545
]
]
]
}
},
{
"type": "Feature",
"properties": {
"name": "贴地矩形图片",
"type": "rectangle",
"group": "平面",
"id": "M-83DB5DA2-73A8-438B-AACA-0449606B485A",
"style": {
"image": "/img/tietu/gugong.jpg",
"materialType": "Image",
"fill": true,
"color": "#3388ff",
"opacity": 0.6,
"outlineWidth": 1,
"outlineColor": "#ffffff",
"outlineOpacity": 0.6,
"distanceDisplayCondition_far": 100000,
"height": 0,
"clampToGround": false
}
},
"geometry": {
"type": "LineString",
"coordinates": [
[
116.321299,
30.894268,
0
],
[
116.346701,
30.915492,
0
]
]
}
},
{
"type": "Feature",
"properties": {
"name": "集结地",
"type": "gatheringPlace",
"styleType": "polygon",
"group": "平面",
"id": "M-9330ED0D-4EA5-4B8E-9B9B-BE7B66990BF8",
"style": {
"color": "#00ad8a",
"diffHeight": 0,
"fill": true,
"lineCount": 8,
"lineThickness": 2,
"cellAlpha": 0.1,
"evenColor": "#000000",
"oddColor": "#ffffff",
"repeat": 2,
"opacity": 0.69,
"stRotationDegree": 0,
"outline": false,
"outlineWidth": 1,
"outlineColor": "#ffffff",
"outlineOpacity": 0.6,
"distanceDisplayCondition": false,
"distanceDisplayCondition_far": 100000,
"distanceDisplayCondition_near": 0,
"hasShadows": false,
"zIndex": 0,
"clampToGround": false,
"materialType": "Color"
}
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
116.397607,
30.766435,
662
],
[
116.438842,
30.779146,
665.2
],
[
116.427509,
30.818898,
503
]
]
]
}
},
{
"type": "Feature",
"properties": {
"name": "燕尾直箭头",
"type": "fineArrowYW",
"styleType": "polygon",
"group": "平面",
"id": "M-DE4DD8E3-E719-443C-9FF1-475B7BD9D290",
"style": {
"color": "#fff200",
"diffHeight": 0,
"fill": true,
"lineCount": 8,
"lineThickness": 2,
"cellAlpha": 0.1,
"evenColor": "#000000",
"oddColor": "#ffffff",
"repeat": 2,
"opacity": 0.54,
"stRotationDegree": 0,
"outline": false,
"outlineWidth": 1,
"outlineColor": "#ffffff",
"outlineOpacity": 0.6,
"distanceDisplayCondition": false,
"distanceDisplayCondition_far": 100000,
"distanceDisplayCondition_near": 0,
"hasShadows": false,
"zIndex": 0,
"clampToGround": false,
"materialType": "Color"
}
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
116.335922,
30.678001,
328.2
],
[
116.372386,
30.786478,
419.2
]
]
]
}
},
{
"type": "Feature",
"properties": {
"name": "钳击箭头",
"type": "doubleArrow",
"styleType": "polygon",
"group": "平面",
"id": "M-4492C7B1-F860-4F4B-A30D-3863A83F99C5",
"style": {
"color": "#ff0900",
"diffHeight": 0,
"fill": true,
"lineCount": 8,
"lineThickness": 2,
"cellAlpha": 0.1,
"evenColor": "#000000",
"oddColor": "#ffffff",
"repeat": 2,
"opacity": 0.56,
"stRotationDegree": 0,
"outline": false,
"outlineWidth": 1,
"outlineColor": "#ffffff",
"outlineOpacity": 0.6,
"distanceDisplayCondition": false,
"distanceDisplayCondition_far": 100000,
"distanceDisplayCondition_near": 0,
"hasShadows": false,
"zIndex": 0,
"clampToGround": false,
"materialType": "Color"
}
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
116.14095,
30.758996,
542.8
],
[
116.237801,
30.716212,
194.7
],
[
116.279206,
30.787596,
658.2
],
[
116.242369,
30.798216,
488.6
]
]
]
}
}
]
},
popup: "{type} {name}",
queryParameters: {
token: "mars3d" // 可以传自定义url参数，如token等
},
symbol: {
merge: true,
styleOptions: {
clampToGround: true,
// 高亮时的样式
highlight: {
type: "click",
opacity: 0.9
}
}
},
flyTo: isFlyTo
})
map.addLayer(graphicLayer)
// load事件,必须在load完成前绑定才能监听
graphicLayer.on(mars3d.EventType.load, function (event) {
if (event.layer) {
console.log("数据加载完成", event)
}
})
setTimeout(() => {
// readyPromise是可以load加载数据完成后去获取
graphicLayer.readyPromise.then(function (layer) {
console.log("readyPromise:数据加载完成", layer)
})
}, 5000)
// 单击事件
graphicLayer.on(mars3d.EventType.click, function (event) {
console.log("单击了图层", event)
})
const graphicLayer1 = new mars3d.layer.GraphicLayer(
{
zIndex:999,
popup: "zIndex矩形999最大应该在上面",
}
)
map.addLayer(graphicLayer1)
setTimeout(() => {
alert("zIndex矩形应该在上面，无法单击集结地")
graphicLayer1.startDraw({
type: "rectangle",
style: {
clampToGround:true,
color: "#ffff00",
opacity: 0.6,
outline: true,
outlineWidth: 3,
outlineColor: "#ffffff",
label: {
text: "我是火星科技",
font_size: 18,
color: "#ffffff",
distanceDisplayCondition: true,
distanceDisplayCondition_far: 500000,
distanceDisplayCondition_near: 0
}
}
})
}, 500)
}
此时不知道该如何初始化这个代码，使得同类型（entity/primitive）graphic+贴地的矢量数据的层级zIndex生效
排查思路：
1.看下打印后的矢量对象就知道未贴地，
2. 问题原因：
geojsonLayty在初始化配置了merge: true合并样式后就以数据里面的样式为主；
因此导致参数不生效，依然为false。
clampToGround:true,3.此时的姐姐方案：
可以使用onCreateGraphic 方法去创建对象，具体方法参考示例，
//自定义创建对象，可替代BusineDataLayer、GraphicLayer、GeojsonLayer里面的symbol
onCreateGraphic: function (e) {
const graphic = new mars3d.graphic.BillboardEntity({
position: e.position,
style: {
image: "img/marker/lace-blue.png",
width: 25,
height: 34, // 聚合必须有width、height
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM
},
attr: e.attr
})
graphicLayer.addGraphic(graphic)
},
