Modern GIS Web Client for JavaScript, based on Leaflet\OpenLayers\MapboxGL-JS\Classic(iClient8C), enhanced with ECharts\D3\MapV etc. Contributed by SuperMap & community.
Home Page: https://iclient.supermap.io
License: Apache License 2.0
![dependabot-preview[bot] avatar](https://avatars.githubusercontent.com/in/2141?v=4 "dependabot-preview[bot]")
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
setOpacity(0)设置透明度没效果
removeAllFeatures 或者clear 要素之后缩放地图或者直接redraw还是会显示要素
Two features request
chrome 73 以上版本。地图zoom滚动缩放控制台报如下错误
[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See
超图官网classic 就有此问题。希望官方尽快修复
缺陷
export { tiledMapLayer } from '@supermap/iclient-leaflet';!] (plugin buble) SyntaxError: Unexpected token (2:8)
node_modules/proj4/package.json (2:8)
1 : {
2 : "name": "proj4",
^
SyntaxError: Unexpected token (2:8)
at Object.pp$4.raise (/Users/node_modules/acorn/dist/acorn.js:2825:15)
at Object.pp.unexpected (/Users//node_modules/acorn/dist/acorn.js:689:10)
at Object.pp.semicolon (/Users//node_modules/acorn/dist/acorn.js:666:66)
at Object.pp$1.parseExpressionStatement (/Users/node_modules/acorn/dist/acorn.js:1145:10)
at Object.pp$1.parseStatement (/Users//node_modules/acorn/dist/acorn.js:880:26)
at Object.parseStatement (/Users/node_modules/acorn-dynamic-import/lib/index.js:63:118)
at Object.pp$1.parseBlock (/Users/node_modules/acorn/dist/acorn.js:1161:23)
at Object.pp$1.parseStatement (/Users//acorn/dist/acorn.js:845:36)
at Object.parseStatement (/Users//node_modules/acorn-dynamic-import/lib/index.js:63:118)
at Object.pp$1.parseTopLevel (/Users//node_modules/acorn/dist/acorn.js:746:23)
at Object.parse (/Users//node_modules/acorn/dist/acorn.js:553:17)
at Function.parse (/Users//node_modules/acorn/dist/acorn.js:576:37)
at Object.transform (/Users//node_modules/buble/dist/buble.cjs.js:4343:16)
at Object.transform (/Users//node_modules/rollup-plugin-buble/dist/rollup-plugin-buble.cjs.js:20:18)
at Promise.resolve.then (/Users//node_modules/rollup/dist/rollup.js:16026:25)
rollup打包报错
rollup正常打包
BUG
在vue中使用supermap-leaflet时echarts初始化报错
leaflet map can show up, however the echarts layer cannot properly initialize in Vue
使用http://iclient.supermapol.com/examples/leaflet/editor.html#echartsEffectScatter 作为例子测试时，echarts layer不能正常初始化，chrome报错如下：
vue.runtime.esm.js?2b0e:1737 TypeError: _echarts2.default.init is not a function
at e.onAdd (iclient9-leaflet.js:72476)
at e._layerAdd (leaflet.js:5)
at e.whenReady (leaflet.js:5)
at e.addLayer (leaflet.js:5)
at e.addTo (leaflet.js:5)
at VueComponent.initdraw (puremap.vue?646a:630)
at VueComponent.mounted (puremap.vue?646a:1203)
at callHook (vue.runtime.esm.js?2b0e:2917)
at Object.insert (vue.runtime.esm.js?2b0e:4154)
at invokeInsertHook (vue.runtime.esm.js?2b0e:5956)
刚开始使用supermap，也不能保证100%是bug。但之前用echarts和echarts-leaflet都没有问题，开始使用supermap是基于performance考虑。谢谢帮助！
在angular7.x环境下 使用 leaflet
按照文档中说明的方式 https://www.npmjs.com/package/@supermap/iclient-leaflet
在编译时，报了这个错误
ERROR in ./node_modules/elasticsearch/src/lib/utils.js Module not found: Error: Can't resolve 'path' in 'D:\******\node_modules\elasticsearch\src\lib' Failed to compile.
缺陷
在某些环境下，examples/js/utils.js.getLanguage函数返回的语言字符串不符合预期
iClient 最新版本，以nginx暴露，在部分浏览器下
在某些环境下，examples/js/utils.js.getLanguage函数返回的语言字符串不符合预期，例如guage=zh-CN，从而产生异常:
Uncaught Error: Syntax error, unrecognized expression: [data-lang=guage=zh-CN]
返回正确的语言字符串，使得程序正常运行
从cookie里获取到的语言字符串不一定准确，需做校验，以下是个人加的一个简陋的校验
function getLanguage() {
var lang = getCookie(cKey);
if (lang) {
var defLangs = {
'zh-CN': 1,
'en-US': 2,
};
function matchLang() {
if (!lang) {
return "zh-CN";
} else {
for (var defLang in defLangs) {
if (lang.indexOf(defLang) >= 0) {
lang = defLang;
return defLang;
}
}
}
return "zh-CN";
}
lang = matchLang();
return lang;
}
请问 ViewShed3D
https://enonline.supermap.com/supermap_iclient3d_9.0.1_for_webgl/build/documentation/viewshed3d.html
的源码能开源吗？哪里能找到。。。
http://iclient.supermap.io/examples/mapboxgl/editor.html#01_tiledMapLayer_4326
这个demo看源码没有参考性 不知可有npm版的demo？
主要是不知道mapbox如何添加扩展
不能触发style Function方法
ol.layer.Test = function (opt_options) {
var options = opt_options ? opt_options : {};
options.source = new ol.source.Vector({features: opt_options.features});
ol.layer.Vector.call(this, options);
this.setStyle(function (fea, resolution) {
var style;
return style;
}.bind(this));
// this.getSource().addFeatures(options.features);
delete opt_options.features;
}
ol.inherits(ol.layer.Test, ol.layer.Vector);
/// 其他方法……
调用后触发this.setStyle中的匿名函数。但是在这个版本中没有触发，原生ol-v4.6.5版本可以触发。
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.Tianditu({})
}),
new ol.layer.Test({
features: [new ol.Feature({
geometry: new ol.geom.Point([102.79071213226318, 25.00734961509705])
id: '234'
})]
})
],
view: new ol.View({
projection: 'EPSG:4326',
center: [102.79071213226318, 25.00734961509705],//[102.7043, 24.9796],
zoom: 17,
}),
projection: 'EPSG:4326',
});
请问 是否支持ol5 或者什么时候支持ol5呢？？？
restMap查询geojson返回格式无字段别名
restMap查询geojson返回格式含字段别名
restMap查询展示查询结果字段以别名为准
使用L.supermap.echartsLayer添加的scatter和lines无法响应鼠标点击事件，请问你们会考虑添加此feature吗？或者有什么work around的方法？ 谢谢！
从pure echarts 转到supermap echartslayer，需要保留原来的鼠标点击事件，但并没有在map的点击事件中找到能指向被点击的echarts元素的任何线索。
地图之前可以正常加载天地图切片，坐标系为3857
以下是示例的代码：
<title data-i18n="resources.title_graphiclayerCanvas"></title> <script type="text/javascript" include="randomcolor" src="../js/include-web.js"></script> <script type="text/javascript" src="../../dist/include-openlayers.js"></script> <style> .ol-popup { position: absolute; background-color: white; -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2)); filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2)); padding: 15px; border-radius: 10px; border: 1px solid #cccccc; bottom: 12px; left: -50px; min-width: 50px; } .ol-popup:after, .ol-popup:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.ol-popup:after {
border-top-color: white;
border-width: 10px;
left: 48px;
margin-left: -10px;
}
.ol-popup:before {
border-top-color: #cccccc;
border-width: 11px;
left: 48px;
margin-left: -11px;
}
</style>
var map;
var colorCount = 10;
var colors = getRandomColors(colorCount);
new ol.supermap.MapService(url).getMapInfo(function (serviceResult) {
var mapJSONObj = serviceResult.result;
var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var overlay = new ol.Overlay(({
element: container,
autoPan: true,
autoPanAnimation: {
duration: 250
}
}));
map = new ol.Map({
target: 'map',
controls: ol.control.defaults({attributionOptions: {collapsed: false}})
.extend([new ol.supermap.control.Logo()]),
view: new ol.View({
center: ol.proj.transform([-73.9286, 40.75], 'EPSG:4326', 'EPSG:3857'),
zoom: 12,
projection: 'EPSG:3857'
}),
overlays: [overlay],
renderer: ['canvas']
});
var options = ol.source.TileSuperMapRest.optionsFromMapJSON(url, mapJSONObj);
var layer = new ol.layer.Tile({
source: new ol.source.TileSuperMapRest(options)
});
map.addLayer(layer);
});
var randomCircleStyles = [];
for (var i = 0; i < colorCount; i++) {
randomCircleStyles.push(new ol.style.RegularShape({
radius: Math.floor(Math.random() * 10 + 1),
fill: new ol.style.Fill({
color: colors[i]
}),
stroke: new ol.style.Stroke({
color: colors[i]
}),
points: 3,
}));
}
function show(){
$.get('../data/nyc_taxi.json', function (nycData) {
var count = nycData.features.length; //矢量点的个数
var graphics = new Array(count);
for (var i = 0; i < count; ++i) {
var coordinates = nycData.features[i].geometry.coordinates;
if (coordinates[0] === coordinates[1]) {
continue;
}
coordinates = ol.proj.transform(coordinates, 'EPSG:4326', 'EPSG:3857');
graphics[i] = new ol.Graphic(new ol.geom.Point(coordinates));
graphics[i].setStyle(randomCircleStyles[Math.floor(Math.random() * colorCount)]);
}
map.once('postrender', function () {
var graphicLayer = new ol.layer.Image({
source: new ol.source.Graphic({
graphics: graphics,
map: map,
onClick: function (graphic) {
if (graphic) {
var coords = graphic.getGeometry().getCoordinates();
content.innerHTML = resources.text_coordinate + ":[" + coords[0] + "," + coords[1] + "]";
overlay.setPosition(graphic.getGeometry().getCoordinates());
return;
}
overlay.setPosition(undefined);
}
})
});
graphicLayer.setProperties({id: "graphicLayer"});
map.addLayer(graphicLayer);
})
});
}
function getRandomColors(count) {
return randomColor({
luminosity: 'bright',
hue: 'random',
alpha: 0.5,
format: 'rgba',
count: count
});
}
show();
setInterval(function () {
graphicLayer.getSource().graphics_ = null;
map.removeLayer("graphicLayer");
graphicLayer = null;
show();
}, 60 * 1000);
更新时间测试的时候用的是30s,但是清除到渲染出来时，发现中间会有几s的间隔时间，倒是页面出现屏闪的效果。
在官网示例中加载mapv格网图（这个示例需要将时间空间暂定）后，再进行地图的拖拽，格网不会出现重绘；而如果将这个示例使用的iclient9-leaflet.min.js文件替换为从github上下载的最新文件，进行相同个的操作，格网图就会出现重绘。两个不同的iclient9-leaflet.min.js文件，一个是官网示例中的，一个是github上的，一个会出现格网重绘，一个不会出现格网重绘。
不同的api文件，加载格网图后，拖拽地图，格网不再进行重绘。
graphic可以进行大数据量的渲染，支持每一个graphic矢量可以进行setId和getId。但是不能进行通过ID获取到这个graphic矢量的过程。
同时获取graphic时，应提供对单个对象的获取，编辑，删除操作。
因为项目中需要同时使用classic和for mapboxgl,引入iclient9-mapboxgl.min.js之后，原有的SuperMap对象被覆盖，就会导致某些类的方法不存在
另外 new SuperMap.Geometry.Point().transform方法也不存在
iclient 对接数据服务查询的时候 对接iserver的
动态投影参数('targetEpsgCode' 和‘targetPrj’)
bug
npm 引用 @supermap/iclient-classic ，按照官网的例子，提示报错Uncaught SyntaxError: Unexpected token export
Uncaught SyntaxError: Unexpected token export
es6+node开发，参照官网的例子
npm 引用 @supermap/iclient-classic 后，报错Uncaught SyntaxError: Unexpected token export
at createScript (vm.js:80)
at Object.runInThisContext (vm.js:139)
at Module._compile (module.js:606)
at Object.Module._extensions..js (module.js:653)
at Module.load (module.js:561)
at tryModuleLoad (module.js:504)
at Function.Module._load (module.js:496)
at Module.require (module.js:586)
at require (internal/module.js:11)
at eval (iclient-classic"?bb18:1)
在npm.runkit上也会报错
这是一个缺陷
缩放浏览器时mapvLayer会根据devicePixelRatio进行缩放，拖动地图时会对mapv元素进行重绘，因为context的缩放导致部分元素在clear时清除不掉
目前的解决办法是：
clear时将width和height同时除以缩放比例就能解决此问题
地图之前可以正常加载天地图切片，坐标系为3857
报this.canvasLayer.setZIndex is not a function错误
缺陷 BUG
当在一个页面同时显示两个含有EchartsLayer的地图时，拖动第二个地图会影响第一个
当在一个页面同时显示两个含有EchartsLayer的地图时，拖动第二个地图会影响第一个
各地图应独立，不存在联动
第一个地图可以缩放，但所有的scatter不会随地图缩放/移动而改变。而第二个地图可以正常使用，但缩放它会造成第一个地图里的scatter联动。经测试，只在第二个echartsLayer绑定上地图后会出现此BUG。
bug
当我的layer是放在openlayers提供的LayerGroup里面的时候，this.getLayers().getArray()返回的不是一个ol.layer.Base，而是一个LayerGroup，这个时候后面的一系列都会报错，望及时处理修复
warning in ./node_modules/@supermap/iclient-leaflet/overlay/TurfLayer.js
"export 'default' (imported as 'turf') was not found in '@turf/turf'
iclient leaflet中L.supermap.graphicLayer增加鼠标交互事件
现在有click hover 事件
可增加dbclick rightclick movedown movedownmoveout等鼠标交互事件
bug
引入后与下面的官方demo冲突
https://leaflet.github.io/Leaflet.markercluster/example/marker-clustering-realworld.388.html
在使用iclient后实现聚合场景
这是一个缺陷
由于业务需要我先将mapvLayer隐藏，然后拖动地图或缩放地图，隐藏的图层会被显示出来
拖动地图之后会把隐藏的图层显示出来
拖动地图之后不显示隐藏的图层
需要将源码中直接调用show方法的地方根据条件判断
如题，类似的leaflet第三方图层有一些，比如https://github.com/manubb/Leaflet.PixiOverlay，能否像turf.js一样集成在supermap中呢？
在leaflet上添加了echartslayer，第一次setIoption后，能正常显示，
如果拖动缩放 ，下次更新opition的时候，直接echartsLayer.setOpition而不是移除echarts图层再添加
就会导致绘制的图形仍然显示在 就像没有移动缩放过得位置处。
通过map .fire("moveend") 会调整到正确的位置，但是容易触发其他的副作用。
请问如何在setOption中直接修正这个行为呢
缺陷
iclient9-leaflet.js 移除echartsLayer后地图监听事件失效
对添加的echartsLayer图层进行移除之后，在地图初始化后通过map.on('zoomend',function(e){
})对地图添加的监听事件失效。
移除echartsLayer图层,地图监听事件正常
你好，我是一名WebGIS初学者。请问，超图为什么不发一个npm包。当然可以使用 require('....') 导入，但我感觉还是发布一个npm包专业一点。还有就是，我在使用 for OpenLayers。请问，超图的API是openlayers 的扩展包吗？如果用require导入模块的话，怎么导入呢？
缺陷
supermap中的GetFeaturesServiceBase.js的165行， http请求的method被写死为POST方法，这导致后续的代码不能执行跨域请求，望修正。
缺陷
leaflet 里面的L.supermap.baiduTileLayer在加载百度地图时，若开启连续模式，就是 noWrap设置为false的话，并不是连续的，两个世界地图之间隔了一点距离
两个世界瓦片之间有距离
没有距离
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title data-i18n="resources.title_baiduLayer"></title>
<script type="text/javascript" src="../js/include-web.js"></script>
</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" src="../../dist/leaflet/include-leaflet.js"></script>
<script type="text/javascript">
var map = L.map('map', {
crs: L.CRS.Baidu,
center: [0, 0],
zoom: 3
});
L.supermap.baiduTileLayer("", {
noWrap: false,
}).addTo(map);
</script>
</body>
</html>需要展示全球地图，不美观
问题的根源应该是超图图层调用destroy方法的时候,没有清理动画定时器
for mapboxgl 如何实现GetFeaturesBySQLService返回的多区域 style 自定义。
目前单值专题图和分段专题图实现不了需求。
需求描述：
假如GetFeaturesBySQLService返回了十个区域信息。自定义了五种颜色。
第一个区域使用第一个颜色，第二个区域第二种颜色。以此类推。如何实现这种效果
缺陷
缺陷
加载矢量瓦片报错
iclient-openlayers-es6.js:89071 Uncaught TypeError: Cannot read property 'applyBackground' of undefined
at MapboxStyles_MapboxStyles._createStyleFunction (iclient-openlayers-es6.js:89071)
at MapboxStyles_MapboxStyles._initStyleFunction (iclient-openlayers-es6.js:89062)
at Image.img.onload (iclient-openlayers-es6.js:89044)
矢量瓦片可以加载
在本地
var style_url = "http://47.104.186.12:8090/iserver/services/map-mvt-ZiShuiTu/restjsr/v1/vectortile/maps/渍水图/style.json"
var format = new ol.format.MVT({
featureClass: ol.Feature
});
var style = new ol.supermap.MapboxStyles({
style: style_url,
map: map
})
style.on('styleloaded', function () {
console.log(style)
var layer_risk = new ol.layer.VectorTile({
declutter: true,
source: new ol.source.VectorTileSuperMapRest({
// url,
style: style_url,
projection: 'EPSG:3857',
format: format
}),
style: style.getStyleFunction()
});
console.log(layer_risk)
map.addLayer(layer_risk);
layer_risk.setVisible(false);
})
在iserver可以浏览
缺陷
iclient9-leaflet.js 中echartsLayer使用remove方法移除图层后，再操作地图报错
在地图上添加了一个echartsLayer迁徙图层后，再使用remove方法移除该图层后，再进行地图的拖拽操作；浏览器控制台出现错误信息：Uncaught TypeError: Cannot read property 'containerPointToLayerPoint' of null，同时再次添加一个echartsLayer在地图上会出现地图无法拖拽假死现象，影响地图的其他交互操作。
图层清除后，操作正常
官网例子：http://iclient.supermapol.com/examples/leaflet/editor.html#echartsGeoLines
一个问题
iclient9-leaflet-es6.js和iclient9-leaflet.js有什么区别吗？
某个功能用不带es6的有问题，带es6的没问题
解决问题
datasetNames能不能设置到市啊
9D Classic的mapv图层只支持4326坐标系和3857坐标系吗？我是北京54的坐标系，出不来图，有人知道这个是什么原因吗
在一个页面中同时引入iclient7C和 9D的mapboxgl，会出现冲突，有什么解决方案吗？
我按照官方文档:
import L from 'leaflet';
import {tiledMapLayer} from '@supermap/iclient-leaflet';
var url = "http://support.supermap.com.cn:8090/iserver/services/map-world/rest/maps/World";
var map = L.map('map', {
crs: L.CRS.EPSG4326,
center: [0, 0],
maxZoom: 18,
zoom: 1
});
tiledMapLayer(url).addTo(map);
代码不会报错，地图出来了，但是样式不对，因为少了某个js，我通过官方源码对比找出来了那个css
希望你们能加到npm包里面去，这样我就不需要在外面应用一次，官网请说明下一下，不然别人第一次使用会以为你们产品有问题
好像没有找到源代码，只有一个打包后的Cesium.js文件，这也叫开源？
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 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.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
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.