openlayers图层加标注
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="lib/OpenLayers/ol.css" type="text/css"> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="lib/OpenLayers/ol.js"></script>
<script src="olStyle/Light.js"></script>
<script src="point.js"></script>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
} .map {
width: 100%;
height: 100%;
background: #f6f6f4;
}
</style>
</head> <body>
<div id="map" class="map" data-id="11"></div>
<script type="text/javascript"> $(function () { InitMap(); AddPolygon();
}) var map; var layer = new ol.layer.Vector({
source: new ol.source.Vector(),
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(0, 0, 0, 0.3)'
}),
stroke: new ol.style.Stroke({
color: 'blue',
width: 2
}),
image: new ol.style.Circle({
radius: 10,
fill: new ol.style.Fill({
color: '#ffcc33'
})
})
})
}); //地图初始化
function InitMap() {
map = new ol.Map({
layers: [new ol.layer.Vector({
source: new ol.source.Vector(),
style: function (feature, resolution) {
switch (feature.get('layer')) {
case 'poi':
poiStyle.getText().setText(feature.get('name'));
return poiStyle;
case 'boundary': return boundaryStyle;
case 'lawn': return lawnStyle;
case 'road':
roadStyle.getText().setText(feature.get('name'));
return (resolution < 2) ? roadStyle : null;
case 'building':
return buildingStyle(feature, resolution);
case 'other':
otherStyle.getText().setText(feature.get('name'));
return otherStyle;
default: return null;
}
}
}), layer],
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat([120.277, 36.330]),
minZoom: 1,
zoom: 16
})
});
} /*显示并编辑区域**********************************************************************************/
function AddPolygon() {
var coordinates = [[
ol.proj.fromLonLat([120.26829957962033, 36.32791869064661]),
ol.proj.fromLonLat([120.27445793151853, 36.330650012922234]),
ol.proj.fromLonLat([120.2671408653259, 36.33063272637348]),
ol.proj.fromLonLat([120.26829957962033, 36.32791869064661])
]] var plygon = new ol.geom.Polygon(coordinates)
//多边形要素类
var feature = new ol.Feature({
geometry: plygon
}); layer.getSource().addFeature(feature); //标注，当使用多边形时，自动计算中心坐标？
//标注，如果使用文字标注，图形将会被文字覆盖
var featureText = new ol.Feature({
geometry: plygon,
name: "标注1"
}); featureText.setStyle(new ol.style.Style({
//文本样式
text: new ol.style.Text({
//对齐方式
textAlign: 'center',
//文本基线
textBaseline: 'middle',
//字体样式
font: 'normal 14px 微软雅黑',
//文本内容
text: featureText.get('name')
})
})) layer.getSource().addFeature(featureText); //清除
//layer.getSource().clear(); var points = [[
ol.proj.fromLonLat([120.27681827545163, 36.33236136226455]),
ol.proj.fromLonLat([120.28038024902342, 36.33141061727086]),
ol.proj.fromLonLat([120.27681827545163, 36.33001040806349]),
ol.proj.fromLonLat([120.27681827545163, 36.33236136226455])
]] var plygon2 = new ol.geom.Polygon(points)
//多边形要素类
var feature2 = new ol.Feature({
geometry: plygon2
}); layer.getSource().addFeature(feature2); //标注，当使用多边形时，自动计算中心坐标？
//标注，如果使用文字标注，图形将会被文字覆盖
var featureText2 = new ol.Feature({
geometry: plygon2,
name: "标注2"
}); featureText2.setStyle(new ol.style.Style({
//文本样式
text: new ol.style.Text({
//对齐方式
textAlign: 'center',
//文本基线
textBaseline: 'middle',
//字体样式
font: 'normal 14px 微软雅黑',
//文本内容
text: featureText2.get('name')
})
})) layer.getSource().addFeature(featureText2);
} </script>
</body> </html>
openlayers图层加标注的更多相关文章
- Openlayers Overlay加载gif图片
说明: 项目中使用vector图层做图片撒点功能,发现加载gif没有效果.网上查找资料发现,openlayers不支持gif图片样式. 后面采用overlay的方式,gif图片赋值给DOM元素 解决方 ...
- Android GIS开发系列-- 入门季（15） 网络图层加载
一.首先我们来看一个网络图层: http://services.arcgisonline.com/arcgis/rest/services/World_Street_Map/MapServer,这是全 ...
- OpenLayers 3加载本地Google切片地图
OpenLayers 提供了ol.source.XYZ 接口用以加载切片地图. 本地切片地图是用地图切片下载器下载的Google道路图层,由于软件未激活,所以每张切片地图上都有软件作者的联系方式,请 ...
- openlayers 3加载GeoServer发布的wfs类型服务
转:https://blog.csdn.net/u013323965/article/details/52449502 问题产生: openlayer3加载WFS存在跨域问题,需要用json ...
- OpenLayers图层
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head ...
- 使用openlayers 3 在线加载天地图及GeoServer发布的地图
使用openlayers3来加载天地图卫星图和标注图层,GeoServer发布地图,一并用openlayers测试加载出来,顺便实现了7种地图控件.下面直接贴代码: <!DOCTYPE html ...
- （转）Openlayers 2.X加载天地图
http://blog.csdn.net/gisshixisheng/article/details/44621923 概述: 在前面的章节,讲到了Arcgis for js加载天地图,在本节讲述如何 ...
- 通过openlayers加载dwg格式的CAD图并与互联网地图叠加
Openlayers介绍 Openlayers是一个基于Javacript开发,免费.开源的前端地图开发库,使用它,可以很容易的开发出WebGIS系统.目前Openlayers支持地图瓦片.矢量数 ...
- MeteoInfoLab脚本示例：加载地图图层
应用最广泛的的地图数据应该是shape格式,网络上有很多免费下载资源.MeteoInfoLab中读取shape文件的函数是shaperead,参数即文件名,返回数据包含图形和属性信息的图层对象.矢量图 ...
随机推荐
- 【OpenGL】GL_DEPTH_TEST深度测试问题
记录一个深度测试的问题 在实现一个简单的OpenGL程序时,遇到了一个问题,深度测试总是有问题,无法正常显示,如下 正常情况为 通过调试发现屏幕空间中的所有深度值均为1. OpenGL代码如下: vo ...
- 浏览器中的 .Net Core —— Blazor WebAssembly 初体验
前言 在两年多以前就听闻 Blazor 框架,是 .Net 之父的业余实验性项目,其目的是探索 .Net 与 WebAssembly 的兼容性和应用前景.现在这个项目已经正式成为 Asp.Net Co ...
- 20200118--python学习第十一天
今日内容 函数小高级 lambda表达式 内置函数 内容回顾 1.函数基本结构 2.参数 形参 基本参数:def func(a1,a2):pass 默认值:def func(a1,a2=123):pa ...
- 当前行的td值传入模态框
<!-- 让include引用的页面,因为故障列表和周.月故障列表里面的table和分页是一样的前端页面,只有一点不同,没必要每个页面都写这些 --> <table id=" ...
- Django (二) 常用字段及 ORM
MVC介绍 Django生命周期 many-to-many One-to-many Django常用字段 CharFiled 需要有max_length unique=True(代表不能重名) Ema ...
- awk sed 命令
awk awk是一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在其对数据分析并生成报告时,显得尤为强大. 简单来说awk就是把文件逐行的读入,以 空格或TAB 为默认分隔符 将每行 ...
- 最通俗易懂的 Java 10 新特性讲解
自从 Java 9 开始,Oracle 调整了 Java 版本的发布策略,不再是之前的 N 年一个大版本,取而代之的是 6 个月一个小版本,三年一个大版本,这样可以让 Java 的最新改变迅速上线,而 ...
- 字符串(Java.lang.String类)的使用
java字符串就是Unicode字符序列,例如"Java"就是四个Unicode字符 java没有内置的字符串类型,而是在标准Java类库中提供了一个预定义的类String.每个用 ...
- 14.git的安装使用
目录 一.版本控制器 二.git 简介 git与svn比较 git的工作流程 版本库间的通信 git分支管理 三.git使用 流程(核心总结) 安装 基础命令 将已有的文件夹 - 初始化为git仓库 ...
- ASP.NET Core MVC 网站学习笔记
ASP.NET Core MVC 网站学习笔记 魏刘宏 2020 年 2 月 17 日 最近因为” 新冠” 疫情在家办公,学习了 ASP.NET Core MVC 网站的一些知识,记录如下. 一.新建 ...