一:需求点:对数动力道路,车辆,人流道路,载能分析道路等等
道路渐变色属性支持:mapBox(支持),mineMap(3.0支持,目前我们内部使用);官网提供的为mineMap2.0(不支持),传统瓦片地图(不支持)
解决对象:
1.使用传统道路绘制方式,绘制道路的地图。
2.mineMap2.0使用者。
3.传统瓦片地图使用方案者。
核心:道路数据特点,geo数据中核心点的coordinates:[]是一个Array这是我们可以最大化利用的一点;
方案:已知的所有道路coordinates是一个连续的数量级庞大的经纬度集合,那么我们可以将它切分成n个小片段,每一个片段当成一个line绘制,最后将所有的lines绘制到一个layer上就是一个多色的线路了。
优缺点分析:
1:优点:在没有line-gradient
属性的支持下实现了渐变色道路需求,不需要更换基础地图服务。(ps:实现了产品的异想天开)
2:缺点:需要切分时有色值范围界定,切分力度要均匀。切分需要后端支持。绘制是涉及到遍历问题。
下面就是一段样例数据:
{
"color":"#2B8BF6",
"kind": 1,
"point":[
[
103.91941094747173,
36.05338385953002
],
[
103.9194868531241,
36.05331180635726
],
[
103.91956275845868,
36.0532397529264
],
[
103.91963866347551,
36.05316769923753
],
[
103.91971456817467,
36.05309564529067
],
[
103.91979047255619,
36.053023591085875
]
]
}
实际代码代码操作:
getHandleInfo(params,map,type,back){
this.delSinglePopup(map);
if(params.roadPoints!==""||params.roadName!==""&¶ms.roadName!==undefined){
this.changePanel("show")
}
if(params.roadPoints===""&¶ms.roadName===undefined){
// this.handleOnMapInfo(true);
}
let that=this;
let layer=null;
let sourceId=null;
let stops=null;
that.currentHistoryStops={
};
//只有再道路选择下才绘制道路
if(type==="1") {
//所有刻度lable数组
let timeScale=[];
GetAnyRoads(params).then((res)=>{
if(res.code===200){
if(res.data!=={
}){
let list=res.data;
blur.$emit("setLegend",true)
if