OpenLayers 教程

地图定位是非常常用的功能，定位实现方式也是各种各样，而定位到线和面状图形比较容易，定位到点方式有点不同；本教程介绍定位到点、范围、图形要素 feature、图层 layer。

PS：定位到气泡框，详见：Openlayers 自定义气泡框以及定位到气泡框

本示例基于 Openlayers 添加 WKT WKB GeoJson 格式点线面数据

Openlayers 定位功能

<html lang="en">
<head><meta charset="utf-8"><!--注意：openlayers 原版的比较慢，这里引起自己服务器版--><link rel="stylesheet" href="http://openlayers.vip/examples/css/ol.css" type="text/css"><style>/* 注意：这里必须给高度，否则地图初始化之后不显示；一般是计算得到高度，然后才初始化地图 */.map {height: 400px;width: 100%;float: left;}</style><!--注意：openlayers 原版的比较慢，这里引起自己服务器版--><script src="http://openlayers.vip/examples/resources/ol.js"></script><script src="./tiandituLayers.js"></script><title>OpenLayers example</title>
</head>
<body>
<h2>move to object</h2>
<!--地图容器，需要指定 id -->
<div id="map" class="map"></div><script type="text/javascript">var map = new ol.Map({// 地图容器target: 'map',// 地图图层，比如底图、矢量图等layers: [getIMG_CLayer(),getIBO_CLayer(),getCIA_CLayer(),],// 地图视野view: new ol.View({projection: "EPSG:4326",// 定位center: [116, 39],// 缩放zoom: 4,maxZoom: 18,minZoom: 1,})});var layer = initVectorLayer();addFeatures();var featureTemp;// 添加点线面function addFeatures() {var features = [];features.push(getFeatureByWKT("POINT(116.17983834030585 39.98298600752048)"));var geojson = {"type": "Feature","geometry": {"type": "Polygon","coordinates": [[[116.09129344901807, 39.976463050783], [116.12802898368604, 39.986934394777144], [116.14845668754346, 39.970454902589644], [116.14365016898877, 39.952945442140425], [116.11069118461377, 39.95037052148613], [116.09129344901807, 39.976463050783]]]},"properties": null};featureTemp = getFeatureByGeoJson(geojson);features.push(featureTemp);features.push(getFeatureByWKB("0102000020E6100000040000004AB6DE424F095D4024548C542D0144404AB6DE42E10D5D4024548CD46D0444404AB6DE022D115D4024548CD4DBFF43404AB6DE42DB135D4024548CD46D044440"));layer.getSource().addFeatures(features);var extent = layer.getSource().getExtent();map.getView().fit(extent, {duration: 1,//动画的持续时间,callback: null,});}/*** @todo 矢量图层* @returns {VectorLayer}* @constructor*/function initVectorLayer() {//实例化一个矢量图层Vector作为绘制层let source = new ol.source.Vector();//创建一个图层let customVectorLayer = new ol.layer.Vector({source: source,zIndex: 2,//设置样式style: new ol.style.Style({//边框样式stroke: new ol.style.Stroke({color: 'red',width: 5,lineDash: [3, 5]}),//填充样式fill: new ol.style.Fill({color: 'rgba(0, 0, 255, 0.3)',}),image: new ol.style.Circle({radius: 9,fill: new ol.style.Fill({color: 'red',})})}),});//将绘制层添加到地图容器中map.addLayer(customVectorLayer);return customVectorLayer;}/*** @todo wkt格式数据转化成图形对象* @param {string} wkt   "POINT(112.7197265625,39.18164062499999)" 格式数据* @param {string|Projection} sourceCode 源投影坐标系* @param {string|Projection} targetCode 目标投影坐标系* @returns {Feature}*/function getFeatureByWKT(wkt, sourceCode, targetCode) {try {let view = map.getView();if (!wkt) {return null;}let format = new ol.format.WKT();let feature;feature = format.readFeature(wkt, {featureProjection: targetCode || view.getProjection(),dataProjection: sourceCode || view.getProjection(),});return feature;} catch (e) {console.log(e);return null;}}/*** @todo 图形对象转化成GeoJson格式数据(postgis)* @param {string|object} geojson geojson字符串或者对象* @param {string|Projection} sourceCode 源投影坐标系* @param {string|Projection} targetCode 目标投影坐标系* @returns {Feature}*/function getFeatureByGeoJson(geojson, sourceCode, targetCode) {let view = map.getView();if (!geojson) {return null;}let feature;if ((typeof geojson) == 'string') {while (geojson.indexOf('null') != -1) {// geojson = geojsongeojson = geojson.replace("null", "");}}feature = (new ol.format.GeoJSON()).readFeature(geojson, {dataProjection: sourceCode || view.getProjection(),    // 设定JSON数据使用的坐标系featureProjection: targetCode || view.getProjection() // 设定当前地图使用的feature的坐标系});return feature;}/*** @todo coordinate格式数据转化成图形对象* @param {string} coordinate   0101000020E610000063B48EAA26105D404E7FF623451C4440 格式数据* @param {string|Projection} sourceCode 源投影坐标系* @param {string|Projection} targetCode 目标投影坐标系* @returns {Feature}*/function getFeatureByWKB(coordinate, sourceCode, targetCode) {try {let view = map.getView();if (!coordinate) {return null;}let format = new ol.format.WKB();let feature;if (coordinate.indexOf('010') == 0) {let confirmEnding = function (str, target) {// 请把你的代码写在这里var start = str.length - target.length;var arr = str.substr(start, target.length);if (arr == target) {return true;}return false;}if (confirmEnding(coordinate, '40')) {feature = (format).readFeature(coordinate, {dataProjection: sourceCode || view.getProjection(),    // 设定JSON数据使用的坐标系featureProjection: targetCode || view.getProjection() // 设定当前地图使用的feature的坐标系});}}return feature;} catch (e) {console.log(e);return null;}}// 获取地图视图 viewvar view = map.getView();// 定位到点function positionPoint() {view.animate({center: [116.3820982809399, 39.91561299419557],//动画结尾的视图中心// zoom:7, //这里可以指定到具体等级duration: 2000,//动画的持续时间});}// 定位到范围function positionExtent() {//定位范围view.fit([114.47347835568841, 39.79771160671021, 115.99508480100091, 40.92930340358521], {duration: 2000,//动画的持续时间,callback: function () {alert("positionExtent compete !")},});}// 定位到图形要素 featurefunction positionFeature() {var extent = featureTemp.getGeometry().getExtent();//定位范围view.fit(extent, {duration: 2000,//动画的持续时间,callback: function () {alert("positionFeature compete !")},});}// 定位到图层 layerfunction positionLayer() {var extent = layer.getSource().getExtent();//定位范围view.fit(extent, {duration: 2000,//动画的持续时间,callback: function () {alert("positionLayer compete !")},});}
</script><button id="positionPoint" onclick="positionPoint()">定位到点</button>
<button id="positionExtent" onclick="positionExtent()">定位到范围</button>
<button id="positionFeature" onclick="positionFeature()">定位到Feature</button>
<button id="positionLayer" onclick="positionLayer()">定位到图层</button>
</body>
</html>

在线示例

Openlayers 各种定位：Openlayers moveto

Openlayers 各种定位：定位点、线、面以及图层等相关推荐

（Python）识别和定位车道线
一幅幅图片中去识别和定位车道线的位置车道线有一个与柏油马路相比很明显的特征,那就是它是白色的 #importing some useful packages import matplotlib.py ...
openlayers 绘制动态迁徙线、曲线
前言:本来懒得写这个博客,实在深感无聊,没啥事情做,出篇博客让大家看看.文章会尽可能简短. 简单效果掉帧属录屏效果,尚未测试过性能,因为这个可以看自己调节.以下为一条贝塞尔曲线分了180段的效果描述 ...
vue后台系统管理项目-openlayers地图定位、港口数据标记功能
openlayers地图功能使用openlayers开发实现查找的货源在地图的显示标注,点击货源图标进行当前港口信息显示: 通过查询的港口列表数据,点击当前港口在地图定位显示,添加港口选中标记功能: ...
java线上问题定位_线上java.lang.OutOfMemoryError问题定位三板斧
OOM(OutOfMemoryError) 问题归根结底三点原因: 本身资源不够申请的内存太多资源耗尽解决思路,换成Java服务分析,三个原因也可以解读为: 有可能是内存分配确实过小,而正常业务 ...
快速定位NodeJs线上问题 - 之火焰图篇
0x01 背景前段时间,公司监控群内报警,某个nodeJs项目 CPU 被打满,运维大哥快速重启解决,由于现场没有保留没定位到具体问题.2周后同样的报警又出来了,只能再次祭出重启大法,按照预期果然好 ...
Vue + OpenLayers 实时定位（一）前端展示
文章目录前言一.定义标签样式二.模拟 GeoJSON 数据三.创建 VerctorLayer 四.构建地图五.模拟实时移动总结前言本系列文章介绍一个简单的实时定位示例,示例的组成主要包 ...
一键定位java 线上服务 CPU 100%
传统方法: top oder by with P:1040 // 首先按进程负载排序找到 axLoad(pid) top -Hp 进程PID:1073 // 找到相关负载线程PID printf & ...
css 定位连线_CSS Position(定位)
CSS Position(定位) CSS position属性用来指定元素如何在页面上定位,CSS Position(定位)的方式有以下几种:静态定位(static),绝对定位(absolute),相 ...
css 定位连线_前端css实现两点连线
// dots是点的集合 : Array dots.map((dot, index) => { // 最后一个点没有连线 if (!dot[index + 1]) return; const A ...

Openlayers 各种定位：定位点、线、面以及图层等

Openlayers 各种定位

OpenLayers 教程

Openlayers 定位功能

在线示例

Openlayers 各种定位：定位点、线、面以及图层等相关推荐

最新文章

热门文章