1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374 |
- <!--********************************************************************
- * Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
- *********************************************************************-->
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8" />
- <title data-i18n="resources.title_componentsGeoJSON_React"></title>
- <script type="text/javascript" include="react,jquery" src="../js/include-web.js"></script>
- <script include="antd,iclient-mapboxgl-react,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
- <style>
- html,
- body {
- height: 100%;
- margin: 0;
- padding: 0;
- }
- #main {
- height: 100%;
- }
- </style>
- </head>
- <body>
- <div id="main"></div>
- <script type="text/babel">
- var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
- var attribution =
- "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
- " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
- " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
- var SmWebMap = SuperMap.Components.SmWebMap;
- var SmGeojsonLayer = SuperMap.Components.SmGeojsonLayer;
- var mapOptions = {
- container: 'map', // container id
- style: {
- version: 8,
- sources: {
- 'raster-tiles': {
- attribution: attribution,
- type: 'raster',
- tiles: [host + '/iserver/services/map-china400/rest/maps/ChinaDark/zxyTileImage.png?z={z}&x={x}&y={y}'],
- tileSize: 256
- }
- },
- layers: [
- {
- id: 'simple-tiles',
- type: 'raster',
- source: 'raster-tiles',
- minzoom: 0,
- maxzoom: 22
- }
- ]
- },
- center: [120.143, 30.236],
- zoom: 3
- };
- var layerStyle = new SuperMap.Components.commontypes.CircleStyle();
- $.get('../data/data671MeteorologicalStations.geojson', function(res) {
- var data = JSON.parse(res);
- ReactDOM.render(
- <SmWebMap mapOptions={mapOptions}>
- <SmGeojsonLayer data={data} layerStyle={layerStyle} />
- </SmWebMap>,
- document.getElementById('main')
- );
- });
- </script>
- </body>
- </html>
|