August 4, 2022
By: syh
openlayoers-入门
openLayers-简单入门
1. div容器
<div id="map" class="map"></div>
<style>
.map {
height: 400px;
width: 100%;
}
</style>
2.创建地图
var map = new ol.Map({
target: 'map', //目标源
layers: [ // 图层
new ol.layer.Tile({ //平铺图层
source: new ol.source.OSM() //开放地图
})
],
view: new ol.View({ //视图
center: ol.proj.fromLonLat([37.41, 8.82]),//中心坐标
zoom: 4 //缩放值
})
});
target: 目标元素
layers：图层
view： 视图
2.1.layer
图层列表
Tile(平铺图层) 渲染在按特定分辨率的缩放级别组织的网格中提供平铺图像的源。
- OSM(开源地图)
new ol.layer.Tile({ //平铺图层 source: new ol.source.OSM() //开发地图数据源 })Vector(矢量图层) 在客户端呈现矢量数据
new ol.layer.Vector({ source: ... })Image(图像) 地图图像的源。
new ol.layer.Image({ source: ... }) new ol.layer.Image({ source: new ol.source.ImageStatic({ projection: "EPSG:4326", url:"https://static01.imgkr.com/temp/2c146f6040d943aa997bb9a5e7897f18.png", imageExtent: [114.26445, 37.65106,117.73555263876915, 40.34893820434809] , }) })
2.2.view
视图允许指定地图的中心、分辨率和旋转
view: new ol.View({ //视图
center: ol.proj.fromLonLat([37.41, 8.82]),//中心坐标 EPSG:4326 是国际标准，GPS坐标
zoom: 4 //缩放值
})
您会注意到center指定的是经度/纬度坐标 (EPSG:4326)。由于我们使用的唯一图层是 Spherical Mercator 投影 (EPSG:3857)，因此我们可以动态重新投影它们，以便能够在正确的坐标上缩放地图。
2.3.投影
ol.proj.transform(vector, 'EPSG:4326' ,'EPSG:3857') 转换投影
ol.proj.fromLonLat(vector) 转换投影
官方连接
https://openlayers.org/en/latest/doc/faq.html
OpenLayers使用什么投影?
你用OpenLayers创建的每个地图都会有一个视图，每个视图都会有一个投影。因为地球是三维的，是圆的，而地图的2D视图不是，我们需要一个数学表达式来表示它。输入的预测。
不是只有一个投影，而是有很多常见的投影。每个投影都有不同的性质，因为它准确地表示距离、角度或面积。某些预测更适合世界不同地区。
回到最初的问题:OpenLayers能够处理大多数预测。如果您没有显式设置，您的地图将使用我们的默认值，即Web墨卡托投影(EPSG:3857)。
如果你想要一个显示整个世界的地图，这种投影是一个很好的选择。
2.4.样式
创建样式
new ol.style.Style({})
背景
import {Fill} from 'ol/style';
fill: new Fill({
color: "rgba(0, 191, 255, .2)",
}),
画笔样式
import {Stroke} from 'ol/style';
stroke: new Stroke({
color: "rgba(255, 0, 0)",
width: 2,
}),
文字样式
import {Text} from 'ol/style';
text: new Text({
textAlign: 'center', //位置
font: 'normal 17px 微软雅黑', //文字样式
text: "测试", //文本内容
fill: new Fill({ //文本填充样式（即文字颜色)
color: '#FFFFFF'
})
})
2.5几何
- Circle(圆)
new Feature({
geometry: new ol.geom.Circle([126, 36], opt_radius)
})
function drawStyle() {
return new ol.style.Style({
//背景
fill: new ol.style.Fill({
color: "rgba(0, 191, 255, .2)",
}),
//边框
stroke: new ol.style.Stroke({
color: "rgba(0, 191, 255, .6)",
width: 2,
}),
});
}
let feature = (feature) => {
const createFeature = new ol.Feature({
geometry: new ol.geom.Circle(ol.proj.fromLonLat([120, 36]),1000),
// name: "王心凌男孩儿",
});
createFeature.setStyle(drawStyle)
return createFeature;
}
- Point(集合点)
new ol.Feature({
geometry: new ol.geom.Point([126,36]),
});
- LineString(线)
new Feature({
geometry: new ol.geom.LineString([126,36,200,60])
})
function createLineString(){
return new Style({
stroke: new Stroke({
color: 'White',
width: 2
})
})
}
let feature = (feature) => {
const createFeature = new ol.Feature({
geometry: new ol.geom.LineString([ol.proj.fromLonLat([120, 36]),
ol.proj.fromLonLat([95, 44])]),
});
createFeature.setStyle(createLineString)
return createFeature;
}
2.6画(Draw)
draw框区域
let source = new ol.source.Vector();
let draw = new ol.interaction.Draw({
source: source,
type: 'Polygon'
})
map.addLayer(new ol.layer.Vector({
projection: "EPSG:4326",
source: source
}));
map.addInteraction(draw);
draw.on('drawstart',(e) => {
console.log("开始了选框了")
})
draw.on('drawend',(e) => {
const polygon = e.feature.getGeometry();
console.log("结束选框了")
})
1.创建图层
2.创建Draw
3.把Draw 放到map中
4.监听事件开始选框
2.7Overlay(弹框层)
<div id="popup" title="Welcome to OpenLayers">
hhhh
</div>
#popup {
width: 200px;
height: 200px;
border: 1px solid #088;
background-color: #0FF;
opacity: 0.5;
}
let source = new ol.source.Vector();
let overlay = new ol.Overlay({
element: document.getElementById('popup')
})
map.addOverlay(overlay)
map.on('singleclick',function(evt){
const coordinate = evt.coordinate;
console.log(coordinate)
overlay.setPosition(coordinate);
})
const modalClose = function (){
overlay.setPosition();
}
1.创建目标元素div容器
2.创建图层
3.创建 Overlay
4.目标元素放到 Overlay
5.把Overlay 放到map中
6.设置Overlay坐标