openlayers的Feature元素Style式样Text文本的位置属性获取以及修改

最新推荐文章于 2024-04-17 00:00:00 发布

java_shen_sir

最新推荐文章于 2024-04-17 00:00:00 发布

阅读量3k

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/java_shen_sir/article/details/124151303

版权

对比

原始位置
修改后位置

获取位置

feature.getGeometry().getFlatInteriorPoint()

修改位置

feature.getGeometry().getFlatInteriorPoint = () => [60.173899999999996, 18.8134];

示例代码

记得先安装ol包，示例使用的版本是6.14.1

npm install ol@6.14.1

import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import {
  Stroke, Style, Text,
} from 'ol/style';
import { OSM, Vector as VectorSource } from 'ol/source';
import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer';
import Polygon from 'ol/geom/Polygon';
import { Feature } from 'ol';

const source = new VectorSource();
const map = new Map({
  layers: [new TileLayer({
    source: new OSM(),
  }), new VectorLayer({
    source,
  })],
  target: 'map',
  view: new View({
    center: [72.0607, 26.4943],
    zoom: 4,
    projection: 'EPSG:4326',
  }),
});

const feature = new Feature({
  geometry: new Polygon([[[72.0739, 19.7834], [72.0739, 22.8834], [48.2739, 22.8834], [48.2739, 19.3834], [48.9939, 19.3834], [48.9939, 18.7334], [56.1739, 18.7334], [56.1739, 19.3734], [57.9539, 19.3734], [57.9539, 18.6434], [59.7539, 18.6434], [59.7539, 14.7434], [60.2559, 14.879], [60.2818, 15.4684], [63.7155, 16.4085], [63.5874, 16.9228], [64.3351, 17.1066], [64.3351, 18.5566], [64.2151, 18.5566], [64.2151, 19.2866], [64.9451, 19.2866], [64.9451, 18.5566], [64.8251, 18.5566], [64.8251, 16.8566], [69.562, 18.6357], [69.562, 18.8457], [72.0739, 19.7834]]]),
});
feature.setStyle(new Style({
  text: new Text({
    text: '中文',
  }),
  stroke: new Stroke({
    color: '#ffcc33',
    width: 2,
  }),
}));
source.addFeature(feature);

// 获取Text原始放置位置
const location = feature.getGeometry().getFlatInteriorPoint();
console.log(location);
// 设置Text放置位置
feature.getGeometry().getFlatInteriorPoint = () => [60.173899999999996, 18.8134];