openlayers绘制图标并定位到图标

环境

vue3 ts sass

具体代码

<template><div class="btn-wrapper"><span style="color: red"> 上一个定位的点 {{ prePoint }}</span><buttonclass="button"v-for="(item, index) in data":key="index"@click="handleMoveToTarget(item)">定位到目标 item</button></div><div id="map" class="map"></div>
</template><script lang="ts" setup>
import { onMounted, ref } from 'vue'
import 'ol/ol.css'
import { Map, View, Feature } from 'ol'
import { XYZ, Vector as SourceVector } from 'ol/source'
import TileLayer from 'ol/layer/Tile'
import { Vector as LayerVector } from 'ol/layer'
import { Style, Icon, Text, Fill, Stroke } from 'ol/style'
import { Point } from 'ol/geom'const data = [[158.6, 29.8],[159, 30.5],[159.4, 30.9],[160.2, 31.8],[160.5, 32.2],[162.4, 33.4],[164, 34.3],[166.2, 35.7],[167.6, 36.3]
]const map = ref<Map>()
const prePoint = ref<number[]>([])const customLayer = new LayerVector({source: new SourceVector()
})const setItem = (point: number[], color = '#000') => {const anchor = new Feature({name: `[${point}]`,geometry: new Point(point)})// 设置样式，在样式中就可以设置图标anchor.setStyle(new Style({image: new Icon({src: '/logo.png',width: 60,height: 60,color: color}),text: new Text({textAlign: 'center', // 位置textBaseline: 'middle', // 基准线font: 'normal 12px 微软雅黑', // 文字样式text: anchor.get('name'),// text: '文字样式',fill: new Fill({// 文本填充样式（即文字颜色)color: '#fff'}),stroke: new Stroke({color: '#999',width: 1})}),stroke: new Stroke({color: '#fff',width: 100})}))// 添加点击事件;(anchor.on as any)('click', (e: any) => {console.log(e, 'e')})customLayer.getSource()?.addFeature(anchor)
}const init = () => {map.value = new Map({target: 'map',layers: [new TileLayer({source: new XYZ({url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',wrapX: false})}),customLayer],view: new View({projection: 'EPSG:4326',// 定位// center: [110.592595, 20.911173],center: [158.6, 29.8],zoom: 8,maxZoom: 18,minZoom: 1})})data.forEach((item) => {setItem(item)})map.value?.on('click', function (this: any, e) {console.log(e.pixel)console.log(this)this.forEachFeatureAtPixel(e.pixel, function (feature: any) {// 为点击的feature发送自定义的click消息feature.dispatchEvent && feature.dispatchEvent({ type: 'click', event: e })})})
}// 定位到目标
const handleMoveToTarget = (point: number[]) => {// 还原原来的颜色if (prePoint.value.length) {setItem(prePoint.value)}let zoom = map.value?.getView().getZoom() as numberconst duration = 2000map.value?.getView().animate({center: point,duration: duration},(e) => {console.log(e, 'callback-1')})map.value?.getView().animate({zoom: zoom - 1,duration: duration / 2},{zoom: zoom,duration: duration / 2},(e) => {console.log(e, 'callback-2')setItem(point, '#0f0')prePoint.value = point})
}onMounted(init)
</script><style lang="scss">
.map {height: 100vh;width: 100%;background-color: #000;
}.btn-wrapper {width: 100%;position: fixed;left: 150px;top: 30px;z-index: 2;.button + .button {margin-left: 20px;}
}
</style>

文档

http://openlayers.vip/

openlayers绘制图标并定位到图标相关推荐

openlayers 地图上加图标_Openlayers 定位，添加自定义图标，点击图标弹框
之前已经把地图展示出来,现在可以在地图上做相关操作. 首先定义一个位置图层,这样可以动态操作 import Feature from 'ol/Feature' import {Vector as Ve ...
如何绘制一组创意的仙人掌图标
创建新的项目文件启动并在后台运行Illustrator,创建新文档(文件>新建或Control-N) 画板数量:1 宽度: 800像素高度: 600像素单位: 像素进入"高级& ...
Flutter 替换高德定位默认图标
修改AMapWidget方法中的myLocationStyleOptions可以改变定位默认图标 myLocationStyleOptions: MyLocationStyleOptions(true ...
openlayers通过overlay html5 css3设置图标闪烁效果
openlayers通过overlay html5 css3设置图标闪烁效果 http://www.giserdqy.com/gis/opengis/ol4/115
【有利可图网】PS教程：设计绘制一个质感卡通星星图标
本篇教大家如何利用photoshop设计绘制一个质感卡通星星图标!教程难度不大,很适合新手,赶快收走学习一下吧!
android百度地图定位自定义图标,Android应用开发之android 百度地图自定义圆，更改默认图标等常用方法...
本文将带你了解Android应用开发之android 百度地图自定义圆,更改默认图标等常用方法,希望本文对大家学Android有所帮助. 总结了一下百度地图常用的方法(前提是集成百度地图环境成功): ...
Web前端线上系统课-01-HTML+CSS/08-结构伪类-图形-字体-字体图标-元素定位
结构伪类-图形-字体-字体图标-元素定位结构性伪类选择器 nth-child 父元素中的第n个子元素 nth-child(n) <!DOCTYPE html> <html lang ...
word 7桌面上的计算机图标是,怎么设置win7系统桌面图标都变成word图标的处理办法...
随着电脑的使用率越来越高,我们有时候可能会遇到win7系统桌面图标都变成word图标问题,如果我们遇到了win7系统桌面图标都变成word图标的问题,要怎么处理win7系统桌面图标都变成word图标呢 ...
flutter中使用图标（含自制图标库方案）
flutter中使用图标(含自定义图标图) 作者: jcLee95 邮箱 :291148484@163.com CSDN 主页:https://blog.csdn.net/qq_28550263?sp ...

openlayers绘制图标并定位到图标

openlayers绘制图标并定位到图标

环境

具体代码

文档

openlayers绘制图标并定位到图标相关推荐

最新文章

热门文章