vue实践Leaflet地图标注（图注，位置）带数字对应显⽰效果：
leaflet地图容器的初始化和图层的加载就不说了，都是基础。 上图⽤的是天地图，以下是在vue中
go2map地图北京步骤
上图效果图主要为地图页⾯，和右侧列表页⾯
主页⾯地图页⾯ index.vue ⾥（地图页⾯）列表页⾯queryResult
<query-result
@proQuery="proQuery"
@setPoint_zk="setPoint_zk"
@clear_marker_layer="clear_marker_layer"
@clear_height_layer="clear_height_layer"
@changeQueryListShow="changeQueryListShow"
@detailBtnClick="detailBtnClick"
ref="queryResultPage"
></query-result>
import queryResult from ‘./queryResult’
queryResult 为⼦组件，引⼊后在components: {queryResult }定义
接着在data(){ return } ⾥定义三个我们即将要⽤的图层
map:null,//地图容器
zkDetail:null,//绘制点详情
markerLayer:null,//标记图层
HeightLayer:null,//⾼亮图层
queryListShow:true//显⽰列表
⽅法事件
//methods⾥
//关闭右侧页⾯查询结果清空marker图层
closeQueryTable(){
closeQueryTable(){
this.queryDataTableVisible =false;
this.clear_marker_layer()
},
changeQueryListShow(flag){
this.queryListShow = flag
},
/
/接收⼦页⾯传来的要显⽰列表数据
proQuery(queryResult){
let _this =this
let bound_zk =[]
for(var i=0;i<queryResult.length;i++){
if(queryResult[i].chahba&&queryResult[i].chahbb){
_this.setPoint_zk(queryResult[i],'normal',i)
bound_zk.push([queryResult[i].chahba,queryResult[i].chahbb])
}
}
//以下注释代码为把视图平移到点集显⽰中⼼（两种⽅法）
/
/ var bounds_zk = new L.latLngBounds(bound_zk);
// _this.map.fitBounds(bounds_zk);
// this.mapObj.map.setView([queryResult[0].chahbb,queryResult[0].chahba],(_this.map._maxZoom));
// _this.map.panTo([queryResult[0].chahbb,queryResult[0].chahba],{animate: true });//平移
},
// 绘制地图点事件分别为普通和⾼亮，根据传⼊的type决定
setPoint_zk(point,type,index){// 绘制搜索结果
let _this =this
let className =''
_this.zkDetail ={}
if(type=='normal'){
let geojson ={
'type':'Feature',
'geometry':{
'type':'Point',
'coordinates':[point.chahba,point.chahbb],//注意经纬度顺序[经度，纬度]chahba为经度
},
'crs':{
'type':'name',
'properties':{
'name':'urn:ogc:def:crs:EPSG::4326'
}
}
};
//这⾥的className很重要，为显⽰图⽚
className ='point-div-icon_zk'
'pointToLayer':function(feature, latlng){
var myIcon =L.divIcon({
html: index>-1?'<div>'+(index+1)+'<div>':'<div><div>',
className: className,
//图标⼤⼩
iconSize:[16,16],
});
let code = abc:''
let Marker =L.marker([latlng.lat,latlng.lng],{//注意：纬度，经度 lat纬度
icon:myIcon
}).addTo(_this.markerLayer)//.bindTooltip('<p>'+code+'</p>');  这⼀句跟(_this.markerLayer)后⾯点击点有提⽰
}
});
}else{
_this.zkDetail = point
// 清空⾼亮图层
_this.HeightLayer.clearLayers()
let geojson ={
'type':'Feature',
'geometry':{
'geometry':{
'type':'Point',
'coordinates':[point.chahba,point.chahbb],//注意经纬度顺序[经度，纬度]
},
'crs':{
'type':'name',
'properties':{
'name':'urn:ogc:def:crs:EPSG::4326'
}
}
};
//⾼亮样式
className ='highlight-div-icon_zk'
'pointToLayer':function(feature, latlng){
let html = index>-1?'<div>'+(index+1)+'<div>':'<div><div>'
var myIcon =L.divIcon({
html: html,
className: className,
/
/图标⼤⼩
iconSize:[16,16],
});
let Marker =L.marker([latlng.lat,latlng.lng],{
icon:myIcon
}).addTo(_this.HeightLayer);
}
});
}
},
//-----清空图层显⽰
clear_marker_layer(){
this.markerLayer.clearLayers()
this.HeightLayer.clearLayers()
},
//清空⾼亮图层
clear_height_layer(){
this.HeightLayer.clearLayers()
},
//查询数据的⽅法，
query(){
//查到数据后调⽤⼦组件⽅法
let tableData =[]
let total =0
...
this.$refs.queryResultPage.searchClick(tableData,total)
}
style
<style lang='stylus' scoped>
@import './../assets/stylus/mainCss.styl'
.point-div-icon_zk
icon-style(18px !important,26px !important,url('./../assets/red.png'))
&:hover
icon-style(18px !important,26px !important,url('./../assets/red.png'))
.highlight-div-icon_zk
icon-style(18px !important,26px !important,url('./../assets/blue.png'))
</style>
mainCss.styl
$mainColor #0089ff
box(w,h,color-name =false)
width w
icon-style(width,height,url)
width width
height height
display inline-block
text-align center
color #ffffff
font-style normal
background url
background-size 100%100%
queryResult.vue
<template>
<div class="searchZK-page">
<div class="search-result"v-if="showResult">
<div class="resutl">
<div class="surver-result-list">
<div v-if="liData.length !==0">
<div class="resutl-title">当前范围内, 共到 {{total}} 个搜索结果</div>
<ul>
<li class="surver-result"v-for="(result,index) in liData":key="index">
<div class="result-title"@click="getResultInfo_zk(result,index)"@mouseenter="mouse_enter(result,index)">
<div ><i class="result-title-index">{{index+1}}</i></div>
<div ><span >{{aba}}</span></div>
</div>
<!-- <p class="result-content" ><span>调查点名称</span>：<span>{{aba}}</span></p> -->
</li>
</ul>
</div>
<div v-else class="nodata">暂⽆数据</div>
</div>
</div>
</div>
<div class="search-result"v-if="showResultDetail">
<div class="search-result-back"@click="goback"><i class="el-icon-d-arrow-left"></i>返回列表</div>
<table cellspacing="0" >
<tr>
<td >⼯程名称</td>
<td >{{aba}}</td>
</tr>
</table>
</div>
</div>
</template>
<script>
export default{
name:'',
props:['zkData'],
data(){
return{
searchkey:'',
total:0,
currentPage:1,
liData:[],
showResult:true,
showResultDetail:false,
detail:null,
lookid:null,
};
};
},
components:{},
computed:{},
beforeMount(){},
mounted(){
},
methods:{
// 返回列表
goback(){
this.$emit('clear_height_layer')
this.showResultDetail =false;
this.showResult =true
this.$emit("changeQueryListShow",true)
},
// 接收主页⾯查询到数据传过来的
searchClick(data,total){
let _this =this
_this.liData =[]
_al = total
_this.liData = data
_this.showResult =true
_this.showResultDetail =false
_this.$emit("clear_marker_layer")
// 调⽤⽗组件⾥绘制⽅法
_this.$emit('proQuery',_this.liData)
},
//绘制某个⾼亮点
getResultInfo_zk(item,index){
if(index>-1){
this.$emit("setPoint_zk",item,'highLight',index)
}
this.showResult =false;
this.detail = item
this.lookid = item.id
this.showResultDetail =true;
this.$emit("changeQueryListShow",false)
},
//⿏标进⼊，也就是⿏标放到列表上某⼀条数据时候
mouse_enter(item,index){
if(index>-1){
this.$emit("setPoint_zk",item,'highLight',index)
}
},
closeZkPage(){
/
/ this.$emit("clear_zk_layer")
this.zkSearchShow =false
this.showResult =false
this.liData =[]
}
},
watch:{}
}
</script>
<style lang='stylus'scoped>
@import './../assets/stylus/mainCss.styl'
.
search-result-back
text-align left
font-size 13px
padding 5px 0 5px 10px
color #409eff
.searchZK-page>>>.el-input-group__append
background #409eff
padding 0 15px
.searchZK-page>>>.el-icon-search
color #fff
.search-result >>>.el-pagination.is-background .el-pager li  margin 0 1px
.
searchZK-page
position absolute

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。