惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Apple Machine Learning Research
Apple Machine Learning Research
爱范儿
爱范儿
博客园_首页
博客园 - 【当耐特】
V
Visual Studio Blog
博客园 - 叶小钗
月光博客
月光博客
美团技术团队
J
Java Code Geeks
小众软件
小众软件
Y
Y Combinator Blog
博客园 - Franky
Martin Fowler
Martin Fowler
博客园 - 聂微东
Microsoft Azure Blog
Microsoft Azure Blog
IT之家
IT之家
MyScale Blog
MyScale Blog
人人都是产品经理
人人都是产品经理
Microsoft Security Blog
Microsoft Security Blog
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
阮一峰的网络日志
阮一峰的网络日志
酷 壳 – CoolShell
酷 壳 – CoolShell
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
云风的 BLOG
云风的 BLOG

博客园 - dataxiu.com

[原创.数据可视化系列之十三]idw反距离权重插值算法的javascript代码实现 [原创.数据可视化系列之十二]使用 nodejs通过async await建立同步数据抓取 [原创.数据可视化系列之八]使用等d3进行灰度图转伪彩色 [原创.数据可视化系列之七]阿里竞赛作品技术展示 [原创.数据可视化系列之五]韩国"萨德"系统防御图 [原创.数据可视化系列之四]跨平台,多格式的等值线和等值面的生成 [原创.数据可视化系列之三]使用Ol3加载大量点数据 [原创.数据可视化系列之二]使用cesium三维地图展示美国全球军事基地分布 [原创.数据可视化系列之一]使用openlayers 3 显示聚合数据 管理类软件的界面模板。 使用SilverLight开发ARPG游戏(一) 买联想学生机器的遭遇:问联想1(连载) 联想09年春节学生机开卖了。 谈UrlRewriter在XP和2003上IIS设置的差异 使用SilverLight构建插件式应用程序(九) —聊天插件客户端的实现 .NET 访问JAVA的WebService使用SOAP头 使用SilverLight构建插件式应用程序(八) —聊天插件Duplex WCF的实现 使用SilverLight构建插件式应用程序(七) 使用SilverLight构建插件式应用程序(六)
[原创.数据可视化系列之六]使用openlyaers进行公网地图剪切
dataxiu.com · 2016-09-23 · via 博客园 - dataxiu.com

进行地图开发的过程中,我一般使用天地图或者微软的地图作为地图,因为这两种地图的经纬度偏差最小,基本可以满足用户需求,比如:

不用说,都是全部地图,这也是最常用的一种方法。

但是用户说,我只看大连的地图,就要大连这一块。这样需要一个整个大连地区的面,使用这个面去切地图,结果就可以了,如下图:

这样的图有点类似自己的发布的图。切图代码原理openlayers 3例子参见:

 http://openlayers.org/en/latest/examples/layer-clipping.html?q=clip

var style = new ol.style.Style({
fill: new ol.style.Fill({
color: 'black'
})
});

var clipLayer = new ol.layer.Image({
source: new ol.source.ImageVector({
source: new ol.source.Vector({
url: '//openlayers.org/en/v3.14.2/examples/data/geojson/countries.geojson',
format: new ol.format.GeoJSON()
}),
style: style
})
});
clipLayer.on('postcompose', function(e) {
e.context.globalCompositeOperation = 'source-over';
});
clipLayer.on('precompose', function(e) {
e.context.globalCompositeOperation = 'destination-in';
});

var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'sat'})
}),
clipLayer
],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 1
})
});