vue使用高德地图点击下钻上浮效果的实现思路
这里给使用高德地图下钻提供一个思路
先讲下我的思路,高德地图api有一个地图绘制区域,你只要提供区码,就可以绘制该区域。以浙江省为例,我一开给浙江省的区码就可以绘制出浙江省的区域,接下来我要进入杭州市,当我点击杭州市的时候我先清空地图上的覆盖层并且能获取到‘杭州市'这个字符串,通过对比这个字符串我就可以给出杭州市的区码,最后绘制出杭州市的覆盖层。
接下来看代码:
第一步
绘制地图:
//创建地图 this.map=newAMap.Map("container",{ cursor:"default", resizeEnable:true, expandZoomRange:true, gestureHandling:"greedy", //zooms:[8,20], zoom:12, defaultCursor:"pointer", mapStyle:"amap://styles/f6e3818366ba5268d50ea3f2296eb3eb", showLabel:true });
第二步(关键)
letthat=this; AMapUI.loadUI(["geo/DistrictExplorer"],DistrictExplorer=>{ //创建一个实例 that.districtExplorer=newDistrictExplorer({ eventSupport:true, map:this.map }); //设置绘制的子区域和父区域的自身属性(包括线颜色,透明度等)执行renderAreaNode()就可以开始绘制区域了 functionrenderAreaNode(areaNode){ //绘制子级区划 that.districtExplorer.renderSubFeatures(areaNode,function( feature, i ){ return{ cursor:"default", bubble:true, //strokeColor:"#00a4ce",//线颜色 strokeColor:"#03d7a1", strokeOpacity:1,//线透明度 strokeWeight:1.5,//线宽 //fillColor:"#09152a",//填充色 fillColor:"#072942", fillOpacity:0.1//填充透明度 }; }); //绘制父区域 that.districtExplorer.renderParentFeature(areaNode,{ cursor:"default", bubble:true, //strokeColor:"#00a4ce",//线颜色 strokeColor:"#03d7a1", strokeOpacity:1,//线透明度 strokeWeight:1.5,//线宽 //fillColor:"#09152a",//填充色 fillColor:"#072942", fillOpacity:0.6//填充透明度 }); } //varadcodes=[]; ////根据角色来绘制不同的区域 //that.adcodes=[ //330200//浙江 //]; that.map.clearMap();//清空所有绘制物 //绘制多区域 that.districtExplorer.loadMultiAreaNodes(this.adcodes,function( error, areaNodes ){ //设置定位节点,支持鼠标位置识别 //注意节点的顺序,前面的高优先级 that.districtExplorer.setAreaNodesForLocating(areaNodes); //清除已有的绘制内容 that.districtExplorer.clearFeaturePolygons(); for(vari=0,len=areaNodes.length;ithis.adcodes是区码,这里的关键在于清空,利用好that.map.clearMap();//清空所有绘制物再重新进行绘制,再通过that.map.setFitView(that.districtExplorer.getAllFeaturePolygons());就可以达到下钻的效果,上浮也是同理。
区码以浙江省为例
if(data.result.rows[0].cities_name=="杭州市"){ this.adcodes=[330100]; }elseif(data.result.rows[0].cities_name=="宁波市"){ this.adcodes=[330200]; }elseif(data.result.rows[0].cities_name=="温州市"){ this.adcodes=[330300]; }elseif(data.result.rows[0].cities_name=="嘉兴市"){ this.adcodes=[330400]; }elseif(data.result.rows[0].cities_name=="湖州市"){ this.adcodes=[330500]; }elseif(data.result.rows[0].cities_name=="绍兴市"){ this.adcodes=[330600]; }elseif(data.result.rows[0].cities_name=="金华市"){ this.adcodes=[330700]; }elseif(data.result.rows[0].cities_name=="衢州市"){ this.adcodes=[330800]; }elseif(data.result.rows[0].cities_name=="舟山市"){ this.adcodes=[330900]; }elseif(data.result.rows[0].cities_name=="台州市"){ this.adcodes=[331000]; }elseif(data.result.rows[0].cities_name=="丽水市"){ this.adcodes=[331100]; }总结
以上所述是小编给大家介绍的vue使用高德地图点击下钻上浮效果的实现思路,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!