注册自界说材质实现qgis里不同比例尺下材质不被拉升的效果
远景提要:在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的宽度及材质均是像素参数,通过自界说材质的方法实现以下效果。
高视角下:
https://img-blog.csdnimg.cn/direct/c428d66753684d1d97be00db4c311edd.png
低视角下:
https://img-blog.csdnimg.cn/direct/79320352d138490cb5a98c2c189316c8.png
示例链接:
功能示例(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: [
,
,
],
style: {
width: 10,
clampToGround: true,
// 使用自定义材质
materialType: MianmianType,
materialOptions: {
image: "./img/textures/line-interval.png",
imageW: 74
}
},
flyTo:true
})
graphicLayer.addGraphic(graphic)
} 实现效果:
https://img-blog.csdnimg.cn/direct/a3391cae4ddc4c8d849a9c235ef40bb8.png
https://img-blog.csdnimg.cn/direct/54bbca5c52104484846ae121d4120d9f.png https://img-blog.csdnimg.cn/direct/1def65ed903d4b82b4dc96315780963e.png
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
页:
[1]