| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283 |
- <!--********************************************************************
- * Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
- *********************************************************************-->
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>Supermap BUildings add GeoJson Data</title>
- </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 type="text/javascript" include="bootstrap,widgets.alert" src="../js/include-web.js"></script>
- <script type="text/javascript" exclude="iclient-classic" include="OSMBuildings-SuperMap"
- src="../../dist/classic/include-classic.js"></script>
- <script type="text/javascript">
- var map, layer, osm,
- host = window.isLocal ? window.server : "https://iserver.supermap.io";
- url = host + "/iserver/services/map-china400/rest/maps/China";
- //检测浏览器是啥支持canves Buildings 需要Canvas绘制
- if (!document.createElement('canvas').getContext) {
- widgets.alert.showAlert(resources.msg_supportCanvas, false);
- }
- //初始化地图
- map = new SuperMap.Map("map", {
- controls: [
- new SuperMap.Control.Navigation(),
- new SuperMap.Control.MousePosition(),
- new SuperMap.Control.LayerSwitcher(),
- new SuperMap.Control.Zoom()
- ]
- });
- //初始化图层
- layer = new SuperMap.Layer.TiledDynamicRESTLayer("China", url, null, {maxResolution: "auto"});
- //监听图层信息加载完成事件
- layer.events.on({"layerInitialized": addLayer});
- //异步加载图层
- function addLayer() {
- map.addLayers([layer]);
- map.setCenter(new SuperMap.LonLat(12957186.36784, 4852711.53595), 12);
- // Supermap 底图上 添加默认的 OSMBuildings geojson 数据
- var geoJSON = {
- "type": "FeatureCollection",
- "features": [{
- "type": "Feature",
- "id": 134,
- "geometry": {
- "type": "Polygon",
- "coordinates": [[
- [116.39211, 39.91289],
- [116.39278, 39.90844],
- [116.39654, 39.90860],
- [116.39614, 39.91305],
- [116.39211, 39.91289]
- ]]
- },
- "properties": {
- "wallColor": "#DDDDDD",
- "roofColor": "#F9F7F4",
- "height": 20,
- "minHeight": 0,
- "roofHeight": 5,
- "roofShape": "pyramid"
- }
- }]
- };
- osm = new OSMBuildings(map);
- osm.load();
- osm.date(new Date()); //设置当前时间 计算OSMBuildings 阴影
- osm.set(geoJSON);
- osm.click(function (e) {
- // 返回当前点击的feature ID 和 当前的经纬度
- //Buildings 单击事件 返回当前Building的ID 和 经纬度
- widgets.alert.showAlert("FeatureID:" + e.feature, true);
- });
- }
- </script>
- </body>
- </html>
|
