<template>
<div class="vue-root">
<div id="map">
<vl-map :load-tiles-while-animating="true" :load-tiles-while-interacting="true">
<vl-view :zoom="10" :center="center" :rotation="0"></vl-view>
<vl-layer-tile id="osm">
<vl-source-osm :url="map_source"></vl-source-osm>
</vl-layer-tile>
<vl-overlay class="feature-popup" v-for="feature in features" :key="feature.id" :id="feature.id" :position="pointOnSurface(feature.geometry)"
:auto-pan="true">
<component :is="feature.geometry.template" :coordinates="feature.geometry.coordinates"></component>
</vl-overlay>
<component v-for="layer in layers" :is="layer.template" v-if="layer.visible" :key="layer.id" v-bind="layer">
<component :is="layer.source.template" v-bind="layer.source">
<vl-feature v-for="feature in layer.source.features" :key="feature.id" :id="feature.id" :properties="feature.properties">
<component :is="feature.geometry.template" :coordinates="feature.geometry.coordinates"></component>
</vl-feature>
<component v-if="layer.source.source" :is="layer.source.source.template" v-bind="layer.source.source">
<vl-feature v-for="feature in layer.source.source.features" :key="feature.id" :id="feature.id" :properties="feature.properties">
<component :is="feature.geometry.template" :coordinates="feature.geometry.coordinates" @click="alert(feature)"></component>
</vl-feature>
</component>
</component>
<component v-for="(style, i) in layer.style" :key="i" :is="style.template" v-bind="style">
<component v-for="(s, template) in style.styles" :key="template" :is="template" v-bind="s">
<vl-style-fill v-if="s.fill" v-bind="s.fill"></vl-style-fill>
<vl-style-stroke v-if="s.stroke" v-bind="s.stroke"></vl-style-stroke>
</component>
</component>
</component>
</vl-map>
</div>
</div>
</template>
<script>
import {
core as vlCore
} from 'vuelayers'
export default {
data() {
return {
center: [20.5502871, 54.732708099999996],
map_source: "https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png", //"./map/images/{x}/{y}/{z}.png"
map: undefined,
features: [{
type: 'Feature',
id: 'random-1',
geometry: {
type: 'Point',
coordinates: [20.5502871, 54.732708099999996],
},
}, {
type: 'Feature 2',
id: 'random-2',
geometry: {
type: 'Point',
coordinates: [20.4502871, 54.632708099999996],
},
}],
layers: [{
id: 'cluster',
title: 'Cluster',
template: 'vl-layer-vector',
visible: true,
source: {
template: 'vl-source-cluster',
distance: 11,
source: {
template: 'vl-source-vector',
features: [{
template: 'Feature',
id: 'random-1',
geometry: {
template: 'vl-geom-point',
coordinates: [20.4502871, 54.632708099999996],
}
},{
template: 'Feature',
id: 'random-2',
geometry: {
template: 'vl-geom-point',
coordinates: [20.3502871, 54.632708099999996],
}
}],
},
},
style: [{
template: 'vl-style-func',
factory: this.clusterStyleFunc,
}]
}]
}
},
mounted() {
console.log('Component ยซClient Part Mapยป mounted.')
},
methods: {
pointOnSurface: vlCore.geomHelper.pointOnSurface,
clusterStyleFunc() {
const cache = {}
return function __clusterStyleFunc(feature) {
const size = feature.get('features').length
console.log('feature', feature)
let style = cache[size]
if (!style) {
style = vlCore.styleHelper.style({
imageRadius: 10,
strokeColor: '#fff',
fillColor: '#3399cc',
text: size.toString(),
textFillColor: '#fff',
zIndex: 100,
})
cache[size] = style
}
console.log(style)
return [style]
}
},
}
}
</script>
<style lang="scss" scoped>
#map {
min-height: 600px;
height: calc(100vh - 40px - 150px - 15px);
border-radius: 25px;
}
</style>I try to comment some components, and error makes in vl-source-vector component.
What i do wrong? Where function exepted?
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent