OpenLayers+React+GeoServer 地图开发记录
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了OpenLayers+React+GeoServer 地图开发记录，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5060字，纯文字阅读大概需要8分钟。
内容图文
OpenLayers+React+GeoServer 地图开发记录
引入Openlayers
npm install ol -S
import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import { Circle as CircleStyle, Fill, Stroke, Style, Icon } from 'ol/style';
import { Draw, Snap} from 'ol/interaction';
import { Vector as VectorSource } from 'ol/source';
import { Tile as TileLayer, Vector as VectorLayer, Image } from 'ol/layer';
import ImageWMS from 'ol/source/ImageWMS';
import XYZ from 'ol/source/XYZ';
import { get} from 'ol/proj';
import Feature from 'ol/Feature';
import Polygon from 'ol/geom/Polygon';
import Overlay from 'ol/Overlay';
import { getArea } from 'ol/sphere';
初始化
var projection = get('EPSG:4326');
//geoserver卫星地图
const myImageLoader = new Image({
source: new ImageWMS({
url: '',//地址WMS
params: {
LAYERS: '',//名称
VERSION: '1.1.1',
SERVICE: 'WMS',
REQUEST: 'GetMap',
FORMAT: 'image/jpeg',
exceptions: 'application/vnd.ogc.se_inimage',
},
serverType: 'geoserver',
}),
extent: [minx, miny, maxx, maxy],//边界范围，展示范围，超出范围则不展示，不设置超出部分返回的是白色图片，会覆盖下方天地图图层。
zIndex: 3,//图层等级
title: '卫星',
});
//天地图影像地图
var tian_di_tu_satellite_layer = new TileLayer({
title: '天地图卫星影像',
visible: true,
source: new XYZ({
url:
'http://t4.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=你的key',
}),
zIndex: 2,
});
//天地图矢量标注
var tian_di_tu_cva_ce_layer = new TileLayer({
title: '天地图矢量标注',
visible: true,
source: new XYZ({
url:
'http://t4.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=你的key',
}),
zIndex: 5,
});
var view = new View({
projection: 'EPSG:4326',//坐标系
center: [],//中心点 经纬度
zoom: 13,//
minZoom: 1,//最小zoom
maxZoom: 19,//最大zoom
});
var map = new Map({
//控件 缩放等级 尺度尺
controls: defaultControls().extend([
new ScaleLine({
units: 'metric',
}),
new ZoomSlider(),
]),
interactions: defaultInteractions().extend([new DragRotateAndZoom()]),
target: 'map',
layers: [tian_di_tu_satellite_layer, myImageLoader, tian_di_tu_cva_ce_layer], //图层,
view: view,
});
//矢量层要素的来源
var source = new VectorSource({
features: [],
wrapX: false,//
});
//呈现给客户端的矢量数据
var vector = new VectorLayer({
source: source,
style: new Style({
image: new Icon({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
opacity: 0.95,
src: 'data/icon.png',
}),
stroke: new Stroke({//边框线
width: 3,
color: '#46a942',
}),
fill: new Fill({//填充色
color: [238, 195, 65, 0.5],
}),
}),
zIndex: 10,
});
map.addLayer(vector);
var marker = new Overlay({//marker 标记
id: 'sizeMarker',
position: [101.06728082817908, 22.720943209735943],//坐标
positioning: 'center-center',
element: document.getElementById('marker'),//绑定的dom元素
stopEvent: false,
});
//map.addOverlay(marker)
this.setState(
{
projection: projection,
map: map,
source: source,
marker: marker,
view: view,
});
Draw 绘制多边形
var snap;
var draw = new Draw({
source: this.state.source,
type: 'Polygon',
style: new Style({
fill: new Fill({//填充色
color: [238, 195, 65, 0.5],
}),
stroke: new Stroke({//边框线
color: '#46a942',
width: 2,
}),
image: new CircleStyle({//小圆点
radius: 7,
fill: new Fill({
color: '#ffcc33',
}),
}),
}),
zIndex: 10,
});
this.state.map.addInteraction(draw);
snap = new Snap({ source: this.state.source });
this.state.map.addInteraction(snap);
draw.on('drawend', res => {
//绘制结束后返回的信息
// res.feature.geometryChangeKey_.target.flatCoordinates//绘制点集合
//格式为[x,y,x,y,x,y,x,y]首尾点相同
let cIndex = 0;
let obj = {};
const arr = [];//绘制点集合
res.feature.geometryChangeKey_.target.flatCoordinates.map((item, index) => {
if (index == cIndex) {
obj.x = item;
} else {
index == cIndex + 1;
obj.y = item;
arr.push(obj);
obj = {};
cIndex = index + 1;
}
});
console.log(this.getCenter(arr));//获取绘制图形中心点
this.state.marker.setPosition(this.getCenter(arr));//将marker标记位置放在中心点 本来要加文字的 Text style没有生效 暂且用marker替代
//获取绘制图形的面积
const size = getArea(res.feature.geometryChangeKey_.target, {
projection: this.state.projection,
radius: '6371004',
});
this.state.map.addOverlay(this.state.marker);添加标记
this.finishDraw();结束绘制
});
this.setState({
draw: draw,
snap: snap,
});
Draw - 回退上一步绘制
this.state.draw.removeLastPoint();
Draw - 结束绘制
if (this.state.draw) {
this.state.draw.finishDrawing();
this.state.map.removeInteraction(this.state.draw);
this.state.map.removeInteraction(this.state.snap);
} else {
return;
}
Draw - 清除绘制
this.state.map.removeOverlay(this.state.marker);//清除marker标记
this.state.source.clear();//清除feature
this.state.draw ? this.state.draw.abortDrawing() : '';//清除未保存的draw图形
回显多边形
const arr1 = [
[101.06728082817908, 22.720943209735943],
[101.07436667363437, 22.722716903975638],
[101.07238842390178, 22.716396154830054],
[101.06611592474968, 22.71755415467352],
[101.06728082817908, 22.720943209735943],
];
let arr = [];
arr = arr1 .map(item => {
return [item[0], item[1]];
});
var polygonFeature = new Feature(new Polygon([arr]));
this.state.source.addFeatures([polygonFeature]);
return (
<div>
<div id="map" className="map"></div>
<div id="marker">
1
<br />
2
<br />
3
</div>
</div>
);
内容总结
以上是互联网集市为您收集整理的OpenLayers+React+GeoServer 地图开发记录全部内容，希望文章能够帮你解决OpenLayers+React+GeoServer 地图开发记录所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】