![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
OpenLayers
A_Big_Banana
人生如戏,全靠演技
展开
-
OpenLayers实战(八)行政区域遮罩和反遮罩
今天被客户吐槽瓦片地图太丑,而且不能突出重点,那这瓦片地图又不是我做的,您又舍不得花钱定制!!!我能怎么办呢?在使用瓦片地图的时候,可以通过加入特殊的层实现行政区域遮罩和反遮罩获取行政区域轮廓数据:http://datav.aliyun.com/tools/atlas/index.html#&lat=30.37018632615852&lng=106.68898666525287&zoom=3.5准备好瓦片地图(此处简写)loadMap(){ let mapLay原创 2021-10-11 17:43:44 · 1888 阅读 · 0 评论 -
OpenLayers实战(七)地图划线LineString,多个点图标
OpenLayers在VUE中的使用(七),地图划线LineStringmethods:{ createLineString(){ // 准备多个用于连线的点(后台查询结果再简单处理一下) const arr = [ [113.54381132650533, 22.266037182582796], [113.54210586066695, 22.259081722170357], [113.5原创 2021-09-28 13:48:35 · 5408 阅读 · 5 评论 -
OpenLayers实战(五)聚合,自定义聚合,特效聚合
地图提供的聚合能力let vectorSorce = new ol.source.Vector({ // 图标数据 // 见(三)创建自定义图标});let clusterSource = new ol.source.Cluster({ // 聚合数据源 distance: 100, // 自动聚合距离(以像素为单位,默认20) source: vectorSorce,});let clusterLayer = new ol.layer.Vector({ // 矢量图层原创 2021-09-17 11:27:09 · 2060 阅读 · 2 评论 -
OpenLayers实战(四)控制图标显示隐藏
将同一图层的元素(feature)进行分类显示和隐藏(类似于图层控制)// 接前面(三)图层和vectorSource数据源,遍历source数据源,将符合条件的feature的style置空或者重新设置样式let features = vectorSource.getFeatures();features.forEach(feature=>{ if(xxx){ feature.setStyle(null); // 隐藏 } if(xxx){原创 2021-09-17 11:04:25 · 3511 阅读 · 0 评论 -
OpenLayers实战(三)地图打点,自定义图标
往地图中添加删除层(layer)和元素(feature)// ===== 创建数据源和图层并加入map的图层 =====let vectorSource = new ol.source.Vector({ // 矢量数据源 features: [],});let vectorLayer = new ol.layer.Vector({ // 矢量图层 style: null, // 设置style为null,后面可以通过改变样式控制marker的显示隐藏 source: vect原创 2021-09-17 10:59:22 · 2067 阅读 · 0 评论 -
OpenLayers实战(二)地图常用事件
监听map常用事件// ===== 事件类型 ===== 'click',// 单击 'dblclick',// 双击 'singleclick',// 单击,延迟250毫秒 'moveend',// 鼠标滚动事件 'pointermove',// 鼠标移动事件 'pointerdrag',// 鼠标拖动事件 'precompose',//地图准备渲染,为渲染 'postcompose',//地图渲染中 'postrende原创 2021-09-17 10:44:31 · 2198 阅读 · 1 评论 -
OpenLayers实战(一)初始化加载瓦片地图
openLayers 笔记一(地图初始化,加载瓦片地图)// ===== 地图配置项 =====const mapConfig = { urlOSM:'url', // 镜头 center:[lon,lat], zoom:15, minZoom:0, maxZoom:19,}// ===== 实例化Map对象加载地图 =====let mapLayer = new ol.layer.Tile({ // 地图层 source: new ol.原创 2021-09-17 10:33:48 · 1004 阅读 · 0 评论