![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
openlayers学习
文章平均质量分 92
NoCarrots
这个作者很懒,什么都没留下…
展开
-
openlayers学习之绘制点线多边形和矩形(四)
目录一、构建下拉框二、定义全局变量三、创建绘制函数一、构建下拉框首先构建一个简单的下拉框,下拉框包含点线多边形和矩形四个类型的元素,每一个option的value对应在openlayers中的value。<select id="type" style="position: absolute;right: 20px;top: 60px;z-index: 20;width: 100px;height: 30px" title="图形绘制" onchange="selectDraw(this.valu原创 2020-06-02 09:44:17 · 2422 阅读 · 4 评论 -
openlayers学习小知识(持续更新)
1、限制地图缩放级别:在View中定义属性minZoom和maxZoom,可以设置地图缩放的最小级别和最大级别;2、动态设置地图的缩放级别:使用map.getView()方法获取地图当前的View,view.getZoom获取当前视图的缩放级别,view.setZoom设置视图的缩放级别,map.setView设置地图的视图;3、单击激活地图交互:设置单击地图之后才能平移、缩放等操作地图。在map中定义属性interactions:ol.interaction.defaults({onFocusOnly原创 2020-06-01 16:22:27 · 541 阅读 · 0 评论 -
openlayers学习之Overlay实现点标记+点标注(三)
目录一、设置点标记dom对象和样式二、设置标注的样式三、定义Overlay一、设置点标记dom对象和样式首先在css文件中设置点标记的样式,然后再html文件中设置点标记的dom对象。#marker{ width: 20px; height: 20px; border: 1px solid #088; border-radius: 10px; background-color: #0ff; opacity: 0.8;}<div id="mark原创 2020-06-01 15:31:44 · 1905 阅读 · 0 评论 -
openlayers学习之popup弹窗实现(二)
目录一、定义popup弹窗dom对象二、定义弹窗样式三、定义Overlay四、设置单击地图后弹窗显示信息五、设置弹窗关闭事件一、定义popup弹窗dom对象要展示弹窗,我们首先需要一个dom对象来承载。<div id="popup" class="ol-popup"> <a href="#" id="popup-closer" class="ol-popup-closer" onclick="closePopup();"></a> &原创 2020-06-01 11:08:11 · 3366 阅读 · 3 评论 -
Openlayers学习之调用Geoserver发布的地图服务(一)
目录一、openlayers引用首先引用js文件,在官网下载类库的压缩包,解压缩在项目目录下。在html文件中引用。 <link rel="stylesheet" href="../plugins/openlayers4/css/ol.css" type="text/css"> <script src="../plugins/openlayers4/build/ol.js"></script>二、创建地图容器创建dom对象作为地图容器,以承载地图。&原创 2020-06-01 10:53:58 · 11488 阅读 · 3 评论