标签：map ol import React source state OpenLayers GeoServer new
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>
);
标签：map,ol,import,React,source,state,OpenLayers,GeoServer,new 来源： https://blog.csdn.net/zxz_learn/article/details/115694370
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。