欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

给要素渲染不同的显示色彩

程序员文章站 2022-05-27 22:29:37
在城市规划中,用色彩强调感兴趣的房屋十分重要。 var map = new WebMap({ portalItem:{id:"03a9607d96244883af64c7f8c7e5de1b"} }); var view = new SceneView({ container:"viewDiv", ......

在城市规划中,用色彩强调感兴趣的房屋十分重要。

给要素渲染不同的显示色彩

var map = new webmap({

  portalitem:{id:"03a9607d96244883af64c7f8c7e5de1b"}

});

var view = new sceneview({

  container:"viewdiv",

  map:map

});

var layer = new scenelayer({

  portalitem:{id:"5ecba5273b2d41ff9f6f1eb33f238d18"}

});

map.add(layer);

==============================================

function setsymbol(){

  return {

    type:"unique-value",

    field:"usage",

    defaultsymbol:{

      type:"mesh-3d",

      symbol:{

        type:"fill",

        material:{

          color:[230, 230, 230, 0.7],

          colormixmode:"replace"

        }

      }

    },

    uniquevalueinfos:[{

      value:"general or commerial",

      label:"commerial building",

      symbol:{

        type:"mesh-3d",

        symbollayers:[{

          type:"fill",

          material:{

            color:color,

            colormixmode:colormixmode

          }

        }]

      }

    }]

  }

}

function setrenderer(type){

  if(type === "origin"){

    layer.renderer = null;

  }

  else if (type === "select"){

    layer.renderer = setsymbol(null,null);

  }

  else if(type === "emphasize"){

    layer.renderer = setsymbol("skyblue","tint");

  }

  else{

    var colormixmode = (type === "desaturate")?"tint":"replace";

    layer.renderer = {

      type:"simple",

      symbol:{

        type:"mesh-3d",

        symbollayers:{

          type:"fill",

          material:{color:"white",colormixmode:colormixmode}

        }

      }

    }

  }

}

document.getelementbyid("colormixmode").addeventlistener("change",function(event){

   setrenderer(event.target.id);

});