Openlayers 4 Quick Start

最新推荐文章于 2023-02-14 15:01:22 发布
最新推荐文章于 2023-02-14 15:01:22 发布
阅读量204 收藏
点赞数
分类专栏： Openlayers 4 文章标签： Openlayers 4
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43117449/article/details/92848901
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Openlayers 5.3.0</title>
		<link ref="stylesheet" type="text/css" href="css/ol.css"/>
		<script src="js/ol.js"></script>
		<script src="js/openlayers_map.js"></script>
		<script src="js/jquery1.6.1.js"></script>
	</head>
	<body>
		<h1>这是我的第一个地图</h1>	
		<div id="map" style="border 1px solid red;width: 100%;height: 400px;"></div>
	</body>
</html>
<script>
	$(function(){
		maps.loadmap();
	})
</script>

openlayers_map.js

var maps = {
	
	//加载地图
	loadmap : function(){
		map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        view: new ol.View({
          center: ol.proj.fromLonLat([0, 0]),
          zoom: 4
        })
      });
	},
}

在这里插入图片描述

<div id='map' style='height: 500px;border: 1px solid red;'></div>
<button id='big'>放大</button>
<button id='small'>缩小</button>
<button id='fly-to-bern'>定位到北京</button>
<button id='drawPoint'>画点</button>
<button id='drawLine'>画线</button>
<button id='drawCircle'>画圆</button>
<button id='drawPolygon'>画多边形/区域</button>
<button id='cleanMap'>清空图层</button>
<button id='addPoint'>初始化点</button>
<button id='addLine'>初始化线</button>
<button id='addPolygon'>初始化多边形/区域</button>
<script>
	//创建地图
	var map = new ol.Map({
		controls: ol.control.defaults({
	          attributionOptions: ({
	            collapsible: false
	          })
	        }).extend([
	            new ol.control.MousePosition(),
	        ]),
	      // 设置地图图层
	      layers: [
	        // 创建一个使用Open Street Map地图源的瓦片图层
	        //new ol.layer.Tile({source: new ol.source.OSM()})
	        new ol.layer.Tile({
	        	source:new ol.source.XYZ({url:'http://localhost:6379/basemap_0-10/{z}/{y}/{x}.png'})
	        })
	      ],
	      // 设置显示地图的视图
	      view: new ol.View({
	        center: [111, 34],    // 定义地图显示中心于经度0度，纬度0度处
	        zoom: 4,// 并且定义地图显示层级为5
	        maxZoom: 9,  //地图的最大放大级别
	        minZoom:3,   //地图的自小放大级别
	     	// 指定投影使用EPSG:4326
	        projection: 'EPSG:4326',
	      }),
	      // 让id为map的div作为地图的容器
	      target: 'map',
	      //
	      loadTilesWhileAnimating: true,
	  });

	//放大
	$("#big").click(function(){
		var view = map.getView();
		var zoom = view.getZoom();
		view.setZoom(zoom+1);
	});

	//缩小
	$("#small").click(function(){
		var view = map.getView();
		var zoom = view.getZoom();
		view.setZoom(zoom-1);
	});

	//动画定位到某点
	$("#fly-to-bern").click(function(){
		var view = map.getView();
		view.animate({
          center: [116.40, 39.90],
          duration: 2000
        });
	});

	 // 添加一个绘制的线使用的layer
    var vectorLayer = new ol.layer.Vector({
        source: new ol.source.Vector()
    });
    map.addLayer(vectorLayer);
    var draw;

 	/* // 监听singleclick事件
    map.on('singleclick', function(event){
       console.log(event.coordinate);
    }); */

    //画点
	$("#drawPoint").click(function(){
		map.removeInteraction(draw);
       // 添加一个绘制的线使用的layer
        var style = new ol.style.Style({
                  image: new ol.style.Icon({
                	src:'images/favicon.ico'
                  }),
                  text:new ol.style.Text({
                	  text:'我是一个点',
                	  font:'18px sans-serif ',
                	  offsetY:'-20',
                	  fill:new ol.style.Fill({
                		  color:'red'
                	  })
                  })
              });
        vectorLayer.setStyle(style);
        draw = new ol.interaction.Draw({
        	  type:'Point',
        	  source:vectorLayer.getSource()
        	});
       map.addInteraction(draw);
       //绘制完毕后，获取绘制的坐标，点坐标为数组
       draw.on('drawend',function(event){
    	   var geom = event.feature.getGeometry();
    	   var position = geom.getCoordinates();
    	   console.log(position);
    	});
     //清空添加的矢量图层
		vectorLayer.getSource().clear();
	});

	 //画线
	$("#drawLine").click(function(){
		map.removeInteraction(draw);
		var style = new ol.style.Style({
			 stroke:new ol.style.Stroke({
				color:'red',
				width:'10px'
			 }),
			 text:new ol.style.Text({
				 text:'我是一条线',
				 font:'normal 18px 微软雅黑',
				 textAlign:'center',
				 textBaseline:'middle',
				 fill:new ol.style.Fill({
					 color:'#aa3300'
				 })
			 }),
			 zIndex:20
		 });
		vectorLayer.setStyle(style);
		draw = new ol.interaction.Draw({
	      	  type:'LineString',
	      	  source:vectorLayer.getSource()
    	  });
		map.addInteraction(draw);
		//线的坐标为二维数组
		draw.on('drawend',function(event){
	    	   var geom = event.feature.getGeometry();
	    	   var position = geom.getCoordinates();
	    	   console.log(position);
	    	});
		//清空添加的矢量图层
		vectorLayer.getSource().clear();
	});

	 //画圆
	 $("#drawCircle").click(function(){
		 map.removeInteraction(draw);
		 var style = new ol.style.Style({
			 stroke:new ol.style.Stroke({
				color:'#ffcc33',
				width:'2'
			 }),
			 text:new ol.style.Text({
				 text:'我是圆',
				 font:'normal 18px 微软雅黑',
				 textAlign:'center',
				 textBaseline:'middle',
				 fill:new ol.style.Fill({
					 color:'rgba(255,33,0,1)'
				 })
			 }),
			 fill:new ol.style.Fill({
				 color:'rgba(0,198,255,0.4)'
			 })
		 });
		vectorLayer.setStyle(style);
		 draw = new ol.interaction.Draw({
	      	  type:'Circle',
	      	  source:vectorLayer.getSource()
   	  	});
		map.addInteraction(draw);
		//圆的圆心坐标和半径
		draw.on('drawend',function(event){
	    	   var geom = event.feature.getGeometry();
	    	   var position = "中心点"+geom.getCenter()+"半径"+geom.getRadius();
	    	   console.log(position);
	    	});
		//清空添加的矢量图层
		vectorLayer.getSource().clear();
	 });


	 //画多边形
	 $("#drawPolygon").click(function(){
		 map.removeInteraction(draw);
		 var style = new ol.style.Style({
			 stroke:new ol.style.Stroke({
				color:'#ffcc33',
				width:'2'
			 }),
			 text:new ol.style.Text({
				 text:'我是多边形',
				 font:'normal 18px 微软雅黑',
				 textAlign:'center',
				 textBaseline:'middle',
				 fill:new ol.style.Fill({
					 color:'rgba(255,33,0,1)'
				 })
			 }),
			 fill:new ol.style.Fill({
				 color:'rgba(0,198,255,0.4)'
			 })
		 });
		vectorLayer.setStyle(style);
		 draw = new ol.interaction.Draw({
	      	  type:'Polygon',
	      	  source:vectorLayer.getSource()
   	  	});
		map.addInteraction(draw);
		//多边形坐标是二维数组
		draw.on('drawend',function(event){
				var geom = event.feature.getGeometry();
	    	   	var position = geom.getCoordinates();
	    	   	console.log(position);
	    	});
		//清空添加的矢量图层
		vectorLayer.getSource().clear();
	 });

	 //清空图层
	 $("#cleanMap").click(function(){
		vectorLayer.getSource().clear();
	});

	 //初始化点
	 $("#addPoint").click(function(){
		 var pointFeature = new ol.Feature({
			 geometry:new ol.geom.Point([116.40, 39.90]),
			 name:"1324",
			 id:"666"
		 });
		 var style = new ol.style.Style({
             image: new ol.style.Icon({
           	 src:'images/favicon.ico'
             	}),
             text:new ol.style.Text({
           	  text:'我是一个点',
           	  font:'18px sans-serif ',
           	  offsetY:'-20',
           	  fill:new ol.style.Fill({
           		  color:'red'
           	  })
             })
         });
		 pointFeature.setStyle(style);
		 vectorLayer.getSource().addFeature(pointFeature);
	 });

	 //初始化线
	 $("#addLine").click(function(){
		 var linefeature = new ol.Feature({
		     	geometry:new ol.geom.LineString([[113.5991,24.8166], [114.5991,25.8166]])
		    	});
		 var style = new ol.style.Style({
			 stroke:new ol.style.Stroke({
				color:'red',
				width:'10px'
			 }),
			 text:new ol.style.Text({
				 text:'我是一条线',
				 font:'normal 18px 微软雅黑',
				 textAlign:'center',
				 textBaseline:'middle',
				 fill:new ol.style.Fill({
					 color:'#aa3300'
				 })
			 }),
			 zIndex:20
		 });
		 linefeature.setStyle(style);
		 vectorLayer.getSource().addFeature(linefeature);
	 });

	 //初始化多边形区域
	 $("#addPolygon").click(function(){
		 var PolygonFeature = new ol.Feature({
			 geometry:new ol.geom.Polygon([[[110, 39], [116, 39], [116, 33], [110, 33], [110, 39]]])
		 });
		 var style = new ol.style.Style({
			 stroke:new ol.style.Stroke({
				color:'#ffcc33',
				width:'2'
			 }),
			 text:new ol.style.Text({
				 text:'我是多边形',
				 font:'normal 18px 微软雅黑',
				 textAlign:'center',
				 textBaseline:'middle',
				 fill:new ol.style.Fill({
					 color:'rgba(255,33,0,1)'
				 })
			 }),
			 fill:new ol.style.Fill({
				 color:'rgba(0,198,255,0.4)'
			 })
		 });
		 PolygonFeature.setStyle(style);
		 vectorLayer.getSource().addFeature(PolygonFeature);
	 });
