开源GIS（六）——openlayers中overlay强大功能

一、引言

overlay是覆盖物的意思，主要是放置一些和地图位置相关的元素，如：infowindow、点标记、图片等，而这些覆盖物都是和html中的element等价的，通过overlay的属性element和html元素绑定同时设定坐标参数——达到将html元素放到地图上的位置，在平移缩放的时候html元素也会随着地图的移动而移动。

在arcgis中也有这方面的功能（infowindow），但是很不方便，都要自己去在地图平移缩放事件中自己去写infowindow的位置移动，而openlayer超级方便。

二、overlay使用

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="lib/jquery/jquery-3.3.1.min.js"></script><link rel="stylesheet" href="js/ol.css"><script src="js/ol-debug.js"></script><link rel="stylesheet" href="css/xcy.css"></head>
<body>
<div id="map" style="width: 100%"><div id="popup" class="ol-popup"><a href="#" id="popup-closer" class="ol-popup-closer"></a><div id="popup-title" class="popup-title"></div><div id="popup-content" class="popup-content"></div></div>
</div>
<script>var format = 'image/png';//viewvar view=new ol.View({// 设置成都为地图中心center: ol.proj.transform([110,39],"EPSG:4326","EPSG:3857"),zoom: 4});vectorvar vectorSource = new ol.source.Vector({features:[]});var vectorLayer = new ol.layer.Vector({source: vectorSource,style: styleFunction});function  styleFunction(feature) {return  new ol.style.Style({image: new ol.style.Circle({radius: 5,fill: new ol.style.Fill({color: "red",opacity: 0.5})})});}// mapvar map = new ol.Map({layers: [getTdtLayer("vec_w"),getTdtLayer("cva_w")],view:view,target: 'map'});map.addLayer(vectorLayer);overlayvar container = $("#popup");var content = $("#popup-content");var title =$("#popup-title");var closer =$("#popup-closer");closer.on("click",function () {container.hide();closer.blur();return false;});var overlay = new ol.Overlay({element: container[0],autoPan:true,autoPanMargin:100,positioning:'center-right'});map.addOverlay(overlay);map.on('click', function(evt) {var coordinate = evt.coordinate;var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(coordinate, 'EPSG:3857', 'EPSG:4326'));var info='<p>You clicked here:</p><code>' + hdms + '</code>';showinfo(coordinate,info);//var feature=new ol.Feature({geometry:new ol.geom.Point(coordinate)});vectorSource.clear();vectorSource.addFeature(feature)});function showinfo(coordinate,info) {content.html(info) ;container.show();title.html("提示信息");title.show();overlay.setPosition(coordinate);}function getTdtLayer(lyr) {var urls=[];for(var i=0;i<8;i++){urls.push( "http://t"+i+".tianditu.com/DataServer?T=" + lyr + "&X={x}&Y={y}&L={z}")}var layer = new ol.layer.Tile({source: new ol.source.XYZ({urls:urls})});return layer;}
</script>
</body>
</html>

效果图：

三、总结

没啥总结的，就是单纯的overlay==

开源GIS（六）——openlayers中overlay强大功能相关推荐

gispython定义查询_Python与开源GIS：SpatiaLite 中的基本SQL数据库查询用法
Python与开源GIS教程的内容,开发了单独的内容,请打开 https://www.osgeo.cn/pygis/ 查看. 本页面的内容不再更新. 这一节我们来看一下基本的SQL语句用法.使用最通用 ...
shell编程中的 ${ }强大功能
為了完整起見,我這裡再用一些例子加以說明 ${ } 的一些特異功能: 假設我們定義了一個變量為: file=/dir1/dir2/dir3/my.file.txt 我們可以用 ${ } 分別替換獲得不 ...
开源GIS平台空间数据管理与发布技术研究
毕业论文(设计) 题目: 开源GIS平台空间数据管理与发布技术研究 2014 年 5 月摘要本文系统地分析了网络地理信息系统(Web GIS)工作原理,阐述了使用免费.开源的GIS平台的开发模式. ...
开源GIS（七）——openlayers中单击获取要素（深度好文）
目录一.引言二.前台方法 1.interaction中select方法 2.map中forEachFeatureAtPixel方法三.gis server方法 1.wms中getfeaturei ...
开源GIS（十二）——openlayers中加载切片原理
目录一.切片加载方法 1.代码 2.代码分析 3.参数解释二.切片加载原理一.切片加载方法 1.代码 var projection = ol.proj.get('EPSG:3857');// 瓦 ...
开源GIS（十五）——openlayers通过geoserver中WFS删除要素
目录一.引言二.WFS要素删除实现三.WFS要素删除原理 1.请求xml 2.postman使用 3.要素删除 4.返回xml 四.openlayers中feature的坐标信息获取五.总结 ...
【C++】9.GIS应用：开源GIS平台开发入门（MapServer+QGIS+PostGIS+OpenLayers）
GIS地理信息处理相关. 文章目录 1. GIS软件工具 2. MapServer服务器 3. QGIS桌面软件 QGIS加载csv数据 4. PostGIS数据库 5. OpenLayers(JS) ...
Python与开源GIS：在OGR中使用SQL语句进行查询
属性选择与空间选择都可以看作是OGR内置的选择功能,这两种功能可以解决大部分实际中的问题.但是也有这种时候,就是进行查询时的条件比较复杂.针对这种情况,OGR也提供了更加灵活的解决方案:支持使用SQL ...
Minitab软件是现代质量管理统计的领先者，全球六西格玛实施的共同语言，以无可比拟的强大功能和简易的可视化操作深受广大质量学者和统计专家的青睐。...
Minitab软件是现代质量管理统计的领先者,全球六西格玛实施的共同语言,以无可比拟的强大功能和简易的可视化操作深受广大质量学者和统计专家的青睐. MINITAB 功能菜单包括: 基础和高级统计工具: ...

开源GIS（六）——openlayers中overlay强大功能

开源GIS（六）——openlayers中overlay强大功能相关推荐

最新文章

热门文章