远景提要:
在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)
- }
复制代码 实现效果:
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。 |