openlayers封装和使用汇总

风里有诗句哈

于 2019-11-14 15:54:37 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：快速掌握openLayers基础知识和实际案例

本文链接：https://blog.csdn.net/Vansal/article/details/103068723

快速掌握openLayers基础知识和实际案例专栏收录该内容

7 篇文章 ¥99.90 ¥299.90

订阅专栏

超级会员免费看

这篇博客详细介绍了如何封装和使用OpenLayers，包括整体封装、站点交互、图层管理、绘制操作、行政边界处理等功能，同时展示了如何在地图上进行画线、圈选、显示GeoJSON数据等操作，并提供了鼠标点击获取属性信息及高亮区域的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

绘制圈选区域并拿到这个区域内的feature（不准确）

绘制圈选区域并拿到这个选区内的feature（通过坐标是否在几何内，准确）

不显示控件

生成行政边界

单击地图获取所点击feature和属性并弹框

整体封装openlayers（最新）

// 转换为web merctor投影
var destinationPro = "EPSG:3857";
// 地理原始投影
var sourcePro = 'EPSG:4326';

var centerPoint = [121.55, 29.88];
var defaultZoom = 14;

// 地图函数对象
var mapObj = {
  geojsonFormat: new ol.format.GeoJSON({
    dataProjection: sourcePro,
    featureProjection: destinationPro
  }), 
  overlay: new ol.Overlay({
    id: 'popup',
    element: $('#station-popup').get(0),
    autoPan: true, // 弹窗全部显示在地图中
    positioning: 'center-center',
    autoPanAnimation: {
      duration: 250
    }
  }),
  // 初始化地图
  initMap: function