12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788 |
- <!--********************************************************************
- * Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
- *********************************************************************-->
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>POI</title>
- <script type="text/javascript" src="../js/include-web.js"></script>
- <script type="text/javascript" include="iclient-leaflet-css" src="../../dist/leaflet/include-leaflet.js"></script>
- <style>
- /*修改leaflet默认弹框样式*/
- .leaflet-popup,
- .leaflet-popup-content-wrapper {
- padding: 0;
- }
- .leaflet-popup-content {
- margin: 0;
- }
- </style>
- </head>
- <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
- <div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
- <script>
- var map = L.map('map', {
- center: [25, 40],
- zoom: 3,
- });
- var host = window.isLocal ? window.server : "https://iserver.supermap.io";
- var url = host + '/iserver/services/map-china400/rest/maps/China';
- var sqlurl = host + "/iserver/services/map-world/rest/maps/World";
- L.supermap.tiledMapLayer(url).addTo(map);
- //添加组件:
- var poiSearch = L.supermap.components.search({
- isGeoCoding: !window.isLocal,
- perPageDataNum: 8 // 每页显示数据个数
- //设置结果图层样式:
- /*style: function (feature, latLng) {
- if (latLng /!*&& feature instanceof L.latLng || feature.geometry.type.toLowerCase() === "point"*!/) {
- return L.circleMarker(latLng, {
- fillColor: 'red',
- weight: 1,
- opacity: 1,
- color: 'red',
- fillOpacity: 0.6
- });
- }
- }*/
- });
- poiSearch.addTo(map);
- //添加示例图层:
- query();
- function query() {
- //查询数据构建示例图层:
- var polygon = L.polygon([[90, 180], [90, -180], [-90, -180], [-90, 180], [90, 180]]);
- var param = new SuperMap.QueryByBoundsParameters({
- queryParams: { name: "Capitals@World.1" },
- bounds: polygon.getBounds()
- });
- L.supermap
- .queryService(sqlurl)
- .queryByBounds(param, function (serviceResult) {
- var result = serviceResult.result;
- var resultLayer = L.geoJSON(result.recordsets[0].features, {
- pointToLayer: function (geoJsonPoint, latlng) {
- return L.circleMarker(latlng, {
- fillColor: 'blue',
- weight: 1,
- opacity: 1,
- color: 'blue',
- fillOpacity: 0.6
- });
- },
- }).addTo(map);
- poiSearch.addSearchLayer([L.supermap.components.geoJSONLayerWithName("首都", resultLayer)]);
- });
- }
- </script>
- </body>
- </html>
|