说明：使用Ant Design of Vue框架搭建 leaflet 地图绘制点、线、面控件，直接上图看效果；
功能描述：
1、在地图上绘制点线面功能；
2、可以为绘制符号添加备注；
3、显示隐藏绘制的所有符号；
4、可以根据条件查询绘制符号；
5、可以编辑符号备注、删除和定位符号；
一、搭建vue + leaflet项目
1、使用vue-cli 3.0及以上版本的脚手架搭建项目，网上教程很多，这里就不细说了；
2、根据Ant Design of Vue官方文档引入UI框架（优化标签，使界面跟好看点）；
3、安装Leaflet的Vue组件 — Vue2Leaflet，npm install vue2-leaflet leaflet --save
4、修改vue项目中的main.js文件，引入css文件和一些图标配置；
// leaflet地图样式
import 'leaflet/dist/leaflet.css'
import L from 'leaflet'
/* leaflet icon */
delete L.Icon.Default.prototype._getIconUrl
L.Icon.Default.mergeOptions({
iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
iconUrl: require('leaflet/dist/images/marker-icon.png'),
shadowUrl: require('leaflet/dist/images/marker-shadow.png')
})5、新建vue页面，使用<l-map>标签创建地图，看页面是否显示地图成功；
<template>
<div style="height: 670px;">
<l-map
style="height: 100%; width: 100%"
:zoom="zoom"
:center="center"
ref="map"
>
<l-tile-layer :url="url"></l-tile-layer>
</l-map>
</div>
</template>
<script>
import { LMap, LTileLayer} from 'vue2-leaflet'
import L from 'leaflet'
export default {
components: {
L,
LMap,
LTileLayer,
},
data () {
return {
url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
zoom: 3,
center: [47.413220, -1.219482]
}
}
}
</script>
<style>
</style>二、点、线、面绘制控件和相关功能的实现
实现代码如下
主页面 HomeView.vue
<template>
<div style="height: 670px;">
<l-map
style="height: 100%; width: 100%"
:zoom="zoom"
:center="center"
ref="map"
>
<l-tile-layer :url="url"></l-tile-layer>
<l-control position="topright">
<control-marker :map="map" @perspective="perspective"></control-marker>
</l-control>
</l-map>
</div>
</template>
<script>
import { LMap, LTileLayer, LControl } from 'vue2-leaflet'
import L from 'leaflet'
import ControlMarker from '@/components/Map/ControlMarker'
export default {
components: {
L,
LMap,
LTileLayer,
LControl,
ControlMarker
},
data () {
return {
url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
zoom: 3,
center: [47.413220, -1.219482],
bounds: null,
map: null
}
},
mounted () {
this.map = this.$refs.map.mapObject
},
methods: {
perspective (center) {
this.center = center
}
}
}
</script>
<style>
.control-panel .search .ant-input-search-enter-button .ant-input-group-addon .ant-input-search-button{
font-size: 18px;
color: #5e5656;
background-color: #fff;
border-color: #d9d9d9;
}
.control-panel .ant-table-thead > tr > th, .ant-table-tbody > tr > td{
padding: 12px 14px;
word-break: break-all;
}
.leaflet-container .leaflet-control-attribution, .leaflet-container .leaflet-control-scale{
display: none;
}
.leaflet-marker-markerTooltip{
white-space: nowrap;
float: left;
margin-left: 15px;
margin-top: -5px;
background-color: #FFFFFF;
border: 1px solid #000000;
border-radius: 3px;
box-shadow: 2px 2px 5px #888888;
color: #000000;
padding: 2px 5px;
font-weight: bold;
font-size: 12px;
line-height: 16px;
cursor: default;
}
</style>
符号控件代码ControlMarker.vue
<template>
<div class="control-marker">
<a-button @click="pointMarker" :disabled="tipPanel">
绘制点
</a-button>
<a-button @click="lineMarker" :disabled="tipPanel">
绘制线
</a-button>
<a-button @click="polygonMarker" :disabled="tipPanel">
绘制面
</a-button>
<a-button @click="toggleControlPanel">
标会管理
</a-button>
<div class="control-panel" v-show="controlPanel">
<div class="panel-top">
<span>标绘管理</span>
<a href="javascript:void(0);"><a-icon type="swap" /></a>
<a href="javascript:void(0);" @click="showResultLayer"><a-icon :type="markerShow ? 'eye-invisible' : 'eye'" /></a>
</div>
<div class="select">
类型：
<a-select defaultValue="allTypes" style="width: 150px" @change="handleChange">
<a-select-option value="allTypes">全部</a-select-option>
<a-select-option value="Point">点</a-select-option>
<a-select-option value="LineString">线</a-select-option>
<a-select-option value="Polygon">面</a-select-option>
</a-select>
</div>
<div class="search">
<a-input-search placeholder="" @search="onSearch" enterButton />
</div>
<div class="marker-table">
<a-table
rowKey="projectNo"
:columns="columns"
:dataSource="showMarkerData"
:pagination="ipagination"
@change="handleTableChange"
>
<span slot="operation" slot-scope="text, record" class="operation">
<a title="编辑" href="javascript:;" @click="handleEdit(record)"><a-icon type="form" /></a>
<a-divider type="vertical" />
<a-popconfirm title="确定删除吗?" @confirm="handleDelete(record)">
<a title="删除"><a-icon type="close-circle" /></a>
</a-popconfirm>
<a-divider type="vertical" />
<a title="定位" href="javascript:;" @click="handleLocation(record)"><a-icon type="environment" /></a>
</span>
</a-table>
</div>
</div>
<div class="add-tip" ref="tipModal" v-show="tipPanel">
<div class="title">备注</div>
<a-input placeholder="请输入备注" allowClear v-model="tip" />
<a-button class="ok" @click="tipOk">确定</a-button>
<a-button @click="tipCancel">取消</a-button>
</div>
</div>
</template>
<script>
import L from 'leaflet'
export default {
components: {
L
},
props: {
map: {
type: Object,
required: true
}
},
data () {
return {
tip: '暂无备注',
controlPanel: true,
tipPanel: false,
markerShow: true,
record: null,
selectChange: 'allTypes',
searchContent: null,
markerAdd: null,
tipLocation: null,
allMarkerData: [],
showMarkerData: [],
columns: [{
title: '备注',
dataIndex: 'remark',
width: 160
},
{
title: '操作',
dataIndex: 'operation',
align: 'center',
width: 120,
scopedSlots: { customRender: 'operation' }
}],
ipagination: {
current: 1,
pageSize: 5,
size: 'small'
}
}
},
created () {
// 初始化一些符号属性
this.markersLayer = L.geoJSON([], {
style: function (feature) {
return {
color: '#237CC9',
weight: 2,
fillColor: '#237CC9',
fillOpacity: 0.2
}
}
}).addTo(this.map)
this.currentMarkerGroup = L.layerGroup([]).addTo(this.map)
this.marker_zindex = 2000
this.moveMarker = L.marker([0, 0], {
zIndexOffset: this.marker_zindex
})
this.moveIcon = L.marker([0, 0], {
zIndexOffset: this.marker_zindex
})
},
methods: {
// 绘制点
pointMarker (e) {
this.cancleMarkerListener()
this.clickFunction = this.addClickMarker
this.map.on('click', this.clickFunction, this)
this.moveFunction = this.addMoveMarker
this.map.on('mousemove', this.moveFunction, this)
this.rightClickFunction = this.cancleMarkerListener
this.map.on('contextmenu', this.rightClickFunction, this)
e.stopPropagation()
},
// 绘制点符号添加到图层中
addClickMarker: function (e) {
const clickLocation = [e.latlng.lat, e.latlng.lng]
this.cancleMarkerListener()
const pointMarker = L.marker(clickLocation).addTo(this.markersLayer)
this.addTip(pointMarker)
},
// 添加移动符号事件
addMoveMarker: function (e) {
this.map.getContainer().style.cursor = 'pointer'
this.moveMarker.addTo(this.currentMarkerGroup)
this.moveMarker.setLatLng(e.latlng)
this.moveMarker.setZIndexOffset(this.marker_zindex)
},
// 添加线符号
lineMarker (e) {
this.cancleMarkerListener()
this.poly_points = []
this.poly_line = new L.Polyline([], {
color: '#237CC9',
// opacity:0.6,
weight: 2
})// 折线
this.dashLine = new L.Polyline([], {
color: '#237CC9',
// opacity:0.6,
dashArray: [10, 10],
weight: 2
})
this.clickFunction = this.addLineLatlng
this.map.on('click', this.clickFunction, this)
this.dblclickFunction = this.addLineMarker
this.map.on('dblclick', this.dblclickFunction, this)
this.moveFunction = this.addDashLine
this.map.on('mousemove', this.moveFunction, this)
this.rightClickFunction = this.cancleMarkerListener
this.map.on('contextmenu', this.rightClickFunction, this)
e.stopPropagation()
},
// 添加线绘制点
addLineLatlng (e) {
this.poly_points.push([e.latlng.lat, e.latlng.lng])
},
// 添加线绘制结束点
addLineMarker (e) {
this.cancleMarkerListener()
this.map.removeLayer(this.dashLine)
if (this.poly_points.length > 2) {
this.poly_line.setLatLngs(this.poly_points).addTo(this.markersLayer)
return this.addTip(this.poly_line, this.poly_points[this.poly_points.length - 1])
}
},
// 在绘制线鼠标移动时显示虚线效果
addDashLine (e) {
this.map.getContainer().style.cursor = 'pointer'
this.moveIcon.addTo(this.currentMarkerGroup)
if (this.poly_points.length > 0) {
this.dashLine.setLatLngs(this.poly_points)
this.dashLine.addLatLng([e.latlng.lat, e.latlng.lng]).addTo(this.currentMarkerGroup)
this.moveIcon.setIcon(L.divIcon({ html: "<div class='leaflet-marker-markerTooltip'>双击添加备注</div>", className: 'leaflet-marker-noDefaultDivIcon' }))
} else {
this.moveIcon.setIcon(L.divIcon({ html: "<div class='leaflet-marker-markerTooltip'>点击开始绘制，双击结束</div>", className: 'leaflet-marker-noDefaultDivIcon' }))
}
this.moveIcon.setLatLng(e.latlng)
this.moveIcon.setZIndexOffset(this.marker_zindex + 20)
},
// 为绘制区域添加绘制事件
polygonMarker (e) {
this.cancleMarkerListener()
this.poly_points = []// 区域点
this.poly_area = new L.Polygon([], {
color: '#237CC9',
// opacity:0.6,
weight: 2,
fillColor: '#237CC9',
fillOpacity: 0.2
})
this.poly_now = new L.Polygon([], {
color: '#237CC9',
// opacity:0.6,
weight: 2,
dashArray: [10, 10],
fillColor: '#237CC9',
fillOpacity: 0.3
})
this.clickFunction = this.addPolyLatlng
this.map.on('click', this.clickFunction, this)
this.dblclickFunction = this.addPloygonMarker
this.map.on('dblclick', this.dblclickFunction, this)
this.moveFunction = this.addPolyNow
this.map.on('mousemove', this.moveFunction, this)
this.rightClickFunction = this.cancleMarkerListener
this.map.on('contextmenu', this.rightClickFunction, this)
e.stopPropagation()
},
// 添加区域绘制点
addPolyLatlng (e) {
this.poly_points.push([e.latlng.lat, e.latlng.lng])
},
// 添加区域绘制结束点
addPloygonMarker (e) {
this.cancleMarkerListener()
this.map.removeLayer(this.poly_now)
if (this.poly_points.length > 2) {
this.poly_area.setLatLngs(this.poly_points).addTo(this.markersLayer)
var tipLocation = this.poly_points[this.poly_points.length - 1]
return this.addTip(this.poly_area, tipLocation)
}
},
// 在绘制区域鼠标移动时显示虚线效果
addPolyNow (e) {
this.map.getContainer().style.cursor = 'pointer'
this.moveIcon.addTo(this.currentMarkerGroup)
if (this.poly_points.length > 0) {
this.poly_now.setLatLngs(this.poly_points)
this.poly_now.addLatLng([e.latlng.lat, e.latlng.lng]).addTo(this.currentMarkerGroup)
this.moveIcon.setIcon(L.divIcon({ html: "<div class='leaflet-marker-markerTooltip'>双击添加备注</div>", className: 'leaflet-marker-noDefaultDivIcon' }))
} else {
this.moveIcon.setIcon(L.divIcon({ html: "<div class='leaflet-marker-markerTooltip'>点击开始绘制，双击结束</div>", className: 'leaflet-marker-noDefaultDivIcon' }))
}
this.moveIcon.setLatLng(e.latlng)
this.moveIcon.setZIndexOffset(this.marker_zindex + 20)
},
// 添加绘制符号的备注信息
addTip (markerAdd, tipLocation) {
this.tipPanel = true
this.markerAdd = markerAdd
this.tipLocation = tipLocation
return this.$refs.tipModal
},
// 添加备注信息时备注框确定按钮
tipOk () {
this.tipPanel = false
// 判读是新建符号，还是修改符号
if (this.markerAdd._popup) {
this.bindPopupToMarker(this.markerAdd, this.tip, this.tipLocation)
this.record.remark = this.tip
this.record.marker.openPopup()
} else {
this.bindPopupToMarker(this.markerAdd, this.tip, this.tipLocation)
var newMarkerData = {}
newMarkerData.geometry = JSON.stringify(this.markerAdd.toGeoJSON().geometry)
newMarkerData.geometryObject = this.markerAdd.toGeoJSON().geometry
newMarkerData.marker = this.markerAdd
newMarkerData.projectNo = this.uuid()
newMarkerData.remark = this.tip
if (this.tipLocation) {
// 把点对象转化为字符串---存数据库
// newMarkerData.tipLocation = this.tipLocation.toString()
newMarkerData.tipLocation = this.tipLocation
}
this.allMarkerData.push(newMarkerData)
this.showMarkerData.push(newMarkerData)
}
},
// 备注框取消按钮
tipCancel () {
// 判断是新增取消还是新增取消
if (!this.markerAdd._popup) {
this.markerAdd.removeFrom(this.markersLayer)
}
this.tipPanel = false
},
// 绑定弹出标记---弹出框
bindPopupToMarker (theMarker, theTip, tipLocation) {
if (tipLocation != null) {
theMarker.bindPopup(theTip, {
autoPan: false,
autoClose: false,
className: 'leaflet-marker-markerTip',
keepInView: false
}).openPopup(L.latLng(tipLocation[0], tipLocation[1]))
// 使备注显示在线或面的结束点位置
// theMarker.off('click')
// theMarker.on('click', function () {
// theMarker.openPopup(L.latLng(tipLocation[0], tipLocation[1]))
// })
} else {
theMarker.bindPopup(theTip, {
autoClose: false,
className: 'leaflet-marker-markerTip'
}).openPopup()
}
},
// 取消标记侦听器
cancleMarkerListener () {
if (this.clickFunction) {
this.map.off('click', this.clickFunction, this)
}
if (this.dblclickFunction) {
this.map.off('dblclick', this.dblclickFunction, this)
}
if (this.moveFunction) {
this.map.off('mousemove', this.moveFunction, this)
}
if (this.rightClickFunction) {
this.map.off('contextmenu', this.rightClickFunction, this)
}
if (this.map.hasLayer(this.currentMarkerGroup)) {
this.currentMarkerGroup.clearLayers()
}
},
// 隐藏所有标绘符号按钮
showResultLayer () {
this.markerShow = !this.markerShow
this.allMarkerData.forEach((markerData) => {
if (this.markerShow) {
// 显示
markerData.marker.addTo(this.markersLayer)
this.bindPopupToMarker(markerData.marker, markerData.remark, markerData.tipLocation)
} else {
// 隐藏
markerData.marker.removeFrom(this.markersLayer)
}
})
},
// 页码设置
handleTableChange (pagination) {
this.queryParam.pageNo = this.ipagination.current = pagination.current
},
// 产生16位随机ID
uuid () {
var s = []
var hexDigits = '0123456789abcdef'
for (var i = 0; i < 36; i++) {
s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1)
}
s[14] = '4'
s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1)
s[8] = s[13] = s[18] = s[23] = '-'
var uuid = s.join('')
return uuid
},
// 下拉选择框方法
handleChange (value) {
this.selectChange = value
this.onQuery()
},
// 符号面板搜索框搜索事件
onSearch (value) {
// eslint-disable-next-line no-useless-escape
this.searchContent = value.replace(/\ +/g, '')
this.onQuery()
},
// 条件查询绘制符号列表
onQuery () {
this.showMarkerData = []
this.allMarkerData.forEach((markerData) => {
if (this.searchContent) {
if (markerData.geometryObject.type === this.selectChange && markerData.remark.indexOf(this.searchContent) !== -1) {
this.showMarkerData.push(markerData)
} else if (this.selectChange === 'allTypes' && markerData.remark.indexOf(this.searchContent) !== -1) {
this.showMarkerData.push(markerData)
}
} else {
if (markerData.geometryObject.type === this.selectChange) {
this.showMarkerData.push(markerData)
} else if (this.selectChange === 'allTypes') {
this.showMarkerData.push(markerData)
}
}
})
},
// 切换符号控制面板的显示隐藏
toggleControlPanel () {
this.controlPanel = !this.controlPanel
},
// 表格中删除按钮
handleDelete (record) {
const index = this.allMarkerData.indexOf(record)
this.allMarkerData.splice(index, 1)
this.showMarkerData.splice(this.showMarkerData.indexOf(record), 1)
record.marker.removeFrom(this.markersLayer)
},
// 表格中定位按钮
handleLocation (record) {
this.perspective(record)
record.marker.openPopup()
},
// 表格中编辑按钮
handleEdit (record) {
this.perspective(record)
this.tipPanel = true
this.tip = record.remark
this.record = record
this.markerAdd = record.marker
record.marker.openPopup()
},
// 在地图中定位符号视角方法
perspective (record) {
if (record.tipLocation) {
this.$emit('perspective', record.tipLocation)
} else {
this.$emit('perspective', record.marker._latlng)
}
}
}
}
</script>
<style lang="less" scoped>
.add-tip{
width: 160px;
height: 108px;
padding: 5px 10px;
background-color: #fff;
border-radius: 4px;
position: absolute;
top: 0px;
right: 320px;
& .title{
width: 100%;
color: #000;
font-size: 18px;
text-align: center;
}
& .ok{
margin: 5px 12px 0 0;
}
}
.control-panel{
width: 312px;
height: 460px;
background-color: #fff;
border-radius: 4px;
overflow: auto;
position: absolute;
top: 84px;
left: 0px;
& .panel-top{
margin: 10px;
color: rgb(47,192,226);
font-size: 16px;
}
& .panel-top a{
float: right;
color: #000;
margin-right: 20px;
}
& .select{
margin: 10px 0 0 30px;
font-size: 16px;
}
& .search{
margin: 10px;
}
& .search .ant-input-search-enter-button .ant-input-group-addon .ant-input-search-button{
font-size: 16px;
color: #d9d9d9;
background-color: #fff;
border-color: #d9d9d9;
}
& .search .ant-btn-primary{
background-color: #fff;
border-color: #d9d9d9;
}
}
</style>
每个方法的注释已经非常清除了，应该基本都能读懂。
1196
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
