准备运行环境：

1）Portable Basemap Server(PBS)用于创建地图服务

官网网址：http://geopbs.codeplex.com/

如何创建底图服务？操作步骤如下：

openLayer3地图的使用心得

如果启动的时候端口冲突的话，打开PortableBasemapServer.exe.config配置端口号。

openLayer3地图的使用心得

打开PortableBasemapServer.exe【以管理员身份运行】

openLayer3地图的使用心得

下载底图：（mbtiles格式的）

openLayer3地图的使用心得

选择区域进行下载即可：

openLayer3地图的使用心得

配置启动地图服务：点击Browse选中lanzhou.mbtiles地图文件： Map.zip

openLayer3地图的使用心得

至此，本地地图服务创建成功！

获取底图服务的方法：

openLayer3地图的使用心得复制：http://192.168.168.100:7080/PBS/rest/services/lanzhou/MapServer/WMTS到浏览器中，如果报找不到路径，那么使用http://localhost:7080/PBS/rest/services/lanzhou/MapServer/WMTS，可以出现如下图：

openLayer3地图的使用心得

http://192.168.168.100:7080/PBS/rest/services/lanzhou/MapServer/WMTS/tile/1.0.0/lanzhou/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png

openLayer3地图的使用心得

default028mm / nativeTileMatrixSet / GoogleMapsCompatible任选一个。

在页面引用地图服务：

http://192.168.168.100:7080/PBS/rest/services/lanzhou/MapServer/WMTS/tile/1.0.0/lanzhou/default/nativeTileMatrixSet/{z}/{y}/{x}.png

为什么是{z}/{y}/{x}.png，由于学习地图是半路出家，研究了好久也没有结果，暂先搁置，有大神知道的可以指导一下，哈哈！

2）openlayer框架包

官网网址：http://openlayers.org/

选择"Examples"菜单，然后随便选择一个例子

openLayer3地图的使用心得

复制路径：https://openlayers.org/en/v3.20.1/css/ol.css

https://openlayers.org/en/v3.20.1/build/ol.js openLayer3地图的使用心得

openLayer3地图的使用心得

既可以下载相应的openlayer支持包。

1、初始化地图

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>01初始化地图</title>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<link href="css/ol.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/common/ol.js"></script>
<script type="text/javascript" src="js/common/jquery-1.11.2.min.js"></script>
</head>
<script>
var map_source = "wmts"; //地图的服务类型
var map_projection = "EPSG:3857"; //地图坐标系（3857：墨卡托， 4326：经纬度）
//map_url此处使用的是【Portable Basemap Server】作为地图服务
var map_url = "http://localhost:7080/PBS/rest/services/lanzhou/MapServer/WMTS/tile/1.0.0/lanzhou/default/nativeTileMatrixSet/{z}/{y}/{x}.png";
//var map_dataLayer = "layer_tdt_sl"; //地图服务的图层
var map_zoom = 15; //初始化地图缩放级别
var map_minZoom = 14; //地图最小缩放级别
var map_maxZoom = 20; //地图最大缩放级别
var map_x = 11557761.4071486; //地图x坐标（此处以兰州地图作为中心点）
var map_y = 4307993.90607275; //地图y坐标（此处以兰州地图作为中心点）
$(document).ready(function() {
var baseLayer = new ol.layer.Tile({
opacity: 1.0,
source: new ol.source.XYZ({
url: map_url
})
});
if(baseLayer) {
// 初始地图对象
var map = new ol.Map({
layers: [baseLayer],
loadTilesWhileAnimating: true,
target: document.getElementById("map"),
controls: ol.control.defaults({
attributionOptions: ({
collapsible: false
})
}),
view: new ol.View({
center: [map_x, map_y],
zoom: map_zoom,
minZoom: map_minZoom,
maxZoom: map_maxZoom
}),
interactions: ol.interaction.defaults({
doubleClickZoom: false
})
});
}
});
</script>
<body>
<div id="map"></div>
</body>
</html>

2、标绘（画笔）

02标绘.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>02标绘</title>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<link href="css/common/ol.css" rel="stylesheet" type="text/css" />
<link href="css/draw/draw.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/common/ol.js"></script>
<script type="text/javascript" src="js/common/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/draw/util.js" ></script>
<script type="text/javascript" src="js/draw/baseMap.js"></script>
<script type="text/javascript" src="js/draw/drawMap.js"></script>
<script type="text/javascript" src="js/draw/plot.js"></script>
</head>
<body>
<div id="map"></div>
<button id="plotBtn" title="标绘"></button>
<div id="clearDIV">
<button id="clear" class="cirButton58 pngButton print_btn" onclick="clearLayer();">
<span class="text">清空</span>
</button>
</div>
<div id='DrawBoxDiv' class='drawBox' style='display:none;'></div>
<div id='plotMarker'></div>
</body>
</html>

util.js

/**
* JS公共工具类
*/
var Util = {
randomString:function(len) {//随机生成字符串
len = len || 32;
var $chars = 'ABC1DEFGH2IJK3LMNOQP4RSTU5VWXYZab6cdef8ghij7kmlnopq9rest0uvwxyz';
var maxPos = $chars.length;
var pwd = '';
for (i = 0; i < len; i++) {
pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
}
return pwd;
}
}
function Map() {
this.elements = new Array();
//获取Map元素个数
this.size = function() {
return this.elements.length;
},
//判断Map是否为空
this.isEmpty = function() {
return (this.elements.length < 1);
},
//删除Map所有元素
this.clear = function() {
this.elements = new Array();
},
//向Map中增加元素（key, value)
this.put = function(_key, _value) {
if (this.containsKey(_key) == true) {
if (this.containsValue(_value)) {
if (this.remove(_key) == true) {
this.elements.push({
key : _key,
value : _value
});
}
} else {
this.elements.push({
key : _key,
value : _value
});
}
} else {
this.elements.push({
key : _key,
value : _value
});
}
},
//删除指定key的元素，成功返回true，失败返回false
this.remove = function(_key) {
var bln = false;
try {
for (i = 0; i < this.elements.length; i++) {
if (this.elements[i].key == _key) {
this.elements.splice(i, 1);
return true;
}
}
} catch (e) {
bln = false;
}
return bln;
},
//获取指定key的元素值value，失败返回null
this.get = function(_key) {
try {
for (i = 0; i < this.elements.length; i++) {
if (this.elements[i].key == _key) {
return this.elements[i].value;
}
}
} catch (e) {
return null;
}
},
//获取指定索引的元素（使用element.key，element.value获取key和value），失败返回null
this.element = function(_index) {
if (_index < 0 || _index >= this.elements.length) {
return null;
}
return this.elements[_index];
},
//判断Map中是否含有指定key的元素
this.containsKey = function(_key) {
var bln = false;
try {
for (i = 0; i < this.elements.length; i++) {
if (this.elements[i].key == _key) {
bln = true;
}
}
} catch (e) {
bln = false;
}
return bln;
},
//判断Map中是否含有指定value的元素
this.containsValue = function(_value) {
var bln = false;
try {
for (i = 0; i < this.elements.length; i++) {
if (this.elements[i].value == _value) {
bln = true;
}
}
} catch (e) {
bln = false;
}
return bln;
},
//获取Map中所有key的数组（array）
this.keys = function() {
var arr = new Array();
for (i = 0; i < this.elements.length; i++) {
arr.push(this.elements[i].key);
}
return arr;
},
//获取Map中所有value的数组（array）
this.values = function() {
var arr = new Array();
for (i = 0; i < this.elements.length; i++) {
arr.push(this.elements[i].value);
}
return arr;
};
}

baseMap.js

/**
* 地图的底图服务模块
*/
var map_source = "wmts"; //地图的服务类型
var map_projection = "EPSG:3857"; //地图坐标系（3857：墨卡托， 4326：经纬度）
//map_url此处使用的是【Portable Basemap Server】作为地图服务
var map_url = "http://localhost:7080/PBS/rest/services/lanzhou/MapServer/WMTS/tile/1.0.0/lanzhou/default/nativeTileMatrixSet/{z}/{y}/{x}.png";
//var map_dataLayer = "layer_tdt_sl"; //地图服务的图层
var map_zoom = 15; //初始化地图缩放级别
var map_minZoom = 14; //地图最小缩放级别
var map_maxZoom = 20; //地图最大缩放级别
var map_x = 11557761.4071486; //地图x坐标（此处以兰州地图作为中心点）
var map_y = 4307993.90607275; //地图y坐标（此处以兰州地图作为中心点）
$(document).ready(function() {
var baseLayer = new ol.layer.Tile({
opacity: 1.0,
source: new ol.source.XYZ({
url: map_url
})
});
if(baseLayer) {
var config = {
center: [map_x, map_y],
zoom: map_zoom,
maxZoom: map_maxZoom,
minZoom: map_minZoom
};
//实例化标绘地图
DRAWMAP.init(baseLayer, config);
}
//标绘
$("#plotBtn").click(function(){
PLOT.showHideDrawBox();
});
});
/**
* 清除全部图层
*/
function clearLayer(){
if(confirm("要清除所有图层吗？")){
//清空标绘图层
for(var i = 0;i < PLOT.plotImgMap.size();i++){
var id = PLOT.plotImgMap.elements[i].key;
var layer = PLOT.plotImgMap.get(id);
var source = layer.getSource();
source.clear();
}
PLOT.plotImgMap.clear();//清空标绘数组
$("#plotMarker").hide();//隐藏按钮
}
}

drawMap.js

/**
* 标绘模块的地图（实例化）
*/
var DRAWMAP = {
map : null, // 地图对象
draw : null,
vectorSource : new ol.source.Vector({
wrapX : false
}),
vectorLayer : null,
init : function(_layer, _config) {
DRAWMAP.vectorLayer = new ol.layer.Vector({
source : DRAWMAP.vectorSource,
zIndex : 1000
});
// 初始地图对象
DRAWMAP.map = new ol.Map({
layers : [ _layer ],
loadTilesWhileAnimating : true,
target : document.getElementById("map"),
controls : ol.control.defaults({
attributionOptions : ({
collapsible : false
})
}),
view : new ol.View({
center : _config.center,
zoom : _config.zoom,
maxZoom : _config.maxZoom,
minZoom : _config.minZoom,
}),
interactions : ol.interaction.defaults({
doubleClickZoom : false
})
});
DRAWMAP.map.addLayer(DRAWMAP.vectorLayer);
}
};

plot.js

/**
* 标绘功能的事件处理模块
*/
var PLOT = {
plotImgMap:new Map(),//存放标绘在地图上的图片
draw:null,
source: new ol.source.Vector(),
plotPic:null,
gBHPicGroup:"",//标绘图标组名
gCurDrawPicture:"",//图标路径
showHideDrawBox:function(){//显示隐藏标绘界面
$("#DrawBoxDiv").html("");
PLOT.createDrawBox("","");
if($("#DrawBoxDiv").css("display")!="none"){
$("#DrawBoxDiv").css("display","none");
$("#SaveDrawDiv").css("display","none");
}else{
$("#DrawBoxDiv").css("display","block");
$("#SaveDrawDiv").css("display","block");
}
},
createDrawBoxHTML:function(){
var ix='<table class="title" >';
ix+='<tr><td valign="center">';
ix+='<strong> 基础绘图工具</strong>';
ix+='</td><td align="right">';
ix+='<img class="close" src="images/button/close.gif" title="关闭" onclick="$(\'#DrawBoxDiv\').css(\'display\',\'none\');"></img> </td></tr>';
ix+='</table>';
ix+='<table class="content" border="0" cellSpacing="0" cellPadding="0">';
ix+='<tr><td><div id="drawBrushDiv" class="drawBrush">';
ix+='<table><tr><td style="height:30px;"></td></tr>';
ix+='<tr><td><img id="bhObj_0" src="images/tool/RedMark.png" title="标点" class="drawPicStyle3"/></td></tr>';
ix+='<tr><td><img id="bhObj_1" src="images/tool/FGreen.png" title="小旗帜" class="drawPicStyle3"/></td></tr>';
ix+='<tr><td><img id="bhObj_2" src="images/tool/circle.gif" title="画圆形" class="drawPicStyle3"/></td></tr>';
ix+='<tr><td><img id="bhObj_3" src="images/tool/polyline.gif" title="画折线" class="drawPicStyle3"/></td></tr>';
ix+='</table></div></td>';
ix+='<td><div class="selBH"> 选择图标组： '+
'<select id="selBHGroup" class="DefineTopicTextCtl" onchange="PLOT.showSelGroupPic()"></select></div>' +
'<div id="drawPicDiv" class="drawPic"></div>' +
'</td>';
ix+='<tr></table>';
return ix;
},
createDrawBox:function(){//创建标绘内容
var html = PLOT.createDrawBoxHTML();
$("#DrawBoxDiv").append(html);
var OptionResults = "<option value='01常用'>01常用</option>";
var FileNames = "<span title='A100箭头1' class='drawPicStyle' id='bht_0'><img picWidth='39' picHeight='29' src='images/plot/A100箭头1.gif' class='drawPicStyle2'></img><br>箭头1</span>";
FileNames += "<span title='A106矩形' class='drawPicStyle' id='bht_1'><img picWidth='156' picHeight='156' src='images/plot/A106矩形.png' class='drawPicStyle2'></img><br>矩形</span>";
FileNames += "<span title='A108圆形' class='drawPicStyle' id='bht_2'><img picWidth='156' picHeight='156' src='images/plot/A108圆形.png' class='drawPicStyle2'></img><br>圆形</span>";
$("#selBHGroup").append(OptionResults);
$("#drawPicDiv").append(FileNames);
//图标组的鼠标点击事件
$(".drawPicStyle").mousedown(function(event){
$(".drawPicStyle").removeClass("drawPicSelected");
$(this).addClass("drawPicSelected");
gBHisDeleteObj=false;
var $spanId = $(this).attr("id");
var picObj = $("#"+$spanId+" img")[0];
PLOT.addPlot(PLOT.getImgInfo(picObj));
});
//画笔图标的悬浮事件样式控制
$(".drawPicStyle3").hover(function(){
$(this).addClass("drawPicOver");
},function(){
$(this).removeClass("drawPicOver");
});
//画笔图标的鼠标点击事件
$(".drawPicStyle3").mousedown(function(event){
$(".drawPicStyle3").removeClass("drawPicSelected");
$(this).addClass("drawPicSelected");
switch($(this).attr("id")){
case "bhObj_0"://标一个点图标
PLOT.addPlot(PLOT.getImgInfo(this));
break;
case "bhObj_1"://标一个小旗帜
PLOT.addPlot(PLOT.getImgInfo(this));
break;
case "bhObj_2"://画圆形
PLOT.drawPlot(2);
break;
case "bhObj_3"://画折线
PLOT.drawPlot(3);
break;
default:
break;
}
});
},
addPlot:function(imgurl){//标绘操作
PLOT.plotPic = imgurl;
DRAWMAP.map.on("singleclick",function(event){
if(PLOT.plotPic){
var coordinate = event.coordinate;//获取当前鼠标移动后的坐标信息
PLOT.addIcon(PLOT.plotPic,coordinate);//在地图中加入图片
PLOT.plotPic = null;
}
});
},
getImgInfo:function(picObj){//获取图片信息（宽高、路径）
var src = $(picObj).attr("src");
var width="80",height="80";
var imgObj = new Image();
imgObj.src = src;
if(imgObj.width != 0 && imgObj.height != 0){
width = imgObj.width;
height = imgObj.height;
}
return [width,height,src];
},
addIcon:function(imgurl,lonLat){//在地图中加入图片
var lng = parseFloat(lonLat[0]);
var lat = parseFloat(lonLat[1]);
var point = new ol.geom.Point([lng, lat]);//转换点坐标对象
var featureId = Util.randomString(10);
var feature= new ol.Feature({
geometry: point,
labelPoint: point,
name: "plot"
});
feature.setId(featureId);
var featureSource = new ol.source.Vector();
featureSource.addFeature(feature);
var style = new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)'
}),
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 2
}),
image:new ol.style.Icon({
offset: [0, 0],
opacity: 1.0,
rotateWithView: true,
rotation: 0.0,
scale: 1.0,
size: [imgurl[0], imgurl[1]],
src: imgurl[2]
})
});
var getLayer= new ol.layer.Vector({
source: featureSource,
style: style
});
if(DRAWMAP.map){
DRAWMAP.map.addLayer(getLayer);
PLOT.plotImgMap.put(featureId,getLayer);
}
},
drawPlot:function(flag){//画笔操作，比如画圆、画矩形
if(PLOT.draw){
DRAWMAP.map.removeInteraction(PLOT.draw);
PLOT.draw = null;
}
var value = "";
switch(parseInt(flag)){
case 2://画圆形
value = "Circle";
break;
case 3://画折线
value = "LineString";
break;
}
var sourceId = Util.randomString(10);
PLOT.source.set("id",sourceId);
PLOT.source.set("name","plot");
PLOT.draw = new ol.interaction.Draw({
source: PLOT.source,
type:(value),
geometryFunction: null,
maxPoints: null
});
if(DRAWMAP.map){
DRAWMAP.map.addInteraction(PLOT.draw);
PLOT.plotImgMap.put(sourceId,PLOT.plotLayer());
}
//画笔绘图结束
PLOT.draw.on("drawend", function(evt) {
DRAWMAP.map.removeInteraction(PLOT.draw);
DRAWMAP.map.addLayer(PLOT.plotLayer());//添加动态画图的图层
}, this);
},
plotLayer: function(){//返回layer图层
return new ol.layer.Vector({
source: PLOT.source,
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)'
}),
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 2
}),
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: '#ffcc33'
})
})
})
});
}
}

3、增加图层和弹出框

03增加图层和弹出框.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>03增加图层和弹出框</title>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<link href="css/common/ol.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/common/ol.js"></script>
<script type="text/javascript" src="js/common/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/03增加图层和弹出框/MYMap.js"></script>
</head>
<style>
.ol-popup {
position: absolute;
background-color: white;
padding-top: 5px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
border-radius: 2px;
border: 1px solid #cccccc;
bottom: 12px;
left: -50px;
}
.ol-popup:after,
.ol-popup:before {
top: 100%;
border: solid transparent;
content: " ";
position: absolute;
}
/*border-top-color：用于制作三角形*/
.ol-popup:after {
border-top-color: white;
border-width: 10px;
left: 48px;
margin-left: -10px;
}
.ol-popup:before {
border-top-color: #cccccc;
border-width: 11px;
left: 48px;
margin-left: -11px;
}
.ol-popup-title {
border-bottom: 1px solid #cccccc;
padding-bottom: 3px;
}
.ol-popup-content {
margin-top: 8px;
width:260px;
}
.ol-popup-closer {
text-decoration: none;
position: absolute;
top: 5px;
right: 10px;
}
.ol-popup-closer:after {
content: "✖";
}
#moveTaxi{
position: absolute;
top: 5%;
left: 5%;
background-color: rgba(0, 60, 136, .5);
color: white;
}
#moveTaxi:hover{
cursor: pointer;
}
</style>
<script>
/**
* 地图的底图服务模块
*/
var map_source = "wmts"; //地图的服务类型
var map_projection = "EPSG:3857"; //地图坐标系（3857：墨卡托， 4326：经纬度）
//map_url此处使用的是【Portable Basemap Server】作为地图服务
var map_url = "http://localhost:7080/PBS/rest/services/lanzhou/MapServer/WMTS/tile/1.0.0/lanzhou/default/nativeTileMatrixSet/{z}/{y}/{x}.png";
//var map_dataLayer = "layer_tdt_sl"; //地图服务的图层
var map_zoom = 15; //初始化地图缩放级别
var map_minZoom = 14; //地图最小缩放级别
var map_maxZoom = 20; //地图最大缩放级别
var map_x = 11557761.4071486; //地图x坐标（此处以兰州地图作为中心点）
var map_y = 4307993.90607275; //地图y坐标（此处以兰州地图作为中心点）
$(document).ready(function() {
var baseLayer = new ol.layer.Tile({
opacity: 1.0,
source: new ol.source.XYZ({
url: map_url
})
});
if(baseLayer) {
var config = {
center: [map_x, map_y],
zoom: map_zoom,
maxZoom: map_maxZoom,
minZoom: map_minZoom
};
//实例化标绘地图
MYMAP.init(baseLayer, config);
}
//一定要把坐标从字符串类型转换为float类型
var peopleLng = parseFloat("11557866.6091486");
var peopleLat = parseFloat("4307896.40907275");
var peoplePoint = new ol.geom.Point([peopleLng, peopleLat]);
var projection = MYMAP.map.getView().getProjection();
var peopleFeature = new ol.Feature({
geometry: peoplePoint,
labelPoint: peoplePoint,
name: "people"
});
peopleFeature.set("res_type", "people"); //设置坐标点的图标
peopleFeature.set("name", "people");
peopleFeature.setId("people2017010720");
MYMAP.vectorSource.addFeature(peopleFeature);
//一定要把坐标从字符串类型转换为float类型
var taxiLng = parseFloat("11556866.6091486");
var taxiLat = parseFloat("4307696.40907275");
var taxiPoint = new ol.geom.Point([taxiLng, taxiLat]);
var projection = MYMAP.map.getView().getProjection();
var taxiFeature = new ol.Feature({
geometry: taxiPoint,
labelPoint: taxiPoint,
name: "taxi"
});
taxiFeature.set("res_type", "taxi"); //设置坐标点的图标
taxiFeature.set("name", "taxi");
taxiFeature.setId("taxi2017010720");
MYMAP.vectorSource.addFeature(taxiFeature);
//一定要把坐标从字符串类型转换为float类型
var videoLng = parseFloat("11557761.4071486");
var videoLat = parseFloat("4307993.90607275");
var videoPoint = new ol.geom.Point([videoLng, videoLat]);
var projection = MYMAP.map.getView().getProjection();
var videoFeature = new ol.Feature({
geometry: videoPoint,
labelPoint: videoPoint,
name: "video"
});
videoFeature.set("res_type", "video"); //设置坐标点的图标
videoFeature.set("name", "video");
videoFeature.setId("video2017010720");
MYMAP.vectorSource.addFeature(videoFeature);
MYMAP.map.getView().setCenter(videoFeature.getGeometry().getCoordinates());
// 弹出窗口关闭
$("#popup-closer").click(function(){
MYMAP.overlay.setPosition(undefined);
});
//移动车辆
$("#moveTaxi").click(function(){
var newPoint = new ol.geom.Point([11556866.6091486,4308696.40907275]);
var newFeature = MYMAP.vectorSource.getFeatureById("taxi2017010720");
if(newFeature){
newFeature.setGeometry(newPoint);//更新图层坐标
if(MYMAP.overlayID == "taxi2017010720"){
//定位弹出框的中心点-开始
var geometry = newFeature.getGeometry();
var coord = geometry.getCoordinates();
MYMAP.overlay.setPosition(coord);
//定位弹出框的中心点-结束
}
MYMAP.map.getView().setCenter(newFeature.getGeometry().getCoordinates());//重新定位地图的中心點
}
});
});
</script>
<body>
<div id="map" class="map">
<div id="popup" class="ol-popup">
<div id="popup-title" class="ol-popup-title"></div>
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
<div id="popup-content" class="ol-popup-content"></div>
</div>
</div>
<button id="moveTaxi">移动车辆</button>
</body>
</html>

MYMap.js

var MYMAP = {
map: null, // 地图对象
overlayID: null,//作为一个全局变量，用于保存弹出对象的featureid
vectorSource: new ol.source.Vector({
wrapX: false
}),
vectorLayer: null,
icon: {
"people": "images/people.png",
"taxi": "images/taxi.png",
"video": "images/video.png"
},
// 图上资源样式处理
getStyle: function(_feature, _resolution) {
return [new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'red',
width: 2
}),
image: new ol.style.Icon({
offset: [0, 0],
opacity: 1.0,
rotateWithView: true,
rotation: 0.0,
scale: 1.0,
size: [40, 40],
src: MYMAP.icon[_feature.get("res_type")] //根據res_type的值来决定显示的图标
})
})];
},
init: function(_layer, _config) {
MYMAP.vectorLayer = new ol.layer.Vector({
source: MYMAP.vectorSource,
style: MYMAP.getStyle,
zIndex: 1000
});
// 初始弹出窗口对象
MYMAP.overlay = new ol.Overlay(({
element: document.getElementById("popup"),
offset: [-5, -15],
positioning: "center-right",
autoPan: true,
autoPanAnimation: {
duration: 250
}
}));
// 初始地图对象
MYMAP.map = new ol.Map({
layers: [_layer],
loadTilesWhileAnimating: true,
target: document.getElementById("map"),
controls: ol.control.defaults({
attributionOptions: ({
collapsible: false
})
}),
overlays: [MYMAP.overlay],
view: new ol.View({
center: _config.center,
zoom: _config.zoom,
maxZoom: _config.maxZoom,
minZoom: _config.minZoom,
}),
interactions: ol.interaction.defaults({
doubleClickZoom: false
})
});
MYMAP.map.addLayer(MYMAP.vectorLayer);
//初始化地图上的点击事件
MYMAP.map.on("click", function(_e) {
var feature = MYMAP.map.forEachFeatureAtPixel(_e.pixel, function(
feature, layer) {
return feature;
});
MYMAP.popup(feature);
});
},
//资源弹出窗
popup: function(_feature) {
if(_feature) {
var type = _feature.get("name") ? _feature.get("name") : "unknow";
//定位弹出框的中心点-开始
var geometry = _feature.getGeometry();
var coord = geometry.getCoordinates();
MYMAP.overlay.setPosition(coord);
//定位弹出框的中心点-结束
MYMAP.overlayID = _feature.getId();
var titleHtml = "",
html = "";
switch(type) {
case "people":
var titleHtml = "人员信息：";
titleHtml += " ";
titleHtml += "";
$("#popup-title").html(titleHtml);
html += "人员编号：" + _feature.getId();
$("#popup-content").html(html);
break;
case "taxi":
var titleHtml = "出租车信息：";
titleHtml += " ";
titleHtml += "";
$("#popup-title").html(titleHtml);
html += "出租车编号：" + _feature.getId();
$("#popup-content").html(html);
break;
case "video":
var titleHtml = "摄像头信息：";
titleHtml += " ";
titleHtml += "";
$("#popup-title").html(titleHtml);
html += "摄像机编号：" + _feature.getId();
$("#popup-content").html(html);
break;
}
}
}
}

4、手工定位

04手工定位.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>04手工定位</title>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<link href="css/common/ol.css" rel="stylesheet" type="text/css" />
<link href="css/04手工定位/map.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/common/ol.js"></script>
<script type="text/javascript" src="js/common/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/04手工定位/MYMap.js" ></script>
<script type="text/javascript" src="js/04手工定位/marker.js" ></script>
</head>
<script>
/**
* 地图的底图服务模块
*/
var map_source = "wmts"; //地图的服务类型
var map_projection = "EPSG:3857"; //地图坐标系（3857：墨卡托， 4326：经纬度）
//map_url此处使用的是【Portable Basemap Server】作为地图服务
var map_url = "http://localhost:7080/PBS/rest/services/lanzhou/MapServer/WMTS/tile/1.0.0/lanzhou/default/nativeTileMatrixSet/{z}/{y}/{x}.png";
//var map_dataLayer = "layer_tdt_sl"; //地图服务的图层
var map_zoom = 15; //初始化地图缩放级别
var map_minZoom = 14; //地图最小缩放级别
var map_maxZoom = 20; //地图最大缩放级别
var map_x = 11557761.4071486; //地图x坐标（此处以兰州地图作为中心点）
var map_y = 4307993.90607275; //地图y坐标（此处以兰州地图作为中心点）
$(document).ready(function() {
var baseLayer = new ol.layer.Tile({
opacity: 1.0,
source: new ol.source.XYZ({
url: map_url
})
});
if(baseLayer) {
var config = {
center: [map_x, map_y],
zoom: map_zoom,
maxZoom: map_maxZoom,
minZoom: map_minZoom
};
//实例化标绘地图
MYMAP.init(baseLayer, config);
}
//手工定位
$("#manualPosition").click(function(){
MARKER.marker();
});
});
</script>
<body>
<div id="map" class="map"></div>
<button id="manualPosition">手工定位</button>
</body>
</html>

map.css

#manualPosition {
position: absolute;
top: 5%;
left: 5%;
background-color: rgba(0, 60, 136, .5);
color: white;
}
#manualPosition:hover {
cursor: pointer;
}
.tooltip {
position: relative;
background: rgba(0, 0, 0, 0.5);
border-radius: 4px;
color: white;
padding: 4px 8px;
opacity: 0.7;
white-space: nowrap;
}
.tooltip-measure {
opacity: 1;
font-weight: bold;
}
.tooltip-static {
background-color: #ffcc33;
color: black;
border: 1px solid white;
font-weight: bold;
}
.tooltip-measure:before, .tooltip-static:before {
border-top: 6px solid rgba(0, 0, 0, 0.5);
border-right: 6px solid transparent;
border-left: 6px solid transparent;
content: "";
position: absolute;
bottom: -6px;
margin-left: -7px;
left: 50%;
}
.tooltip-static:before {
border-top-color: #ffcc33;
}
.tooltip-static .show{
display:block;
position: absolute;
right:0px;
border:1px;
border-color:#000000;
border-radius:2px;
top:-3px;
cursor:pointer;
}
.tooltip-static .show:HOVER{
background: gray;
}

MYMAP.js

var MYMAP = {
map: null, // 地图对象
init: function(_layer, _config) {
// 初始地图对象
MYMAP.map = new ol.Map({
layers: [_layer],
loadTilesWhileAnimating: true,
target: document.getElementById("map"),
controls: ol.control.defaults({
attributionOptions: ({
collapsible: false
})
}),
view: new ol.View({
center: _config.center,
zoom: _config.zoom,
maxZoom: _config.maxZoom,
minZoom: _config.minZoom,
}),
interactions: ol.interaction.defaults({
doubleClickZoom: false
})
});
//添加手工定位标记图层
MYMAP.map.addLayer(MARKER.markLayer());
}
}

marker.js【重点】

/**
* 手工定位
*/
var MARKER = {
//距离确认数据源
source: new ol.source.Vector(),
draw: null,
closeElement: null, //关闭按钮
spanElement: null, //显示数据（距离或是面积）
measureTooltipElement: null,
measureTooltip: null,
//距离确认
marker: function() {
MARKER.clear();
if(MARKER.draw) {
MYMAP.map.removeInteraction(MARKER.draw);
MARKER.draw = null;
}
MARKER.draw = new ol.interaction.Draw({
source: MARKER.source,
type: "Point",
style: new ol.style.Style({
image: new ol.style.Icon({
offset: [0, 0],
opacity: 1.0,
rotateWithView: true,
rotation: 0.0,
scale: 1.0,
size: [32, 32],
src: "images/icons/marker.png"
})
})
});
MARKER.draw.on("drawstart", function(evt) {
}, this);
//手工定位结束后展示坐标信息
MARKER.draw.on("drawend", function(evt) {
MARKER.measureTooltipElement.className = 'tooltip tooltip-static';
var feature = evt.feature;
MARKER.sketch = null;
MARKER.measureTooltipElement = null;
MARKER.closeElement.style.display = 'block';
MARKER.closeElement.className = 'show';
MYMAP.map.un("pointermove", MARKER.pointerMoveHandler);
MYMAP.map.removeInteraction(MARKER.draw);
var posXY = document.getElementById("poxXY").innerText;
var posXYArray = posXY.split(",");
var XPos = posXYArray[0];
var YPos = posXYArray[1];
}, this);
MYMAP.map.addInteraction(MARKER.draw);
MARKER.createMeasureTooltip(); //创建显示信息的div
MYMAP.map.on("pointermove", MARKER.pointerMoveHandler);
},
//清除所有数据
clear: function() {
MARKER.source.clear();
MYMAP.map.removeOverlay(MARKER.measureTooltip);
MYMAP.map.un("pointermove", MARKER.pointerMoveHandler);
},
//创建显示信息的div
createMeasureTooltip: function() {
if(MARKER.closeElement) {
MARKER.closeElement.parentNode.removeChild(MARKER.closeElement);
}
if(MARKER.measureTooltipElement) {
MARKER.measureTooltipElement.parentNode.removeChild(MARKER.measureTooltipElement);
}
MARKER.measureTooltipElement = document.createElement('div');
MARKER.spanElement = document.createElement("span");
MARKER.spanElement.id = "poxXY";
MARKER.closeElement = document.createElement('span'),
MARKER.closeElement.innerHTML = '✖';
MARKER.closeElement.style.display = 'none';
MARKER.closeElement.addEventListener('click', function() {
MARKER.clear();
}, false);
MARKER.measureTooltipElement.appendChild(MARKER.closeElement);
MARKER.measureTooltipElement.appendChild(MARKER.spanElement);
MARKER.measureTooltipElement.className = 'tooltip tooltip-measure';
MARKER.measureTooltip = new ol.Overlay({
element: MARKER.measureTooltipElement,
offset: [0, -25],
positioning: 'bottom-center'
});
MYMAP.map.addOverlay(MARKER.measureTooltip);
},
//鼠标移动事件
pointerMoveHandler: function(evt) {
if(evt.dragging) {
return;
}
var tooltipCoord = evt.coordinate;
var output = tooltipCoord
var msg = output[0].toFixed(6) + " , " + output[1].toFixed(6);
MARKER.spanElement.innerHTML = msg;
MARKER.measureTooltip.setPosition(evt.coordinate);
},
markLayer: function() {
return new ol.layer.Vector({
source: MARKER.source,
style: new ol.style.Style({
image: new ol.style.Icon({
offset: [0, 0],
opacity: 1.0,
rotateWithView: true,
rotation: 0.0,
scale: 1.0,
size: [32, 32],
src: "images/icons/marker.png"
})
})
});
}
}

5、画三圈和计算距离

05画三圈和计算距离.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>05画三圈和计算距离</title>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<link href="css/common/ol.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/common/ol.js"></script>
<script type="text/javascript" src="js/common/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/05画三圈和计算距离/MYMap.js" ></script>
</head>
<style>
.ol-popup {
position: absolute;
background-color: white;
padding-top: 5px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
border-radius: 2px;
border: 1px solid #cccccc;
bottom: 12px;
left: -50px;
}
.ol-popup:after,
.ol-popup:before {
top: 100%;
border: solid transparent;
content: " ";
position: absolute;
}
/*border-top-color：用于制作三角形*/
.ol-popup:after {
border-top-color: white;
border-width: 10px;
left: 48px;
margin-left: -10px;
}
.ol-popup:before {
border-top-color: #cccccc;
border-width: 11px;
left: 48px;
margin-left: -11px;
}
.ol-popup-title {
border-bottom: 1px solid #cccccc;
padding-bottom: 3px;
}
.ol-popup-content {
margin-top: 8px;
width:260px;
}
.ol-popup-closer {
text-decoration: none;
position: absolute;
top: 5px;
right: 10px;
}
.ol-popup-closer:after {
content: "✖";
}
</style>
<script>
/**
* 地图的底图服务模块
*/
var map_source = "wmts"; //地图的服务类型
var map_projection = "EPSG:3857"; //地图坐标系（3857：墨卡托， 4326：经纬度）
//map_url此处使用的是【Portable Basemap Server】作为地图服务
var map_url = "http://localhost:7080/PBS/rest/services/lanzhou/MapServer/WMTS/tile/1.0.0/lanzhou/default/nativeTileMatrixSet/{z}/{y}/{x}.png";
//var map_dataLayer = "layer_tdt_sl"; //地图服务的图层
var map_zoom = 17; //初始化地图缩放级别
var map_minZoom = 14; //地图最小缩放级别
var map_maxZoom = 20; //地图最大缩放级别
var map_x = 11557761.4071486; //地图x坐标（此处以兰州地图作为中心点）
var map_y = 4307993.90607275; //地图y坐标（此处以兰州地图作为中心点）
$(document).ready(function() {
var baseLayer = new ol.layer.Tile({
opacity: 1.0,
source: new ol.source.XYZ({
url: map_url
})
});
if(baseLayer) {
var config = {
center: [map_x, map_y],
zoom: map_zoom,
maxZoom: map_maxZoom,
minZoom: map_minZoom
};
//实例化地图
MYMAP.init(baseLayer, config);
//画三圈
MYMAP.dispose();
}
// 弹出窗口关闭
$("#popup-closer").click(function(){
MYMAP.overlay.setPosition(undefined);
});
});
</script>
<body>
<div id="map" class="map">
<div id="popup" class="ol-popup">
<div id="popup-title" class="ol-popup-title"></div>
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
<div id="popup-content" class="ol-popup-content"></div>
</div>
</div>
</body>
</html>

MYMAP.js

var MYMAP = {
map: null, // 地图对象
overlay: null, // 地图弹出信息窗口
sphere: new ol.Sphere(6378137), //6378137赤道半径，用于计算距离
vectorSource: new ol.source.Vector({
wrapX: false
}),
vectorLayer: null,
icon: {
"people": "images/people.png",
"taxi": "images/taxi.png",
"video": "images/video.png"
},
// 图上资源样式处理
getStyle: function(_feature, _resolution) {
return [new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'red',
width: 2
}),
image: new ol.style.Icon({
offset: [0, 0],
opacity: 1.0,
rotateWithView: true,
rotation: 0.0,
scale: 1.0,
size: [40, 40],
src: MYMAP.icon[_feature.get("res_type")] //根據res_type的值来决定显示的图标
})
})];
},
init: function(_layer, _config) {
MYMAP.vectorLayer = new ol.layer.Vector({
source: MYMAP.vectorSource,
style: MYMAP.getStyle,
zIndex: 1000
});
// 初始弹出窗口对象
MYMAP.overlay = new ol.Overlay(({
element: document.getElementById("popup"),
offset: [-5, -15],
positioning: "center-right",
autoPan: true,
autoPanAnimation: {
duration: 250
}
}));
// 初始地图对象
MYMAP.map = new ol.Map({
layers: [_layer],
loadTilesWhileAnimating: true,
target: document.getElementById("map"),
controls: ol.control.defaults({
attributionOptions: ({
collapsible: false
})
}),
overlays: [MYMAP.overlay],
view: new ol.View({
center: _config.center,
zoom: _config.zoom,
maxZoom: _config.maxZoom,
minZoom: _config.minZoom,
}),
interactions: ol.interaction.defaults({
doubleClickZoom: false
})
});
MYMAP.map.addLayer(MYMAP.vectorLayer);
//初始化地图上的点击事件
MYMAP.map.on("click", function(_e) {
var feature = MYMAP.map.forEachFeatureAtPixel(_e.pixel, function(
feature, layer) {
return feature;
});
MYMAP.popup(feature);
});
},
//资源弹出窗
popup: function(_feature) {
if(_feature) {
var type = _feature.get("name") ? _feature.get("name") : "unknow";
//定位弹出框的中心点-开始
var geometry = _feature.getGeometry();
var coord = geometry.getCoordinates();
MYMAP.overlay.setPosition(coord);
//定位弹出框的中心点-结束
var titleHtml = "",
html = "";
switch(type) {
case "people":
var titleHtml = "人员信息：";
titleHtml += " ";
titleHtml += "";
$("#popup-title").html(titleHtml);
html += "人员坐标：" + coord;
var distance = MYMAP.distance([11557761.4071486, 4307993.90607275], coord);
html += "与出租车（中心点）距离为：" + distance;
$("#popup-content").html(html);
break;
case "taxi":
var titleHtml = "出租车信息：";
titleHtml += " ";
titleHtml += "";
$("#popup-title").html(titleHtml);
html += "出租车坐标为：" + coord;
$("#popup-content").html(html);
break;
}
}
},
//画三圈
dispose: function() {
var point = new ol.geom.Point([11557761.4071486, 4307993.90607275]);
var taxiFeature = new ol.Feature({
geometry: point,
name: "taxi"
});
taxiFeature.set("res_type", "taxi");
MYMAP.vectorSource.addFeature(taxiFeature);
//画三圈开始
//300：代表圆的半径
var circle300 = new ol.geom.Circle([11557761.4071486, 4307993.90607275], 300);
var circle200 = new ol.geom.Circle([11557761.4071486, 4307993.90607275], 200);
var circle100 = new ol.geom.Circle([11557761.4071486, 4307993.90607275], 100);
var circleFeature300 = new ol.Feature({
geometry: circle300
});
var style300 = new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(50, 205, 50, 0.3)'
}),
stroke: new ol.style.Stroke({
color: 'rgba(50, 205, 50, 0.6)',
width: 2
}),
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: '#ffcc33'
})
})
});
circleFeature300.setStyle(style300);
MYMAP.vectorSource.addFeature(circleFeature300);
var circleFeature200 = new ol.Feature({
geometry: circle200
});
var style200 = new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 165, 0, 0.3)'
}),
stroke: new ol.style.Stroke({
color: 'rgba(255, 165, 0, 0.6)',
width: 2
}),
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: '#ffcc33'
})
})
});
circleFeature200.setStyle(style200);
MYMAP.vectorSource.addFeature(circleFeature200);
var circleFeature100 = new ol.Feature({
geometry: circle100
});
var style100 = new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 0, 0, 0.3)'
}),
stroke: new ol.style.Stroke({
color: 'rgba(255, 0, 0, 0.6)',
width: 2
}),
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: '#ffcc33'
})
})
});
circleFeature100.setStyle(style100);
MYMAP.vectorSource.addFeature(circleFeature100);
//画三圈结束
var pan = ol.animation.pan({
duration: 500,
source: (MYMAP.map.getView().getCenter())
});
MYMAP.map.beforeRender(pan);//延迟上图
MYMAP.map.getView().setCenter(point.getCoordinates());
//初始化三圈内的坐标点，用于计算
var peopleFeature100 = new ol.Feature({
geometry: new ol.geom.Point([11557696.316242, 4307946.730094]),
name: "people"
});
peopleFeature100.set("res_type", "people");
MYMAP.vectorSource.addFeature(peopleFeature100);
var peopleFeature200 = new ol.Feature({
geometry: new ol.geom.Point([11557628.239513, 4307988.531594]),
name: "people"
});
peopleFeature200.set("res_type", "people");
MYMAP.vectorSource.addFeature(peopleFeature200);
var peopleFeature300 = new ol.Feature({
geometry: new ol.geom.Point([11557937.570612, 4308199.927751]),
name: "people"
});
peopleFeature300.set("res_type", "people");
MYMAP.vectorSource.addFeature(peopleFeature300);
},
//用于计算两个坐标点之间的距离
distance: function(point1, point2) {
return MYMAP.sphere.haversineDistance(point1, point2);
}
}

6、三高四色地图

openLayer3地图的使用心得

06三高四色地图.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>06三高四色预警</title>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<link href="css/common/ol.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/common/ol.js"></script>
<script type="text/javascript" src="js/common/jquery-1.11.2.min.js"></script>
</head>
<script>
/**
* 地图的底图服务模块
*/
var map_source = "wmts"; //地图的服务类型
var map_projection = "EPSG:3857"; //地图坐标系（3857：墨卡托， 4326：经纬度）
//map_url此处使用的是【Portable Basemap Server】作为地图服务
var map_url = "http://localhost:8888/PBS/rest/services/lanzhou/MapServer/WMTS/tile/1.0.0/lanzhou/default/nativeTileMatrixSet/{z}/{y}/{x}.png";
//var map_dataLayer = "layer_tdt_sl"; //地图服务的图层
var map_zoom = 24; //初始化地图缩放级别
var map_minZoom = 24; //地图最小缩放级别
var map_maxZoom = 26; //地图最大缩放级别
var map_x = 113.21413; //地图x坐标（此处以兰州地图作为中心点）113.21413,38.09156
var map_y = 38.09156; //地图y坐标（此处以兰州地图作为中心点）
$(document).ready(function() {
var baseLayer = new ol.layer.Tile({
opacity: 1.0,
source: new ol.source.XYZ({
url: map_url
})
});
if(baseLayer) {
// 初始地图对象
var MYMAP = {
map: null, // 地图对象
vectorSource: new ol.source.Vector({
wrapX: false
}),
vectorLayer: null
}
MYMAP.map = new ol.Map({
layers: [baseLayer],
loadTilesWhileAnimating: true,
target: document.getElementById("map"),
controls: ol.control.defaults({
attributionOptions: ({
collapsible: false
})
}),
view: new ol.View({
center: [map_x, map_y],
zoom: map_zoom,
minZoom: map_minZoom,
maxZoom: map_maxZoom
}),
interactions: ol.interaction.defaults({
doubleClickZoom: false
})
});
MYMAP.vectorLayer = new ol.layer.Vector({
source: MYMAP.vectorSource,
zIndex: 1000
});
MYMAP.map.addLayer(MYMAP.vectorLayer);
}
var shapesArray = ['113.11466,38.42001,113.11438,38.42027','112.49035,37.12116,112.48808,37.12078'];
var nameArray = ['太原市','大同市','朔州市','忻州市','阳泉市','晋中市','长治市','晋城市','吕梁市','临汾市','运城市'];
for(var i = 0;i < shapesArray.length;i++){
var geoAr= shapesArray[i].split(",");
var geometryAr= [];
for(var j=0; j<geoAr.length; j+=2){
var lng= geoAr[j];
var lat= geoAr[j+1];
var point= [parseFloat(lng), parseFloat(lat)];
geometryAr.push(point);
}
var geometry= new ol.geom.Polygon([geometryAr]);//创建一个多边形对象
var feature= new ol.Feature({
geometry: geometry
});
var style = new ol.style.Style({
fill: new ol.style.Fill({//填充要素的样式
color: 'rgba(253, 64, 139, 0.6)'
}),
stroke: new ol.style.Stroke({//要素边界样式
color: 'blue',
width: 2
}),
text:new ol.style.Text({ //文字格式
textAlign:'center',
textBaseline:'middle',
font:'normal 14px 微软雅黑',
text: nameArray[i],
fill:new ol.style.Fill({color:'#000000'}),
stroke:new ol.style.Stroke({color:'#ffcc33',width:2})
})
});
feature.setStyle(style);
MYMAP.vectorSource.addFeature(feature);
}
});
</script>
<body>
<div id="map" class="map"></div>
</body>
</html>

附件源码：

下载地址：https://gitee.com/KingXin666/Openlayer3Demo

秒客网

openLayer3地图的使用心得

准备运行环境：

1）Portable Basemap Server(PBS)用于创建地图服务

2）openlayer框架包

1、初始化地图

2、标绘（画笔）

3、增加图层和弹出框

4、手工定位

5、画三圈和计算距离

6、三高四色地图

附件源码：

相关文章