广州网站制作报价,学校网站建设流程图,老公的姐姐一直用我们的手机号码,wordpress建电商网站还是大剑师兰特#xff1a;曾是美国某知名大学计算机专业研究生#xff0c;现为航空航海领域高级前端工程师#xff1b;CSDN知名博主#xff0c;GIS领域优质创作者#xff0c;深耕openlayers、leaflet、mapbox、cesium#xff0c;canvas#xff0c;webgl#xff0c;ech… 还是大剑师兰特曾是美国某知名大学计算机专业研究生现为航空航海领域高级前端工程师CSDN知名博主GIS领域优质创作者深耕openlayers、leaflet、mapbox、cesiumcanvaswebglecharts等技术开发欢迎加底部微信gis-dajianshi一起交流。 No.内容链接1Openlayers 【入门教程】 - 【源代码示例300】 2Leaflet 【入门教程】 - 【源代码图文示例 150】 3Cesium 【入门教程】 - 【源代码图文示例200】 4MapboxGL【入门教程】 - 【源代码图文示例150】 5前端就业宝典 【面试题详细答案 1000】 文章目录 一、 overlay 常用属性二、overlay 常用方法三、overlay 常用事件四、实战示例五、Openlayers 入门教程 -系列文章列表 Overlay这个组件在Openlayers 项目中是经常要用到的使用的场景通常是作为弹窗显示某点或者某区域的信息。它不是根据屏幕位置固定的而是与地理坐标相关联因此平移地图将移动 Overlay。常用的大致有三类弹窗、标注、文本信息。每个覆盖物都会生成对应的HTML元素所以我们也可以使用css来修改去样式。
一个覆盖物最少需要一个元素当数据量大时元素节点过多会导致页面加载卡顿不流畅。大数据量的绘制图还是使用图层最好。 一、 overlay 常用属性
• id覆盖物的唯一标识 便于 getOverlayById 方法取得相应的 overlay。 • element要添加到覆盖物元素。 • offset偏移量像素为单位。overlay 相对于放置位置position的偏移量默认值是 [0, 0]正值分别向右和向下偏移。 • position在地图所在的坐标系框架下overlay 放置的位置。 • positioningoverlay 对于 position 的相对位置可能的值是’bottom-left’‘bottom-center’‘bottom-right’ ‘center-left’‘center-center’‘center-right’‘top-left’ ‘top-center’和’top-right’。 • stopEvent是否应停止事件传播到地图视口。 • autoPanAnimation用于将叠加层平移到视图中的动画选项。此动画仅在autoPan启用时使用。可以提供Aduration和easing来自定义动画。如果autoPan作为对象提供则弃用并忽略。 • classNameCSS 类名。
二、overlay 常用方法
• setPosition设置 position 属性。 • getElement获取传入的元素节点。 • getId获取 overlay 的 id。 • getMap获取与 overlay 关联的 map对象。 • getOffset获取 offset 属性。 • getPosition获取 position 属性。 • getPositioning获取 positioning 属性。 • setElement, 设置元素节点。 • setMap设置map对象。 • setOffset设置 offset。 • setPositioning设置 positioning 属性。
三、overlay 常用事件
• change当引用计数器增加时触发 • change:elementoverlay 对应的 element 变化时触发 • change:mapoverlay 对应的 map 变化时触发 • change:offsetoverlay 对应的 offset 变化时触发 • change:positionoverlay 对应的 position 变化时触发 • change:positioningoverlay 对应的 positioning 变化时触发 • propertychangeoverlay 对应的属性变化时触发
绑定方式 var overlay new ol.Overlay({ overlay.on(“change:element”, function(){ console.log(“获取变化”); })
四、实战示例
示例 1 : 单击某位置弹出经纬度坐标 示例 2 双击名片坐标显示名片信息 示例 3 点击位置点弹出播放MP4视频
五、Openlayers 入门教程 -系列文章列表
openlayers 入门教程一应该如何学习openlayersopenlayers 入门教程二Map 篇openlayers 入门教程三View 篇openlayers 入门教程四Layers 篇openlayers 入门教程五Sources 篇openlayers 入门教程六Controls篇openlayers 入门教程七Interactions篇openlayers 入门教程八Geom 篇openlayers 入门教程九Overlay 篇openlayers 入门教程十Style 篇openlayers 入门教程十一Formats篇openlayers 入门教程十二定位与轨迹openlayers 入门教程十三动画openlayers 入门教程十四第三方插件openlayers 入门教程十五与 canvas、echartturf 等交互
