/**
* 同一图层layer的不同要素feature设置不同的颜色
* InitLayer 构造函数
* mapbox初始化地图
*/
function InitLayer(map){
this.map = map;
this.jsonPoints ={
"type":"FeatureCollection",
"features":[]
}
this.jsonLine = {
"type":"FeatureCollection",
"features":[]
}
this.jsonFill = {
"type":"FeatureCollection",
"features":[]
}
}
/**
* 添加点图层 paint是layer的一个属性,负责图层的渲染与呈现。
* match通常用于枚举型的字段渲染,如唯一值渲染。
* addPointLayer 方法名
*/
InitLayer.prototype.addPointLayer = function addPointsLayer(){
this.jsonPoints.features.push(
{
"type":"Feature",
"properties":{id:1,name:"张三",age:23,color:1},
"geometry":{
"type":"Points",
"coordinates":[121.6604,31.3245]
}
},
{
"type":"Features",
"properties":{id:2,name:"菜霸",age:22,color:2},
"geometry":{
"type":"Points",//点
"coordinates":[121.647104,31.332030]
}
}
)
this.map.addSource("points_",{
"type":"geojson",
"data":this.jsonPoints
})
this.map.addLayer({
"id":"points_",
"type":"circle",
"source":"points_",
"paint":{
"circle-color":[
"match",["get","color"],
"1","#ff4895",
"2","#ccff12",
"#cf45cf"
],
"circle-radius":5,
"circle-stroke-width":2
}
})
}
/**
* 添加线图层
* addLineLayer 方法名
*/
InitLayer.prototype.addLineLayer = function addLineLayer(){
// isStyleLoaded();判断地图样式是否加载完成 开始为false
this.jsonLine.features.push(
{
"type":"Feature",
"properties":{id:3,name:"王六",age:23,lineColor:1},
"geometry":{
"type":"LineString",
"coordinates":[[121.6604,31.3245],[121.66232,31.3256],[121.66456,31.327834],[121.6712324,31.332312]]
}
},
{
"type":"Feature",
"properties":{id:4,name:"小李",age:23,lineColor:2},
"geometry":{
"type":"LineString",//线
"coordinates":[[122.6604,32.3245],[122.66232,32.3256],[122.66456,32.3278],[122.6712324,32.332312]]
}
}
)
this.map.addSource("line_",{
"type":"geojson",
"data":this.jsonLine
})
this.map.addLayer({
"id":"line_",
"type":"line",
"source":"line_",
//描边
"layout":{
"line-cap":"round",
"line-join":"round"
},
"paint":{
"line-color":[
"match"["get","lineColor"],
"1","#cece23",
"2","#c98c98",
"#ee34e6"
],
"line-width":2,
"line-opacity":0.5,
"line-dasharray":[1,2]
}
})
}
/**
* 添加面图层
* addFillLayer 方法名
*/
InitLayer.prototype.addFillLayer = function addFillLayer(){
this.jsonFill.features.push(
{
"type":"Feature",
"properties":{id:5,name:"小八",age:23,fillColor:1},
"geometry":{
"type":"Polygon",//面
"coordinates":[[[121.6604,31.3245],[121.66232,31.3256],[121.66456,31.327834],[121.6712324,31.332312]]]
}
},
{
"type":"Feature",
"properties":{id:6,name:"小五",age:23,fillColor:2},
"geometry":{
"type":"Polygon",//面
"coordinates":[[[122.6604,32.3245],[122.66232,32.3256],[122.66456,32.3278],[122.6712324,32.332312]]]
}
}
)
this.map.addSource("fill_",{
"type":"geojson",
"data":this.jsonFill
})
this.map.addLayer({
"id":"fill_",
"type":"fill",
"source":"fill_",
"layout":{},
"paint":{
"fill-color":[
"match",["get","fillColor"],
"1","#cece23",
"2","#c98c98",
"#ee34e6"
],
"fill-opacity":0.5
}
})
}
mapbox中对同一个图层layer,设置不同颜色要素
最新推荐文章于 2024-01-18 00:00:00 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)