for
(
var
i
=
0
;
i
<
trackData
.
length
;
i
++
)
{
var
coordinate
=
ol
.
proj
.
transform
(
[
trackData
[
i
]
.
lon
,
trackData
[
i
]
.
lat
]
,
'EPSG:4326'
,
'EPSG:3857'
)
features
[
i
]
=
new
ol
.
Feature
(
{
geometry
:
new
ol
.
geom
.
Point
(
coordinate
)
var
map
=
new
ol
.
Map
(
{
target
:
'map'
,
view
:
new
ol
.
View
(
{
center
:
ol
.
proj
.
fromLonLat
(
[
116.359506
,
35.302920
]
)
,
zoom
:
6
}
)
,
layers
:
[
new
ol
.
layer
.
Tile
(
{
source
:
new
ol
.
source
.
OSM
(
)
}
)
,
new
ol
.
layer
.
Vector
(
{
source
:
new
ol
.
source
.
Vector
(
{
features
:
features
}
)
,
style
:
new
ol
.
style
.
Style
(
{
image
:
new
ol
.
style
.
Circle
(
{
radius
:
5
,
stroke
:
new
ol
.
style
.
Stroke
(
{
color
:
'#fff'
}
)
,
fill
:
new
ol
.
style
.
Fill
(
{
color
:
'#f00'
var
selectClick
=
new
ol
.
interaction
.
Select
(
{
condition
:
ol
.
events
.
condition
.
click
,
style
:
new
ol
.
style
.
Style
(
{
image
:
new
ol
.
style
.
Circle
(
{
radius
:
5
,
fill
:
new
ol
.
style
.
Fill
(
{
color
:
'#09f'
}
)
,
stroke
:
new
ol
.
style
.
Stroke
(
{
color
:
'#fff'
,
width
:
2
map
.
addInteraction
(
selectClick
)
openlayers点击feature改变其样式// 模拟后台数据var trackData = [ { "lon":120.124512, "lat":35.978006, "data": [ {"name":"zx"}, {"age":16}, {"positio...
Iconstyle:function(
feature
,resolution) {
var style = new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(241,242,236,0.8)',
stroke : new ol.style.Stroke({
color : 'red',
width : 2
image:new ol.style.Icon(({
offset: [0, 0]
import
OpenLayers
Parser from "geostyler-
openlayers
-parser" ;
import OlLayerVector from "ol/layer/Vector" ;
const pointSimplePoint = {
name : "OL Style" ,
rules : [
name : "OL Style Rule 0" ,
symbolizers : [
kind : "Mark" ,
wellKnownName : "Circle" ,
color : "#FF0000" ,
<meta charset=UTF-8>
<meta name=viewport content=width=device-width, initial-scale=1.0>
<meta http-equiv=X-UA-Compatible content=ie=edge>
<title>图层切
OpenLayers
是一个高性能，功能丰富的库，用于在Web上创建交互式地图。 它可以显示从任何网页上的任何来源加载的地图图块，矢量数据和标记。
OpenLayers
的开发旨在进一步利用各种地理信息。 它是完全免费的开源JavaScript，根据。
npm install ol
导入您所需的应用程序：
import Map from 'ol/Map' ;
import View from 'ol/View' ;
import TileLayer from 'ol/layer/Tile' ;
import XYZ from 'ol/source/XYZ' ;
new Map
OpenLayers
是一款流行的开源 JavaScript 地图库，用于在 Web 应用程序中显示交互式地图。它提供了许多方便的操作来管理图层和要素。
在
OpenLayers
中，获取要素的中心点有多种方法。下面介绍其中两种。
方法一：使用 `getExtent` 方法
如果要获得一个要素的中心点，我们可以通过 `getExtent` 方法获取其范围，然后再通过数学计算获得其中心点坐标。具体步骤如下：
```javascript
// 获取要素的范围
var extent =
feature
.getGeometry().getExtent();
// 计算范围的中心点坐标
var x = (extent[0] + extent[2]) / 2;
var y = (extent[1] + extent[3]) / 2;
var center = [x, y];
console.log(center);
方法二：使用 `getGeometry` 方法
另一种方法是直接通过 `getGeometry` 方法获取要素的几何图形，然后获得其中心点坐标。具体实现如下：
```javascript
// 获取要素的几何图形
var geometry =
feature
.getGeometry();
// 获取几何图形的中心点坐标
var center = geometry.getInteriorPoint().getCoordinates();
console.log(center);
这两种方法都可以有效地获得要素的中心点坐标，具体选用哪种方法，取决于具体需求和情况。
