Skip to content

Commit 038bc88

Browse files
xilanhuaweidapaoxilanhuaweidapao
committed
2 parents 66ff3c2 + 8496f10 commit 038bc88

File tree

8 files changed

+566
-370
lines changed

8 files changed

+566
-370
lines changed

‎dist/classic/include-classic.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@
5959
inputScript("http://mapv.baidu.com/build/mapv.min.js");
6060
}
6161
if (inArray(includes, 'echarts')) {
62-
inputScript("https://cdnjs.cloudflare.com/ajax/libs/echarts/3.8.5/echarts.min.js");
62+
inputScript("https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts.min.js");
6363
}
6464
if (inArray(includes, 'nanoscroller')) {
6565
inputCSS("http://iclient.supermap.io/libs/iclient8c/examples/css/nanoscroller.css");

‎dist/leaflet/iclient9-leaflet-es6.js

Lines changed: 119 additions & 50 deletions
Large diffs are not rendered by default.

‎dist/leaflet/iclient9-leaflet-es6.min.js

Lines changed: 219 additions & 219 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/leaflet/iclient9-leaflet.js

Lines changed: 122 additions & 50 deletions
Large diffs are not rendered by default.

‎dist/leaflet/iclient9-leaflet.min.js

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/leaflet/widgets_Search.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,8 @@
3737
L.supermap.tiledMapLayer(url).addTo(map);
3838
//添加微件：
3939
var poiSearch = L.supermap.widgets.search({
40-
isGeoCoding: !window.isLocal
40+
isGeoCoding: !window.isLocal,
41+
perPageDataNum: 8 // 每页显示数据个数
4142
//设置结果图层样式：
4243
/*style: (feature, latLng) => {
4344
if (latLng /!*&& feature instanceof L.latLng || feature.geometry.type.toLowerCase() === "point"*!/) {

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,7 @@
116116
"elasticsearch": "13.0.1",
117117
"fetch-ie8": "1.5.0",
118118
"fetch-jsonp": "1.0.6",
119-
"jsonsql": "^0.2.5",
119+
"jsonsql": "0.2.5",
120120
"leaflet": "1.3.1",
121121
"lodash.topairs": "4.3.0",
122122
"mapbox-gl": "0.45.0",
@@ -126,6 +126,6 @@
126126
"proj4": "2.3.15",
127127
"promise-polyfill": "6.0.2",
128128
"three": "0.92.0",
129-
"xlsx": "^0.12.13"
129+
"xlsx": "0.12.13"
130130
}
131131
}

‎src/leaflet/widgets/search/SearchView.js

Lines changed: 98 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -27,13 +27,13 @@ import {
2727
* @category Widgets Search
2828
* @version 9.1.1
2929
* @param {Object} options - 可选参数。
30-
* @param {string} [options.addressUrl] - 配置地址匹配服务。
3130
* @param {Object|Array.<string>} [options.cityConfig] - 城市地址匹配配置，默认为全国城市，与 options.cityGeoCodingConfig 支持匹配的服务对应；
3231
* 配置两种格式：{key1:{A:[],B:[]}, key2:{C:[],D:[]}} 或 ["成都市","北京市"]，用户可根据自己的项目需求进行配置
3332
* @param {Object} [options.cityGeoCodingConfig] - 城市地址匹配服务配置，包括：{addressUrl:"",key:""} 默认为 online 地址匹配服务，与 options.cityConfig 对应
3433
* @param {boolean} [options.isGeoCoding=true] - 是否支持城市地址匹配功能。
35-
* @param {boolean} [options.pageSize=10] - 返回记录结果数，最大设置为 20。
36-
* @param {boolean} [options.pageNum=1] - 分页页码，默认 1 代表第一页。
34+
* @param {number} [options.pageSize=10] - 地址匹配查询返回记录结果数，最大设置为 20。
35+
* @param {number} [options.pageNum=1] - 地址匹配查询分页页码，默认 1 代表第一页。
36+
* @param {number} [options.perPageDataNum=8] - 每页显示个数，最大值为 8。
3737
* @param {string} [options.position='topright'] - 微件在地图中显示的位置，包括：'topleft'，'topright'，'bottomleft' 和 'bottomright'，继承自 leaflet control。
3838
* @param {function} [options.style] - 设置图层点线面默认样式，点样式返回 maker 或者 circleMaker；线和面返回 L.path 样式。
3939
* @param {function} [options.onEachFeature] - 在创建和设置样式后，将为每个创建的要素调用一次的函数。用于将事件和弹出窗口附加到要素。默认情况下，对新创建的图层不执行任何操作。
@@ -51,14 +51,16 @@ export var SearchView = WidgetsViewBase.extend({
5151
},
5252
isGeoCoding: true,
5353
pageSize: 10,
54-
pageNum: 1
54+
pageNum: 1,
55+
perPageDataNum: 8
5556
},
5657

5758
initialize(options) {
5859
WidgetsViewBase.prototype.initialize.apply(this, [options]);
5960
//当前选中查询的图层名：
6061
this.currentSearchLayerName = "";
6162
this.isSearchLayer = false;
63+
this.perPageDataNum = this.options.perPageDataNum;
6264
},
6365

6466
/*------以下是一些接口-----*/
@@ -468,12 +470,19 @@ export var SearchView = WidgetsViewBase.extend({
468470
this.clearSearchResult();
469471
this.searchResultLayer = L.featureGroup(data, {
470472
pointToLayer: this.options.style,
471-
style: this.options.style,
472-
onEachFeature: this.options.onEachFeature
473+
style: this.options.style
473474
}).bindPopup(function (layer) {
474-
return (new AttributesPopContainer(layer.feature.properties)).getElement();
475+
if (layer.feature.properties) {
476+
return (new AttributesPopContainer({
477+
attributes: layer.feature.properties
478+
})).getElement();
479+
}
475480
}).addTo(this.map);
476-
481+
this.searchResultLayer.eachLayer((layer) => {
482+
this.options.onEachFeature ?this.options.onEachFeature(layer.toGeoJSON(), layer):
483+
this._featureOnclickEvent.bind(this)(layer.toGeoJSON(), layer);
484+
});
485+
this.searchLayersData = data;
477486
//查询结果列表：
478487
this._prepareResultData(data);
479488
/**
@@ -491,15 +500,18 @@ export var SearchView = WidgetsViewBase.extend({
491500
const data = e.result;
492501
//先清空当前有的地址匹配图层
493502
this.clearSearchResult();
494-
495503
this.searchResultLayer = L.geoJSON(data, {
496504
pointToLayer: this.options.style,
497505
style: this.options.style,
498-
onEachFeature: this.options.onEachFeature
506+
onEachFeature: this.options.onEachFeature || this._featureOnclickEvent.bind(this)
499507
}).bindPopup(function (layer) {
500-
return (new AttributesPopContainer(layer.feature.properties)).getElement();
508+
if (layer.feature.properties) {
509+
return (new AttributesPopContainer({
510+
attributes: layer.feature.properties
511+
})).getElement();
512+
}
501513
}).addTo(this.map);
502-
514+
this.searchLayersData = data
503515
//查询结果列表：
504516
this._prepareResultData(data);
505517
/**
@@ -540,7 +552,7 @@ export var SearchView = WidgetsViewBase.extend({
540552
_prepareResultData(data) {
541553
this.currentResult = data;
542554
//向下取舍，这只页码
543-
let pageCounts = Math.ceil(data.length / 8);
555+
let pageCounts = Math.ceil(data.length / this.perPageDataNum);
544556
this._resultDomObj.setPageLink(pageCounts);
545557
//初始结果页面内容：
546558
this._createResultListByPageNum(1, data);
@@ -565,20 +577,20 @@ export var SearchView = WidgetsViewBase.extend({
565577
_createResultListByPageNum(page, data) {
566578
let start = 0,
567579
end;
568-
if (page === 1 && data.length < 8) {
580+
if (page === 1 && data.length < this.perPageDataNum) {
569581
//data数据不满8个时：
570-
end = data.length;
571-
} else if (page * 8 > data.length) {
582+
end = data.length - 1;
583+
} else if (page * this.perPageDataNum > data.length) {
572584
//最后一页且数据不满8个时
573-
start = 8 * (page - 1);
574-
end = data.length
585+
start = this.perPageDataNum * (page - 1);
586+
end = data.length - 1
575587
} else {
576588
//中间页面的情况
577-
start = 8 * (page - 1);
578-
end = page * 8 - 1
589+
start = this.perPageDataNum * (page - 1);
590+
end = page * this.perPageDataNum - 1
579591
}
580592
const content = document.createElement("div");
581-
for (let i = start; i < end; i++) {
593+
for (let i = start; i <= end; i++) {
582594
let properties, featureType = "Point";
583595
if (data[i].filterAttribute) {
584596
featureType = data[i].feature.geometry.type;
@@ -595,7 +607,7 @@ export var SearchView = WidgetsViewBase.extend({
595607
content.firstChild.getElementsByClassName("widget-search-result-icon")[0].classList.add("widget-search__resultitme-selected");
596608
const filter = content.firstChild.getElementsByClassName("widget-search-result-info")[0].firstChild.innerText;
597609

598-
this._linkageFeature(filter);
610+
!this._selectMarkerFeature && this._linkageFeature(filter);
599611
},
600612

601613
/**
@@ -627,25 +639,19 @@ export var SearchView = WidgetsViewBase.extend({
627639
} else {
628640
filterValue = filter;
629641
}
630-
642+
this._selectFeature && this._selectFeature.addTo(this.map);
631643
this.searchResultLayer.eachLayer((layer) => {
632644
// this._resetLayerStyleToDefault(layer);
633-
634645
if (!filterValue || layer.filterAttribute && layer.filterAttribute.filterAttributeValue === filterValue ||
635646
layer.feature.properties && layer.feature.properties.name === filterValue) {
647+
layer.remove();
648+
636649
this._setSelectedLayerStyle(layer);
637650
/*layer.bindPopup(function () {
638651
return (new AttributesPopContainer(layer.feature.properties)).getElement()
639652
}, {closeOnClick: false}).openPopup().addTo(this.map);*/
640653
//若这个图层只有一个点的话，则直接 flyTo 到点：
641-
this._flyToBounds(this.searchResultLayer.getBounds());
642-
let center;
643-
if (layer.getLatLng) {
644-
center = layer.getLatLng();
645-
} else if (layer.getCenter) {
646-
center = layer.getCenter();
647-
}
648-
this.map.setView(center);
654+
649655
}
650656
});
651657
},
@@ -658,31 +664,71 @@ export var SearchView = WidgetsViewBase.extend({
658664
if (this.searchResultLayer) {
659665
this.map.closePopup();
660666
//若当前是查询图层的结果，则不删除图层，只修改样式
661-
if (!this.isSearchLayer) {
662-
this.map.removeLayer(this.searchResultLayer);
663-
}
664-
if (this._selectFeature) {
665-
this.map.removeLayer(this._selectFeature);
666-
}
667+
!this.isSearchLayer && this.map.removeLayer(this.searchResultLayer);
668+
this._selectMarkerFeature && this.map.removeLayer(this._selectMarkerFeature);
669+
this._selectFeaturethis && this.map.removeLayer(this._selectFeature);
670+
this._selectMarkerFeature = null;
667671
this._selectFeature = null;
668672
this.searchResultLayer = null;
669673
this.currentResult = null;
670674
}
671675
},
676+
/**
677+
* @function L.supermap.widgets.search.prototype._featureOnclickEvent
678+
* @description 要素点击事件
679+
* @param {L.layer} layer - 需要设置选中样式的图层。
680+
* @private
681+
*/
682+
_featureOnclickEvent(feature, layer) {
683+
layer.on('click', () => {
684+
let pageEles1 = document.getElementsByClassName('widget-pagination__link')[0];
685+
this._resultDomObj._changePageEvent({ target: pageEles1.children[0].children[0] });
686+
this._selectFeature && this._selectFeature.addTo(this.map);
687+
layer.remove();
688+
let page, dataIndex;
689+
690+
for (let i = 0; i < this.searchLayersData.length; i++) {
691+
let item = this.searchLayersData[i]
692+
if ((item.properties && (item.properties.name === feature.properties.name)) || (item.filterAttribute && (item.filterAttribute.filterAttributeName + ": " + item.filterAttribute.filterAttributeValue) === (layer.filterAttribute.filterAttributeName + ": " + layer.filterAttribute.filterAttributeValue))) {
693+
dataIndex = i % this.perPageDataNum;
694+
page = parseInt(i / this.perPageDataNum) + 1;
695+
break;
696+
}
697+
}
698+
if (page > 1) {
699+
for (let i = 1; i < page; i++) {
700+
let pageEles;
701+
pageEles = document.getElementsByClassName('widget-pagination__link')[0];
702+
this._resultDomObj._changePageEvent({ target: pageEles.children[pageEles.children.length - 2].children[0] });
703+
}
704+
}
705+
let pageList = document.getElementsByClassName('widget-search-result-info')
672706

707+
let target = pageList[dataIndex].children[0];
708+
709+
if (target.innerHTML === feature.properties.name || target.innerHTML === (layer.filterAttribute.filterAttributeName + ": " + layer.filterAttribute.filterAttributeValue)) {
710+
let selectFeatureOption = pageList[dataIndex].parentNode;
711+
//修改
712+
if (document.getElementsByClassName("widget-search__resultitme-selected").length > 0) {
713+
document.getElementsByClassName("widget-search__resultitme-selected")[0].classList.remove("widget-search__resultitme-selected");
714+
}
715+
selectFeatureOption.firstChild.classList.add("widget-search__resultitme-selected");
716+
this._setSelectedLayerStyle(layer);
717+
}
718+
}, this)
719+
},
673720
/**
674721
* @function L.supermap.widgets.search.prototype._setSelectedLayerStyle
675722
* @description 设置图层选中样式。
676723
* @param {L.layer} layer - 需要设置选中样式的图层。
677724
* @private
678725
*/
679726
_setSelectedLayerStyle(layer) {
680-
if (this._selectFeature) {
681-
this.map.removeLayer(this._selectFeature);
682-
this._selectFeature = null;
683-
}
727+
this._selectMarkerFeature && this._selectMarkerFeature.remove();
728+
this._selectMarkerFeature = null;
729+
this._selectFeature = layer;
684730
//circleMarker 需要变成 marker 的样式：
685-
this._selectFeature = L.geoJSON(layer.toGeoJSON(), {
731+
this._selectMarkerFeature = L.geoJSON(layer.toGeoJSON(), {
686732
//点选中样式, todo marker 显示位置需要调整
687733
pointToLayer: (geoJsonPoint, latlng) => {
688734
return L.marker(latlng, {
@@ -701,14 +747,22 @@ export var SearchView = WidgetsViewBase.extend({
701747
fillOpacity: 0.2
702748
}
703749
}).addTo(this.map);
704-
this._selectFeature.bindPopup(function () {
750+
this._selectMarkerFeature.bindPopup(function () {
705751
return (new AttributesPopContainer({
706752
attributes: layer.feature.properties
707753
})).getElement()
708754
}, {
709755
closeOnClick: false
710756
}).openPopup().addTo(this.map);
711757

758+
this._flyToBounds(this.searchResultLayer.getBounds());
759+
let center;
760+
if (layer.getLatLng) {
761+
center = layer.getLatLng();
762+
} else if (layer.getCenter) {
763+
center = layer.getCenter();
764+
}
765+
this.map.setView(center);
712766
}
713767
});
714768

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy