Comments (5)
songyumeng
commented on May 24, 2024
可以访问这个例子https://iclient.supermap.io/examples/mapboxgl/editor.html#01_tiledMapLayer_4326
from iclient-javascript.
YangShuqing
commented on May 24, 2024
可以访问这个例子https://iclient.supermap.io/examples/mapboxgl/editor.html#01_tiledMapLayer_4326
使用你发的链接后不报错了， 但是 如果使用 文档中的 head引用JS的话还是会报同样的错误
文档 https://iclient.supermap.io/web/introduction/mapboxglDevelop.html#GetLibs
<head>
<meta charset="UTF-8">
<link href="https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/1.13.2/mapbox-gl.css" rel="stylesheet" />
<link href="https://iclient.supermap.io/dist/mapboxgl/iclient-mapboxgl.min.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/1.13.2/mapbox-gl.js"></script>
<script type="text/javascript" src="https://iclient.supermap.io/dist/mapboxgl/iclient-mapboxgl.js"></script>
</head>
完整code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/1.13.2/mapbox-gl.css" rel="stylesheet" />
<link href="https://iclient.supermap.io/dist/mapboxgl/iclient-mapboxgl.min.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/1.13.2/mapbox-gl.js"></script>
<script type="text/javascript" src="https://iclient.supermap.io/dist/mapboxgl/iclient-mapboxgl.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
var map = new mapboxgl.Map({
container: 'map', // container id
style: {
version: 8,
sources: {
'raster-tiles': {
type: 'raster',
tileSize: 256,
//xyz形式，原生支持
//"tiles": ['https://t0.tianditu.gov.cn/DataServer?T=vec_c&x={x}&y={y}&l={z}'],
//iserver image资源模板；扩展支持
//"tiles": ['http://localhost:8090/iserver/services/map-World/rest/maps/World/image.png?viewBounds={viewBounds}&width={width}&height={height}'],
//iserver tileimage资源模板；扩展支持
//"tiles": ['https://iserver.supermap.io/iserver/services/map-jingjin/rest/maps/%E4%BA%AC%E6%B4%A5%E5%9C%B0%E5%8C%BA%E5%9C%B0%E5%9B%BE/tileimage.png?scale={scale}&x={x}&y={y}&width={width}&height={height}&origin={"x":-180,"y":90}'],
//推荐； iserver tileimage资源；扩展支持
//参数列表：
//地图服务地址（到地图名)必填 ；
//rasterSource为"iserver"；必填；
//transparent:可选，默认为true；
//cacheEnabled: 是否使用缓存，默认为true；
//redirect: 如果为 true，则将请求重定向到瓦片的真实地址；如果为 false，则响应体中是瓦片的字节流,默认为false；
//layersID:要显示的图层id字符串；
//tileversion: 切片版本名称，cacheEnabled 为 true 时有效；
//rasterfunction: 栅格分析参数,类型为mapboxgl.supermap.NDVIParameter或mapboxgl.supermap.HillshadeParameter；
//format:瓦片格式，默认为'png'；
tiles: [host + '/iserver/services/map-world/rest/maps/World'],
rasterSource: 'iserver'
}
},
layers: [
{
id: 'simple-tiles',
type: 'raster',
source: 'raster-tiles',
minzoom: 0,
maxzoom: 22
}
]
},
crs: new mapboxgl.CRS('EPSG:4326',[-180,-90,180,90]) , // 或者 mapboxgl.CRS.EPSG4326 或者 new mapboxgl.CRS('EPSG:4326',[-180,-90,180,90]);
center: [0, 0],
zoom: 2
});
// map.on('load', function() {
// //从 iServer 查询
// var idsParam = new mapboxgl.supermap.GetFeaturesByIDsParameters({
// IDs: [234],
// datasetNames: ['World:Countries']
// });
// var service = new mapboxgl.supermap.FeatureService(host + '/iserver/services/data-world/rest/data');
// service.getFeaturesByIDs(idsParam, function(serviceResult) {
// map.addSource('queryDatas', {
// type: 'geojson',
// data: serviceResult.result.features
// });
// map.addLayer({
// id: 'queryDatas',
// type: 'fill',
// source: 'queryDatas',
// paint: {
// 'fill-color': '#008080',
// 'fill-opacity': 0.4
// },
// filter: ['==', '$type', 'Polygon']
// });
// });
// map.addControl(new mapboxgl.NavigationControl(), 'top-left');
// });
</script>
</body>
</html>
from iclient-javascript.
YangShuqing
commented on May 24, 2024
from iclient-javascript.
luoxiao-supermap
commented on May 24, 2024
显示非3857投影的地图，需要引入我们扩展的mapbox-gl-enhance.js：
https://iclient.supermap.io/web/libs/mapbox-gl-js-enhance/1.12.1/mapbox-gl-enhance.js
from iclient-javascript.
YangShuqing
commented on May 24, 2024
显示非3857投影的地图，需要引入我们扩展的mapbox-gl-enhance.js： https://iclient.supermap.io/web/libs/mapbox-gl-js-enhance/1.12.1/mapbox-gl-enhance.js
这个拓展 有NPM的包么 @luoxiao-supermap
from iclient-javascript.
Related Issues (20)
- 如何在小程序中使用？ HOT 1
- Vue+@supermap/iclient-ol加载矢量瓦片报错 HOT 1
- 项目中引入proj4leaflet后再引入这个包会报错No projection definition for code EPSG:4490 HOT 3
- iclient-mapboxgl使用4490坐标系， toThreeMesh转一个多边形时，位置与实际位置偏移 HOT 1
- classic地图点击事件无效 HOT 1
- vite开发，控制台报错 HOT 1
- iclient-ol建议把ol-mapbox-style作为模块引入
- 根据官网案例创建WMTS时报错，Uncaught TypeError: layer.getLayerStatesArray is not a function HOT 1
- 不兼容Openlayers7 HOT 2
- 能否兼容Echarts5.x版本 HOT 1
- 请问支持离线地图么 HOT 1
- React的文档有么？ HOT 1
- 包里面echart 报错 (急急急急急急急) HOT 3
- BUG：@supermap/iclient-common 包依赖echarts4.x版本但是package.json中没有声明该依赖 HOT 3
- 【bug】mapbox版本引入增强包后，maxBounds 参数失效 HOT 3
- 升级到 11.1.0报错 HOT 9
- 升级到 11.1.0-a 报错
- 11.1.1版本 node_modules包里面的flatgeobuf 文件2.23.1版本js文件大小写不匹配冲突 HOT 3
- TypeScript support
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from iclient-javascript.