OpenLayers学习笔记中级篇（四、地图图标操作）

图标是GIS应用中必不可少的要素，比如在地图上标注饭店，学校，加油站等，就需要添加图标，点击图标，可能需要提示更为详细的信息，比如地址，评价，或者更为复杂的业务信息。本节将从基本的应用入手讲解，直到比较高级一些的自定义特色图标和信息展示。

在OpenLayer3中添加图标有两种方式，一种是我们这一小节马上就要介绍的，比较传统的overlay，另一种是下一小节马上就要介绍的Feature + Style的方式。 overlay之所以传统，是因为它就是传统的html方式显示图片。下面就是用这种方式加载一个五角星的示例：

1、overlay方式添加图标

<!doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>                  <meta http-equiv=Content-Type content="text/html;charset=utf-8"><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><meta content=always name=referrer><title>地图图标加载</title><link href="css/ol.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="js/ol.js" charset="utf-8"></script>
</head><body><div id="map" style="width: 100%"></div>
<!--下面就是传统的显示一个图片图标的方式，用img-->
<div id="anchor"><img src="img/star.png" alt="示例五角星"/></div>
<script type="text/javascript">var map = new ol.Map({layers: [new ol.layer.Tile({source: new ol.source.OSM()})],target: 'map',view: new ol.View({projection: 'EPSG:4326',center: [116.403598,39.917553],zoom: 12})});// 下面把上面的图标附加到地图上，需要一个ol.Overlayvar anchor = new ol.Overlay({element: document.getElementById('anchor')});// 关键的一点，需要设置附加到地图上的位置anchor.setPosition([116.403598,39.917553]);// 然后添加到map上map.addOverlay(anchor);
</script>
</body></html>

还是先运行看一下效果如下：

这样我们就把一个五角星加载地图上北京的位置上！来看一下具体的流程：

首先我们定义了一个div用来放置五角星图片，然后我们定义了一个Overlay，在Overlay的元素位置上放上五角星的div id，然后非常重要的一步是给五角星图片设置一个位置，最后把Overlay图层加入到地图上即可！

功能已经完成了，下面我们来分析一下这种方式加载图标的优点和缺点：

缺点：

当图标比较多的情况下，如果采用这种方式，那么我们会加入非常多的HTML元素，从而造成效率降低。关于效率的测试，大家可以自行测试。为什么会这样呢？因为界面上元素的遍历在数量比较多的情况下，会变慢，基于此基础上的渲染，鼠标事件都会变慢。

优点：

这种使用传统的方式显示图标可以应用传统的HTML技术，比如鼠标移动到图标上，鼠标图标变成手势。我们可以用css来处理就可以了，比如在head里面添加下面的代码：

<style type="text/css">#anchor {cursor:pointer;}
</style>

就可以看到鼠标放到锚点上去的时候，鼠标图标从箭头，变成手了。类似的其他技术都可以应用上去，比如css动画。鉴于动画在前端的重要性，下面单独用实例来讲解。

2、给图标添加动画效果，话不多说，直接上代码：

<!doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head><meta http-equiv=Content-Type content="text/html;charset=utf-8"><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><meta content=always name=referrer><title>地图图标加载</title><link href="css/ol.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="js/ol.js" charset="utf-8"></script><!--定义动画，图标先放大，再缩小--><style type="text/css">@keyframes zoom{from {top: 0; left: 0; width: 32px; height: 32px;}50% {top: -16px; left: -16px; width: 64px; height: 64px;}to {top: 0; left: 0; width: 32px; height: 32px;}}
/* Firefox */@-moz-keyframes zoom {from {top: 0; left: 0; width: 32px; height: 32px;}50% {top: -16px; left: -16px; width: 64px; height: 64px;}to {top: 0; left: 0; width: 32px; height: 32px;}}
/* Safari 和 Chrome */@-webkit-keyframes zoom {from {top: 0; left: 0; width: 32px; height: 32px;}50% {top: -16px; left: -16px; width: 64px; height: 64px;}to {top: 0; left: 0; width: 32px; height: 32px;}}
/* Opera */@-o-keyframes zoom {from {top: 0; left: 0; width: 32px; height: 32px;}50% {top: -16px; left: -16px; width: 64px; height: 64px;}to {top: 0; left: 0; width: 32px; height: 32px;}}/* 应用css动画到图标元素上 */#anchorImg{display: block;position: absolute;animation: zoom 5s;animation-iteration-count: infinite; /* 一直重复动画 */-moz-animation: zoom 5s; /* Firefox */-moz-animation-iteration-count: infinite; /* 一直重复动画 */-webkit-animation: zoom 5s;  /* Safari 和 Chrome */-webkit-animation-iteration-count: infinite; /* 一直重复动画 */-o-animation: zoom 5s; /* Opera */-o-animation-iteration-count: infinite; /* 一直重复动画 */}</style>
</head>
<body>
<div id="map" style="width: 100%"></div>
<div id="anchor" style="width: 64px;height: 64px;" ><img id='anchorImg' src="img/star.png" alt="示例五角星"/></div>
<script type="text/javascript">var map = new ol.Map({layers: [new ol.layer.Tile({source: new ol.source.OSM()})],target: 'map',view: new ol.View({projection: 'EPSG:4326',center: [116.403598,39.917553],zoom: 10})});var anchor = new ol.Overlay({element: document.getElementById('anchor')});anchor.setPosition([116.403598,39.917553]);map.addOverlay(anchor);
</script>
</body></html>

