123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102 |
- <!--********************************************************************
- * Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
- *********************************************************************-->
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8" />
- <title data-i18n="resources.title_componentsFireLayer_Vue"></title>
- <script type="text/javascript" include="vue,jquery" src="../js/include-web.js"></script>
- <script
- type="text/javascript"
- include="three,mapbox-gl-enhance,iclient-mapboxgl-vue,mapbox-gl-enhance"
- src="../../dist/mapboxgl/include-mapboxgl.js"
- ></script>
- <style>
- #main {
- margin: 0 auto;
- width: 100%;
- height: 100%;
- }
- </style>
- </head>
- <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
- <div id="main">
- <sm-web-map :map-options="mapOptions" style="background:black">
- <sm-fire-layer :features="features" :model-scale="5.41843220338983e-6"></sm-fire-layer>
- </sm-web-map>
- </div>
- <script>
- var host = window.isLocal ? window.server : "https://iserver.supermap.io";
- $.get("../data/fire.json", function(features) {
- var features = features;
- new Vue({
- el: "#main",
- data() {
- var mapUrl = host + "/iserver/services/map-china400/rest/maps/ChinaDark";
- 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> ";
- return {
- mapOptions: {
- container: "map",
- style: {
- version: 8,
- sources: {
- "raster-tiles": {
- attribution: attribution,
- type: "raster",
- tiles: [mapUrl + "/zxyTileImage.png?z={z}&x={x}&y={y}"],
- tileSize: 256
- },
- buildings: {
- type: "geojson",
- data: "https://iclient.supermap.io/examples/data/buildings.json"
- }
- },
- layers: [
- {
- id: "simple-tiles",
- type: "raster",
- source: "raster-tiles",
- minzoom: 0,
- maxzoom: 22
- },
- {
- id: "3d-buildings",
- source: "buildings",
- type: "fill-extrusion",
- paint: {
- "fill-extrusion-color": [
- "case",
- ["<", ["get", "height"], 2],
- "#fbb03b",
- ["<", ["get", "height"], 4],
- "#223b53",
- ["<", ["get", "height"], 8],
- "#15D1F2",
- ["<", ["get", "height"], 16],
- "#15D1F2",
- "#3bb2d0"
- ],
- "fill-extrusion-height": ["*", ["get", "height"], 5],
- "fill-extrusion-opacity": 0.6
- }
- }
- ]
- },
- center: [116.45423056455218, 39.91980158816503],
- zoom: 14.27415578362124,
- bearing: 0.8568,
- pitch: 60
- },
- features: features
- };
- }
- });
- });
- </script>
- </body>
- </html>
|