当前位置: 首页 > news >正文

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


文章目录

    • openlayers进阶
      • 35 openlayers实战项目功能介绍
      • 36 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
http://www.lryc.cn/news/608834.html

相关文章:

  • K8S几种常见CNI深入比较
  • 企业自动化交互体系的技术架构与实现:从智能回复到自动评论—仙盟创梦IDE
  • ThinkPHP8学习篇(一):安装与配置
  • Go语言--语法基础7--函数定义与调用--自定义函数
  • Mysql深入学习:慢sql执行
  • Docker 国内可用镜像
  • ABP VNext + Quartz.NET vs Hangfire:灵活调度与任务管理
  • [嵌入式embed]C51单片机STC-ISP提示:正在检测目标单片机
  • 深度学习(鱼书)day10--与学习相关的技巧(后两节)
  • LWIP从FreeRTOS到uC/OS-III的适配性改动
  • 第六章第三节 TIM 输出比较
  • 关于Web前端安全防御之安全头配置
  • 位运算在权限授权中的应用及Vue3实践
  • 深入理解Java中String.intern()方法:从原理到并发控制实践
  • ElementUI常用的组件展示
  • 高质量数据集|大模型技术正从根本上改变传统数据工程的工作模式
  • Android 之 串口通信
  • zookeeper分布式锁 -- 读锁和写锁实现方式
  • 【Android】RecyclerView循环视图(2)——动态加载数据
  • 【C 学习】04-了解变量
  • 《volatile 与 synchronized 底层实现与性能比较》
  • 【OD机试题解法笔记】文件缓存系统
  • linux 扩展未分配的磁盘空间到home下
  • 【从零开始速通C语言1】 - 汇编语言1
  • RAG 知识库实战指南:基于 Spring AI 构建 AI 知识问答应用
  • 第N个泰波那契数
  • Coze 打通飞书多维表格,实现数据增删改查操作实战详解
  • 机器学习sklearn:支持向量机svm
  • 《使用Qt Quick从零构建AI螺丝瑕疵检测系统》——9. 接入真实硬件:驱动USB摄像头
  • 李宏毅深度学习教程 第8-9章 生成模型+扩散模型