OpneLayers实现地名搜索与展示
OpneLayers实现地名地址解析
全部代码
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>查询服务</title>
<link href="http://10.16.68.120:5092/portal/pub/css/ld.css" rel="stylesheet" type="text/css" />
<link href="http://10.16.68.120:5092/portal/pub/css/dev_common.css" rel="stylesheet" type="text/css"/>
<script src="http://10.16.68.120:5092/portal/pub/js/ld.min.js" type="text/javascript" ></script>
<script src="http://10.16.68.120:5092/portal/pub/js/ldMap.js" type="text/javascript" ></script>
<script src="http://10.16.68.120:5092/portal/pub/js/lmap-ishowService.js" type="text/javascript" ></script>
<script src="http://10.16.68.120:5092/portal/mds/dev/config/baseconfg.js"></script>
<style type="text/css">
body {
padding: 0;
margin: 0;
broder: none;
}
#app {
width: 500px;
height: 200px;
margin: 0 auto;
text-align: center;
background-color: #cccccc;
}
#mylink {
color: #efefef;
}
.pagination {
list-style: none;
text-align: center;
height: 50px;
padding-top: 50px;
}
.pagination>li {
float: left;
margin: 0 5px;
}
[v-cloak] {
display: none;
}
</style>
<style type="text/css">
#map {
width: 100%;
height: 100%;
position: absolute;
}
.diming {
float: left;
font-size: 15px;
max-width: 340px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dizhi {
font-size: 13px;
color: darkgrey;
float: left;
position: relative;
top: 4px;
max-width: 340px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
li {
list-style-type: none;
}
.yc {
display: none;
}
</style>
<style type="text/css">
.ol-popup {
position: absolute;
-webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
padding: 15px;
border-radius:3px;
border:solid 1px #A0A0A5;
background-color: #eeefed;
color: #3b5373;
bottom: 12px;
left: -50px;
box-shadow:0px 5px 9px #8A8A8A;
}
.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: #eeefed;
border-width: 10px;
left: 48px;
margin-left: -10px;
}
.ol-popup:before {
border-top-color:#eeefed;
left: 48px;
margin-left: -11px;
}
.ol-popup-closer {
text-decoration: none;
position: absolute;
top: 2px;
right: 8px;
}
.ol-popup-closer:after {
content: "✖";
color: #333;
}
</style>
</head>
<body>
<div id="map">
<!-- Popup -->
<div id="popup" class="ol-popup" >
<div><strong>郑州市新郑市航空港区</strong></div>
<hr>
<span id="popup-closer" class="ol-popup-closer"></span>
<div id="popup-content">
</div>
</div>
<div class="btnContainer" style="max-width:340px">
<input type="text" id="username" value="" class="dev-input" placeholder="请输入地名地址">
<button id="checkvalue" class="dev-button-Style">搜索</button>
<div>
<ul id='liebiao'>
<!--<li >
<div class="diming">地名：兴港大厦</div>
</br>
<div class='dizhi'>地址：晃了晃撒肯定就拉斯基公爵</div>
</br>
<hr>
</li>
<li >
<div class="diming">地名：兴港大厦</div>
</br>
<div class='dizhi'>地址：晃了晃撒肯定就拉斯基公爵</div>
</br>
<hr>
</li>-->
</ul>
</div>
<div id="app" v-cloak style="width: 100%;height: 50px;background-color: rgba(245, 243, 240, 0.88);"
class="yc">
<ul class="pagination" style="padding:0;height:23px">
<li>
<a v-if="currentPage == 1">首页</a>
<a v-else href="javascript:;" @click="next(1)">首页</a>
</li>
<li v-if="currentPage<=1"><a>上一页</a></li>
<li v-else><a href="javascript:;" @click="next(currentPage-1)">上一页</a></li>
<li v-for="item in pagingList">
<a v-if="currentPage==item.key || sign ==item.key">{{item.key}}</a>
<a v-else href="javascript:;" @click="next(item.value)">{{item.key}}</a>
</li>
<li v-if="currentPage>=totalPageCount"><a>下一页</a></li>
<li v-else><a href="javascript:;" @click="next(currentPage+1)">下一页</a></li>
<li>
<a v-if="totalPageCount == currentPage">尾页</a>
<a v-else href="javascript:;" @click="next(totalPageCount)">尾页</a>
</li>
</ul>
<p>共:{{totalPageCount||0}}页,当前页为第{{currentPage||0}}页</p>
</div>
</div>
</div>
<script>
//实例化Map对象加载地图
var projection = ld.proj.get(basemapconfig[0].projection);
map = new ld.Map({
projection: basemapconfig[0].projection,
controls: [new ld.control.Zoom()],
target: 'map',
layers: [
new ld.layer.Tile({ //实例化WMTS服务图层对象
source: new ld.source.WMTS({
url: basemapconfig[0].url, //WMTS服务基地址
layer: basemapconfig[0].layer,
matrixSet: basemapconfig[0].matrixSet, //投影坐标系设置矩阵
format: basemapconfig[0].format, //图片格式
projection: basemapconfig[0].projection, //数据的投影坐标系
//瓦片网格对象
tileGrid: new ld.tilegrid.WMTS({
origin: basemapconfig[0].origin, //网格原点
resolutions: basemapconfig[0].resolutions, //分辨率数组
matrixIds: basemapconfig[0].matrixIds, //矩阵标识列表，与地图级数保持一致
tileSize: basemapconfig[0].tileSize //瓦片尺寸
}),
style: 'default'
})
})
],
view: new ld.View({
center: center_zoom.section.center, //中心点
projection: projection,
zoom: center_zoom.section.zoom //地图层级
})
});
var featuerInfo1= new Array(10);
var featuerInfo= {};
function chaxun(num) {
delpopup();
vectorLayer.getSource().clear(true);//清除多次渲染图标
// 获取到填写的数据
var username = $("#username").val();
$("#app").show();
// 构建请求的url
var url =
"http://10.16.68.120:8082/zw-map/geoesb/proxy/add735b18ee0456f92f8d2470b8c3de8/08d7994c219c4dd58c9bb15403438624?filter=NAME%20like%27%25" +
username + "%25%27&request=GETFEATURE&page=" + num + "&rp=10";
// 发送一个请求ajax 请求
$.ajax({
url: url, // ajax请求要请求的地址
type: "get", // 请求的类型 get post
data: "", // 请求要发送的数据 常在post请求中使用，get请求只需要拼接请求的url就可以
success: function (data) {
// 请求成功之后要执行的方法
// data 接收请求成功之后的返回值
let arr = data.rows;
if (data.total % 10 != 0) {
var aaaaa = parseInt(data.total / 10 + 1);
} else {
var aaaaa = data.total / 10;
}
app.totalPageCount = aaaaa;
$('#liebiao').text('')
for (let i = 0; i < arr.length; i++) {
console.log(arr[i].SMX, arr[i].SMY);
var zuobiao = [data.rows[i].SMX,data.rows[i].SMY];
$('#liebiao').append('<li οnclick="pingyi(['+zuobiao+'])"><div class="diming">地名：' + data.rows[i].NAME +
'</div></br><div class="dizhi">地址：' + data.rows[i].ADDNAME +
'</div></br><hr></li>');
let shushu=i+1+'';
addVectorLabel([data.rows[i].SMX,data.rows[i].SMY],shushu);//添加一个新的标注（矢量要素）
featuerInfo1[i] = {
att: {
text: "地名:"+ data.rows[i].NAME, //标注内容简介
ADDNAME: "地址:"+data.rows[i].ADDNAME,
imgURL: "http://10.16.68.120:5092/portal/pub/img/dev/zhuhai.png" //标注的图片
}
}
}
},
error: function (error) {
// 请求失败之后要执行的内容
}
})
// 拿到响应
}
$("#checkvalue").click(
function () {
chaxun(1)
}
)
/**
* 创建矢量标注样式函数,设置image为图标ol.style.Icon
* @param {ol.Feature} feature 要素
*/
var createLabelStyle = function (feature) {
return new ld.style.Style({
image: new ld.style.Icon(/** @type {olx.style.IconOptions} */({
anchor: [0.5, 60],
anchorOrigin: 'top-right',
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
offsetOrigin: 'top-right',
// offset:[0,10],
// scale:0.5, //图标缩放比例
opacity: 0.75, //透明度
src: 'http://10.16.68.120:5092/portal/pub/img/dev/blueIcon.png' //图标的url
})),
text: new ld.style.Text({
textAlign: 'center', //位置
textBaseline: 'middle', //基准线
// offsetX: 'middle', //水平文本偏移量（以像素为单位）。正数将使文本右移。
offsetY: -30, //垂直文本偏移量（以像素为单位）。正值将使文本向下移动
font: 'normal 14px 微软雅黑', //文字样式
text: feature.get('name'), //文本内容
fill: new ld.style.Fill({ color: '#aa3300' }), //文本填充样式（即文字颜色）
stroke: new ld.style.Stroke({ color: '#ffcc33', width: 2 })
})
});
}
//实例化Vector要素，通过矢量图层添加到地图容器中
var iconFeature = new ld.Feature({
});
iconFeature.setStyle(createLabelStyle(iconFeature));
//矢量标注的数据源
var vectorSource = new ld.source.Vector({
features: [iconFeature]
});
//矢量标注图层
var vectorLayer = new ld.layer.Vector({
source: vectorSource
});
map.addLayer(vectorLayer);
/**
* 添加一个新的标注（矢量要素）
* @param {ol.Coordinate} coordinate 坐标点
*/
function addVectorLabel(coordinate,shushu) {
//新建一个要素 ld.Feature
var newFeature = new ld.Feature({
geometry: new ld.geom.Point(coordinate),//几何信息
name: shushu //名称属性
});
newFeature.setStyle(createLabelStyle(newFeature));//设置要素的样式
vectorSource.addFeature(newFeature);//将新要素添加到数据源中
}
//平移功能
function pingyi(coordinate) {
var view = map.getView(); //获取地图视图
var zoom = view.getZoom();//获得当前缩放级数
view.setZoom(15); //改变地图级别
view.setCenter(coordinate); //平移地图
};
//示例标注点郑州市的信息对象
/**
* 实现popup的html元素
*/
var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');
/**
* 在地图容器中创建一个Overlay
*/
var popup = new ld.Overlay(/** @type {olx.OverlayOptions} */({
element: container,
autoPan: true,
positioning: 'bottom-center',
stopEvent: false,
autoPanAnimation: {
duration: 250
}
}));
map.addOverlay(popup);
/**
* 添加关闭按钮的单击事件（隐藏popup）
* @return {boolean} Don't follow the href.
*/
closer.onclick = function () {
popup.setPosition(undefined); //未定义popup位置
closer.blur(); //失去焦点
return false;
};
/**
* 动态创建popup的具体内容
* @param {string} title
*/
function addFeatrueInfo(info) {
//新增div元素
var elementDiv = document.createElement('div');
elementDiv.className = "markerText";
setInnerText(elementDiv, info.att.text);
content.appendChild(elementDiv); // 为content添加div子节点
var elementDiv = document.createElement('div');
elementDiv.className = "markerText";
setInnerText(elementDiv, info.att.ADDNAME);
content.appendChild(elementDiv); // 为content添加div子节点
//新增img元素
var elementImg = document.createElement('img');
elementImg.className = "markerImg";
elementImg.src = info.att.imgURL;
content.appendChild(elementImg); // 为content添加img子节点
}
/**
* 动态设置元素文本内容（兼容）
*/
function setInnerText(element, text) {
if (typeof element.textContent == "string") {
element.textContent = text;
} else {
element.innerText = text;
}
}
function delpopup(){
popup.setPosition(undefined); //未定义popup位置
closer.blur(); //失去焦点
}
/**
* 为map添加点击事件监听，渲染弹出popup
*/
map.on('click', function (evt) {
delpopup();
var coordinate = evt.coordinate;
//判断当前单击处是否有要素，捕获到要素时弹出popup
var feature = map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
var property=feature.getProperties();
//var type=feature.getGeometry().getType();
//var property=feature.getProperties();
//var coordinate = ol.extent.getCenter(feature.getGeometry().getExtent());
for (let i = 0; i < featuerInfo1.length; i++) {
if(property.name==(i+1)){
featuerInfo = featuerInfo1[i];
}
}
return feature; });
if (feature) {
content.innerHTML = ''; //清空popup的内容容器
addFeatrueInfo(featuerInfo); //在popup中加载当前要素的具体信息
if (popup.getPosition() == undefined) {
popup.setPosition(coordinate); //设置popup的位置
}
}
});
/**
* 为map添加鼠标移动事件监听，当指向标注时改变鼠标光标状态
*/
map.on('pointermove', function (e) {
var pixel = map.getEventPixel(e.originalEvent);
var hit = map.hasFeatureAtPixel(pixel);
map.getTargetElement().style.cursor = hit ? 'pointer' : '';
});
</script>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
// 省略的符号
sign: '...',
// 省略号位置
signIndex: 4,
// 总页数
totalPageCount: 1,
// 当前页
currentPage: 1,
// 显示在页面的数组列表
pagingList: []
},
watch: {
totalPageCount(val) {
var that = this
if (!val || val == '') return;
that.currentPage = 1;
that.init()
},
currentPage(val) {
var that = this
that.init()
}
},
methods: {
// 跳转到某页码
next(num) {
chaxun(num);
var that = this;
if (num <= 1) that.currentPage = 1;
else if (num >= that.totalPageCount) that.currentPage = that.totalPageCount;
else that.currentPage = num;
},
// 初始化数据
fetchData() {
var that = this
that.pagingList = [];
var tmp = null;
if ((that.totalPageCount) > 6) {
if (((that.totalPageCount - 1) == (that.totalPageCount - that.currentPage)) && (that
.totalPageCount - that.currentPage) > 5) {
for (var i = 1; i < 7; i++) {
if (i < that.signIndex) {
tmp = {
key: i,
value: i
}
} else if (i == that.signIndex) {
tmp = {
key: that.sign,
value: 0
}
} else if (i == (that.signIndex + 1)) {
tmp = {
key: that.totalPageCount - 1,
value: that.totalPageCount - 1
}
} else {
tmp = {
key: that.totalPageCount,
value: that.totalPageCount
}
}
that.pagingList.push(tmp)
}
} else if (((that.totalPageCount - that.currentPage) <= that.signIndex)) {
var starNum = that.totalPageCount - 5;
for (var i = starNum; i < starNum + 6; i++) {
tmp = {
key: i,
value: i
}
that.pagingList.push(tmp)
}
} else {
var starNum = that.currentPage - 1;
for (var i = 1; i < 7; i++) {
if (i < that.signIndex) {
tmp = {
key: (starNum - 1) + i,
value: (starNum - 1) + i
}
} else if (i == that.signIndex) {
tmp = {
key: that.sign,
value: 0
}
} else if (i == (that.signIndex + 1)) {
tmp = {
key: that.totalPageCount - 1,
value: that.totalPageCount - 1
}
} else {
tmp = {
key: that.totalPageCount,
value: that.totalPageCount
}
}
that.pagingList.push(tmp)
}
}
} else {
for (var i = 0; i < that.totalPageCount; i++) {
tmp = {
key: i + 1,
value: i + 1
}
that.pagingList.push(tmp)
}
}
},
init() {
var that = this
that.fetchData()
}
},
mounted() {
var that = this
that.init()
}
})
</script>
</body>
</html>
功能点分析
搜索接口的实现
function chaxun(num) {
delpopup();
vectorLayer.getSource().clear(true);//清除多次渲染图标
// 获取到填写的数据
var username = $("#username").val();
$("#app").show();
// 构建请求的url
var url =
"http://10.16.68.120:8082/zw-map/geoesb/proxy/add735b18ee0456f92f8d2470b8c3de8/08d7994c219c4dd58c9bb15403438624?filter=NAME%20like%27%25" +
username + "%25%27&request=GETFEATURE&page=" + num + "&rp=10";
// 发送一个请求ajax 请求
$.ajax({
url: url, // ajax请求要请求的地址
type: "get", // 请求的类型 get post
data: "", // 请求要发送的数据 常在post请求中使用，get请求只需要拼接请求的url就可以
success: function (data) {
// 请求成功之后要执行的方法
// data 接收请求成功之后的返回值
let arr = data.rows;
if (data.total % 10 != 0) {
var aaaaa = parseInt(data.total / 10 + 1);
} else {
var aaaaa = data.total / 10;
}
app.totalPageCount = aaaaa;
$('#liebiao').text('')
for (let i = 0; i < arr.length; i++) {
console.log(arr[i].SMX, arr[i].SMY);
var zuobiao = [data.rows[i].SMX,data.rows[i].SMY];
$('#liebiao').append('<li οnclick="pingyi(['+zuobiao+'])"><div class="diming">地名：' + data.rows[i].NAME +
'</div></br><div class="dizhi">地址：' + data.rows[i].ADDNAME +
'</div></br><hr></li>');
let shushu=i+1+'';
addVectorLabel([data.rows[i].SMX,data.rows[i].SMY],shushu);//添加一个新的标注（矢量要素）
featuerInfo1[i] = {
att: {
text: "地名:"+ data.rows[i].NAME, //标注内容简介
ADDNAME: "地址:"+data.rows[i].ADDNAME,
imgURL: "http://10.16.68.120:5092/portal/pub/img/dev/zhuhai.png" //标注的图片
}
}
}
},
error: function (error) {
// 请求失败之后要执行的内容
}
})
// 拿到响应
}
分页的实现
<div id="app" v-cloak style="width: 100%;height: 50px;background-color: rgba(245, 243, 240, 0.88);"
class="yc">
<ul class="pagination" style="padding:0;height:23px">
<li>
<a v-if="currentPage == 1">首页</a>
<a v-else href="javascript:;" @click="next(1)">首页</a>
</li>
<li v-if="currentPage<=1"><a>上一页</a></li>
<li v-else><a href="javascript:;" @click="next(currentPage-1)">上一页</a></li>
<li v-for="item in pagingList">
<a v-if="currentPage==item.key || sign ==item.key">{{item.key}}</a>
<a v-else href="javascript:;" @click="next(item.value)">{{item.key}}</a>
</li>
<li v-if="currentPage>=totalPageCount"><a>下一页</a></li>
<li v-else><a href="javascript:;" @click="next(currentPage+1)">下一页</a></li>
<li>
<a v-if="totalPageCount == currentPage">尾页</a>
<a v-else href="javascript:;" @click="next(totalPageCount)">尾页</a>
</li>
</ul>
<p>共:{{totalPageCount||0}}页,当前页为第{{currentPage||0}}页</p>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
// 省略的符号
sign: '...',
// 省略号位置
signIndex: 4,
// 总页数
totalPageCount: 1,
// 当前页
currentPage: 1,
// 显示在页面的数组列表
pagingList: []
},
watch: {
totalPageCount(val) {
var that = this
if (!val || val == '') return;
that.currentPage = 1;
that.init()
},
currentPage(val) {
var that = this
that.init()
}
},
methods: {
// 跳转到某页码
next(num) {
chaxun(num);
var that = this;
if (num <= 1) that.currentPage = 1;
else if (num >= that.totalPageCount) that.currentPage = that.totalPageCount;
else that.currentPage = num;
},
// 初始化数据
fetchData() {
var that = this
that.pagingList = [];
var tmp = null;
if ((that.totalPageCount) > 6) {
if (((that.totalPageCount - 1) == (that.totalPageCount - that.currentPage)) && (that
.totalPageCount - that.currentPage) > 5) {
for (var i = 1; i < 7; i++) {
if (i < that.signIndex) {
tmp = {
key: i,
value: i
}
} else if (i == that.signIndex) {
tmp = {
key: that.sign,
value: 0
}
} else if (i == (that.signIndex + 1)) {
tmp = {
key: that.totalPageCount - 1,
value: that.totalPageCount - 1
}
} else {
tmp = {
key: that.totalPageCount,
value: that.totalPageCount
}
}
that.pagingList.push(tmp)
}
} else if (((that.totalPageCount - that.currentPage) <= that.signIndex)) {
var starNum = that.totalPageCount - 5;
for (var i = starNum; i < starNum + 6; i++) {
tmp = {
key: i,
value: i
}
that.pagingList.push(tmp)
}
} else {
var starNum = that.currentPage - 1;
for (var i = 1; i < 7; i++) {
if (i < that.signIndex) {
tmp = {
key: (starNum - 1) + i,
value: (starNum - 1) + i
}
} else if (i == that.signIndex) {
tmp = {
key: that.sign,
value: 0
}
} else if (i == (that.signIndex + 1)) {
tmp = {
key: that.totalPageCount - 1,
value: that.totalPageCount - 1
}
} else {
tmp = {
key: that.totalPageCount,
value: that.totalPageCount
}
}
that.pagingList.push(tmp)
}
}
} else {
for (var i = 0; i < that.totalPageCount; i++) {
tmp = {
key: i + 1,
value: i + 1
}
that.pagingList.push(tmp)
}
}
},
init() {
var that = this
that.fetchData()
}
},
mounted() {
var that = this
that.init()
}
})
</script>
openlayer指定经纬度渲染图标
/**
* 创建矢量标注样式函数,设置image为图标ol.style.Icon
* @param {ol.Feature} feature 要素
*/
var createLabelStyle = function (feature) {
return new ld.style.Style({
image: new ld.style.Icon(/** @type {olx.style.IconOptions} */({
anchor: [0.5, 60],
anchorOrigin: 'top-right',
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
offsetOrigin: 'top-right',
// offset:[0,10],
// scale:0.5, //图标缩放比例
opacity: 0.75, //透明度
src: 'http://10.16.68.120:5092/portal/pub/img/dev/blueIcon.png' //图标的url
})),
text: new ld.style.Text({
textAlign: 'center', //位置
textBaseline: 'middle', //基准线
// offsetX: 'middle', //水平文本偏移量（以像素为单位）。正数将使文本右移。
offsetY: -30, //垂直文本偏移量（以像素为单位）。正值将使文本向下移动
font: 'normal 14px 微软雅黑', //文字样式
text: feature.get('name'), //文本内容
fill: new ld.style.Fill({ color: '#aa3300' }), //文本填充样式（即文字颜色）
stroke: new ld.style.Stroke({ color: '#ffcc33', width: 2 })
})
});
}
//实例化Vector要素，通过矢量图层添加到地图容器中
var iconFeature = new ld.Feature({
});
iconFeature.setStyle(createLabelStyle(iconFeature));
//矢量标注的数据源
var vectorSource = new ld.source.Vector({
features: [iconFeature]
});
//矢量标注图层
var vectorLayer = new ld.layer.Vector({
source: vectorSource
});
map.addLayer(vectorLayer);
/**
* 添加一个新的标注（矢量要素）
* @param {ol.Coordinate} coordinate 坐标点
*/
function addVectorLabel(coordinate,shushu) {
//新建一个要素 ld.Feature
var newFeature = new ld.Feature({
geometry: new ld.geom.Point(coordinate),//几何信息
name: shushu //名称属性
});
newFeature.setStyle(createLabelStyle(newFeature));//设置要素的样式
vectorSource.addFeature(newFeature);//将新要素添加到数据源中
}
openlayer实现给定经纬度跳转
//平移功能
function pingyi(coordinate) {
var view = map.getView(); //获取地图视图
var zoom = view.getZoom();//获得当前缩放级数
view.setZoom(15); //改变地图级别
view.setCenter(coordinate); //平移地图
};
实现Popup 浮云框
<!-- Popup -->
<div id="popup" class="ol-popup" >
<div><strong>郑州市新郑市航空港区</strong></div>
<hr>
<span id="popup-closer" class="ol-popup-closer"></span>
<div id="popup-content">
</div>
</div>
/**
* 实现popup的html元素
*/
var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');
/**
* 在地图容器中创建一个Overlay
*/
var popup = new ld.Overlay(/** @type {olx.OverlayOptions} */({
element: container,
autoPan: true,
positioning: 'bottom-center',
stopEvent: false,
autoPanAnimation: {
duration: 250
}
}));
map.addOverlay(popup);
/**
* 添加关闭按钮的单击事件（隐藏popup）
* @return {boolean} Don't follow the href.
*/
closer.onclick = function () {
popup.setPosition(undefined); //未定义popup位置
closer.blur(); //失去焦点
return false;
};
/**
* 动态创建popup的具体内容
* @param {string} title
*/
function addFeatrueInfo(info) {
//新增div元素
var elementDiv = document.createElement('div');
elementDiv.className = "markerText";
setInnerText(elementDiv, info.att.text);
content.appendChild(elementDiv); // 为content添加div子节点
var elementDiv = document.createElement('div');
elementDiv.className = "markerText";
setInnerText(elementDiv, info.att.ADDNAME);
content.appendChild(elementDiv); // 为content添加div子节点
//新增img元素
var elementImg = document.createElement('img');
elementImg.className = "markerImg";
elementImg.src = info.att.imgURL;
content.appendChild(elementImg); // 为content添加img子节点
}
/**
* 动态设置元素文本内容（兼容）
*/
function setInnerText(element, text) {
if (typeof element.textContent == "string") {
element.textContent = text;
} else {
element.innerText = text;
}
}
function delpopup(){
popup.setPosition(undefined); //未定义popup位置
closer.blur(); //失去焦点
}
/**
* 为map添加点击事件监听，渲染弹出popup
*/
map.on('click', function (evt) {
delpopup();
var coordinate = evt.coordinate;
//判断当前单击处是否有要素，捕获到要素时弹出popup
var feature = map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
var property=feature.getProperties();
for (let i = 0; i < featuerInfo1.length; i++) {
if(property.name==(i+1)){
featuerInfo = featuerInfo1[i];
}
}
return feature; });
if (feature) {
content.innerHTML = ''; //清空popup的内容容器
addFeatrueInfo(featuerInfo); //在popup中加载当前要素的具体信息
if (popup.getPosition() == undefined) {
popup.setPosition(coordinate); //设置popup的位置
}
}
});
/**
* 为map添加鼠标移动事件监听，当指向标注时改变鼠标光标状态
*/
map.on('pointermove', function (e) {
var pixel = map.getEventPixel(e.originalEvent);
var hit = map.hasFeatureAtPixel(pixel);
map.getTargetElement().style.cursor = hit ? 'pointer' : '';
});
注意事项
1.翻页会多次渲染图标
vectorLayer.getSource().clear(true);//清除多次渲染图标
2.页数赋值
app.totalPageCount = aaaaa;
----------------------------------
var app = new Vue({
el: '#app',
data: {
// 省略的符号
sign: '...',
// 省略号位置
signIndex: 4,
// 总页数
totalPageCount: 1,
// 当前页
currentPage: 1,
// 显示在页面的数组列表
pagingList: []
},
watch: {
totalPageCount(val) {
var that = this
if (!val || val == '') return;
that.currentPage = 1;
that.init()
},
currentPage(val) {
var that = this
that.init()
}
},
3.数据渲染
var featuerInfo1= new Array(10);
var featuerInfo= {};
featuerInfo1[i] = {
att: {
text: "地名:"+ data.rows[i].NAME, //标注内容简介
ADDNAME: "地址:"+data.rows[i].ADDNAME,
imgURL: "http://10.16.68.120:5092/portal/pub/img/dev/zhuhai.png" //标注的图片
}
}
map.on('click', function (evt) {
delpopup();
var coordinate = evt.coordinate;
//判断当前单击处是否有要素，捕获到要素时弹出popup
var feature = map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
var property=feature.getProperties();
for (let i = 0; i < featuerInfo1.length; i++) {
if(property.name==(i+1)){
featuerInfo = featuerInfo1[i];
}
}
return feature; });
if (feature) {
content.innerHTML = ''; //清空popup的内容容器
addFeatrueInfo(featuerInfo); //在popup中加载当前要素的具体信息
if (popup.getPosition() == undefined) {
popup.setPosition(coordinate); //设置popup的位置
}
}
});
点击每个图标 确定其点的到底是哪个
/**
* 添加一个新的标注（矢量要素）
* @param {ol.Coordinate} coordinate 坐标点
*/
function addVectorLabel(coordinate,shushu) {
//新建一个要素 ld.Feature
var newFeature = new ld.Feature({
geometry: new ld.geom.Point(coordinate),//几何信息
name: shushu //名称属性
});
newFeature.setStyle(createLabelStyle(newFeature));//设置要素的样式
vectorSource.addFeature(newFeature);//将新要素添加到数据源中
}
map.on('click', function (evt) {
delpopup();
var coordinate = evt.coordinate;
//判断当前单击处是否有要素，捕获到要素时弹出popup
var feature = map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
var property=feature.getProperties();//确定其点的是哪个图标
for (let i = 0; i < featuerInfo1.length; i++) {
if(property.name==(i+1)){
featuerInfo = featuerInfo1[i];
}
}
return feature; });
if (feature) {
content.innerHTML = ''; //清空popup的内容容器
addFeatrueInfo(featuerInfo); //在popup中加载当前要素的具体信息
if (popup.getPosition() == undefined) {
popup.setPosition(coordinate); //设置popup的位置
}
}
});
3967
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
