<
meta
charset
=
"UTF-8"
/>
<
meta
http-equiv
=
"X-UA-Compatible"
content
=
"IE=edge"
/>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
/>
<
title
>
Document
</
title
>
</
head
>
<
style
type
=
"text/css"
>
.map
{
height
:
500px
;
width
:
100%
;
</
style
>
<
link
rel
=
"stylesheet"
href
=
"https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.6.1/css/ol.css"
/>
<
script
src
=
"https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.6.1/build/ol.js"
>
</
script
>
<
div
id
=
"map"
class
=
"map"
>
</
div
>
</
body
>
<
script
>
var
roads =
new
ol.
layer
.
Tile
({
source
:
new
ol.
source
.
XYZ
({
url
:
'https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
var
imagery =
new
ol.
layer
.
Tile
({
source
:
new
ol.
source
.
XYZ
({
url
:
'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
const
container =
document
.
getElementById
(
'map'
)
var
map =
new
ol.
Map
({
target
: container,
layers
: [roads, imagery],
view
:
new
ol.
View
({
center
: ol.
proj
.
fromLonLat
([
37.41
,
8.82
]),
zoom
:
4
</
script
>
</
html
>
这里我们创建了两个图层，记住图层的默认层级都是后面添加的大于前面的层级。
要实现图层透视的效果，其实就是在基础图层上固定范围绘制上图层来达到效果。
获取鼠标在地图上的坐标位置
let mousePosition = null
container.addEventListener('mousemove', function (event) {
mousePosition = map.getEventPixel(event)
map.render()
container.addEventListener('mouseout', function () {
mousePosition = null
map.render()
创建全局变量（mousePosition）实时保存鼠标地理位置。
通过监听容器的鼠标移入事件获取当前位置窗口位置，使用getEventPixel()转换为地理位置。
监听容器的鼠标移出事件取消地理位置。
每次监听都需要重绘地图，用于透视图层内容的更新。
监听图层事件
let radius = 75
imagery.on('prerender', function (event) {
const ctx = event.context
ctx.save()
ctx.beginPath()
if (mousePosition) {
ctx.arc(mousePosition[0], mousePosition[1], radius, 0, 2 * Math.PI)
ctx.lineWidth = (5 * radius) / radius
ctx.strokeStyle = 'rgba(0,0,0,0.5)'
ctx.stroke()
ctx.clip()
imagery.on('postrender', function (event) {
const ctx = event.context
ctx.restore()
这里绘制的是圆形，你可以自定义其他图形。
通过图层事件prerender图层渲染之前，在监听中返回的图层实例canvas。这里一定要先保存状态ctx.save()，通过mousePosition获取鼠标的坐标，随意绘制图形，使用clip()裁剪画布，只展示裁剪后的内容。
通过postrender图层渲染之后。恢复保存的canvas内容展示。
document.addEventListener('keydown', function (evt) {
console.log(100)
if (evt.keyCode === 38) {
console.log(1)
radius = Math.min(radius + 5, 150)
map.render()
evt.preventDefault()
} else if (evt.keyCode === 40) {
radius = Math.max(radius - 5, 25)
map.render()
evt.preventDefault()
监听全局键盘事件，修改我们绘制透视图层的形状。当然这里也要注意修改后也需要map.render()重绘地图，展示最新效果。
- 434
-
KeepFing
JavaScript
Vue.js