这是一个动态的动画效果，大家可以自己测试一下看看效果，还是很不错的。这里我们也只是比demo1多做了一些css样式的改变，这也是overlayer加载图标的优点，我们可以使用css来处理图标的加载样式。除了这种css实现动画之外，我们还可以直接加载gif动画，这是非常简单的，在此不再赘述！

下面我们来介绍第二种加载图标的方法：Feture+Style的方式加载图标。其实这种方式之前我们已经使用过了，就是在地图加载章节那儿的矢量地图的加载方式那儿，下面我们根据具体的代码来看一下：

3、feature+style加载图标

<!doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>                  <meta http-equiv=Content-Type content="text/html;charset=utf-8"><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><meta content=always name=referrer><title>地图图标加载</title><link href="css/ol.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="js/ol.js" charset="utf-8"></script>
</head><body><div id="map" style="width: 100%"></div>
<script type="text/javascript">// 我们需要一个vector的layer来放置图标var layer = new ol.layer.Vector({source: new ol.source.Vector()})var map = new ol.Map({layers: [new ol.layer.Tile({source: new ol.source.OSM()}), layer],target: 'map',view: new ol.View({projection: 'EPSG:4326',center: [104, 30],zoom: 10})});// 创建一个Feature，并设置好在地图上的位置var anchor = new ol.Feature({geometry: new ol.geom.Point([104, 30])});// 设置样式，在样式中就可以设置图标anchor.setStyle(new ol.style.Style({image: new ol.style.Icon({src: 'img/star.png'})}));// 添加到之前的创建的layer中去layer.getSource().addFeature(anchor);
</script>
</body></html>

还是先运行代码看一下：

图标加载成功，下面我们进行代码的讲解，看一下我们这种方法具体的加载顺序：

首先我们需要一个vector的layer来放置图标，然后我们创建一个Feature，并设置好在地图上的位置，然后我们设置样式Feature，在样式中就可以设置图标，最后将feature添加到之前的创建的layer中去，就可以加载出来图标了！下面我们来对比一下overlayer和feature方式加载的异同点：

效果是一样的，但从代码上来看，是不一样的:

首先overlay需要HTML元素img，但这种方式不需要
overlay是添加在map上的，但是这种方式需要一个Vector的layer，并添加在其上
我们没有办法像overlay那样使用一些HTML技术

虽然不能用css直接修改图标显示，但并不是说使用这种方式没有自定义的余地，大家可以先在官网API上看一下ol.style.Icon的构造参数，会看到可以设置位置，透明度，放大缩小，旋转等，基本能满足大多数的应用，由于和CSS不同，很多同学在应用时遇到一些问题，所以下面给出了一些具体的使用示例。

4、大家看上面的效果图时会发现，我们的图标是不能随着层级的放大缩小而改变自己的大小的，这样有时候图标的显示是非常丑陋的，我们下面做一个根据层级放大缩小图标的功能！这个功能很简单，在ol.style.Icon中是可以设置scale的，这样就为我们提供了方便。通过设置它，就可以做到。话不多说，直接上代码如下：

