^ 关注我，带你一起学GIS ^
注：当前使用的是 ol [9.2.4] 版本，天地图使用的key请到天地图官网申请，并替换为自己的key
前言
❝在
OpenLayers中，使用Style样式类进行图形渲染，除了填充属性fill、描边属性stroke等之外，还可以使用renderer属性自定义渲染样式，当使用renderer进行渲染时，fill、stroke、image等属性将会被忽略。
1. renderer属性
renderer作为Style对象的一个属性，是RenderFunction类型，也就是一个渲染函数。这个方法具有两个参数
coordinates：GeoJSON格式的Geometry对象像素值坐标。State：图层渲染器状态对象。
2. renderer渲染
通过Feature对象setStyle方法添加要素样式，从而使用renderer渲染器自定义渲染方式。从state参数中获取到canvas上下文对象，再调用canvas方法createRadialGradient创建径向渐变模式，然后使用addColorStop方法添加渐变色，形成渐变条带，最后就是调用arc方法绘制圆形，fill属性填充样式，stroke方法进行描边。
circleFeature.setStyle(new ol.style.Style({
renderer(coordinates, state) {
// 解构坐标对
const [[x, y], [x1, y1]] = coordinates
// 获取canvas上下文对象
const ctx = state.context
// 计算x和y方向距离
const dx = x1 - x
const dy = y1 - y
const radius = Math.sqrt(dx * dx + dy * dy)
const innerRadius = 0
const outerRadius = radius * 1.4
// 创建径向渐变
const gradient = ctx.createRadialGradient(
x,
y,
// innerRadius,
10,
x,
y,
outerRadius
)
// 添加渐变色带
gradient.addColorStop(0, '#ff00cc')
gradient.addColorStop(0.35, '#ffcc00')
gradient.addColorStop(0.7, '#00ffcc')
gradient.addColorStop(1, '#ff0066')
// 开始绘制
ctx.beginPath()
// 创建圆形
ctx.arc(x, y, radius, 0, 2 * Math.PI, true)
ctx.fillStyle = gradient
ctx.fill()
ctx.arc(x, y, radius, 0, 2 * Math.PI, true)
ctx.strokeStyle = '#ffcc00'
ctx.stroke()
}
}))
3. 完整代码
其中libs文件夹下的包需要更换为自己下载的本地包或者引用在线资源。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>自定义圆形渲染</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="../../../libs/css/ol9.2.4.css">
<script src="../../../js/config.js"></script>
<script src="../../../libs/js/ol9.2.4.js"></script>
<style>
* {
padding: 0;
margin: 0;
font-size: 14px;
font-family: '微软雅黑';
}
html,
body {
width: 100%;
height: 100%;
}
#map {
position: absolute;
top: 50px;
bottom: 0;
width: 100%;
}
#top-content {
position: absolute;
width: 100%;
height: 50px;
line-height: 50px;
background: linear-gradient(135deg, #ff00cc, #ffcc00, #00ffcc, #ff0066);
color: #fff;
text-align: center;
font-size: 32px;
}
#top-content span {
font-size: 32px;
}
#layer-container {
position: absolute;
top: 15%;
left: 20px;
width: 20%;
bottom: 5%;
background: #fff;
color: #fff;
border: 1px solid #ddd;
border-radius: 2.5px;
}
.layer-head {
background: #16baaa;
padding: 10px;
margin-bottom: 15px;
}
</style>
</head>
<body>
<div id="top-content">
<span>自定义圆形渲染</span>
</div>
<div id="map" title="地图显示"></div>
</body>
</html>
<script>
//地图投影坐标系
const projection = ol.proj.get('EPSG:3857');
//==============================================================================//
//============================天地图服务参数简单介绍==============================//
//================================vec：矢量图层==================================//
//================================img：影像图层==================================//
//================================cva：注记图层==================================//
//======================其中：_c表示经纬度投影，_w表示球面墨卡托投影================//
//==============================================================================//
const TDTImgLayer = new ol.layer.Tile({
title: "天地图影像图层",
source: new ol.source.XYZ({
url: "http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=" + TDTTOKEN,
attibutions: "天地图影像",
crossOrigin: "anoymous",
wrapX: false
})
})
const TDTCvaLayer = new ol.layer.Tile({
title: "天地图注记图层",
source: new ol.source.XYZ({
url: "http://t0.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=" + TDTTOKEN,
attibutions: "天地图注记",
crossOrigin: "anoymous",
wrapX: false
})
})
const TDTVecLayer = new ol.layer.Tile({
title: "天地图矢量图层",
source: new ol.source.XYZ({
url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=" + TDTTOKEN,
attibutions: "天地图矢量",
crossOrigin: "anoymous",
wrapX: false
})
})
const map = new ol.Map({
target: "map",
loadTilesWhileInteracting: true,
view: new ol.View({
center: [104.0635986160487, 30.660919181071225],
zoom: 5,
worldsWrap: false,
minZoom: 1,
maxZoom: 20,
projection: "EPSG:4326"
}),
layers: [TDTImgLayer, TDTCvaLayer, TDTVecLayer],
// 地图默认控件
controls: ol.control.defaults.defaults({
zoom: false,
attribution: true,
rotate: false
})
})
// 监听地图单击事件
map.on('click', evt => {
console.log("获取地图坐标：", evt.coordinate)
})
const circleFeature = new ol.Feature({
geometry: new ol.geom.Circle([
104.62609807960689,
33.71857664673769
], 5)
})
circleFeature.setStyle(new ol.style.Style({
renderer(coordinates, state) {
// 解构坐标对
const [[x, y], [x1, y1]] = coordinates
// 获取canvas上下文对象
const ctx = state.context
// 计算x和y方向距离
const dx = x1 - x
const dy = y1 - y
const radius = Math.sqrt(dx * dx + dy * dy)
const innerRadius = 0
const outerRadius = radius * 1.4
// 创建径向渐变
const gradient = ctx.createRadialGradient(
x,
y,
// innerRadius,
10,
x,
y,
outerRadius
)
// 添加渐变色带
gradient.addColorStop(0, '#ff00cc')
gradient.addColorStop(0.35, '#ffcc00')
gradient.addColorStop(0.7, '#00ffcc')
gradient.addColorStop(1, '#ff0066')
// 开始绘制
ctx.beginPath()
// 创建圆形
ctx.arc(x, y, radius, 0, 2 * Math.PI, true)
ctx.fillStyle = gradient
ctx.fill()
ctx.arc(x, y, radius, 0, 2 * Math.PI, true)
ctx.strokeStyle = '#ffcc00'
ctx.stroke()
}
}))
const circleLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [circleFeature]
})
})
map.addLayer(circleLayer)
</script>❝
OpenLayers示例数据下载，请在公众号后台回复：ol数据
全国信息化工程师－GIS 应用水平考试资料，请在公众号后台回复：GIS考试
❝
GIS之路公众号已经接入了智能助手，欢迎大家前来提问。
欢迎访问我的博客网站-长谈GIS：
http://shanhaitalk.com
都看到这了，不要忘记点赞、收藏+关注 哦！
本号不定时更新有关 GIS开发 相关内容，欢迎关注 
