openlayers小案例（输入地名查询、拖动图层切换、图层透明度、鹰眼、图层显示与隐藏、定位、放大缩小）新手必备

最新推荐文章于 2024-02-06 16:48:24 发布
最新推荐文章于 2024-02-06 16:48:24 发布
阅读量1.9k 收藏 9
点赞数 11
分类专栏： 乱七八糟 文章标签： webgis openlayers 前端 gis 地理信息
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45549336/article/details/115036483
版权

这里写目录标题

界面

  • 左侧和右侧为功能区
  • 上下为信息区
  • 中间显示地图
  • 左右可收起展开
    在这里插入图片描述

在这里插入图片描述

功能

  • 左侧地图查询
  • 右侧可以调整图层透明度
  • 显示和隐藏图层
  • 拖动图层切换图层上下级关系
  • 鹰眼、放大缩小、全屏、定位

额外说明

  • 查询功能请自己在index文件中308行出贴上自己的key（去高德的网址申请，不懂请私聊）
    在这里插入图片描述

  • 代码就随手写的，写的很烂，勿喷。。。。。。

代码已上传在我的资源处、免费下载代码

四阶张量
关注
专栏目录
OpenLayer-比例尺-3857
zhushanlin的博客
04-27 109
【代码】OpenLayer-比例尺-3857。
OpenLayers6入门，OpenLayers多图层切换显示隐藏，支持多个Layer同时显示和隐藏，以百度地图和高德地图为例实现vue的Layer图层管理组件
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
05-20 2359
OpenLayers默认并没有提供图层管理组件，本章就讲一下在vue中如何使用ElementUI的下拉框做一个简单的图层管理组件。话不多说，直接开始。
OpenLayers实现图层切换控件
01-18
OpenLayers并没有封装图层切换的控件，所以我们需要自己来实现图层控件。 自定义图层切换控件的原理很简单：显示某个图层时，将其他图层隐藏。 完整代码： layerSwitch.html: <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA-Compatible content=ie=edge> <title>图层切
关于OpenLayers的WFS地名点查询中文问题的解决
weixin_30500105的博客
07-07 281
1. 做个响应按钮：<input type="submit" value="查询" id="query" onclick="query()"/>2. 写JS代码：(1) get方式请求:function query(){var str="碧桂园小区翠林环玉苑46栋03号"; new OpenLayers.Request.GET( { url : "http://...
OpenLayers 3 之 切换图层控件
weixin_30390075的博客
05-02 316
OpenLayers 3 之 切换图层控件 openlayers 3中并没有默认的图层切换控件，GitHub中有一个项目实现了我们需要的控件--------ol3-layerswitcher。 可全局引入，模块化引入须注意，必须把ol声明成全局变量。否则引入ol3-layerswitcher时报错：ol is not defined; 　　因为webpack在模块化引入时每个...
Openlayers 教程 13 - 图层对象的常用操作（添加移除、显示隐藏、层级调整、定位等）
linzi19900517的博客
04-15 2660
在 Openlayers 中，图层是非常基础的对象，这里汇总介绍一下图层常用的操作，主要包括：添加移除、显示隐藏、层级调整、定位。
Openlayers 教程 19 - 加载 Geoserver 图层以及切换图层样式
linzi19900517的博客
12-15 1128
Openlayers 加载 Geoserver 图层以及切换图层样式.
OpenLayers3实现图层控件功能
10-14
这个函数会遍历地图上的所有图层，为每个图层创建一个li元素，其中包含图层名称和一个用于切换图层可见性的复选框。 - **事件处理**：为每个图层列表项添加点击事件监听器，当用户点击时，更新对应图层的可见性。 ...
openlayers实现客户端图层的拖动。
story_in_sh的博客
07-27 739
在做openlayers开发的时候很容易遇到需要拖动客户端图层的需求。这里我分享一下我的实现过程。 代码如下： <script> import Translate from 'ol/interaction/Translate';//首先引入Translate export default { data(){ layer:null//这个是要被拖动图层，这里我就不实例化了。 }, methods:{ translate(){
ol-layerswitcher:OpenLayers的图层控制
04-27
OpenLayers LayerSwitcher OpenLayer地图的分组图层列表控件。 要显示在LayerSwitcher图层中，应具有title属性； 基本层应将type属性设置为base 。 LayerGroup层（ LayerGroup ）可用于将图层可视地分组在一起； fold属性设置为“ open或“ close将显示为带有切换开关。 有关用法，请参见和。 与OpenLayers版本3、4、5和6兼容（有关安装适用于OpenLayers的ol-layerswitcher版本的信息请参阅中ol-layerswitcher ）。 例子 这些示例演示了用法，并且可以通过在线查看这些示例： 创建一个图层切换器控件。 图层切换器中要显示的每个图层都具有title属性，每个组也是如此。 每个基础地图图层都有一个type: 'base'属性。 见评价其他层/组选择，包括combi
OpenLayers 地图鹰眼、拉框示例代码
09-29
OpenLayers 地图鹰眼、拉框示例代码 仅供学习参考
openlayers 鹰眼示例，包含图层选择
08-11
openlayers 鹰眼示例，包含图层选择
vue3.0 + openLayer，实现图层切换
qq_32687373的博客
08-18 1225
第一步：npm安装 npm install ol 因为涉及兄弟组件传值，所以还引入mitt npm install mitt main.js中，配置如下： import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' import Mitt from 'mitt' const app = createApp(App) // 挂.
openlayers：实现地理位置搜索定位（附完整源码）
最新发布
希望我的博客，能帮上你解决学习中工作中所遇到的问题
02-06 269
openlayers：实现地理位置搜索定位（附完整源码）
Openlayer OverLay 地图联动/拖动
西柚2015地信小白GISer
03-09 824
目标： 通过尝试我的理解是“是否停止对OverLay的事件监听”（如有合理正确的解释请评论私信留言，一起探讨学习） stopEvent设置为“true”（不能点击叠置图层进行拖动） stopEvent设置为“false”（点击叠置图层允许进行拖动） ...
openlayer 图层上下_OpenLayer基础（二）——图层(layer)
weixin_32723617的博客
01-28 1233
在openlayers中,Layer是Map的必须组成，也是核心要素，今天学习利用openlayers加载各种不同类型的地图数据。内容包括：利用openlayers加载瓦片数据；利用openlayers加载图片数据利用openlayers加载矢量数据利用openlayers加载矢量瓦片数据1.Layerol定义了四种基本的图层类型，分别是Tile、Image、Vector、VectorTile，这...
openlayer3隐藏地图右下角logo
study_7forever的博客
11-04 1622
第一次接触openlayer3绘制地图，遇到很多问题。虽然有api.但是小白表示看的不在状态。整理记录一下openlayer3绘制地图过程的小问题及解决方法，希望能帮助更多的朋友马上解决问题。 首先，分享大家一位大神的学习链接：http://anzhihun.coding.me/ol3-primer/ch03/03-06.html对于小白来说很实用。 切入正题：隐藏一个地图上右下角的logo图...
OpenLayers加载鹰眼、比例尺、坐标显示
xiao猪仙的博客
08-28 4410
OpenLayers加载鹰眼、比例尺、坐标主要内容加载鹰眼控件加载比例尺控件加载坐标显示关键代码 主要内容 上一期说的如何基于Vue创建OpenLayers应用，这次说说如何加载常用的OpenLayers控件，主要有鹰眼、比例尺、坐标显示。 加载鹰眼控件 1.根据官方文档，首先引入依赖 我们可以这样引入 import { OverviewMap, defaults } from "ol/control"; 2.添加鹰眼控件代码 定义map的control属性，实例化一个鹰眼地图，这里注意鹰眼图不显示或
OpenLayers3实战：自定义图层控件与代码示例
由于 OpenLayers3 内置的控件功能有限，但其 API 提供了扩展的可能性，开发人员可以根据需求自定义图层显示和操作。 首先，作者建议读者从加载基本的 OSM 瓦片图层开始，这是地图的基础。然后，创建一个新的 HTML ...
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值