<!doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>                  <meta http-equiv=Content-Type content="text/html;charset=utf-8"><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><meta content=always name=referrer><title>地图图标加载</title><link href="css/ol.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="js/ol.js" charset="utf-8"></script>
</head><body><div id="map" style="width: 100%"></div>
<script type="text/javascript">// 我们需要一个vector的layer来放置图标var layer = new ol.layer.Vector({source: new ol.source.Vector()})var map = new ol.Map({layers: [new ol.layer.Tile({source: new ol.source.OSM()}), layer],target: 'map',view: new ol.View({projection: 'EPSG:4326',center: [116.403598,39.917553],zoom: 10})});// 创建一个Feature，并设置好在地图上的位置var anchor = new ol.Feature({geometry: new ol.geom.Point([116.403598,39.917553])});// 设置样式，在样式中就可以设置图标anchor.setStyle(new ol.style.Style({image: new ol.style.Icon({src: 'img/star.png'})}));// 添加到之前的创建的layer中去layer.getSource().addFeature(anchor);// 监听地图层级变化map.getView().on('change:resolution', function(){var style = anchor.getStyle();// 重新设置图标的缩放率，基于层级20来做缩放style.getImage().setScale(this.getZoom() / 20);anchor.setStyle(style);})
</script>
</body></html>

大家可以自行测试一下效果！

5、下面我们再来设置一下如何直接通过绘制的形式直接加载图标，OpenLayers 3提供了一个规则几何体的样式类ol.style.RegularShape，使用它可以轻松绘制正方形，三角形等,也支持星形规则几何图形，直接上代码如下：

<!doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>                  <meta http-equiv=Content-Type content="text/html;charset=utf-8"><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><meta content=always name=referrer><title>地图图标加载</title><link href="css/ol.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="js/ol.js" charset="utf-8"></script>
</head><body><div id="map" style="width: 100%"></div>
<script type="text/javascript">var layer = new ol.layer.Vector({source: new ol.source.Vector()})var map = new ol.Map({layers: [new ol.layer.Tile({source: new ol.source.OSM()}), layer],target: 'map',view: new ol.View({projection: 'EPSG:4326',center: [116.403598,39.917553],zoom: 10})});// 添加一个三角形var shape = new ol.Feature({geometry: new ol.geom.Point([116.203598,39.927553])});shape.setStyle(new ol.style.Style({image: new ol.style.RegularShape({points: 3,    // 顶点数radius: 20,    // 图形大小，单位为像素stroke: new ol.style.Stroke({ // 设置边的样式color: 'red',size: 5}),fill: new ol.style.Fill({ // 设置五星填充样式color: 'blue'})})}));layer.getSource().addFeature(shape);// 添加一个五星var star = new ol.Feature({geometry: new ol.geom.Point([116.403598,39.917553])});star.setStyle(new ol.style.Style({image: new ol.style.RegularShape({points: 5,    // 顶点个数radius1: 20, // 外圈大小radius2: 10, // 内圈大小stroke: new ol.style.Stroke({ // 设置边的样式color: 'red',size: 2}),fill: new ol.style.Fill({ // 设置五星填充样式color: 'blue'})})}));layer.getSource().addFeature(star);</script>
</body></html>

看一下效果：

我们绘制的三角形和五角星都加载到了地图上，其实加载的方式和feature加载图标的方法是一样的，只不过我们把要加的图标换成了我们使用ol.style.Style自己绘制的图形，另外由代码我们也可以得到，我们可以通过这种方法加载各种规则的多边形！除了基本的设置之外，还支持图形旋转，以及跟随地图旋转而旋转，这些设置在其他的应用中也多有涉及，此处不再用实例来介绍，可自行验证。

6、有了加载规则的绘制图标，那么一些不规则的图标如何绘制并加入到地图种呢？别着急，马上来实现它！我们可以用canvas自己来绘制不规则的图标，好了，直接上代码如下：

<!doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>                  <meta http-equiv=Content-Type content="text/html;charset=utf-8"><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><meta content=always name=referrer><title>地图图标加载</title><link href="css/ol.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="js/ol.js" charset="utf-8"></script>
</head><body><div id="map" style="width: 100%"></div>
<script type="text/javascript">var layer = new ol.layer.Vector({source: new ol.source.Vector()})var map = new ol.Map({layers: [new ol.layer.Tile({source: new ol.source.OSM()}), layer],target: 'map',view: new ol.View({projection: 'EPSG:4326',center: [116.403598,39.917553],zoom: 10})});// 使用canvas绘制一个不规则几何图形var canvas =document.createElement('canvas');canvas.width = 40;canvas.height = 40;var context = canvas.getContext("2d");context.strokeStyle = "red";  context.lineWidth = 3;  context.beginPath();   context.moveTo(0, 0);context.lineTo(20, 10);context.lineTo(0, 20);context.lineTo(10, 10);context.lineTo(0, 0);  context.stroke();// 把绘制了的canvas设置到style里面var style = new ol.style.Style({image: new ol.style.Icon({img: canvas,imgSize: [canvas.width, canvas.height],rotation: 90 * Math.PI / 180})});// 创建一个Featurevar shape = new ol.Feature({geometry: new ol.geom.Point([116.403598,39.917553])});// 应用具有不规则几何图形的样式到Featureshape.setStyle(style);layer.getSource().addFeature(shape);
</script>
</body></html>

看一下效果图：

我们成功绘制了不规则图标并把它加入到了地图中！我们使用了ol.style.Icon样式的img属性来设置，需要注意的是，必须设置imgSize属性，因为仅仅通过img设置的图像对象，没有办法自动获取宽高。同时，官网也提供了一个类似的例子earthquake-custom-symbol，只是使用OpenLayers3 内部提供的封装库来绘制图像到canvas上，原理一样。有了这种方式之后，相信做任何图标都不会遇到难题了。

7、现在我们加载各种样式的图标都不是问题了，但是我们目前加载的图标都是静态的，实际项目中我们可能需要对图标做点击时间然后进行各种操作，在实际业务应用中，需要根据环境条件，动态的修改图标样式，以反馈数据变化。比如像下面这样，点击五星，五星图标会用红色填充，话不多受，直接上代码：

<!doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>                  <meta http-equiv=Content-Type content="text/html;charset=utf-8"><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><meta content=always name=referrer><title>地图图标加载</title><link href="css/ol.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="js/ol.js" charset="utf-8"></script>
</head><body><div id="map" style="width: 100%"></div>
<script type="text/javascript">var layer = new ol.layer.Vector({source: new ol.source.Vector()})var map = new ol.Map({layers: [new ol.layer.Tile({source: new ol.source.OSM()}), layer],target: 'map',view: new ol.View({projection: 'EPSG:4326',center: [116.403598,39.917553],zoom: 10})});// 添加一个空心的五星var star = new ol.Feature({geometry: new ol.geom.Point([116.403598,39.917553])});star.setStyle(new ol.style.Style({image: new ol.style.RegularShape({points: 5,radius1: 20,radius2: 10,stroke: new ol.style.Stroke({color: 'red',size: 2})})}));layer.getSource().addFeature(star);// 监听地图点击事件map.on('click', function(event){var feature = map.forEachFeatureAtPixel(event.pixel, function(feature){return feature;});if (feature) {alert("我要红了")// 将空心五星为红色实心五星var style = feature.getStyle().getImage();feature.setStyle(new ol.style.Style({image: new ol.style.RegularShape({points: 5,radius1: 20,radius2: 10,stroke: style.getStroke(),fill: new ol.style.Fill({color: 'red'})})}));}});</script>
</body></html>

看一下效果：

点击前：

点击后：

这里我输出了一句“我要红了”，其实在正式项目中，我们可以在这一句话的位置进行数据的反馈等操作！

8、前面我们加载的都是图标，下面我们来做一个加载文字的demo，话不多说，直接上代码：

<!doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>                  <meta http-equiv=Content-Type content="text/html;charset=utf-8"><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><meta content=always name=referrer><title>文字标注加载</title><link href="css/ol.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="js/ol.js" charset="utf-8"></script>
</head><body><div id="map" style="width: 100%"></div>
<script type="text/javascript">var layer = new ol.layer.Vector({source: new ol.source.Vector()})var map = new ol.Map({layers: [new ol.layer.Tile({source: new ol.source.OSM()}), layer],target: 'map',view: new ol.View({projection: 'EPSG:4326',center: [116.403598,39.917553],zoom: 12})});var anchor = new ol.Feature({geometry: new ol.geom.Point([116.403598,39.917553])});// 设置文字styleanchor.setStyle(new ol.style.Style({text: new ol.style.Text({font: '15px sans-serif',  //默认这个字体，可以修改成其他的，格式和css的字体设置一样text: '北京天安门',fill: new ol.style.Fill({color: 'red'})})}));layer.getSource().addFeature(anchor);
</script>
</body></html>

看一下效果：

加载成功！关于文字标注，还有很多属性可以设置，比如缩放，旋转，以及位移等等，非常简单，可自行设置调试。

9、styleFunction的应用

很多时候，我们会忽略styleFunction的存在，但很明显的，它可以让我们的图标或者标签应用更加灵活，比如根据层级放大缩小图标也可以用styleFunction来实现，直接上代码：

<!doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>                  <meta http-equiv=Content-Type content="text/html;charset=utf-8"><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><meta content=always name=referrer><title>styleFunction应用</title><link href="css/ol.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="js/ol.js" charset="utf-8"></script>
</head><body><div id="map" style="width: 100%"></div>
<script type="text/javascript">var layer = new ol.layer.Vector({source: new ol.source.Vector()})var map = new ol.Map({layers: [new ol.layer.Tile({source: new ol.source.OSM()}), layer],target: 'map',view: new ol.View({projection: 'EPSG:4326',center: [104, 30],zoom: 10})});var anchor = new ol.Feature({geometry: new ol.geom.Point([104, 30])});// 应用style function，动态的获取样式anchor.setStyle(function(resolution){return [new ol.style.Style({image: new ol.style.Icon({src: 'img/star.png',scale: map.getView().getZoom() / 20})})];});layer.getSource().addFeature(anchor);
</script>
</body></html>

大家可以自己运行代码看一下效果，这里解释一下代码：对比一下前面同样功能的代码，你会发现这样更加的简单，同时在此基础上扩展开来的应用也会更加的多。比如动态替换图标，或者让图标不显示等等，可自行来实现这两个需求，以掌握此方式的使用。

在上面这个例子中，我们是在feature上应用了styleFunction，通过官网API文档可以看到，其类型为ol.FeatureStyleFunction，函数仅带有一个参数resolution，在上面的代码中看到了，在函数体内this指的是当前的feature，根据文档说明，这个函数要范围一个style数组。这一点需要注意，虽然实际使用中，即使没有返回数组也不会出错，但还是希望大家能遵守官网API的说明来使用该接口。

我们知道，除了feature可以设置样式之外，layer也是可以设置样式的，同样地也支持styleFunction，但是需要注意的是，其定义和feature的不一样，类型为ol.style.StyleFunction，该函数具有两个参数，第一个参数为feature，第二个参数为resolution，同样地，该函数需要返回style数组。styleFunction在feature上具有很好的灵活性，那么应用在layer上，同样威力无穷，比如像下面这个，直接上代码：

<!doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>                  <meta http-equiv=Content-Type content="text/html;charset=utf-8"><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><meta content=always name=referrer><title>styleFunction应用</title><link href="css/ol.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="js/ol.js" charset="utf-8"></script>
</head><body><div id="map2" style="width: 100%"></div>
<script type="text/javascript">// 创建layer使用的style function，根据feature的自定义type，返回不同的样式var layerStyleFunction = function(feature, resolution) {var type = feature.get('type');var style = null;// 点if (type === 'point') {style = new ol.style.Style({image: new ol.style.Circle({radius: 5,fill: new ol.style.Fill({color: 'red'})})});} else if ( type === 'circle') { // 圆形style = new ol.style.Style({image: new ol.style.Circle({radius: 20,stroke: new ol.style.Stroke({color: 'red',size: 3})})});} else { // 其他形状style = new ol.style.Style({image: new ol.style.RegularShape({points: 5,radius: 20,fill: new ol.style.Fill({color: 'blue'})})});}// 返回 style 数组return [style];};var layer2 = new ol.layer.Vector({source: new ol.source.Vector(),style: layerStyleFunction // 应用上面创建的 style function});var map2 = new ol.Map({layers: [new ol.layer.Tile({source: new ol.source.OSM()}), layer2],target: 'map2',view: new ol.View({projection: 'EPSG:4326',center: [104, 30],zoom: 10})});// 添加三个feature，并设置自定义属性 typevar rect = new ol.Feature({geometry: new ol.geom.Point([104, 30])});layer2.getSource().addFeature(rect);var circle = new ol.Feature({geometry: new ol.geom.Point([104, 30])});circle.set('type', 'circle');layer2.getSource().addFeature(circle);var point = new ol.Feature({geometry: new ol.geom.Point([104, 30])});point.set('type', 'point');layer2.getSource().addFeature(point);</script>
</body></html>

看一下效果：

在地图上可以看到中心位置有一个圆，一个点，一个五边形，但这次都没有直接在这些feature上设置样式，而是创建layer使用的style function，根据feature定义的type，返回不同的样式。这就是一个典型的根据feature的属性进行不同渲染的例子，可以在业务上无限扩展，比如feature的属性可以是速度，可以是大小，可以是时间，可以是权重等等。由此可见，只要掌握了这个方法，前端按照条件渲染就不再困难。

好了，关于地图标注的加载和相关操作就进行到这儿了，上门我们写过的demo可以满足绝大多数项目的需要了，希望大家多多动手练习！下一节我们将根据openlayers官网的demo来做地图开发时的各种事件，大家加油！

OpenLayers学习笔记中级篇（四、地图图标操作）相关推荐

OpenLayers学习笔记中级篇（一、各种地图的加载）
学习了前面的初级篇,相信大家对OplenLayers已经有了一个初步的认识,下面我们再继续深入学习OpenLayers的相关功能! 我们这节主要是加载各种各样的地图,包括在线服务的地图,比如天地图.高 ...
rust学习笔记中级篇1–泛型(霜之小刀)
rust学习笔记中级篇1–泛型(霜之小刀) 欢迎转载和引用,若有问题请联系若有疑问,请联系 Email : lihn1011@163.com QQ:2279557541 结构体泛型首先上代码,如何 ...
OpenLayers学习笔记高级篇（二、地图控件）
在OpenLayers 3中,地图控件指的是下图标注的这些,包括缩放按钮,标尺,版权说明,指北针等等. 他们不会随着地图的移动而移动,一直处于一个固定的位置. 在实现上,并不是在画布上绘制的,而是使用 ...
OpenLayers学习笔记高级篇（四、地图开发实战之地图要素的增删改查）
一切都准备好了,现在终于可以通过ol3加载配置好的数据了.上一节中最后的预览结果,大家已经看到了,此处我们自己通过ol来实现这个预览页面,直接上代码如下: 1.加载Geoserver发布的wfs地图服 ...
OpenLayers学习笔记高级篇（一、openlayers画点线面）
话不多说直接上代码: <!doctype html> <html xmlns=http://www.w3.org/1999/xhtml> <head> <me ...
C#学习笔记【十四】—— 文件操作
14.1文件读写方式下面的类用于浏览文件系统和执行操作,比如移动,复制和删除文件System.MarshalByRefObject这个是.NET类中用于远程操作的基对象类,它允许在应用程序域之间编组 ...
VULKAN学习笔记-inter教学四篇
VULKAN学习笔记-inter教学四篇 --交换链相关函数:实例层 vkCreateWin32SurfaceKHR vkDestroySurfaceKHR vkGetPhysicalDeviceSu ...
R语言学习笔记——高级篇：第十四章-主成分分析和因子分析
R语言 R语言学习笔记--高级篇:第十四章-主成分分析和因子分析文章目录 R语言前言一.R中的主成分和因子分析二.主成分分析 2.1.判断主成分的个数 2.2.提取主成分 2.3.主成分旋转 ...
MySQL学习笔记-基础篇1
MySQL 学习笔记–基础篇1 目录 MySQL 学习笔记--基础篇1 1. 数据库概述与MySQL安装 1.1 数据库概述 1.1.1 为什么要使用数据库 1.2 数据库与数据库管理系统 1.2.1 ...
AI学习笔记--人机对话的四种形态
AI学习笔记--人机对话的四种形态 ><div class="show-content-free"><p>最近在筹备转行 AI PM 由于之前的产品线 ...

OpenLayers学习笔记中级篇（四、地图图标操作）

OpenLayers学习笔记中级篇（四、地图图标操作）相关推荐

最新文章

热门文章