0.0.3 • Published 1 year ago
ol-map-vue3 v0.0.3
ol-map-vue3
Vue3基于openLayers封装的地图组件库
以 https://gitee.com/newgateway/xdh-map 为基础,修改为Vue3 setup + ts版本
⚠本项目处于极其早期状态,请不要使用!
安装
pnpm i ol-map-vue3
用例
import { OlMap, OlMapCircle, OlMapLine, OlMapPolygon } from 'ol-map-vue3'
<OlMap adapter="Amap" :center="[113.261999, 23.130592]" :zoom="14">
<OlMapCircle :center="[113.261999, 23.130592]" :radius="1000" />
<OlMapLine
:coordinates="[
[112.810186, 23.267921],
[113.577856, 23.277534],
[113.164495, 23.009742],
[113.811415, 22.958749],
]" arrow arrow-each color="red" :stroke="{
width: 3,
color: '#409e00',
}"
/>
<OlMapPolygon
:coordinates="[
[112, 23],
[113.57, 23.27],
[113, 23],
]" fill="rgba(250,250,0, 0.1)" :stroke="{
width: 1,
color: 'red',
}"
/>
<OlMapText
:coordinate="[113.261999, 23.130592]" v-bind="{
text: '文本样例',
font: '30px',
fill: '#fff',
stroke: {
width: 3,
color: '#409e00',
},
rotation: -0.5,
backgroundFill: 'rgba(0,0,0,0.3)',
padding: [10, 10, 5, 10],
backgroundStroke: {
width: 5,
color: '#009e00',
},
}"
/>
<OlMapHtml :position="[113.061999, 23.230592]">
<div style="background-color: aquamarine;">
HTML覆盖物
</div>
<button>test</button>
</OlMapHtml>
</OlMap>