# 编辑
mapgis-edit
TIP
编辑组件mapgis-edit
在地图对象加载完成之后才会生效,详见Mapbox GL 官方文档 (opens new window)
# 属性
# feature
- 类型:
Object
- 侦听属性 watch 属性
- 必传:
- 描述: 初始化编辑的图形要素信息,默认是feature要素格式。
# styles
- 类型:
Array
- 侦听属性 watch 属性
- 默认值:
[
{
id: "gl-draw-polygon-fill-inactive",
type: "fill",
filter: [
"all",
["==", "active", "false"],
["==", "$type", "Polygon"],
["!=", "mode", "static"]
],
paint: {
"fill-color": "#3bb2d0",
"fill-outline-color": "#3bb2d0",
"fill-opacity": 0.1
}
},
{
id: "gl-draw-polygon-fill-active",
type: "fill",
filter: ["all", ["==", "active", "true"], ["==", "$type", "Polygon"]],
paint: {
"fill-color": "#fbb03b",
"fill-outline-color": "#fbb03b",
"fill-opacity": 0.1
}
},
{
id: "gl-draw-polygon-midpoint",
type: "circle",
filter: ["all", ["==", "$type", "Point"], ["==", "meta", "midpoint"]],
paint: {
"circle-radius": 3,
"circle-color": "#fbb03b"
}
},
{
id: "gl-draw-polygon-stroke-inactive",
type: "line",
filter: [
"all",
["==", "active", "false"],
["==", "$type", "Polygon"],
["!=", "mode", "static"]
],
layout: {
"line-cap": "round",
"line-join": "round"
},
paint: {
"line-color": "#3bb2d0",
"line-width": 2
}
},
{
id: "gl-draw-polygon-stroke-active",
type: "line",
filter: ["all", ["==", "active", "true"], ["==", "$type", "Polygon"]],
layout: {
"line-cap": "round",
"line-join": "round"
},
paint: {
"line-color": "#fbb03b",
"line-dasharray": [0.2, 2],
"line-width": 2
}
},
{
id: "gl-draw-line-inactive",
type: "line",
filter: [
"all",
["==", "active", "false"],
["==", "$type", "LineString"],
["!=", "mode", "static"]
],
layout: {
"line-cap": "round",
"line-join": "round"
},
paint: {
"line-color": "#3bb2d0",
"line-width": 2
}
},
{
id: "gl-draw-line-active",
type: "line",
filter: ["all", ["==", "$type", "LineString"], ["==", "active", "true"]],
layout: {
"line-cap": "round",
"line-join": "round"
},
paint: {
"line-color": "#fbb03b",
"line-dasharray": [0.2, 2],
"line-width": 2
}
},
{
id: "gl-draw-polygon-and-line-vertex-stroke-inactive",
type: "circle",
filter: [
"all",
["==", "meta", "vertex"],
["==", "$type", "Point"],
["!=", "mode", "static"]
],
paint: {
"circle-radius": 5,
"circle-color": "#fff"
}
},
{
id: "gl-draw-polygon-and-line-vertex-inactive",
type: "circle",
filter: [
"all",
["==", "meta", "vertex"],
["==", "$type", "Point"],
["!=", "mode", "static"]
],
paint: {
"circle-radius": 3,
"circle-color": "#fbb03b"
}
},
{
id: "gl-draw-point-point-stroke-inactive",
type: "circle",
filter: [
"all",
["==", "active", "false"],
["==", "$type", "Point"],
["==", "meta", "feature"],
["!=", "mode", "static"]
],
paint: {
"circle-radius": 5,
"circle-opacity": 1,
"circle-color": "#fff"
}
},
{
id: "gl-draw-point-inactive",
type: "circle",
filter: [
"all",
["==", "active", "false"],
["==", "$type", "Point"],
["==", "meta", "feature"],
["!=", "mode", "static"]
],
paint: {
"circle-radius": 3,
"circle-color": "#3bb2d0"
}
},
{
id: "gl-draw-point-stroke-active",
type: "circle",
filter: [
"all",
["==", "$type", "Point"],
["==", "active", "true"],
["!=", "meta", "midpoint"]
],
paint: {
"circle-radius": 7,
"circle-color": "#fff"
}
},
{
id: "gl-draw-point-active",
type: "circle",
filter: [
"all",
["==", "$type", "Point"],
["!=", "meta", "midpoint"],
["==", "active", "true"]
],
paint: {
"circle-radius": 5,
"circle-color": "#fbb03b"
}
},
{
id: "gl-draw-polygon-fill-static",
type: "fill",
filter: ["all", ["==", "mode", "static"], ["==", "$type", "Polygon"]],
paint: {
"fill-color": "#404040",
"fill-outline-color": "#404040",
"fill-opacity": 0.1
}
},
{
id: "gl-draw-polygon-stroke-static",
type: "line",
filter: ["all", ["==", "mode", "static"], ["==", "$type", "Polygon"]],
layout: {
"line-cap": "round",
"line-join": "round"
},
paint: {
"line-color": "#404040",
"line-width": 2
}
},
{
id: "gl-draw-line-static",
type: "line",
filter: ["all", ["==", "mode", "static"], ["==", "$type", "LineString"]],
layout: {
"line-cap": "round",
"line-join": "round"
},
paint: {
"line-color": "#404040",
"line-width": 2
}
},
{
id: "gl-draw-point-static",
type: "circle",
filter: ["all", ["==", "mode", "static"], ["==", "$type", "Point"]],
paint: {
"circle-radius": 5,
"circle-color": "#404040"
}
}
];
- 描述: 初始化绘制的几何的样式
# enableControl
- 类型:
Boolean
- 非侦听属性:
- 默认 false
- 描述 添加一个自带的能实现基本功能的编辑控件。
# closeEdit
- 类型:
Boolean
- 非侦听属性:
- 默认 false
- 描述 关闭编辑功能,当为true时,初始化结束绘制图形后禁止编辑该图形或者拖拽该图形。
# controls
- 类型:
Object
- 非侦听属性
- 默认
{
point: false,
line_string: false,
polygon: false,
trash: false,
combine_features: false,
uncombine_features: false
}
- 描述: 是否使用默认的 UI
# 槽
# default
# 示例1
- 描述: 默认编辑功能和默认内部样式
<template>
<mapgis-web-map v-bind="{...mapOptions}" style="height:95vh">
<mapgis-rastertile-layer layerId="tdt" url="http://t0.tianditu.com/DataServer?T=vec_c&L={z}&Y={y}&X={x}&tk=9c157e9585486c02edf817d2ecbc7752" />
<mapgis-draw :enableControl="true"/>
<mapgis-ui-collapse-card ref="edit-card" :outStyle="editStyle" position="bottom-left">
<span slot="title">要素编辑</span>
<mapgis-ui-iconfont type="mapgis-edit-square" slot="icon-hiden"/>
<mapgis-ui-iconfont type="mapgis-hide" slot="extra" @click="hideCard"/>
<mapgis-edit :enableControl="true"
:closeEdit="false"
:feature="feature"/>
</mapgis-ui-collapse-card>
</mapgis-web-map>
</template>
<script>
export default {
name: "editExample",
data() {
return {
mapOptions: {
crs: "EPSG:4326", //经纬度一定要设置crs参数
maxBounds: [
[-180, -90],
[180, 90],
],
zoom: 5,
center: [107.19, 26.85],
},
editStyle: {
position: "absolute",
zIndex: 2000,
width: "290px",
height: "420px",
left: "10px",
bottom: "10px",
},
feature: {
type: "Feature",
geometry: {
type: "Polygon",
coordinates: [
[
[104.954372, 28.2192881478019],
[111.865903828745, 28.2192881478019],
[111.865903828745, 32.62563],
[104.954372, 32.62563],
[104.954372, 28.2192881478019],
],
],
},
properties: {
ID: 1262,
JB: 1,
mpLayer: 0,
name: "长江",
mapgis_style: 1,
mpLength: 51.64045457828864,
},
},
}
},
created() {},
methods:{
hideCard() {
this.$refs['edit-card'].hide();
}
}
};
</script>
<style>
</style>
# 示例2
- 描述: 采取禁用编辑功能和自定义禁用的图形样式
<template>
<mapgis-web-map v-bind="{...mapOptions}" style="height:95vh">
<mapgis-rastertile-layer layerId="tdt" url="http://t0.tianditu.com/DataServer?T=vec_c&L={z}&Y={y}&X={x}&tk=9c157e9585486c02edf817d2ecbc7752" />
<mapgis-draw :enableControl="true" :closeEdit="true"/>
<mapgis-ui-collapse-card ref="edit-card" :outStyle="editStyle" position="bottom-left">
<span slot="title">要素编辑</span>
<mapgis-ui-iconfont type="mapgis-edit-square" slot="icon-hiden"/>
<mapgis-ui-iconfont type="mapgis-hide" slot="extra" @click="hideCard"/>
<mapgis-edit :enableControl="true"
:closeEdit="true"
:feature="feature"
:style="featureStyle"/>
</mapgis-ui-collapse-card>
</mapgis-web-map>
</template>
<script>
export default {
name: "editExample",
data() {
return {
mapOptions: {
crs: "EPSG:4326", //经纬度一定要设置crs参数
maxBounds: [
[-180, -90],
[180, 90],
],
zoom: 5,
center: [107.19, 26.85],
},
editStyle: {
position: "absolute",
zIndex: 2000,
width: "290px",
height: "420px",
left: "10px",
bottom: "10px",
},
feature: {
type: "Feature",
geometry: {
type: "Polygon",
coordinates: [
[
[104.954372, 28.2192881478019],
[111.865903828745, 28.2192881478019],
[111.865903828745, 32.62563],
[104.954372, 32.62563],
[104.954372, 28.2192881478019],
],
],
},
properties: {
ID: 1262,
JB: 1,
mpLayer: 0,
name: "长江",
mapgis_style: 1,
mpLength: 51.64045457828864,
},
},
featureStyle:[
{
id: "gl-draw-polygon-fill-static",
type: "fill",
filter: ["all", ["==", "mode", "static"], ["==", "$type", "Polygon"]],
paint: {
"fill-color": "#3bb2d0",
"fill-outline-color": "#3bb2d0",
"fill-opacity": 0.1
}
},
{
id: "gl-draw-polygon-stroke-static",
type: "line",
filter: ["all", ["==", "mode", "static"], ["==", "$type", "Polygon"]],
layout: {
"line-cap": "round",
"line-join": "round"
},
paint: {
"line-color": "#3bb2d0",
"line-width": 2
}
},
{
id: "gl-draw-line-static",
type: "line",
filter: ["all", ["==", "mode", "static"], ["==", "$type", "LineString"]],
layout: {
"line-cap": "round",
"line-join": "round"
},
paint: {
"line-color": "#3bb2d0",
"line-width": 2
}
},
{
id: "gl-draw-point-static",
type: "circle",
filter: ["all", ["==", "mode", "static"], ["==", "$type", "Point"]],
paint: {
"circle-radius": 5,
"circle-color": "#3bb2d0"
}
}
]
}
},
created() {},
methods:{
hideCard() {
this.$refs['edit-card'].hide();
}
}
};
</script>
<style>
</style>
# 事件
# @added
- 属性值:
editor
当前编辑组件对象 - 描述: 当编辑组件添加后,向父组件传递当前编辑组件对象。
# @removed
- 描述: 当移除编辑组件后,通知父组件已移除编辑组件。
# @change.feature
- 描述: 当编辑组件的要素信息被更改后,向父组件抛出更新后的feature。