^ 关注我，带你一起学GIS ^
注：当前使用的是 <strong style="margin: 0px; padding: 0px; max-width: 100%; overflow-wrap: break-word !important;">ol</strong> <strong style="margin: 0px; padding: 0px; max-width: 100%; overflow-wrap: break-word !important;">[</strong><strong style="margin: 0px; padding: 0px; max-width: 100%; outline: 0px; font-family: Optima, PingFangSC-light, serif; font-size: 14px; letter-spacing: 0.28px; color: #3594f7; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-style: none; border-width: 3px; border-color: rgba(0, 0, 0, 0.4); border-radius: 0px; visibility: visible; overflow-wrap: break-word !important;">9.2.4</strong><strong style="margin: 0px; padding: 0px; max-width: 100%; overflow-wrap: break-word !important;">]</strong> 版本，天地图使用的<code style="margin: 0px 2px; padding: 2px 4px; max-width: 100%; letter-spacing: 0em; outline: 0px; font-size: 14px; color: #3594f7; line-height: 1.8em; background: none 0% 0% / auto no-repeat scroll padding-box border-box rgba(27, 31, 35, 0.05); width: auto; height: auto; border-style: none; border-width: 3px; border-color: #000000 rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.4); border-radius: 4px; font-family: 'Operator Mono', Consolas, Monaco, Menlo, monospace; word-break: break-all; visibility: visible; overflow-wrap: break-word !important;">key请到天地图官网申请，并替换为自己的key
前言
❝
要素标注是一个常用功能，就是将要素信息如名称等显示在地图上，方便查找和使用。在
OpenLayers中要素标注很灵活，使用起来也很方便，可以修改标注样式以及标注权限。
在本文中主要介绍图文标注详细信息，包括旋转缩放和偏移等。
1. 创建标注点及样式
在创建标注点之前需要先获取位置坐标数据，通过监听map对象单击事件可以得到点坐标数据。
map.on('click', evt => {<br> console.log("获取地图坐标：", evt.coordinate)<br>})<br>还需要提前准备好图片数据，然后根据坐标点创建几何对象，再由几何对象创建点要素，最后创建要素样式和点图层。对于要素类对象，可以通过setStyle方法重写图层样式，该方法参数可以是单个样式对象，也可以是样式数组对象或者接受分辨率并返回样式数组的函数。最后设置标注点为视图中心。
const pointGeometry = new ol.geom.Point([100.9788433214299, 26.747704222514738])<br>const feature = new ol.Feature({<br> geometry: pointGeometry<br>})<br>const vectotSource = new ol.source.Vector({<br> features: [feature],<br> wrapX: false<br>})<br>const iconStyle = new ol.style.Style({<br> image: new ol.style.Icon({<br> src: "../../image/label/simple_map.jpg",<br> scale: [1 / 16, 1 / 16],<br> // anchor: [0.5, 1.25]<br> }),<br> text: new ol.style.Text({<br> font: "16px sans-serif",<br> textAlign: "center",<br> text: "Hello,World",<br> fill: new ol.style.Fill({<br> color: [255, 215, 0, 1],<br> }),<br> backgroundFill: new ol.style.Fill({<br> color: [0, 191, 255, 0.25]<br> }),<br> offsetY: -30, // 向Y轴偏移<br> padding: [10, 10, 10, 10]<br> })<br>})<br>const featureStyle = new ol.style.Style({<br> image: new ol.style.Circle({<br> radius: 10,<br> fill: new ol.style.Fill({<br> color: "#fff"<br> }),<br> stroke: new ol.style.Stroke({<br> color: "red"<br> })<br> })<br>})<br>feature.setStyle([iconStyle, featureStyle])<br>const vectorLayer = new ol.layer.Vector({<br> source: vectotSource<br>})<br>map.addLayer(vectorLayer)<br>// 设置标注点为视图中心<br>map.getView().setCenter(pointGeometry.getCoordinates())<br>2. 视图旋转
监听滑块事件，设置视图旋转。setRotation参数接收弧度值，所以需要将度数转换为弧度。
// 视图旋转事件<br>slider.render({<br> // 顺时针旋转，弧度单位<br> elem: '#view-rotate',<br> value: 0,<br> min: 0,<br> max: 360,<br> step: 5,<br> change: function (value) {<br> map.getView().setRotation(value * Math.PI / 180)<br> }<br>});<br>监听图片文本跟随视图旋转事件：监听开关事件，并在值改变时通过setRotateWithView方法设置是否开启跟随视图旋转。该方法接收参数为布尔值。
// 图片跟随视图旋转事件<br>form.on('switch(image-box-filter)', function (data) {<br> const elem = data.elem; // 获得 checkbox 原始 DOM 对象<br> const checked = elem.checked; // 获得 checkbox 选中状态<br> iconStyle.getImage().setRotateWithView(checked)<br>});<br>// 文本跟随视图旋转事件<br>form.on('switch(text-box-filter)', function (data) {<br> const elem = data.elem; // 获得 checkbox 原始 DOM 对象<br> const checked = elem.checked; // 获得 checkbox 选中状态<br> iconStyle.getText().setRotateWithView(checked)<br>});<br>3. 监听图片文本事件
在layui组件中调用slider.render方法创建滑块，然后配置最大最小值等参数，在change事件中，监听滑块值变化并更改要素标注样式。注意：在改变要素样式后，要素对象需立即调用changed方法通知Feature，说明样式已经被改变了。**layui**滑块配置：[https://layui.dev/docs/2/slider/](https://layui.dev/docs/2/slider/)
// 图片旋转事件<br>slider.render({<br> // 顺时针旋转，弧度单位<br> elem: '#imageRotation',<br> value: 0,<br> min: 0,<br> max: 360,<br> step: 5,<br> change: function (value) {<br> iconStyle.getImage().setRotation(value * Math.PI / 180)<br> feature.changed()<br> }<br>});<br>// 文本旋转事件<br>slider.render({<br> // 顺时针旋转，弧度单位<br> elem: '#textRotation',<br> value: 0,<br> min: 0,<br> max: 360,<br> step: 5,<br> change: function (value) {<br> iconStyle.getText().setRotation(value * Math.PI / 180)<br> feature.changed()<br> }<br>});<br>4. 属性介绍
4.1. Icon
Icon类用于设置要素类图标样式。其属性信息如下表。
|
属性名 |
类型 |
描述 |
|
|
Array.<number> (defaults to [0.5, 0.5]) |
锚点，默认值图标中心 |
|
|
IconOrigin (defaults to ‘top-left’) |
锚点原点: |
|
|
IconAnchorUnits (defaults to ‘fraction’) |
|
|
|
IconAnchorUnits (defaults to ‘fraction’) |
|
|
|
Color | string | undefined |
设置图片颜色 |
|
|
HTMLImageElement | HTMLCanvasElement | ImageBitmap | undefined |
图标图片对象 |
|
|
Array.<number> (defaults to [0, 0]) |
图标位移像素。正值将使图标向右和向上移动。 |
|
|
number (defaults to 1) |
图标透明度 |
|
|
number | undefined |
图标宽度（像素），不能与 |
|
|
number | undefined |
图标高度（像素），不能与 |
|
|
number | Size (defaults to 1) |
缩放比例 |
|
|
boolean (defaults to false) |
是否跟随视图旋转 |
|
|
number (defaults to 0) |
旋转（弧度） |
|
|
Array.<number> (defaults to [0, 0]) |
偏移 |
|
|
(defaults to ‘top-left’) |
偏移原点: |
|
|
Size | undefined |
图标大小（像素） |
|
|
string | undefined |
图片 |
|
|
DeclutterMode | undefined |
分离模式（压盖处理） |
4.2. Text
Text类为矢量要素设置文本样式。其属性信息如下表。
|
属性名 |
类型 |
描述 |
|
|
string | undefined |
|
|
|
number (defaults to Math.PI/4) |
当放置设置为“行”时，允许相邻字符之间的最大角度。预期值以弧度为单位，默认值为45° |
|
|
number (defaults to 0) |
水平偏移量（像素），正值向右 |
|
|
number (defaults to 0) |
竖直偏移量（像素），正值向下 |
|
|
boolean (defaults to false) |
对于多边形标签或当放置设置为“线”时，允许文本超过标签位置处多边形的宽度或其遵循的路径的长度。 |
|
|
TextPlacement (defaults to ‘point’) |
文本方式模式 |
|
|
number | undefined |
重复间隔。设置后，文本将以该间隔重复，该间隔指定了两个文本锚点之间的像素距离。仅当放置设置为“行”时可用。覆盖“ |
|
|
number | Size | undefined |
缩放比例 |
|
|
boolean (defaults to false) |
是否跟随视图旋转 |
|
|
number (defaults to 0) |
旋转（弧度），正值顺时针方向 |
|
|
string | Array.<string> | undefined |
文本内容 |
|
|
CanvasTextAlign | undefined |
文本框对齐方式 |
|
|
TextJustify | undefined |
文本框内文本对齐方式 |
|
|
CanvasTextBaseline (defaults to ‘middle’) |
文本基线 |
|
|
Fill | null | undefined |
文本填充样式 |
|
|
Stroke | undefined |
文本描边样式 |
|
|
Fill | undefined |
文本框背景颜色 |
|
|
Stroke | undefined |
文本框背景描边颜色 |
|
|
Array.<number> (defaults to [0, 0, 0, 0]) |
文本框内边距 |
|
|
DeclutterMode | undefined |
文本压盖模式 |
5. 完整代码
其中libs文件夹下的包需要更换为自己下载的本地包或者引用在线资源。本示例引用了layui组件，请自行替换。
<!DOCTYPE html><br><html><br><br><head><br> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br> <title>OpenLayers 图文标注大全</title><br> <meta charset="utf-8" /><br><br> <link rel="stylesheet" href="../../libs/css/ol9.2.4.css"><br> <link rel="stylesheet" href="../../libs/layui/css/layui.css"><br><br> <script src="../../js/config.js"></script><br><br> <script src="../../libs/js/proj4.js"></script><br> <script src="../../libs/js/ol9.2.4.js"></script><br> <script src="../../libs/layui/layui.js"></script><br> <script src="../../libs/js/geotiff.min.js"></script><br> <style><br> * {<br> padding: 0;<br> margin: 0;<br> font-size: 14px;<br> font-family: '微软雅黑';<br> }<br><br> html,<br> body {<br> width: 100%;<br> height: 100%;<br> }<br><br> #map {<br> position: absolute;<br> top: 50px;<br> bottom: 0;<br> width: 100%;<br> }<br><br> #top-content {<br> position: absolute;<br> width: 100%;<br> height: 50px;<br> line-height: 50px;<br> background: linear-gradient(135deg, #ff00cc, #ffcc00, #00ffcc, #ff0066);<br> color: #fff;<br> text-align: center;<br> font-size: 32px;<br> }<br><br> #top-content span {<br> font-size: 32px;<br> }<br><br> #layer-container {<br> position: absolute;<br> top: 10%;<br> left: 20px;<br> width: 30%;<br> bottom: 5%;<br> background: #fff;<br> border-radius: 2.5px;<br> border: 1px solid #ddd;<br> overflow-y: scroll;<br> max-height: 80%;<br> }<br><br> .layer-head {<br> background: #16baaa;<br> padding: 10px;<br> margin-bottom: 15px;<br> }<br><br> .label-style {}<br><br> .image-style-content {<br> margin: 5px 25px;<br> }<br><br> .text-title {<br> padding: 10px;<br> margin-bottom: 15px;<br> background: #16baaa;<br> color: #fff;<br> }<br><br> .image-title {<br> padding: 10px;<br> margin-bottom: 15px;<br> background: #16baaa;<br> color: #fff;<br> }<br><br> .layer-prop-item {<br> display: flex;<br> justify-content: space-between;<br> flex-direction: row;<br> margin: 10px 0;<br> }<br><br> .layer-slider-item {<br> width: 45%;<br> margin-top: 16px;<br> }<br><br> .layui-form-label {<br> width: 50%;<br> padding: 8px 15px;<br> height: 38px;<br> line-height: 20px;<br> border-width: 1px;<br> border-style: solid;<br> border-radius: 2px 0 0 2px;<br> text-align: center;<br> background-color: #fafafa;<br> overflow: hidden;<br> white-space: nowrap;<br> text-overflow: ellipsis;<br> box-sizing: border-box;<br> border-color: #eee;<br> font-weight: 400;<br> }<br><br> .map-rotate {<br> position: absolute;<br> right: 20px;<br> top: 100px;<br> padding: 10px 20px;<br> width: 250px;<br> background: #fff;<br> border-radius: 5px;<br> box-shadow: 5px 6px 6px 2px #29292975;<br> }<br><br> .view-slider-item {<br> margin-top: 8px;<br> width: 70%;<br> }<br> </style><br></head><br><br><body><br> <div id="top-content"><br> <span>OpenLayers 图文标注大全</span><br> </div><br> <div id="map" title="地图显示"></div><br><br> <div class="map-rotate"><br> <div class='layer-prop-item'><br> <label class="layui-label">旋转地图：</label><br> <div class="view-slider-item" id="view-rotate"></div><br> </div><br> </div><br> <div id="layer-container"><br> <!-- <h2 class="layer-head">样式属性</h2> --><br> <div class="label-style"><br> <div class="image-style"><br> <h3 for="" class="image-title">Image Style</h3><br> <div class="image-style-content"><br> <div class='layer-prop-item layui-form'><br> <label class="layui-form-label">跟随视图旋转</label><br> <input type="checkbox" name="image-rotation" lay-filter="image-box-filter" title="开启|关闭"<br> lay-skin="switch"><br> </div><br> <div class='layer-prop-item'><br> <label class="layui-form-label">图片旋转（度）</label><br> <div class="layer-slider-item" id="imageRotation"></div><br> </div><br> <div class='layer-prop-item'><br> <label class="layui-form-label">水平缩放</label><br> <div class="layer-slider-item" id="imageScaleX"></div><br> </div><br> <div class='layer-prop-item'><br> <label class="layui-form-label">竖直缩放</label><br> <div class="layer-slider-item" id="imageScaleY"></div><br> </div><br> <div class='layer-prop-item'><br> <label class="layui-form-label">水平位置</label><br> <div class="layer-slider-item" id="imageAnchorX"></div><br> </div><br> <div class='layer-prop-item'><br> <label class="layui-form-label">竖直位置</label><br> <div class="layer-slider-item" id="imageAnchorY"></div><br> </div><br> <div class='layer-prop-item'><br> <label class="layui-form-label">水平偏移</label><br> <div class="layer-slider-item" id="imageDisplacementX"></div><br> </div><br> <div class='layer-prop-item'><br> <label class="layui-form-label">竖直偏移</label><br> <div class="layer-slider-item" id="imageDisplacementY"></div><br> </div><br> </div><br> </div><br> <div class="text-style"><br> <h3 for="" class="text-title">Text Style</h3><br> <div class="image-style-content"><br> <div class='layer-prop-item layui-form'><br> <label class="layui-form-label">跟随视图旋转</label><br> <input type="checkbox" name="text-rotation" lay-filter="text-box-filter" title="开启|关闭"<br> lay-skin="switch"><br> </div><br> <div class='layer-prop-item'><br> <label class="layui-form-label">文本旋转（度）</label><br> <div class="layer-slider-item" id="textRotation"></div><br> </div><br> <div class='layer-prop-item'><br> <label class="layui-form-label">水平缩放</label><br> <div class="layer-slider-item" id="textScaleX"></div><br> </div><br> <div class='layer-prop-item'><br> <label class="layui-form-label">竖直缩放</label><br> <div class="layer-slider-item" id="textScaleY"></div><br> </div><br> <div class='layer-prop-item '><br> <label class="layui-form-label">文本对齐方式</label><br> <div class="layui-col-md6 layui-form layui-row layui-col-space16"><br> <select lay-filter="align-select-filter"><br> <option value="left">居左</option><br> <option value="center">居中</option><br> <option value="right">居右</option><br> <option value="start">开始</option><br> <option value="end">结束</option><br> </select><br> </div><br> </div><br> <div class='layer-prop-item'><br> <label class="layui-form-label">文本基线</label><br> <div class="layui-col-md6 layui-form layui-row layui-col-space16"><br> <select lay-filter="baseline-select-filter"><br> <option value="top">top</option><br> <option value="bottom">bottom</option><br> <option value="middle">middle</option><br> <option value="alphabetic">alphabetic</option><br> <option value="hanging">hanging</option><br> <option value="ideographic">ideographic</option><br> </select><br> </div><br> </div><br> <div class='layer-prop-item'><br> <label class="layui-form-label">水平偏移</label><br> <div class="layer-slider-item" id="textOffsetX"></div><br> </div><br> <div class='layer-prop-item'><br> <label class="layui-form-label">竖直偏移</label><br> <div class="layer-slider-item" id="textOffsetY"></div><br> </div><br> </div><br> </div><br> </div><br> </div><br></body><br><br></html><br><br><script><br> //地图投影坐标系<br> const projection = ol.proj.get('EPSG:3857');<br> //==============================================================================//<br> //============================天地图服务参数简单介绍==============================//<br> //================================vec：矢量图层==================================//<br> //================================img：影像图层==================================//<br> //================================cva：注记图层==================================//<br> //======================其中：_c表示经纬度投影，_w表示球面墨卡托投影================//<br> //==============================================================================//<br> const TDTImgLayer = new ol.layer.Tile({<br> title: "天地图影像图层",<br> source: new ol.source.XYZ({<br> url: "http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=" + TDTTOKEN,<br> attibutions: "天地图影像描述",<br> crossOrigin: "anoymous",<br> wrapX: false<br> })<br> })<br> const TDTImgCvaLayer = new ol.layer.Tile({<br> title: "天地图影像注记图层",<br> source: new ol.source.XYZ({<br> url: "http://t0.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=" + TDTTOKEN,<br> attibutions: "天地图注记描述",<br> crossOrigin: "anoymous",<br> wrapX: false<br> })<br> })<br> const map = new ol.Map({<br> target: "map",<br> loadTilesWhileInteracting: true,<br> view: new ol.View({<br> center: [102.845864, 25.421639],<br> zoom: 6.5,<br> worldsWrap: false,<br> minZoom: 1,<br> maxZoom: 20,<br> projection: 'EPSG:4326',<br> }),<br> layers: [TDTImgLayer],<br> // 地图默认控件<br> controls: ol.control.defaults.defaults({<br> zoom: false,<br> attribution: true,<br> rotate: true<br> })<br> })<br> map.on('click', evt => {<br> console.log("获取地图坐标：", evt.coordinate)<br> })<br><br> const pointGeometry = new ol.geom.Point([100.9788433214299, 26.747704222514738])<br> const feature = new ol.Feature({<br> geometry: pointGeometry<br> })<br> const vectotSource = new ol.source.Vector({<br> features: [feature],<br> wrapX: false<br> })<br> const iconStyle = new ol.style.Style({<br> image: new ol.style.Icon({<br> src: "../../image/label/simple_map.jpg",<br> scale: [1 / 16, 1 / 16],<br> // color: "red"<br> // anchor: [0.5, 1.25]<br> }),<br> text: new ol.style.Text({<br> font: "16px sans-serif",<br> textAlign: "center",<br> text: "Hello,World",<br> fill: new ol.style.Fill({<br> color: [255, 215, 0, 1],<br> }),<br> backgroundFill: new ol.style.Fill({<br> color: [0, 191, 255, 0.25]<br> }),<br> offsetY: -30, // 向Y轴偏移<br> padding: [10, 10, 10, 10]<br> })<br> })<br> const featureStyle = new ol.style.Style({<br> image: new ol.style.Circle({<br> radius: 10,<br> fill: new ol.style.Fill({<br> color: "#fff"<br> }),<br> stroke: new ol.style.Stroke({<br> color: "red"<br> })<br> })<br> })<br> feature.setStyle([iconStyle, featureStyle])<br> const vectorLayer = new ol.layer.Vector({<br> source: vectotSource<br> })<br> map.addLayer(vectorLayer)<br> map.getView().setCenter(pointGeometry.getCoordinates())<br><br> layui.use(function () {<br> const form = layui.form;<br> const layer = layui.layer<br><br> const imageDisplacement = iconStyle.getImage().getDisplacement()<br> console.log("imageDisplacement:", imageDisplacement)<br> // 图片跟随视图旋转事件<br> form.on('switch(image-box-filter)', function (data) {<br> const elem = data.elem; // 获得 checkbox 原始 DOM 对象<br> const checked = elem.checked; // 获得 checkbox 选中状态<br> const value = elem.value; // 获得 checkbox 值<br> iconStyle.getImage().setRotateWithView(checked)<br><br> });<br> // 文本跟随视图旋转事件<br> form.on('switch(text-box-filter)', function (data) {<br> const elem = data.elem; // 获得 checkbox 原始 DOM 对象<br> const checked = elem.checked; // 获得 checkbox 选中状态<br> const value = elem.value; // 获得 checkbox 值<br><br> iconStyle.getText().setRotateWithView(checked)<br> });<br><br> // select 文本事件<br> form.on('select(align-select-filter)', function (data) {<br> const elem = data.elem; // 获得 select 原始 DOM 对象<br> const value = data.value; // 获得被选中的值<br> const othis = data.othis; // 获得 select 元素被替换后的 jQuery 对象<br> iconStyle.getText().setTextAlign(value)<br> feature.changed()<br> });<br> // select 文本基线事件<br> form.on('select(baseline-select-filter)', function (data) {<br> const elem = data.elem; // 获得 select 原始 DOM 对象<br> const value = data.value; // 获得被选中的值<br> const othis = data.othis; // 获得 select 元素被替换后的 jQuery 对象<br> iconStyle.getText().setTextBaseline(value)<br> feature.changed()<br> });<br><br> const slider = layui.slider;<br><br> // 视图旋转事件<br> slider.render({<br> // 顺时针旋转，弧度单位<br> elem: '#view-rotate',<br> value: 0,<br> min: 0,<br> max: 360,<br> step: 5,<br> change: function (value) {<br> // console.log(value) // 滑块当前值<br> map.getView().setRotation(value * Math.PI / 180)<br> }<br> });<br><br> // 图片渲染事件<br> slider.render({<br> // 顺时针旋转，弧度单位<br> elem: '#imageRotation',<br> value: 0,<br> min: 0,<br> max: 360,<br> step: 5,<br> change: function (value) {<br> console.log(value) // 滑块当前值<br> iconStyle.getImage().setRotation(value * Math.PI / 180)<br> feature.changed()<br> }<br> });<br> slider.render({<br> elem: '#imageScaleX',<br> value: 1,<br> min: -2,<br> max: 2,<br> step: 0.25,<br> change: function (value) {<br> // console.log(value) // 滑块当前值<br> iconStyle.getImage().setScale([value * 1 / 16, 1 / 16])<br> feature.changed()<br> }<br> });<br> slider.render({<br> elem: '#imageScaleY',<br> value: 1,<br> min: -2,<br> max: 2,<br> step: 0.25,<br> change: function (value) {<br> // console.log(value) // 滑块当前值<br> iconStyle.getImage().setScale([1 / 16, value * 1 / 16])<br> feature.changed()<br> }<br> });<br> slider.render({<br> elem: '#imageAnchorX',<br> value: 0,<br> min: -2,<br> max: 2,<br> step: 0.125,<br> change: function (value) {<br> // console.log(value) // 滑块当前值<br> iconStyle.getImage().setAnchor([0.5 + value, 1.25])<br> feature.changed()<br> }<br> });<br> slider.render({<br> elem: '#imageAnchorY',<br> value: 0,<br> min: -2,<br> max: 2,<br> step: 0.125,<br> change: function (value) {<br> // console.log(value) // 滑块当前值<br> iconStyle.getImage().setAnchor([0.5, 1.25 + value])<br> feature.changed()<br> }<br> });<br><br> slider.render({<br> elem: '#imageDisplacementX',<br> value: 0,<br> min: -50,<br> max: 50,<br> step: 1,<br> change: function (value) {<br> // console.log(value) // 滑块当前值<br> iconStyle.getImage().setDisplacement([value, 0])<br> feature.changed()<br> }<br> });<br> slider.render({<br> elem: '#imageDisplacementY',<br> value: 0,<br> min: -50,<br> max: 50,<br> step: 1,<br> change: function (value) {<br> // console.log(value) // 滑块当前值<br> iconStyle.getImage().setDisplacement([0, value])<br> feature.changed()<br> }<br> });<br><br> slider.render({<br> // 顺时针旋转，弧度单位<br> elem: '#textRotation',<br> value: 0,<br> min: 0,<br> max: 360,<br> step: 5,<br> change: function (value) {<br> console.log(value) // 滑块当前值<br> iconStyle.getText().setRotation(value * Math.PI / 180)<br> feature.changed()<br> }<br> });<br> slider.render({<br> elem: '#textScaleX',<br> value: 1,<br> min: -2,<br> max: 2,<br> step: 0.25,<br> change: function (value) {<br> // console.log(value) // 滑块当前值<br> const scaleY = iconStyle.getText().getScale()<br> const curScaleY = scaleY ? +scaleY[1] : 1<br> iconStyle.getText().setScale([value, curScaleY])<br> feature.changed()<br> }<br> });<br> slider.render({<br> elem: '#textScaleY',<br> value: 1,<br> min: -2,<br> max: 2,<br> step: 0.25,<br> change: function (value) {<br> // console.log(value) // 滑块当前值<br> const scaleX = iconStyle.getText().getScale()<br> const curScaleX = scaleX ? +scaleX[0] : 1<br> iconStyle.getText().setScale([curScaleX, value])<br> feature.changed()<br> }<br> });<br><br> slider.render({<br> elem: '#textOffsetX',<br> value: 0,<br> min: -200,<br> max: 200,<br> step: 5,<br> change: function (value) {<br> // console.log(value) // 滑块当前值<br> iconStyle.getText().setOffsetX(value)<br> feature.changed()<br> }<br> });<br> slider.render({<br> elem: '#textOffsetY',<br> value: 0,<br> min: -200,<br> max: 200,<br> step: 5,<br> change: function (value) {<br> // console.log(value) // 滑块当前值<br> iconStyle.getText().setOffsetY(value)<br> feature.changed()<br> }<br> });<br><br> });<br><br></script><br>❝
OpenLayers示例数据下载，请在公众号后台回复：ol数据
全国信息化工程师－GIS 应用水平考试资料，请在公众号后台回复：GIS考试
❝
GIS之路公众号已经接入了智能助手，欢迎大家前来提问。
欢迎访问我的博客网站-长谈GIS：
http://shanhaitalk.com
都看到这了，不要忘记点赞、收藏+关注 哦！
本号不定时更新有关 GIS开发 相关内容，欢迎关注 
