openlayers 地图上加图标_OpenLayers教程:地图标注
地图标注是将空间位置点与该点的信息相关联,通过图标、文字等形式把点相关的信息展现到地图上。
随便打开一个电子地图就可以看到许多标注:
可以说地图没有了标注就丧失了一半信息,甚至是全部信息!
地图标注的表现形式多样,包括简单的图片标注,文字标注,图文标注等。
OpenLayers可以使用ol.Feature类或者ol.Overlay类来实现标注。
一、使用ol.Feature类实现标注
1.1、使用ol.Feature类实现文字标注
使用ol.style.Style样式类为使用ol.Feature类创建的要素提供样式,这样就能构建出文字样式了。
示例一:
使用ol.Feature类实现文字标注
// 标注样式 const labelStyle = new ol.style.Style({
text: new ol.style.Text({
font: 'bold 20px serif',
text: '北京',
fill: new ol.style.Fill({
color: 'rgba(255, 0, 0, 1)'
})
})
});
const vectorSource = new ol.source.Vector();
const vectorLayer = new ol.layer.Vector({
source: vectorSource
});
// 用于充当标注的要素 let labelFeature = new ol.Feature({
geometry: new ol.geom.Point([12956325,4851028])
});
// 设置标注的样式 labelFeature.setStyle(labelStyle);
// 将标注要素添加到矢量图层中 vectorSource.addFeature(labelFeature);
const map = new ol.Map({
target: 'map', // 关联到对应的div容器 layers: [
new ol.layer.Tile({ // 瓦片图层 source: new ol.source.Stamen({
layer: 'terrain'
})
}),
vectorLayer
],
view: new ol.View({ // 地图视图 projection: 'EPSG:3857',
center: [0, 0],
zoom: 0
})
});
通常从WebGIS服务器端传到前端的要素数据(GeoJSON,TopoJSON等),都包含要素的信息,比如地名,街道名等,可以读取这些信息然后作为文字标注渲染到地图上。
示例二:街道标注
使用ol.Feature类实现街道标注
// 街道标注的样式 const style = new ol.style.Style({
text: new ol.style.Text({
font: 'bold 11px "Open Sans", "Arial Unicode MS", "sans-serif"',
placement: 'line',
fill: new ol.style.Fill({
color: 'white'
})
})
});
const map = new ol.Map({
target: 'map',
layers: [
// 使用必应影像地图作为底图 new ol.layer.Tile({
source: new ol.source.BingMaps({
key: 'AmMSiUpOokUvbXi9sfQbdzPJQqpZ-9ZTMPJ-0uhNsB8cF3H4RMVSSuh4CTTeh2yG',
imagerySet: 'Aerial'
})
}),
// 加载维也纳部分街道数据 new ol.layer.Vector({
// declutter: true, source: new ol.source.Vector({
format: new ol.format.GeoJSON(),
url: 'vienna-streets.geojson'
}),
style: function(feature){ // 遍历每个要素并为其设置标注 style.getText().setText(feature.get('name'));
return style;
}
})
],
view: new ol.View({
extent: [1817379, 6139595, 1827851, 6143616], // 视图范围 center: ol.extent.getCenter([1817379, 6139595, 1827851, 6143616]),
zoom: 17,
minZoom: 14
})
});
效果:
关于要素文字标注的更多信息可以参考这个官方示例:Vector Labelsopenlayers.org
1.2、使用ol.Feature类实现图片标注
使用ol.style.Icon类可以为使用ol.Feature类创建的要素提供图片样式,这样就构建了图片标注。
示例:
使用ol.Feature类实现图片标注
// 标注样式 const labelStyle = new ol.style.Style({
image: new ol.style.Icon({
src: './beijing.jpg',
scale: 0.1,
})
});
const vectorSource = new ol.source.Vector();
const vectorLayer = new ol.layer.Vector({
source: vectorSource
});
// 用于充当标注的要素 let labelFeature = new ol.Feature({
geometry: new ol.geom.Point([12956325,4851028])
});
// 设置标注的样式 labelFeature.setStyle(labelStyle);
// 将标注要素添加到矢量图层中 vectorSource.addFeature(labelFeature);
const map = new ol.Map({
target: 'map', // 关联到对应的div容器 layers: [
new ol.layer.Tile({ // 瓦片图层 source: new ol.source.Stamen({
layer: 'terrain'
})
}),
vectorLayer
],
view: new ol.View({ // 地图视图 projection: 'EPSG:3857',
center: [0, 0],
zoom: 0
})
});
效果:
二、使用ol.Overlay实现标注
ol.Overlay类主要用于实现弹窗功能,但是它也能用于实现标注。
示例:
使用ol.Overlay类实现标注
#beijing{
width: 40px;
height: 20px;
border: 1px solid #F00;
border-radius: 10px;
background-color: #F00;
opacity: 0.8;
}
北京
const map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({ // 瓦片图层 source: new ol.source.Stamen({
layer: 'terrain'
})
})
],
view: new ol.View({
center: [12956325,4851028],
zoom: 2
})
});
// 用于作为标注的Overlay const marker = new ol.Overlay({
position: [12956325,4851028], // 标注位置 positioning: 'center-center', // 标注相对与锚点的方位 element: document.getElementById("beijing") // 充当标注的DOM元素 });
// 将Overlay对象加入map map.addOverlay(marker);
效果:
因为添加了超链接,所以点击标注就能弹出链接页!
openlayers 地图上加图标_OpenLayers教程:地图标注相关推荐
- openlayers 地图上加图标_Openlayers 定位,添加自定义图标,点击图标弹框
之前已经把地图展示出来,现在可以在地图上做相关操作. 首先定义一个位置图层,这样可以动态操作 import Feature from 'ol/Feature' import {Vector as Ve ...
- openlayers 地图上加图标_openlayers地图添加标志物
openlayers是最好的开源地图引擎,我们开发主要在地图上标记兴趣点,画区域,任意图形,运动轨迹等等.在ol地图上画东西其实非常简单,只需要按以下步骤执行 Point point是一个ol坐标点, ...
- openlayers 地图上加图标_openlayers添加地图标记
html, body { width: 100%; height: 100%; margin: 0; } .map { width: 100%; height: 100%; background: # ...
- android高德地图上加自定义菜单,高德地图Android室内地图如何自定义覆盖物
高德地图Android室内地图如何自定义覆盖物 亲,小德看到亲已经在开坛创建工单咨询了呢,建议亲耐心等待回复哦,会有开发大神给亲回复哦~ gao de di tu a n d r o i d shi ...
- Vue+OpenLayers入门(加载高德在线地图)
开发环境的搭建在上一篇教程中已有描述,如果不知道怎么搭建,请移步Vue+OpenLayers入门(加载OSM在线地图) 此代码为加载高德在线地图以及清除地图上的默认控件: <template&g ...
- 超图js版本在地图上使用图标标记地理点
效果: 项目结构: 代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="ma ...
- Google earth engine(GEE)——在GEE地图上加载图表
本次是加载一个折线图在地图上,主要是展现波段的平均值,重点是如何放在地图上,先看重点: ui.Chart.image.series(imageCollection, region, reducer, ...
- 如何使用矢量图形数据导出可以在高德百度等互联网地图上加载的JSON格式数据
本文以广东省行政区划为例介绍如何使用矢量图形数据导出可以在高德百度等互联网地图上加载的省级行政区划边界JSON数据. 第一步用GIS相关工具,如ArcGIS.MapGIS.QGIS等工具加载广东省域的 ...
- 日化美妆如何在高德地图上投放广告?高德地图投放广告的效果
在高德地图上投放日化美妆类的广告是有要求的,像是一般类的化妆品产品,个人护理产品和家用的清洁品牌产品是可以投放的,带有保健或者治疗效果的特殊化妆品或者私人用品等产品是不允许投放的,特殊化产品包括染发, ...
最新文章
- SQL Server 2014新特性——基数评估(白皮书阅读笔记)
- jq:jQuery库文件jquery.scrollLoading.js使用方法
- 隐藏tomcat页面异常显示的版本信息
- STL源代码分析(ch2 内存分配)destroy
- 关于使用scrapy框架时出现 No module named 'win32api问题
- win7 java jna找不到_java – 资源路径中找不到JNA本机支持(/com/sun/jna/linux-arm/libjnidispatch.so)...
- request中getParameter和getAttribute的区别
- 继续来研究JScript解析引擎的GC问题
- wmsys.wm_concat的几个用法
- iOS 四种延时的方法
- 低阶的Newton-Cotes求积公式 | 梯形求积公式、Simpson求积公式、Cotes求积公式
- Python计算细胞核与细胞质的面积比opencv或pil实验
- 微信开发者工具稳定版本的使用经验分享
- Linux中ps命令 ps aux与ps -ef的区别
- 十六、DPM模型-颗粒流动
- unity简单技能系统
- MindSpore如何实现自定义训练
- 初学者学习插画原画以后就业方向有哪些?和大家聊聊插画原画师就业、薪资等
- 测线仪正确使用方法图解1
- 自媒体视频素材|短视频标题文字动画PR模板素材