【openlayers框架学习】十一：openlayers实战功能介绍与前端设计

---

---

openlayers进阶

35 openlayers实战项目功能介绍

1.以动画方式移动定位到城市中心
2.搜索跳转到城市中心
3.通过鼠标交互画线绘图
4.通过鼠标点击添加图标标记
5.缩放地图实现图标聚合

source->Cluster 聚合功能

36 openlayers实战加载地图底图

创建项目

npm init vite
project name: ol-test
framework: Vue
variant: javascriptcd ol-test
pnpm i
pnpm i ol element-plus
pnpm i @element-plus/icons-vue
pnpm i sass -Dpnpm dev

app.vue

<template><div class="top-nav"><div class="city-choose">{{ city }}</div><el-input v-model="searchCity" style="width:240px" size="large" placeholder="请输入城市名称" :prefix-icon="Search"></el-input><el-select v-model="drawType" placeholder="请选择绘制图形" style="width: 240px;"><el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option></el-select><el-select v