Skip to content

M
my-map
Commit 02f564cd authored by 郭铭瑶's avatar 郭铭瑶 🤘
Browse files
Options

添加面状覆盖物

parent cdc77c41
Show whitespace changes
Inline Side-by-side
Showing with 190 additions and 149 deletions
src/components/main.vue
View file @ 02f564cd
......@@ -7,6 +7,7 @@
<div @click="move">Move</div>
<div @click="addPoints">Point</div>
<div @click="addLines">Line</div>
<div @click="addPolygon">Polygon</div>
<div @click="removeLayers">Remove</div>
</div>
</div>
......@@ -20,28 +21,29 @@ import { nextTick, onMounted } from 'vue'
let map: MyMap
let pointsLayer: any
let linesLayer: any
let polygonLayer: any
onMounted(async () => {
await nextTick()
// map = useMap('SMap').with({
// el: 'container',
// center: [0, 0],
// zoom: 5,
// style: 'smap://styles/dark',
// appKey: 'ACF69EDK17LON63GHPF081',
// netType: 'internet',
// })
map = useMap('AIMap').with({
map = useMap('SMap').with({
el: 'container',
center: [121.612846, 31.205494],
zoom: 13,
style: 'aimap://styles/aimap/darkblue-v4',
appKey: 'gt8XidVe5upHf7cirkJwwXTCWj20zfu3',
baseApiUrl: 'https://location-dev.newayz.com',
center: [0, 0],
zoom: 5,
style: 'smap://styles/dark',
appKey: 'ACF69EDK17LON63GHPF081',
netType: 'internet',
})
// map = useMap('AIMap').with({
// el: 'container',
// center: [121.612846, 31.205494],
// zoom: 13,
// style: 'aimap://styles/aimap/darkblue-v4',
// appKey: 'gt8XidVe5upHf7cirkJwwXTCWj20zfu3',
// baseApiUrl: 'https://location-dev.newayz.com',
// })
map
.on('load', addControls)
.on('click', (a, b) => console.log(a, b))
......@@ -112,11 +114,26 @@ function addLines() {
],
text: 'test message',
},
labelKey: 'text',
})
}
function addPolygon() {
polygonLayer = map.add('polygon', {
data: {
path: [
[0, 0],
[121.59751247938203, 29.835174764721145],
[21.59751247938203, 0.835174764721145],
[0, 0],
],
text: 'test message',
},
})
}
function removeLayers() {
map.remove(pointsLayer)
map.remove(linesLayer)
map.remove(polygonLayer)
}
</script>
......@@ -136,7 +153,7 @@ function removeLayers() {
margin: 10px;
background: #fff;
color: #000;
min-width: 40px;
min-width: 50px;
text-align: center;
cursor: pointer;
}
......
src/my-map/ai-map/index.ts
View file @ 02f564cd
......@@ -13,7 +13,7 @@ import {
Layers,
LayerOption,
} from '../types'
import { toLines, toPoints } from './util'
import { toLines, toPoints, toPolygons } from './util'
export default class AI_Map extends MyMap {
private _clickCb: ClickCallBack | null = null
......@@ -119,10 +119,7 @@ export default class AI_Map extends MyMap {
/** 设置覆盖物 */
private _setLayers() {
const _markers: Partial<Layers> = {
point: (data: LayerOption) => {
const layer = new aimap.MassMarkerLayer(toPoints(this.map, data))
// 维智的覆盖物点击事件需特别定义
const makeLayer = (layer: any) => {
layer.on('click', (e: any) => {
const arg = {
type: e.type,
......@@ -136,26 +133,16 @@ export default class AI_Map extends MyMap {
this._clickCb && this._clickCb(arg, e?.features?.[0]?.properties)
})
return layer
},
line: (data: LayerOption) => {
const layer = new aimap.MassMarkerLayer(toLines(this.map, data))
// 维智的覆盖物点击事件需特别定义
layer.on('click', (e: any) => {
const arg = {
type: e.type,
center: [e.lngLat.lng, e.lngLat.lat],
event: e.originalEvent,
clientX: e.point.x,
clientY: e.point.y,
originData: e,
}
// 点击覆盖物获取自定义数据
this._clickCb && this._clickCb(arg, e?.features?.[0]?.properties)
})
return layer
},
const _layers: Partial<Layers> = {
point: (data: LayerOption) =>
makeLayer(new aimap.MassMarkerLayer(toPoints(this.map, data))),
line: (data: LayerOption) =>
makeLayer(new aimap.LineString(toLines(this.map, data))),
polygon: (data: LayerOption) =>
makeLayer(new aimap.Polygon(toPolygons(this.map, data))),
}
this._markers = Object.assign(this._markers, _markers)
this._layers = Object.assign(this._layers, _layers)
}
zoomIn(options: ZoomOptions) {
......
src/my-map/ai-map/util.ts
View file @ 02f564cd
......@@ -92,3 +92,41 @@ export function toLines(map: unknown, options: LayerOption) {
},
}
}
/** 转化面状覆盖物 */
export function toPolygons(map: unknown, options: LayerOption) {
const {
data,
lineWidth = 3,
color = 'blue',
fillColor = 'rgba(135,206,235,0.5)',
labelKey,
spatialReference = 'gcj02',
labelOptions,
lineJoin = 'round',
} = options
const [horizontal, vertical] = labelOptions?.offset || []
return {
map,
spatialReference: spatialReference,
data: {
coordinates: Array.isArray(data)
? data.map(({ path }) => path?.map((e) => e))
: data.path,
...data,
},
style: {
'line-width': lineWidth,
'line-color': color,
'fill-color': fillColor,
'line-join': lineJoin,
'text-field': `{${labelKey}}`,
'text-color': labelOptions?.color,
// 偏移相比测绘院地图大概小了10倍，且竖直偏移相反
'text-offset': [
horizontal ? horizontal / 10 : 0,
vertical ? vertical / -10 : 0,
],
},
}
}
src/my-map/map.d.ts
View file @ 02f564cd
......@@ -6,6 +6,7 @@ declare const SMap: {
Label: any
Marker: any
Polyline: any
Polygon: any
OverlayGroup: any
Network: any
Home: any
......@@ -32,4 +33,6 @@ declare const aimap: {
CompassControl: any
ScaleControl: any
MassMarkerLayer: any
LineString: any
Polygon: any
}
src/my-map/my-map.ts
View file @ 02f564cd
......@@ -14,7 +14,7 @@ export default abstract class MyMap {
protected map
protected _listeners: Listeners
protected _controls: Controls
protected _markers: Layers
protected _layers: Layers
constructor(instance: any) {
this.map = instance
......@@ -88,7 +88,7 @@ export default abstract class MyMap {
console.error('set：此地图不存在 bMapGalleryexpand 控件！')
},
}
this._markers = {
this._layers = {
point: () => console.error('add：此地图不存在 point 覆盖物！'),
line: () => console.error('add：此地图不存在 line 覆盖物！'),
}
......@@ -130,7 +130,7 @@ export default abstract class MyMap {
* @param data 覆盖物数据
*/
add<K extends keyof Layers>(type: K, data: LayerOption) {
return this._markers[type](data)
return this._layers[type](data)
}
/**
......
src/my-map/s-map/index.ts
View file @ 02f564cd
......@@ -12,7 +12,7 @@ import {
LayerOption,
ClickCallBack,
} from '../types'
import { toLines, toPoints } from './util'
import { toLines, toPoints, toPolygons } from './util'
export default class S_Map extends MyMap {
constructor(config: MapConfig<SMapConfig>) {
......@@ -104,94 +104,47 @@ export default class S_Map extends MyMap {
/** 设置控制器 */
private _setControls() {
const _controls: Partial<Controls> = {
home: (options?: ControlOptions) => {
const makeControl = (constructorFn: any, options?: ControlOptions) => {
this.map.addControl(
new SMap.Home({
new constructorFn({
visible: options?.show,
position: options?.position,
}),
)
}
const _controls: Partial<Controls> = {
home: (options?: ControlOptions) => {
makeControl(SMap.Home, options)
},
compass: (options?: ControlOptions) => {
this.map.addControl(
new SMap.Compass({
visible: options?.show,
position: options?.position,
}),
)
makeControl(SMap.Compass, options)
},
zoom: (options?: ControlOptions) => {
this.map.addControl(
new SMap.Zoom({
visible: options?.show,
position: options?.position,
}),
)
makeControl(SMap.Zoom, options)
},
fullScreen: (options?: ControlOptions) => {
this.map.addControl(
new SMap.Fullscreen({
visible: options?.show,
position: options?.position,
}),
)
makeControl(SMap.Fullscreen, options)
},
layerList: (options?: ControlOptions) => {
this.map.addControl(
new SMap.LayerListControl({
visible: options?.show,
position: options?.position,
}),
)
makeControl(SMap.LayerListControl, options)
},
measureLine: (options?: ControlOptions) => {
this.map.addControl(
new SMap.MeasureLine({
visible: options?.show,
position: options?.position,
}),
)
makeControl(SMap.MeasureLine, options)
},
measureArea: (options?: ControlOptions) => {
this.map.addControl(
new SMap.MeasureArea({
visible: options?.show,
position: options?.position,
}),
)
makeControl(SMap.MeasureArea, options)
},
basemapToggle: (options?: ControlOptions) => {
this.map.addControl(
new SMap.BasemapToggle({
visible: options?.show,
position: options?.position,
}),
)
makeControl(SMap.BasemapToggle, options)
},
underguroundSwitch: (options?: ControlOptions) => {
this.map.addControl(
new SMap.UndergroundSwitch({
visible: options?.show,
position: options?.position,
}),
)
makeControl(SMap.UndergroundSwitch, options)
},
bMapGallery: (options?: ControlOptions) => {
this.map.addControl(
new SMap.BMapGallery({
visible: options?.show,
position: options?.position,
}),
)
makeControl(SMap.BMapGallery, options)
},
bMapGalleryexpand: (options?: ControlOptions) => {
this.map.addControl(
new SMap.BMapGalleryExpand({
visible: options?.show,
position: options?.position,
}),
)
makeControl(SMap.BMapGalleryExpand, options)
},
}
this._controls = Object.assign(this._controls, _controls)
......@@ -199,19 +152,17 @@ export default class S_Map extends MyMap {
/** 设置覆盖物 */
private _setLayers() {
const _markers: Partial<Layers> = {
point: (data: LayerOption) => {
const layer = new SMap.OverlayGroup(toPoints(data), {})
const makeLayer = (group: unknown[]) => {
const layer = new SMap.OverlayGroup(group, {})
this.map.add(layer)
return layer
},
line: (data: LayerOption) => {
const layer = new SMap.OverlayGroup(toLines(data), {})
this.map.add(layer)
return layer
},
}
this._markers = Object.assign(this._markers, _markers)
const _layers: Partial<Layers> = {
point: (data: LayerOption) => makeLayer(toPoints(data)),
line: (data: LayerOption) => makeLayer(toLines(data)),
polygon: (data: LayerOption) => makeLayer(toPolygons(data)),
}
this._layers = Object.assign(this._layers, _layers)
}
zoomIn() {
......
src/my-map/s-map/util.ts
View file @ 02f564cd
......@@ -83,3 +83,48 @@ export function toLines(options: LayerOption) {
return [transData(data)]
}
}
/** 转化面状覆盖物 */
export function toPolygons(options: LayerOption) {
const {
data,
color = 'blue',
fillColor = 'rgba(135,206,235,0.5)',
labelKey,
labelOptions,
lineCap = 'square',
lineStyle = 'solid',
lineJoin = 'round',
lineWidth = 3,
} = options
const transData = (item: PointsData) => {
const result: any = {
paths: item.path?.map(([x, y]) => new SMap.LngLat(x, y)),
attributes: { ...item },
cap: lineCap,
strokeColor: color,
fillColor,
strokeWeight: lineWidth,
style: lineStyle,
lineJoin: lineJoin,
}
if (labelKey) {
result.label = new SMap.Label({
text: item[labelKey] + '',
size: labelOptions?.size,
color: labelOptions?.color,
xoffset: labelOptions?.offset?.[0],
yoffset: labelOptions?.offset?.[1],
verticalAlignment: 'middle',
horizontalAlignment: 'center',
})
}
return new SMap.Polygon(result)
}
if (Array.isArray(data)) {
return data.map(transData)
} else {
return [transData(data)]
}
}
src/my-map/types.ts
View file @ 02f564cd
......@@ -130,21 +130,19 @@ export interface ControlOptions {
* 控制器列表
*/
export interface Controls {
home: (options?: ControlOptions) => unknown
compass: (options?: ControlOptions) => unknown
zoom: (options?: ControlOptions) => unknown
scale: (options?: ControlOptions) => unknown
fullScreen: (options?: ControlOptions) => unknown
layerList: (options?: ControlOptions) => unknown
measureLine: (options?: ControlOptions) => unknown
measureArea: (options?: ControlOptions) => unknown
basemapToggle: (options?: ControlOptions) => unknown
underguroundSwitch: (options?: ControlOptions) => unknown
bMapGallery: (options?: ControlOptions) => unknown
bMapGalleryexpand: (options?: ControlOptions) => unknown
home: (options?: ControlOptions) => void
compass: (options?: ControlOptions) => void
zoom: (options?: ControlOptions) => void
scale: (options?: ControlOptions) => void
fullScreen: (options?: ControlOptions) => void
layerList: (options?: ControlOptions) => void
measureLine: (options?: ControlOptions) => void
measureArea: (options?: ControlOptions) => void
basemapToggle: (options?: ControlOptions) => void
underguroundSwitch: (options?: ControlOptions) => void
bMapGallery: (options?: ControlOptions) => void
bMapGalleryexpand: (options?: ControlOptions) => void
}
export interface ZoomOptions {
/** 如果 false ，则没有动画效果（默认true） */
animate?: boolean
......@@ -179,6 +177,7 @@ export interface FocusOptions {
export interface Layers {
point: (data: LayerOption) => unknown
line: (data: LayerOption) => unknown
polygon: (data: LayerOption) => unknown
}
/** 覆盖物点位数据 */
......@@ -215,6 +214,7 @@ export interface LayerOption {
color?: string
}
color?: string
fillColor?: string
lineCap?: string
lineStyle?: string
lineJoin?: 'bevel' | 'round' | 'miter'
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment