web技术学习

Appearance

此页目录
本文总阅读量 次

openlayers 快速上手-核心功能点、线、面基础操作 ​

安装 ​

sh
npm i ol

名词解释 ​

  • features 要素
  • Fires 触发
  • Subclasses 子类
  • Extends 父类
  • Observable Properties 可观察的属性（当属性发生变化触发 change：事件名的事件）
  • Methods 方法
  • 事件名(参数类型) -> 返回值

核心组件 ​

Map、Layer、Source、View、Control、Interaction 几乎所有的动作都是围绕这几个核心类展开

js
new Map({
  layer // 图层,能控制数据是否显示,及地图可显示的最大或最小比例尺
  source // 数据源,分为矢量数据源和影像数据源
  View // 视图,设置地图的展示位置范围、地图中心位置以及当前地图使用的投影坐标系,也可以旋转等
  control // 控件,包括放大缩小按钮,鼠标位置显示,全屏按钮,比例尺按钮,缩略图,地图详细详细等
  Interaction // 交互操作,比如要在地图上绘制要素,选择,修改,移动,拉伸等等
})

提示

官网:openlayers

快速上手 ​

js
import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import XYZSource from 'ol/source/XYZ';
import {fromLonLat} from 'ol/proj';
new Map({
 target: 'map-container', // id

 layers: [ // 图层
  new TileLayer({ // 瓦片层
   source: new XYZSource({ // 数据源
    url: 'http:// tile.stamen.com/terrain/{z}/{x}/{y}.jpg'
   })
  })
 ],

 view: new View({ // 视图
  center: fromLonLat([0, 0]),
  zoom: 2
 })
});

渲染JSON ​

js
import 'ol/ol.css';
import GeoJSON from 'ol/format/GeoJSON';
import Map from 'ol/Map';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import View from 'ol/View';
import sync from 'ol-hashed'; // 刷新页面保持地图缩放位置

const map = new Map({
 target: 'map-container',
 layers: [
  new VectorLayer({
   source: new VectorSource({   // 矢量图
    format: new GeoJSON(),
    url: './data/countries.json' // 加载 json
   })
  })
 ],

 view: new View({
  center: [0, 0],
  zoom: 2
 })
});
sync(map); // 刷新页面保持地图缩放位置

拖放 ​

js
import 'ol/ol.css';
import GeoJSON from 'ol/format/GeoJSON';
import Map from 'ol/Map';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import View from 'ol/View';
import DragAndDrop from 'ol/interaction/DragAndDrop';// 引入拖放

const map = new Map({
 target: 'map-container',
 view: new View({
  center: [0, 0],
  zoom: 2
 })
});

const source = new VectorSource(); // 创建一个没有初始数据的矢量源，储存拖放到地图的 json 数据

const layer = new VectorLayer({   // 空矢量源创建一个新图层
 source: source
});

map.addLayer(layer);        // 添加到地图中
map.addInteraction(new DragAndDrop({// 创建一个拖放交互，将其配置为矢量源一起使用
 source: source,  // 拖放的数据
 formatConstructors: [GeoJSON]
}));

编辑顶点 ​

用户拖放数据后，可以用鼠标编辑图形顶点，alt+ 单机删除顶点

js
import 'ol/ol.css';
import GeoJSON from 'ol/format/GeoJSON';
import Map from 'ol/Map';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import View from 'ol/View';
import DragAndDrop from 'ol/interaction/DragAndDrop';// 引入拖放
const map = new Map({
  target: 'map-container',
  view: new View({
    center: [0, 0],
    zoom: 2
  })
});
const source = new VectorSource();
const layer = new VectorLayer({
  source: source
});

map.addLayer(layer);
map.addInteraction(new DragAndDrop({ // 拖放
source: source,
formatConstructors: [GeoJSON]
}));
 
// 用户拖放数据后
import Modify from 'ol/interaction/Modify';
// 在最后使用
map.addInteraction(new Modify({
  source: source
}));

绘制图形 ​

js
import Draw from 'ol/interaction/Draw';  // 绘制新的图形
map.addInteraction(new Draw({       
 type: 'Polygon',
 source: source
}));

开启捕捉 ​

开始绘制图形时后，引入打开捕捉

js
import Snap from 'ol/interaction/Snap';  // 开启捕捉
map.addInteraction(new Snap({
 source: source
}));

下载功能 ​

html
<div id="tools">
  <a id="clear">Clear</a>
  <a id="download" download="features.json">Download</a>
</div>

清除绘制的图形

js
const clear = document.getElementById('clear');
clear.addEventListener('click', function() {
 source.clear();
});

下载

js
const format = new GeoJSON({featureProjection: 'EPSG:3857'});
const download = document.getElementById('download');
source.on('change', function() {
  const features = source.getFeatures();
  const json = format.writeFeatures(features);
  download.href = 'data:text/json;charset=utf-8,' + json;
});

绘制样式 ​

js
import {Style, Fill, Stroke} from 'ol/style';
const layer = new VectorLayer({
 source: source,
 style: new Style({ // 填充颜色
    fill: new Fill({
    color: 'red'
    }),
    stroke: new Stroke({
      color: 'white'
    })
  })
});

根据区域面积填充颜色 ​

sh
npm install colormap
js
import {getArea} from 'ol/sphere';
import colormap from 'colormap';
const min = 1e8; // 最小面积
const max = 2e13; // 最大面积
const steps = 50; // 步长
const ramp = colormap({ // 色图
 colormap: 'blackbody',
 nshades: steps
});

function clamp(value, low, high) {
  return Math.max(low, Math.min(value, high));
}
 
function getColor(feature) {
  const area = getArea(feature.getGeometry());
  const f = Math.pow(clamp((area - min) / (max - min), 0, 1), 1 / 2);
  const index = Math.round(f  (steps - 1));
  return ramp[index];
}
const layer = new VectorLayer({
  source: source,
  style: function(feature) {
    return new Style({
      fill: new Fill({
      color: getColor(feature)
    }),
    stroke: new Stroke({
      color: 'rgba(255,255,255,0.8)'
    })
    });
  }
});

评论

交流群