openlayers入门添加百度地图绘制点线面

1.构建一个地图容器

<div id="map" class="map"></div>

2.创建一个地图
2.1初始化一个openlayersmap对象

var map=new Map({})

2.2将这个对象添加到div中

var map=new Map({target:'map'
})

2.3在layers中定义数组中可用的图层
tile是瓦片

layers:[]
layers: [new ol.layer.Tile({source: new ol.source.OSM()})
]

2.4view用于指定中心点和缩放级别

view:new ol.View({center:ol.proj.fromLonLat(x,y)(或者[x,y],zoom:12
})

使用百度地图
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width" /><link rel="stylesheet"href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.12.0/css/ol.css" type="text/css"><style>.map {height: 400px;width: 100%;}</style><script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.12.0/build/ol.js"></script><title>百度地图</title><style>html,body,#map {width: 100%;height: 100%}</style>
</head><body><div id="map" class="map"></div>
</body>
<script>var projection = ol.proj.get("EPSG:3857");var resolutions = [];for (var i = 0; i < 19; i++) {resolutions[i] = Math.pow(2, 18 - i);}var tilegrid = new ol.tilegrid.TileGrid({origin: [0, 0],resolutions: resolutions});var baidu_source = new ol.source.TileImage({projection: projection,tileGrid: tilegrid,tileUrlFunction: function (tileCoord, pixelRatio, proj) {if (!tileCoord) {return "";}let z = tileCoord[0];let x = tileCoord[1];let y = -tileCoord[2] - 1;if (x < 0) {x = "M" + (-x);}if (y < 0) {y = "M" + (-y);}return "http://online3.map.bdimg.com/onlinelabel/?qt=tile&x=" + x + "&y=" + y + "&z=" + z +"&styles=pl&udt=20151021&scaler=1&p=1";}});var baidu_layer = new ol.layer.Tile({source: baidu_source});var map = new ol.Map({target: 'map',layers: [baidu_layer],view: new ol.View({center:  [12959773,4853101],zoom: 12})});
</script>

绘制点线面

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet"href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.12.0/css/ol.css" type="text/css"><style>.map {height: 400px;width: 100%;}</style><script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.12.0/build/ol.js"></script><title>Document</title>
</head><body><div id="menu"><label>几何图形类型：&nbsp;</label><select id="type"><option value="None">无</option><option value="Point">点</option><option value="LineString">线</option><option value="Polygon">多边形</option><option value="Circle">圆</option><option value="Square">正方形</option></select></div><div id="map" class="map"></div><script>var projection = ol.proj.get("EPSG:3857");var resolutions = [];for (var i = 0; i < 19; i++) {resolutions[i] = Math.pow(2, 18 - i);}var tilegrid = new ol.tilegrid.TileGrid({origin: [0, 0],resolutions: resolutions});var baidu_source = new ol.source.TileImage({projection: projection,tileGrid: tilegrid,tileUrlFunction: function (tileCoord, pixelRatio, proj) {if (!tileCoord) {return "";}let z = tileCoord[0];let x = tileCoord[1];let y = -tileCoord[2] - 1;if (x < 0) {x = "M" + (-x);}if (y < 0) {y = "M" + (-y);}return "http://online3.map.bdimg.com/onlinelabel/?qt=tile&x=" + x + "&y=" + y + "&z=" + z +"&styles=pl&udt=20151021&scaler=1&p=1";}});var baidu_layer = new ol.layer.Tile({source: baidu_source});var map = new ol.Map({target: 'map',layers: [baidu_layer],view: new ol.View({center:  [12959773,4853101],zoom: 12})});var typeSelect = document.getElementById('type'); //绘制类型选择对象var draw; //ol.Interaction.Draw类的对象//首先需要明白的一点是，Source和Layer是一对一的关系，有一个Source，必然需要一个Layer，然后把这个Layer添加到Map上，就可以显示出来了。通过官网的API搜索ol.source可以发现有很多不同的Source，但归纳起来共三种：ol.source.Tile，ol.source.Image和ol.source.Vector。//ol.source.Tile对应的是瓦片数据源，现在网页地图服务中，绝大多数都是使用的瓦片地图，而OpenLayers 3作为一个WebGIS引擎，理所当然应该支持瓦片。
//ol.source.Image对应的是一整张图，而不像瓦片那样很多张图，从而无需切片，也可以加载一些地图，适用于一些小场景地图。
//ol.source.Vector对应的是矢量地图源，点，线，面等等常用的地图元素(Feature)，就囊括到这里面了。这样看来，只要这两种Source就可以搞定80%的需求了。//实例化一个矢量图层Vector作为绘制层var source = new ol.source.Vector();var vectorLayer = new ol.layer.Vector({source: source,style: new ol.style.Style({fill: new ol.style.Fill({ //填充样式color: 'rgba(255, 255, 255, 0.2'}),stroke: new ol.style.Stroke({ //线样式color: '#00c033',width: 2}),image: new ol.style.Circle({ //点样式radius: 7,fill: new ol.style.Fill({color: '#00c033'})})})});//将绘制层添加到地图容器中map.addLayer(vectorLayer);//用户更改绘制类型触发的事件typeSelect.onchange = function (e) {map.removeInteraction(draw); //移除绘制图形控件addInteraction(); //添加绘制图形控件};//ol.interaction.Draw的可选参数//features，绘制的要素的目标集合；// source，绘制的要素的目标图层来源，即目标图层的 source属性 ；// snapTolerance，自动吸附完成点的像素距离，也就是说当鼠标位置距离闭合点小于该值设置的时候，会自动吸附到闭合点，默认值是 12;// type，绘制的地理要素类型，ol.geom.GeometryType类型，包含 Point、 LineString、 Polygon、MultiPoint、MultiLineString 或者 MultiPolygon；// minPointsPerRing，绘制一个多边形需要的点数最小值，数值类型，默认是 3；// style，要素素描的样式，是 ol.style.Style对象之一；// geometryName，绘制的地理要素的名称，string类型；// condition，一个函数，接受一个ol.MapBrowserEvent类型的参数，返回一个布尔值表示是否应该调用事件处理函数。默认情况下，增加一个顶点，类型为 ol.events.ConditionType。绘制完成之后将其添加到// 添加事件function addInteraction() {var typeValue = typeSelect.value; //绘制类型if (typeValue !== 'None') {var geometryFunction, maxPoints;if (typeValue === 'Square') { //正方形typeValue = 'Circle'; //设置绘制类型为Circle//设置几何信息变更函数，即创建正方形geometryFunction = ol.interaction.Draw.createRegularPolygon(4);}console.log(typeValue);//实例化图形绘制控件对象并添加到地图容器中// 给地图添加该交互功能，首先需要实例化一个ol.interaction.Draw，必须指定 source和type属性：draw = new ol.interaction.Draw({source: source,type: typeValue, //几何图形类型geometryFunction: geometryFunction, //几何信息变更时的回调函数maxPoints: maxPoints //最大点数});// 最后首先执行绑定函数addInteraction();，然后点击鼠标进行绘制：map.addInteraction(draw);} else {//清空绘制的图形source.clear();}}</script>
</body>

openlayers入门添加百度地图绘制点线面相关推荐

vue 百度地图绘制点线面
vue使用百度地图 1.在index.html 中直接引用 <script type="text/javascript" src="http://api.map.b ...
vue结合百度地图绘制工具遇到的问题及解决方案(多边形编辑状态下形状显示不全、marker点添加事件无效)
vue如何引入百度地图绘制工具百度地图绘制工具示例 http://developer.baidu.com/map/jsdemo.htm#f0_7 百度地图绘制工具api文档 http://api.m ...
百度地图-绘制工具以及覆盖物的简单使用
这几天重拾了地图相关的功能,做一个小小的总结. 本文的示例的后端为flask框架,前端使用了bootstrap和jQuery以及百度地图API. 接下来是展示部分. 地图上的覆盖物表示高校所处的位置, ...
百度地图绘制实时路线以及最短线路规划
如何使用百度地图绘制实时路线以及最短线路规划最近在做百度地图的实时路线绘制,发现一些问题,比如由于定位漂移带来的路线绘制偏差,还有由于定位漂移,导致人未走动时,也会绘制路线等.百度鹰眼的线路纠偏个人 ...
openlayers加载百度地图作为底图坐标偏移的解决办法
openlayers加载天地图作为底图,在网上找了公开的服务资源,要做到百度地图与天地图之间切换,同样也从网上找到百度地图的服务资源但是在地图上坐标总是有偏差,最初的代码是这样的: var proje ...
百度地图绘制多段驾车路线
百度地图绘制多段驾车路线直接上代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Conte ...
使用百度地图绘制点、线、面 | Javascript
写在前面: 本文为百度地图开发系列文章之一, 前期回顾: webGIS,基于百度地图的HelloWord实现如何使用前端css代码去掉百度地图左下角的图标使用百度地图绘制点.线.面 | Javas ...
android+动态地图+效果图,Android百度地图绘制圆形，圆形半径可动态变化
问题:百度地图绘制圆形,圆形半径可随进度拖动条发生改变思路:圆形本身是一个覆盖物,可参考百度地图Demo中的OverlayDemo.java这个类进行实现.完成画圆之后,圆形半径如何随着进度条的拖动 ...
百度地图绘制途径点/分段绘制路线
百度地图绘制途径点百度地图Api地址: https://lbsyun.baidu.com/ 公司项目中要求绘制物流信息,需体现途径点但是我在其中没有找到有关绘制路线,设定途径点的相关说明有一个非 ...

openlayers入门添加百度地图绘制点线面

openlayers入门添加百度地图绘制点线面相关推荐

最新文章

热门文章