前景提要:
在QGIS里的显示效果,用的是示例的/img/textures/line-interval.png材质图片。
下载示例
git clone https://gitee.com/marsgis/mars3d-vue-example.git
相关效果
比如材质是5像素,在1:100000万比例尺下,线显示的长度是5像素,那就用一个材质显示,如果放大到1:10000比例尺,线显示的长度是50像素,那就用10个材质显示,这样材质就不会被拉伸了
polyline的宽度及材质均是像素参数,通过自定义材质的方法实现以下效果。
高视角下:
低视角下:
示例链接:
功能示例(Vue版) | Mars3D三维可视化平台 | 火星科技
实现代码:
function addDemoGraphic11(graphicLayer) {
// 注册自定义材质
const MianmianType = "LineSprite"
mars3d.MaterialUtil.register(MianmianType, {
fabric: {
uniforms: {
image: Cesium.Material.DefaultImageId,
imageW: 10
},
source: `
in float v_polylineAngle;
mat2 rotate(float rad) {
float c = cos(rad);
float s = sin(rad);
return mat2(
c, s,
-s, c
);
}
czm_material czm_getMaterial(czm_materialInput materialInput)
{
czm_material material = czm_getDefaultMaterial(materialInput);
vec2 st = materialInput.st;
vec2 pos = rotate(v_polylineAngle) * gl_FragCoord.xy;
float s = pos.x / (imageW * czm_pixelRatio);
float t = st.t;
vec4 colorImage = texture(image, vec2(fract(s), t));
material.diffuse = colorImage.rgb;
return material;
}`
},
translucent: true
})
const graphic = new mars3d.graphic.PolylinePrimitive({
positions: [
[116.295277, 30.98],
[116.295277, 31],
[116.4, 31]
],
style: {
width: 10,
clampToGround: true,
// 使用自定义材质
materialType: MianmianType,
materialOptions: {
image: "./img/textures/line-interval.png",
imageW: 74
}
},
flyTo:true
})
graphicLayer.addGraphic(graphic)
}
实现效果: