openlayer实现2d地图展示
作者：互联网
需引入三个包 包在底部链接 需要自取
<!--js 地图引入-->
<link rel="stylesheet" th:href="@{/js/ol.css}" />
<script type="text/javascript" th:src="@{/js/ol.js}"></script>
<script type="text/javascript" th:src="@{/js/proj4.js}"></script>
弹出层样式如下 因为我想做的是双击点 然后展示点的信息
/*地图弹出层样式*/
.ol-popup {
position: absolute;
border: 1px #37ACCD solid;
background: linear-gradient(rgba(0, 118, 255, 0.5) 0%, rgba(21, 67, 191, 0.5) 0%, #1543bf 100%);
padding: 15px;
border-radius: 10px;
bottom: 12px;
left: -50px;
display: none;
}
.ol-popup:after,
.ol-popup:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.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-closer {
text-decoration: none;
position: absolute;
top: 2px;
right: 8px;
cursor: pointer;
}
.ol-popup-content {
width: 300px;
color: white;
}
/*.ol-popup-closer:after {*/
/* content: "x";*/
/* color: black;*/
/*}*/
重点来了 地图就是弄个地图容器 然后初始化地图 就可以了
<!-- 地图容器和样式 -->
<div class="map_wrap" id="map" style="position: relative;width: 100%;height: 100%;">
<!-- 二维地图自助服务区弹出层 -->
<div id="serviceAreaPopup" class="ol-popup">
<span id="serviceAreaPopupCloser" class="ol-popup-closer"></span>
<div id="serviceAreaPopupContent" class="ol-popup-content"></div>
</div>
</div>
下面的是地图相关的初始化js
// 接入地图相关的代码
var map = null; // 地图
var pointLayer = null; // 落点图层
var longitude = null; // 经度
var latitude = null; // 纬度
var zoom; // 地图缩放级别
var container = document.getElementById("serviceAreaPopup"); // 地图弹出层
// 设置自助服务区popup的位置
var overlay = new ol.Overlay({
element: container, // 绑定Overlay对象和DOM对象
/* autoPan: true, // 定义弹出窗口在边缘点击时候可能不完整 设置自动平移效果
autoPanAnimation: {
duration: 100 // 自动平移效果的动画时间
} */
});
var showImage = null;
var deptAreaId = "440306"; // 宝安区区号
var areaId; // 宝安区区号
longitude = "113.9";
latitude = "22.7";
zoom = 3.6;
initMap(longitude, latitude, zoom);
// 设置地图边界线颜色高亮
setMapLine();
下面是初始化地图的方法 可以直接使用 每个地点的经纬度 需要你们大数据部门自行提供 或者和第三方提供数据的中心合作 如果公司够大 也可以自行编写 说白了就是弄一下经纬度 百度地图啥的都有 自行不嫌麻烦 可以自己弄个地图的经纬度 覆盖全国的都可以
// 初始化地图
function initMap(longitude,latitude,zoom) {
proj4.defs("EPSG:4490", "+proj=longlat +ellps=GRS80 +no_defs");
ol.proj.proj4.register(proj4);
var origin = ol.proj.fromLonLat([-180, 90], "EPSG:4490");
var projection = ol.proj.get("EPSG:4490");
// 定位中心位置
// var center = ol.proj.fromLonLat([113.9, 22.7], "EPSG:4490");
var center = ol.proj.fromLonLat([longitude, latitude], "EPSG:4490");
var fullExtent = [
113.43306624442225,
22.227477185000077,
114.66247690657787,
22.955710033000054
];
var cityExtent = [
113.42581408588889,
22.274121619760976,
114.66837903888244,
22.955241577327237
];
var resolutions = [
0.0013732910156250004,
6.866455078125002e-4,
3.433227539062501e-4,
1.7166137695312505e-4,
8.583068847656253e-5,
4.2915344238281264e-5,
2.1457672119140632e-5,
1.0728836059570316e-5,
5.364418029785158e-6,
2.682209014892579e-6,
1.3411045074462895e-6
];
var worldExtent = [
113.42581408588889,
22.274121619760976,
114.66837903888244,
22.955241577327237
];
projection.setWorldExtent(worldExtent);
var extent = [
113.42581408588889,
22.274121619760976,
114.66837903888244,
22.955241577327237
];
projection.setExtent(extent);
layers = [
new ol.layer.Tile({
source: new ol.source.XYZ({
tileGrid: new ol.tilegrid.TileGrid({
tileSize: 256,
origin: origin,
extent: cityExtent,
resolutions: resolutions
}),
projection: projection,
url: "http://10.99.85.187:80/arcgis/rest/services/BAKSJ/DTVEC_SS_ZQ_BA_BJT/MapServer/tile/{z}/{y}/{x}"
})
}),
new ol.layer.Tile({
source: new ol.source.XYZ({
tileGrid: new ol.tilegrid.TileGrid({
tileSize: 256,
origin: origin,
extent: fullExtent,
resolutions: resolutions
}),
projection: projection,
url: "http://10.99.85.187:80/arcgis/rest/services/BAKSJ/DTVEC_SS_ZQ_BA_2/MapServer/tile/{z}/{y}/{x}"
})
}),
];
view = new ol.View({
center: center,
// 缩放级别 4
// zoom: 3.6,
zoom: zoom,
projection: projection,
//minZoom: 3
});
map = new ol.Map({
target: 'map',
layers: layers,
view: view,
controls: ol.control.defaults({
zoom: false
}).extend([]),
interactions: ol.interaction.defaults().extend([ // 配置地图按shift旋转
new ol.interaction.DragRotateAndZoom()
]),
});
}
描边的方法如下 就是人家提供一个经纬度数组 你们根据经纬度数组进行加颜色而已 这就是描边 也很简单的
// 设置地图边界线颜色高亮
function setMapLine() {
$.ajax({
url: "http://10.99.85.73:8080/bigScreenPre/getToken/jqToken",
type: 'GET',
dataType: 'json',
data: {},
success: function (data) {
$.ajax({
url: "http://10.99.85.73:2019/ksj_base/common_api/getAreaBase",
type: 'POST',
dataType: 'json',
data: {
paramCodeList: 'KJ5001',
areacode: '440306',
token: data.data.token
},
success: function (data) {
if (data.success && data.data) {
var featureData = {
features: [],
type: "FeatureCollection"
};
data.data.chirdAreaInfo.forEach(function (areaData) {
featureData.features.push({
'type': 'Feature',
'properties': {},
'geometry': {
'type': areaData._source.areainfo.type,
'coordinates': areaData._source.areainfo.coordinates
}
});
});
// 设置图层
var areaLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: []
}),
zIndex:100,
});
// 添加图层
map.addLayer(areaLayer);
var featuresArr = [];
// 循环添加feature
for (var i = 0; i < featureData.features.length; i++) {
var areaFeature = new ol.Feature({
geometry: new ol.geom.Polygon(
featureData.features[i].geometry.coordinates
).transform("EPSG:4326", "EPSG:4490")
});
areaFeature.setStyle(
new ol.style.Style({
stroke: new ol.style.Stroke({
width: 3.5,
color: [18, 245, 255, 1]
})
})
);
featuresArr.push(areaFeature);
}
areaLayer.getSource().addFeatures(featuresArr);
} else {
console.error('获取数据失败!');
}
}
});
}
});
}
下面是打点 就是你们自己的业务点 要在地图上显示的 传入一个经纬度数组 就可以了 直接就可以打点了
// 批量根据经纬度坐标打点
function addPoints(coordinates) {
var featuresArr = [];
// 设置图层
pointLayer = new ol.layer.Vector({
source: new ol.source.Vector(),
zIndex:199,
});
// 添加图层
map.addLayer(pointLayer);
// 循环添加feature
for (var i = 0; i < coordinates.length; i++) {
// 创建feature，一个feature就是一个点坐标信息
var feature = new ol.Feature({
geometry: new ol.geom.Point(
// 经纬度设置
ol.proj.fromLonLat([coordinates[i].longitude, coordinates[i].lATITUDE],"EPSG:4490")
)
});
// 区划id设置
feature.set("areaid",coordinates[i].areaid);
// 位置名称设置
feature.set("name",coordinates[i].name);
// 区域类型设置
feature.set("layer",coordinates[i].layer);
// 区划父id设置
/* if (coordinates[i].parentid != null && coordinates[i].parentid != undefined && coordinates[i].parentid != "") {
feature.set("parentid",coordinates[i].parentid);
} */
// 设置锚点样式
feature.setStyle(getStyleIcon(feature.get("name"), feature.get("layer")));
featuresArr.push(feature);
}
// 批量添加feature
pointLayer.getSource().addFeatures(featuresArr);
}
下面的就是设置点的图形以及位置啥的 layer 不用纠结 就是点的类型 是根据自己业务来的 例如a类点打红色 b类点打绿色等等
// 锚点图标设置
function getStyleIcon(name, layer) {
return new ol.style.Style({
image: new ol.style.Icon({
src: "/images/icon_zdqk"+ --layer +".png",
// 图标位置
// anchor: [1, 1]
anchor: [0.5, 0.5], // 设置图标偏移
// 图标大小
//scale: 1.6,
scale: 1,
opacity: 1, //透明度
}),
//文本样式
text: new ol.style.Text({
textAlign: 'center', //对齐方式
textBaseline: 'middle', //文本基线
font: '12px', //字体样式
// text: name, //文本内容
//offsetY: -45, // Y轴偏置
//scale: 1.6,
offsetY: -33,
scale: 1.6,
fill: new ol.style.Fill({ //填充样式
color: '#ffffff'
}),
backgroundFill: new ol.style.Fill({ // 填充背景
color: [0, 0, 0, 0.4],
}),
padding: [0, 0, -3, 3],
}),
// 设置层级
zIndex: 199,
});
}
下面的就是根据点上的属性进行删除 点上有个layer属性 你就根据这个属性删除对应类型的点 区域 街道 社区 园区 网格等 也是这个套路
// 清除指定类型落点
function removeRegionDataByLayer(layer) {
pointLayer.getSource().getFeatures().forEach(function(feature){
if(feature.get("layer") == layer){
pointLayer.getSource().removeFeature(feature);
}
});
}
清空所有点的js
// 清空所有点
function removeRegionData() {
pointLayer.getSource().getFeatures().forEach(function(feature){
pointLayer.getSource().removeFeature(feature);
});
}
弹框监听 就是整个大地图就是一个map 你只要点上去 就会进入的一个监听方法
// 为map添加鼠标移动事件监听，当指向标注时改变鼠标光标状态为手型
map.on('pointermove', function (e) {
var pixel = map.getEventPixel(e.originalEvent);
var hit = map.hasFeatureAtPixel(pixel);
map.getTargetElement().style.cursor = hit ? 'pointer' : '';
});
下面是我自己业务的弹框 你们根据自己的进行修改
map.on("click", function(evt) {
debugger;
var feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) { return feature; });
if(feature == undefined){
// 清空popup的内容容器
$("#serviceAreaPopupContent").html("");
$("#serviceAreaPopup").hide();
return;
}
var layer=feature.get("layer");
// 妇儿之家 母婴室 儿童友好空间
if(layer == 1|| layer == 2 || layer == 3){
var areaid=feature.get("areaid");
var name=feature.get("name");
// 地址
var address=feature.get("address");
// 服务电话
var fwdh=feature.get("fwdh");
// 图片
var PICTURE=feature.get("PICTURE");
// 清空popup的内容容器
$("#serviceAreaPopupContent").html("");
// 将弹窗添加到 map 地图中
map.addOverlay(overlay);
overlay.setPosition(evt.coordinate);
$("#serviceAreaPopup").show();
showImage ="http://10.1.48.19:8081/fldp/user/viewPic?fileId=" + PICTURE
console.log("showImage:"+ showImage);
var yws111 = showImage;
// 设置内容
var content = "<table class='maptable' width='300px' style='border-collapse:separate; border-spacing:0px 12px;'>"+
"<tr><td style='text-align: left;'>"+ "名称:"+name + "</td></tr>" +
"<tr><td style='text-align: left;'>" + "所在地址：" + address + "</td></tr>" +
"<tr><td style='text-align: left;'>" + "电话：" + fwdh + "</td></tr>" +
// "<tr><td style='text-align: left;'>" + "图片：" + "<img th:src='@{/images/logo1.png}' style='width: 100px; height: 130px' alt=''/>"+"</td></tr></table>"+
"<tr><td style='text-align: left;'>" + "图片：" +"</td></tr></table>"+
"<img src='yws111' height='200px' width='200px' id='picture' />";
var content1 = "<table class='maptable' width='300px' style='border-collapse:separate; border-spacing:0px 12px;'>"+
"<tr><td style='text-align: left;'>"+ "名称:"+name + "</td></tr>" +
"<tr><td style='text-align: left;'>" + "所在地址：" + address + "</td></tr>" +
"<tr><td style='text-align: left;'>" + "电话：" + fwdh + "</td></tr>" +
// "<tr><td style='text-align: left;'>" + "图片：" + "<img th:src='@{/images/logo1.png}' style='width: 100px; height: 130px' alt=''/>"+"</td></tr></table>"+
"<tr><td style='text-align: left;'>" + "图片：" +"</td></tr></table>";
debugger;
var ImgObj = new Image();
ImgObj.src = yws111;
if((ImgObj.fileSize > 0 || (ImgObj.width > 0 && ImgObj.height > 0)) && PICTURE != null) {
$("#serviceAreaPopupContent").html(content);
$('#picture').attr('src',yws111);
} else {
$("#serviceAreaPopupContent").html(content1);
}
}else if(layer == 6|| layer == 7){ // 周 月 弹框
debugger;
var areaid=feature.get("areaid");
var name=feature.get("name");
// 地址
var address=feature.get("address");
// 服务电话
var fwdh=feature.get("fwdh");
// 时间
var time=feature.get("time");
// 清空popup的内容容器
$("#serviceAreaPopupContent").html("");
// 将弹窗添加到 map 地图中
map.addOverlay(overlay);
overlay.setPosition(evt.coordinate);
$("#serviceAreaPopup").show();
// 设置内容
var content = "<table width='300px' style='border-collapse:separate; border-spacing:0px 12px;'>"+
"<tr><td style='text-align: left;'>"+ "活动名称:"+name + "</td></tr>" +
"<tr><td style='text-align: left;'>" + "活动时间：" + time + "</td></tr>" +
"<tr><td style='text-align: left;'>" + "活动地址：" + address + "</td></tr>" +
"<tr><td style='text-align: left;'>" + "活动电话：" + fwdh+ "</td></tr></table>";
$("#serviceAreaPopupContent").html(content);
}
});
为弹窗添加一个响应关闭的函数
// 为弹窗添加一个响应关闭的函数
$("#serviceAreaPopupCloser").click(function() {
overlay.setPosition(undefined);
$("#serviceAreaPopupCloser").blur();
return false;
});
下面是引入的css文件等 需要的自取
https://download.csdn.net/download/weixin_45447370/20032875
标签：map,layer,ol,openlayer,展示,feature,2d,var,new 来源： https://blog.csdn.net/weixin_45447370/article/details/118494323