</script>
永恒的狼牙
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
openlayers 1
newbeeAmay的博客
07-26 108
实例一 第一个地图 每一个openlayers的地图都是ol.Map的对象 ol.Overlay用来实现弹出式窗口 // 创建地图 new ol.Map({ // 设置地图图层 layers: [ // 创建一个使用Open Street Map地图源的瓦片图层 new ol.layer.Tile({source: new ol.source.OSM()}) ],
00.OpenLayers快速开始
weixin_45213317的博客
05-19 903
介绍了如何使用OpenLayers创建一个基本的Web地图应用程序。通过设置新项目，包括HTML标记、JavaScript和CSS样式，您可以快速开始构建地图应用。文档提供了创建项目、组成部分和部署应用的步骤，包括示例代码和说明。通过npm命令创建项目，导入OpenLayers模块，设置地图视图和图层，以及部署应用。最后，通过npm run build命令进行应用程序的构建。
openlayer学习（一）
hengxin2014的博客
03-07 1026
openlayer学习（一）一、前言二、官网三、初探 一、前言 因为工作需要，今天开始学习openlayer。 GIS专业毕业。刚开始工作的时候是做java后端，顺便基于skyline和cesium做一些。然后做了一些开发项目与测绘项目管理工作，顺便做了一点前端与原型Axure。后面又接触了一点ue4和三维倾斜数据的处理。总结下来，接触面虽然广，但是没有纵深。趁着现在工作需要，主要以二三维地图为主，深入学习一下openlayer与cesium。因为学生期间用的是c#，工作刚开始用的是java，spring那
学习笔记(01):Openlayers实例详解-单击激活地图启用交互
weixin_39415598的博客
05-25 236
本课程选取了OpenLayers一些具有典型代表性的实例进行详解。讲解实例过程中对涉及到的相关知识点进行穿插分析介绍，适合初学者对OpenLayers形成整体认识、树立学习信心。 课程涉及到map、view、projection、layer、source、feature、style、overlay、control等组件的实例分析。 ...
OpenLayers 6 学习一：构建第一个地图应用
D_lunar的博客
09-29 1403
一、安装OpenLayers OpenLayers官网：OpenLayers - Get the Code npm+OpenLayers官网：ol - npm npm install ol Vue项目直接安装ol会报错，安装OpenLayers失败，解决办法有两种： 方法一：先把node_modules文件夹删除，待安装OpenLayers后，再npm install安装被删除的依赖。适用于项目刚创建时，没有安装过多的依赖，毕竟依赖过多时，安装所有的依赖也很费时间。 方法二：在一个没有node
OpenLayers4案例
10-31
在"OpenLayers4案例"中，我们将会探讨如何利用OpenLayers 4与Layui（一个基于 layui.js 的前端UI框架）结合，来创建一个美观且易于使用的地图应用。Layui提供了一套完整的前端组件，可以为网页界面增添专业且现代的...
openlayers4 的示例 test.zip
10-31
OpenLayers 4 是一个强大的开源JavaScript库，用于在网页上创建交互式的地图应用。这个"test.zip"压缩包包含了一些入门级别的示例，帮助初学者理解如何使用OpenLayers 4来实现各种功能。 1. **聚合显示（my_cluster...
openlayers4实现点动态扩散
10-14
在OpenLayers 4中，实现点动态扩散是一种创建动态视觉效果的方法，通常用于模拟数据的传播或流动。这种效果可以通过连续地更新点的样式，特别是半径大小和不透明度来实现。以下是对如何在OpenLayers 4中实现点动态...
openlayers 风场渲染效果
01-11
openlayers 风场渲染效果，放置风场数据即可使用
openlayers6【六】地图交互 interaction详解
fire_f_f的博客
02-14 1086
openlayes、interaction
openlayers学习小知识(持续更新)
c17854254215的博客
06-01 546
1、限制地图缩放级别：在View中定义属性minZoom和maxZoom，可以设置地图缩放的最小级别和最大级别； 2、动态设置地图的缩放级别：使用map.getView()方法获取地图当前的View，view.getZoom获取当前视图的缩放级别，view.setZoom设置视图的缩放级别，map.setView设置地图的视图； 3、单击激活地图交互：设置单击地图之后才能平移、缩放等操作地图。在map中定义属性interactions：ol.interaction.defaults({onFocusOnly
SpringBoot+Vue+Openlayers实现地图上新增和编辑坐标并保存提交
BADAO_LIUMANG_QIZHI的博客
11-05 2415
场景 若依前后端分离版手把手教你本地搭建环境并运行项目： https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662 Vue中使用Openlayers加载Geoserver发布的ImageWMS： https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/115867709 在上面搭建起来Vue+SpringBoot的前后端分离的项目的基础上，并且加载显示地图之后。
OpenLayers快速开始
热门推荐
秋天未成熟的博客
11-25 1万+
本系列关于OpenLayers的翻译基于版本v4.5。 一、在页面上放置一个地图 以下会有一个完整的可运行的例子。首先，创建一个html文件，复制如下代码，并在浏览器中打开即可。 &lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;link rel="stylesheet" href="https...
openlayers实现点击图层弹出相应信息
panzi_only的博客
11-19 1986
openlayers：4.6.5 vue-cli：3.0 openlayers官网：https://openlayers.org/ 天地图官网：https://www.tianditu.gov.cn/ 1.准备lmap.js并初始化地图 let lmap = { map: null, init() { this.map = new ol.Map({ ...
Openlayers 6.2.1 浅尝心得（三）
Supreme_Sir的博客
04-03 1858
序 中国有句古话：“授之以鱼不如授之以渔”，所以今天我要记录的主要是关于 OpenLayers 的应用开发思路，而非某一具体的功能或代码。 OpenLayers 作为一个开源项目，我们首先需要知道的就是它的 官网 和 源码地址。官网作为项目信息的集合地，对开发者来说是一个很好的了解项目的入口；而源码地址则可以帮助我们更好的了解代码逻辑，协助我们定位问题，解决问题。 天才第一步 打开官网，我们会...
WebGIS——OpenLayers 3 地图叠加自定义卫星/航拍/手绘地图（任意瓦片图）
JXMaker
05-16 3472
使用OpenLayers 3 第一步 首先创建Html文件的结构，在body中放入一个Div作为地图显示的容器，调整其宽度高度使其全屏显示 html页结构如下,其中id为map的div为显示地图的容器： <body> <div id="map"></div> <input id="slider" type="range" min="0" max="1" step="0.1" value="1" oninput="layer.setOpacity(this.value
1111111111111111111111
最新发布
08-13
1111111111111111
openlayers4 态势箭头
05-24
OpenLayers 4 有一个名为 "ol.style.Arrow" 的内置样式类，可以用来创建态势箭头图标。以下是一个示例代码，演示如何使用它： ```javascript // 创建一个箭头图标 var arrowStyle = new ol.style.Style({ image: ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值