随笔分类 -  openLayers

openLayer矩形框选要素,展示要素属性
摘要:实现的效果: 通过绘制矩形框选要素,然后使用popup以弹窗的形式展示获取的要素属性。 // 选择要素事件开始 const btn_select = document.getElementById("btn_select"); btn_select.addEventListener("click", 阅读全文

posted @ 2021-09-15 17:04 一往无前! 阅读(544) 评论(0) 推荐(0) 编辑

点击选中的要素,更换标注图片,并添加文本标注
摘要:首先放置修饰好的图标 //使用Select进行要素的选择 //定义select控制器,点击标注后的事件 const map = this.map; var select = new Select(); //map加载该控件,默认是激活可用的 map.addInteraction(select); s 阅读全文

posted @ 2021-09-13 10:52 一往无前! 阅读(110) 评论(0) 推荐(0) 编辑

openLayer点击要素获取对应的属性信息
摘要:点击要素获取对应的属性信息的两种方法 1.首先是map的点击事件 const map = this.map; map.on('click', function(evt) { var coordinate = evt.coordinate; //获取点击要素的位置coordinate[0]为精度coo 阅读全文

posted @ 2021-09-13 10:51 一往无前! 阅读(1735) 评论(0) 推荐(0) 编辑

openLayer实现放大缩小
摘要:openLayer使用自定义的图标,实现地图的放大缩小 // 放大地图 function zoomIn() { var view = map.getView(); // 让地图的zoom增加1,从而实现地图放大 view.setZoom(view.getZoom() + 1); } // 缩小地图 阅读全文

posted @ 2021-09-13 10:47 一往无前! 阅读(741) 评论(0) 推荐(0) 编辑

openLayer的切换中心点、定位功能
摘要:设置重新设置定位的功能 1.ol的定位功能 map.getView().setCenter([经度,纬度]) map.getView().setZoom(11); 2.根据经纬度,重新确定中心位置 map.getView().animate({ // 只设置需要的属性即可 center: [经度,纬 阅读全文

posted @ 2021-09-13 10:44 一往无前! 阅读(4517) 评论(0) 推荐(1) 编辑

使用openLayer加载arcgis中的地图
摘要:由于项目中需要用到openLayer引入arcgis中的服务,所以特此分享以下 var img = new TileLayer({ source: new XYZ({ url: 'https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetWa 阅读全文

posted @ 2021-09-13 10:18 一往无前! 阅读(801) 评论(0) 推荐(0) 编辑

openLayer实现两个地图联动
摘要:其主要思想就是将两个地图放在一个view即可 <template> <div class="main"> <div id="map1"></div> <div id="map2"></div> </div> </template> <script> import {Map,View} from 'o 阅读全文

posted @ 2021-09-10 11:56 一往无前! 阅读(301) 评论(0) 推荐(0) 编辑

使用ol进行底图的切换
摘要:使用openLayer进行天地图的显示,以及底图的切换 <template> <div> <div id="mapDiv" class="mapDiv"> </div> <button @click="change_img">切换影像底图</button> <button @click="chang 阅读全文

posted @ 2021-09-08 10:57 一往无前! 阅读(203) 评论(0) 推荐(0) 编辑

ol text属性
摘要:options: font 字符串类型.用逗号隔开每个属性 默认:10px sans-serif 其原型就是应用在Canvas上的字体样式. 其取值有可以取 css font 中的样式 maxAngle 数字类型. 前提必须是placement属性设置为line 默认:45°(Math.PI / 4 阅读全文

posted @ 2021-09-08 09:59 一往无前! 阅读(239) 评论(0) 推荐(0) 编辑

使用openLayer在地图上添加标注
摘要:因为在实际的项目中要用到这个功能,找了好久才得以实现,代码来自:https://www.jianshu.com/p/4af2a52a0fc6 效果如下; 需要引入的类 //添加标注所用到的类 import Vectors from 'ol/layer/Vector.js' import { WMTS 阅读全文

posted @ 2021-09-07 17:58 一往无前! 阅读(1713) 评论(0) 推荐(0) 编辑

< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

统计

点击右上角即可分享
微信分享提示